Skip to content

Commit 6f12cf3

Browse files
author
FalkWolsky
committed
Style Properties Icons
1 parent 2c0848e commit 6f12cf3

File tree

3 files changed

+96
-31
lines changed

3 files changed

+96
-31
lines changed

‎client/packages/lowcoder-design/src/icons/index.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,26 @@ export { ReactComponent as FileFolderIcon } from "./icon-editor-folder.svg";
191191
export { ReactComponent as ExpandIcon } from "./icon-expand.svg";
192192
export { ReactComponent as CompressIcon } from "./icon-compress.svg";
193193
export { ReactComponent as TableCellsIcon } from "./icon-table-cells.svg"; // Added By Aqib Mirza
194+
195+
// Style Props
194196
export { ReactComponent as WidthIcon } from "./icon-width.svg";
195-
export { ReactComponent as TextSizeIcon } from "./remix/font-size-2.svg";
197+
export { ReactComponent as TextSizeIcon } from "./remix/font-size.svg";
198+
export { ReactComponent as TextTransformationIcon } from "./remix/font-size-2.svg";
196199
export { ReactComponent as FontFamilyIcon } from "./remix/font-sans-serif.svg";
197200
export { ReactComponent as TextWeightIcon } from "./remix/bold.svg";
198-
export { ReactComponent as BorderWidthIcon } from "./remix/expand-width-line.svg";
201+
export { ReactComponent as TextDecorationIcon } from "./remix/underline.svg";
202+
export { ReactComponent as TextStyleIcon } from "./remix/italic.svg";
203+
export { ReactComponent as BorderWidthIcon } from "./remix/space.svg";
204+
export { ReactComponent as BorderStyleIcon } from "./remix/separator.svg";
205+
export { ReactComponent as RotationIcon } from "./remix/clockwise-line.svg";
206+
export { ReactComponent as BorderRadiusIcon } from "./remix/rounded-corner.svg";
207+
208+
// Falk: TODO
209+
export { ReactComponent as ShadowIcon } from "./remix/shadow-line.svg";
210+
export { ReactComponent as OpacityIcon } from "./remix/contrast-drop-2-line.svg";
211+
export { ReactComponent as AnimationIcon } from "./remix/loader-line.svg";
212+
213+
199214
export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";
200215
export { ReactComponent as LeftInfoFill } from "./remix/information-fill.svg";
201216
export { ReactComponent as LeftShow } from "./remix/eye-off-line.svg";

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx

+62-24
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,21 @@ import { trans } from "i18n";
88
import _ from "lodash";
99
import {
1010
controlItem,
11-
IconRadius,
1211
IconReset,
1312
ExpandIcon,
1413
CompressIcon,
1514
TextSizeIcon,
15+
TextTransformationIcon,
1616
FontFamilyIcon,
1717
TextWeightIcon,
1818
ShowBorderIcon,
1919
BorderWidthIcon,
2020
ImageCompIconSmall,
21+
RotationIcon,
22+
TextDecorationIcon,
23+
BorderStyleIcon,
24+
BorderRadiusIcon,
25+
TextStyleIcon,
2126
} from "lowcoder-design";
2227
import { useContext } from "react";
2328
import styled from "styled-components";
@@ -38,6 +43,7 @@ import {
3843
FontFamilyConfig,
3944
FontStyleConfig,
4045
BorderWidthConfig,
46+
RotationConfig,
4147
BackgroundImageConfig,
4248
BackgroundImageRepeatConfig,
4349
BackgroundImageSizeConfig,
@@ -78,6 +84,10 @@ function isBorderWidthConfig(config: SingleColorConfig): config is BorderWidthCo
7884
return config.hasOwnProperty("borderWidth");
7985
}
8086

87+
function isRotationConfig(config: SingleColorConfig): config is RotationConfig {
88+
return config.hasOwnProperty("rotation");
89+
}
90+
8191
function isBackgroundImageConfig(config: SingleColorConfig): config is BackgroundImageConfig {
8292
return config.hasOwnProperty("backgroundImage");
8393
}
@@ -176,6 +186,9 @@ function isEmptyRadius(radius: string) {
176186
function isEmptyBorderWidth(borderWidth: string) {
177187
return _.isEmpty(borderWidth);
178188
}
189+
function isEmptyRotation(rotation: string) {
190+
return _.isEmpty(rotation);
191+
}
179192
function isEmptyBackgroundImageConfig(backgroundImage: string) {
180193
return _.isEmpty(backgroundImage);
181194
}
@@ -273,6 +286,11 @@ function calcColors<ColorMap extends Record<string, string>>(
273286
res[name] = props[name];
274287
return;
275288
}
289+
if (!isEmptyRotation(props[name]) && isRotationConfig(config)) {
290+
res[name] = props[name];
291+
return;
292+
}
293+
276294
if (!isEmptyBackgroundImageConfig(props[name]) && isBackgroundImageConfig(config)) {
277295
res[name] = props[name];
278296
return;
@@ -386,6 +404,9 @@ function calcColors<ColorMap extends Record<string, string>>(
386404
if (isBorderWidthConfig(config)) {
387405
res[name] = '0px';
388406
}
407+
if (isRotationConfig(config)) {
408+
res[name] = '0deg';
409+
}
389410
if (isBackgroundImageConfig(config)) {
390411
res[name] = '';
391412
}
@@ -563,14 +584,22 @@ const StyleContent = styled.div`
563584
}
564585
`;
565586

566-
const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px;`;
567-
const BorderIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
568-
const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;
569-
const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px;`;
570-
const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
571-
const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
572-
const StyledTextWeightIcon = styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
573-
const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` margin: 0 0px 0 -12px;`;
587+
const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`;
588+
const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`;
589+
const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`;
590+
const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
591+
const BorderStylePropIcon = styled(BorderStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
592+
593+
const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` margin: 0 6px 0 0; padding: 2px; color: #888`;
594+
const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
595+
596+
const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
597+
const StyledTextTransformIcon = styled(TextTransformationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
598+
const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
599+
const StyledTextWeightIcon = styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
600+
const StyledTextStyleIcon = styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
601+
const StyledTextDecorationPropIcon = styled(TextDecorationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
602+
574603

575604
const ResetIcon = styled(IconReset)`
576605
&:hover g g {
@@ -586,6 +615,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
586615
if (
587616
name === "radius" ||
588617
name === "borderWidth" ||
618+
name === "rotation" ||
589619
name === "cardRadius" ||
590620
name === "textSize" ||
591621
name === "textWeight" ||
@@ -663,6 +693,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
663693
name === "containerFooterPadding" ||
664694
name === "containerBodyPadding" ||
665695
name === "borderWidth" ||
696+
name === "rotation" ||
666697
name === "backgroundImage" ||
667698
name === "backgroundImageRepeat" ||
668699
name === "backgroundImageSize" ||
@@ -723,22 +754,22 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
723754
children[name] as InstanceType<typeof StringControl>
724755
).propertyView({
725756
label: config.label,
726-
preInputNode: <RadiusIcon title="Radius" />,
757+
preInputNode: <RadiusPropIcon title="Radius" />,
727758
placeholder: props[name],
728759
})
729760
: name === "borderWidth"
730761
? (
731762
children[name] as InstanceType<typeof StringControl>
732763
).propertyView({
733764
label: config.label,
734-
preInputNode: <BorderIcon title="Border-Width" />,
765+
preInputNode: <BorderPropIcon title="Border-Width" />,
735766
placeholder: props[name],
736767
}) : name === "borderStyle"
737768
? (
738769
children[name] as InstanceType<typeof StringControl>
739770
).propertyView({
740771
label: config.label,
741-
preInputNode: <BorderIcon title="Border-Style" />,
772+
preInputNode: <BorderStylePropIcon title="Border-Style" />,
742773
placeholder: props[name],
743774
})
744775
: name === "margin"
@@ -749,8 +780,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
749780
preInputNode: <MarginIcon title="Margin" />,
750781
placeholder: props[name],
751782
})
752-
: name === "textSize" ||
753-
name === "padding" ||
783+
: name === "padding" ||
754784
name === "containerHeaderPadding" ||
755785
name === "containerSiderPadding" ||
756786
name === "containerFooterPadding" ||
@@ -790,22 +820,22 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
790820
children[name] as InstanceType<typeof StringControl>
791821
).propertyView({
792822
label: config.label,
793-
preInputNode: <StyledFontFamilyIcon title="Text Decoration" />,
823+
preInputNode: <StyledTextDecorationPropIcon title="Text Decoration" />,
794824
placeholder: props[name],
795825
}) : name === "textTransform"
796826
? (
797827
children[name] as InstanceType<typeof StringControl>
798828
).propertyView({
799829
label: config.label,
800-
preInputNode: <StyledFontFamilyIcon title="Text Transform" />,
830+
preInputNode: <StyledTextTransformIcon title="Text Transform" />,
801831
placeholder: props[name],
802832
})
803833
: name === "fontStyle"
804834
? (
805835
children[name] as InstanceType<typeof StringControl>
806836
).propertyView({
807837
label: config.label,
808-
preInputNode: <StyledFontFamilyIcon title="Font Style" />,
838+
preInputNode: <StyledTextStyleIcon title="Font Style" />,
809839
placeholder: props[name],
810840
})
811841
: name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage"
@@ -824,13 +854,21 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
824854
preInputNode: <StyledBackgroundImageIcon title="Background Image Repeat" />,
825855
placeholder: props[name],
826856
})
827-
: children[name].propertyView({
828-
label: config.label,
829-
panelDefaultColor: props[name],
830-
// isDep: isDepColorConfig(config),
831-
isDep: true,
832-
depMsg: depMsg,
833-
})
857+
: name === "rotation"
858+
? (
859+
children[name] as InstanceType<typeof StringControl>
860+
).propertyView({
861+
label: config.label,
862+
preInputNode: <RotationPropIcon title="Rotation" />,
863+
placeholder: props[name],
864+
})
865+
: children[name].propertyView({
866+
label: config.label,
867+
panelDefaultColor: props[name],
868+
// isDep: isDepColorConfig(config),
869+
isDep: true,
870+
depMsg: depMsg,
871+
})
834872

835873
}
836874
</div>

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export type BorderWidthConfig = CommonColorConfig & {
2323
readonly borderWidth: string;
2424
};
2525

26+
export type RotationConfig = CommonColorConfig & {
27+
readonly rotation: string;
28+
};
29+
2630
export type BackgroundImageConfig = CommonColorConfig & { readonly backgroundImage: string; };
2731
export type BackgroundImageRepeatConfig = CommonColorConfig & { readonly backgroundImageRepeat: string; };
2832
export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string; };
@@ -106,7 +110,7 @@ export type DepColorConfig = CommonColorConfig & {
106110
transformer: (color: string, ...rest: string[]) => string;
107111
};
108112

109-
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | borderStyleConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddingConfig | ContainerSiderPaddingConfig | ContainerFooterPaddingConfig | ContainerBodyPaddingConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig | SiderBackgroundImageConfig | SiderBackgroundImageRepeatConfig | SiderBackgroundImageSizeConfig | SiderBackgroundImagePositionConfig | SiderBackgroundImageOriginConfig;
113+
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | RotationConfig | borderStyleConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddingConfig | ContainerSiderPaddingConfig | ContainerFooterPaddingConfig | ContainerBodyPaddingConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig | SiderBackgroundImageConfig | SiderBackgroundImageRepeatConfig | SiderBackgroundImageSizeConfig | SiderBackgroundImagePositionConfig | SiderBackgroundImageOriginConfig;
110114

111115
export const defaultTheme: ThemeDetail = {
112116
primary: "#3377FF",
@@ -303,6 +307,12 @@ const VALIDATE = {
303307

304308
const ACCENT_VALIDATE = [ACCENT, VALIDATE] as const;
305309

310+
const ROTATION = {
311+
name: "rotation",
312+
label: "Rotation",
313+
rotation: "rotation",
314+
} as const;
315+
306316
const BORDER = {
307317
name: "border",
308318
label: trans("style.border"),
@@ -460,7 +470,10 @@ const SIDER_BACKGROUND = {
460470
} as const;
461471

462472
const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
473+
463474
const STYLING_FIELDS_SEQUENCE = [
475+
MARGIN,
476+
PADDING,
464477
TEXT,
465478
TEXT_TRANSFORM,
466479
TEXT_DECORATION,
@@ -470,17 +483,16 @@ const STYLING_FIELDS_SEQUENCE = [
470483
FONT_STYLE,
471484
BORDER,
472485
BORDER_STYLE,
473-
MARGIN,
474-
PADDING,
475486
RADIUS,
476487
BORDER_WIDTH,
488+
ROTATION,
477489
]
478490

479491
const STYLING_FIELDS_CONTAINER_SEQUENCE = [
480-
BORDER,
481-
BORDER_STYLE,
482492
MARGIN,
483493
PADDING,
494+
BORDER,
495+
BORDER_STYLE,
484496
RADIUS,
485497
BORDER_WIDTH,
486498
];

0 commit comments

Comments
 (0)