Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6f12cf3

Browse files
author
FalkWolsky
committed
Style Properties Icons
1 parent2c0848e commit6f12cf3

File tree

3 files changed

+96
-31
lines changed

3 files changed

+96
-31
lines changed

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,26 @@ export { ReactComponent as FileFolderIcon } from "./icon-editor-folder.svg";
191191
export{ReactComponentasExpandIcon}from"./icon-expand.svg";
192192
export{ReactComponentasCompressIcon}from"./icon-compress.svg";
193193
export{ReactComponentasTableCellsIcon}from"./icon-table-cells.svg";// Added By Aqib Mirza
194+
195+
// Style Props
194196
export{ReactComponentasWidthIcon}from"./icon-width.svg";
195-
export{ReactComponentasTextSizeIcon}from"./remix/font-size-2.svg";
197+
export{ReactComponentasTextSizeIcon}from"./remix/font-size.svg";
198+
export{ReactComponentasTextTransformationIcon}from"./remix/font-size-2.svg";
196199
export{ReactComponentasFontFamilyIcon}from"./remix/font-sans-serif.svg";
197200
export{ReactComponentasTextWeightIcon}from"./remix/bold.svg";
198-
export{ReactComponentasBorderWidthIcon}from"./remix/expand-width-line.svg";
201+
export{ReactComponentasTextDecorationIcon}from"./remix/underline.svg";
202+
export{ReactComponentasTextStyleIcon}from"./remix/italic.svg";
203+
export{ReactComponentasBorderWidthIcon}from"./remix/space.svg";
204+
export{ReactComponentasBorderStyleIcon}from"./remix/separator.svg";
205+
export{ReactComponentasRotationIcon}from"./remix/clockwise-line.svg";
206+
export{ReactComponentasBorderRadiusIcon}from"./remix/rounded-corner.svg";
207+
208+
// Falk: TODO
209+
export{ReactComponentasShadowIcon}from"./remix/shadow-line.svg";
210+
export{ReactComponentasOpacityIcon}from"./remix/contrast-drop-2-line.svg";
211+
export{ReactComponentasAnimationIcon}from"./remix/loader-line.svg";
212+
213+
199214
export{ReactComponentasLeftInfoLine}from"./remix/information-line.svg";
200215
export{ReactComponentasLeftInfoFill}from"./remix/information-fill.svg";
201216
export{ReactComponentasLeftShow}from"./remix/eye-off-line.svg";

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

Lines changed: 62 additions & 24 deletions
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
importstyledfrom"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
returnconfig.hasOwnProperty("borderWidth");
7985
}
8086

87+
functionisRotationConfig(config:SingleColorConfig):config isRotationConfig{
88+
returnconfig.hasOwnProperty("rotation");
89+
}
90+
8191
functionisBackgroundImageConfig(config:SingleColorConfig):config isBackgroundImageConfig{
8292
returnconfig.hasOwnProperty("backgroundImage");
8393
}
@@ -176,6 +186,9 @@ function isEmptyRadius(radius: string) {
176186
functionisEmptyBorderWidth(borderWidth:string){
177187
return_.isEmpty(borderWidth);
178188
}
189+
functionisEmptyRotation(rotation:string){
190+
return_.isEmpty(rotation);
191+
}
179192
functionisEmptyBackgroundImageConfig(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-
constRadiusIcon=styled(IconRadius)` margin: 0 8px 0 -2px;`;
567-
constBorderIcon=styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
568-
constMarginIcon=styled(ExpandIcon)` margin: 0 8px 0 2px;`;
569-
constPaddingIcon=styled(CompressIcon)`margin: 0 8px 0 2px;`;
570-
constStyledTextSizeIcon=styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
571-
constStyledFontFamilyIcon=styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
572-
constStyledTextWeightIcon=styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
573-
constStyledBackgroundImageIcon=styled(ImageCompIconSmall)` margin: 0 0px 0 -12px;`;
587+
constMarginIcon=styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`;
588+
constPaddingIcon=styled(CompressIcon)`margin: 0 8px 0 2px; color: #888`;
589+
constRadiusPropIcon=styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`;
590+
constBorderPropIcon=styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
591+
constBorderStylePropIcon=styled(BorderStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
592+
593+
constStyledBackgroundImageIcon=styled(ImageCompIconSmall)` margin: 0 6px 0 0; padding: 2px; color: #888`;
594+
constRotationPropIcon=styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
595+
596+
constStyledTextSizeIcon=styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
597+
constStyledTextTransformIcon=styled(TextTransformationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
598+
constStyledFontFamilyIcon=styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
599+
constStyledTextWeightIcon=styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
600+
constStyledTextStyleIcon=styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
601+
constStyledTextDecorationPropIcon=styled(TextDecorationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
602+
574603

575604
constResetIcon=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]asInstanceType<typeofStringControl>
724755
).propertyView({
725756
label:config.label,
726-
preInputNode:<RadiusIcontitle="Radius"/>,
757+
preInputNode:<RadiusPropIcontitle="Radius"/>,
727758
placeholder:props[name],
728759
})
729760
:name==="borderWidth"
730761
?(
731762
children[name]asInstanceType<typeofStringControl>
732763
).propertyView({
733764
label:config.label,
734-
preInputNode:<BorderIcontitle="Border-Width"/>,
765+
preInputNode:<BorderPropIcontitle="Border-Width"/>,
735766
placeholder:props[name],
736767
}) :name==="borderStyle"
737768
?(
738769
children[name]asInstanceType<typeofStringControl>
739770
).propertyView({
740771
label:config.label,
741-
preInputNode:<BorderIcontitle="Border-Style"/>,
772+
preInputNode:<BorderStylePropIcontitle="Border-Style"/>,
742773
placeholder:props[name],
743774
})
744775
:name==="margin"
@@ -749,8 +780,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
749780
preInputNode:<MarginIcontitle="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]asInstanceType<typeofStringControl>
791821
).propertyView({
792822
label:config.label,
793-
preInputNode:<StyledFontFamilyIcontitle="Text Decoration"/>,
823+
preInputNode:<StyledTextDecorationPropIcontitle="Text Decoration"/>,
794824
placeholder:props[name],
795825
}) :name==="textTransform"
796826
?(
797827
children[name]asInstanceType<typeofStringControl>
798828
).propertyView({
799829
label:config.label,
800-
preInputNode:<StyledFontFamilyIcontitle="Text Transform"/>,
830+
preInputNode:<StyledTextTransformIcontitle="Text Transform"/>,
801831
placeholder:props[name],
802832
})
803833
:name==="fontStyle"
804834
?(
805835
children[name]asInstanceType<typeofStringControl>
806836
).propertyView({
807837
label:config.label,
808-
preInputNode:<StyledFontFamilyIcontitle="Font Style"/>,
838+
preInputNode:<StyledTextStyleIcontitle="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:<StyledBackgroundImageIcontitle="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]asInstanceType<typeofStringControl>
860+
).propertyView({
861+
label:config.label,
862+
preInputNode:<RotationPropIcontitle="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‎

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

26+
exporttypeRotationConfig=CommonColorConfig&{
27+
readonlyrotation:string;
28+
};
29+
2630
exporttypeBackgroundImageConfig=CommonColorConfig&{readonlybackgroundImage:string;};
2731
exporttypeBackgroundImageRepeatConfig=CommonColorConfig&{readonlybackgroundImageRepeat:string;};
2832
exporttypeBackgroundImageSizeConfig=CommonColorConfig&{readonlybackgroundImageSize:string;};
@@ -106,7 +110,7 @@ export type DepColorConfig = CommonColorConfig & {
106110
transformer:(color:string, ...rest:string[])=>string;
107111
};
108112

109-
exporttypeSingleColorConfig=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+
exporttypeSingleColorConfig=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
exportconstdefaultTheme:ThemeDetail={
112116
primary:"#3377FF",
@@ -303,6 +307,12 @@ const VALIDATE = {
303307

304308
constACCENT_VALIDATE=[ACCENT,VALIDATE]asconst;
305309

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

462472
constBG_STATIC_BORDER_RADIUS=[getBackground(),getStaticBorder(),RADIUS]asconst;
473+
463474
constSTYLING_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
constSTYLING_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)
[8]ページ先頭
©2009-2025 Movatter.jp