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

Commit1d42ee8

Browse files
authored
Merge pull request#698 from imtananikhwa/imtanan-task1
Common style config added, number input component updated, link compo…
2 parents5c6a0e1 +a055656 commit1d42ee8

File tree

4 files changed

+87
-85
lines changed

4 files changed

+87
-85
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@ import { RefControl } from "comps/controls/refControl";
2323
import{EditorContext}from"comps/editorState";
2424
importReact,{useContext}from"react";
2525

26-
constLink=styled(Button)<{$style:LinkStyleType}>`
26+
constLink=styled(Button)<{$style:LinkStyleType}>`
2727
${(props)=>`
2828
color:${props.$style.text};
2929
margin:${props.$style.margin};
3030
padding:${props.$style.padding};
3131
font-size:${props.$style.textSize};
3232
font-style:${props.$style.fontStyle};
3333
font-family:${props.$style.fontFamily};
34+
font-weight:${props.$style.textWeight};
3435
border:${props.$style.borderWidth} solid${props.$style.border};
3536
background-color:${props.$style.background};
3637
&:hover {
@@ -118,15 +119,15 @@ const LinkTmpComp = (function () {
118119
{hiddenPropertyView(children)}
119120
{loadingPropertyView(children)}
120121
</Section>
121-
<Sectionname={sectionNames.advanced}>
122-
{children.prefixIcon.propertyView({label:trans("button.prefixIcon")})}
123-
{children.suffixIcon.propertyView({label:trans("button.suffixIcon")})}
124-
</Section></>
122+
<Sectionname={sectionNames.advanced}>
123+
{children.prefixIcon.propertyView({label:trans("button.prefixIcon")})}
124+
{children.suffixIcon.propertyView({label:trans("button.suffixIcon")})}
125+
</Section></>
125126
)}
126127

127-
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
128-
<><Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section></>
129-
)}
128+
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
129+
<><Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section></>
130+
)}
130131
</>
131132
);
132133
})

‎client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { EditorContext } from "comps/editorState";
5656
constgetStyle=(style:InputLikeStyleType)=>{
5757
returncss`
5858
border-radius:${style.radius};
59+
border-width:${style.borderWidth}!important;
5960
// still use antd style when disabled
6061
&:not(.ant-input-number-disabled) {
6162
color:${style.text};
@@ -78,11 +79,17 @@ const getStyle = (style: InputLikeStyleType) => {
7879
}
7980
.ant-input-number {
8081
margin:0;
82+
8183
}
82-
.ant-input-numberinput {
84+
.ant-input-number-input {
8385
margin:0;
8486
padding:${style.padding};
8587
height:${heightCalculator(style.margin)};
88+
color:${style.text};
89+
font-family:${style.fontFamily}!important;
90+
font-weight:${style.textWeight}!important;
91+
font-size:${style.textSize}!important;
92+
font-style:${style.fontStyle}!important;
8693
}
8794
8895
.ant-input-number-handler-wrap {
@@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => {
110117
`;
111118
};
112119

113-
constInputNumber=styled(AntdInputNumber)<{
120+
constInputNumber=styled(AntdInputNumber)<{
114121
$style:InputLikeStyleType;
115122
}>`
116123
width: 100%;
@@ -377,15 +384,15 @@ const NumberInputTmpComp = (function () {
377384
{children.max.propertyView({label:trans("prop.maximum")})}
378385
{children.customRule.propertyView({})}
379386
</Section>
380-
<Sectionname={sectionNames.interaction}>
381-
{children.onEvent.getPropertyView()}
382-
{disabledPropertyView(children)}
383-
{hiddenPropertyView(children)}
384-
</Section>
387+
<Sectionname={sectionNames.interaction}>
388+
{children.onEvent.getPropertyView()}
389+
{disabledPropertyView(children)}
390+
{hiddenPropertyView(children)}
391+
</Section>
385392
</>
386393
)}
387-
388-
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
394+
395+
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
389396
children.label.getPropertyView()
390397
)}
391398

‎client/packages/lowcoder/src/comps/comps/progressComp.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ const getStyle = (style: ProgressStyleType) => {
1818
line-height:2;
1919
.ant-progress-text {
2020
color:${style.text};
21+
font-style:${style.fontStyle};
22+
font-family:${style.fontFamily};
23+
font-weight:${style.textWeight};
2124
}
2225
width:${widthCalculator(style.margin)};
2326
height:${heightCalculator(style.margin)};

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

Lines changed: 59 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,18 @@ const HEADER_BACKGROUND = {
397397
}asconst;
398398

399399
constBG_STATIC_BORDER_RADIUS=[getBackground(),getStaticBorder(),RADIUS]asconst;
400+
constSTYLING_FIELDS_SEQUENCE=[
401+
TEXT,
402+
TEXT_SIZE,
403+
TEXT_WEIGHT,
404+
FONT_FAMILY,
405+
FONT_STYLE,
406+
BORDER,
407+
MARGIN,
408+
PADDING,
409+
RADIUS,
410+
BORDER_WIDTH,
411+
]
400412

401413
constFILL={
402414
name:"fill",
@@ -448,36 +460,40 @@ function getStaticBackground(color: string) {
448460
}asconst;
449461
}
450462

463+
464+
functionreplaceAndMergeMultipleStyles(originalArray:any[],styleToReplace:string,replacingStyles:any[]):any[]{
465+
lettemp=[]
466+
letfoundIndex=originalArray.findIndex((element)=>element.name===styleToReplace)
467+
468+
if(foundIndex!==-1){
469+
letelementsBeforeFoundIndex=originalArray.filter((item,index)=>index<foundIndex)
470+
letelementsAfterFoundIndex=originalArray.filter((item,index)=>index>foundIndex)
471+
temp=[...elementsBeforeFoundIndex, ...replacingStyles, ...elementsAfterFoundIndex]
472+
}else
473+
temp=[...originalArray]
474+
475+
returntemp
476+
}
477+
451478
exportconstButtonStyle=[
452479
...getBgBorderRadiusByBg("primary"),
453-
BORDER_WIDTH,
454-
TEXT,
455-
TEXT_SIZE,
456-
TEXT_WEIGHT,
457-
FONT_FAMILY,
458-
FONT_STYLE,
459-
MARGIN,
460-
PADDING
480+
...STYLING_FIELDS_SEQUENCE
461481
]asconst;
462482

463483
exportconstToggleButtonStyle=[
464484
getBackground("canvas"),
465-
{
466-
name:"border",
467-
label:trans("style.border"),
468-
depName:"text",
469-
depType:DEP_TYPE.SELF,
470-
transformer:toSelf,
471-
},
472-
RADIUS,
473-
BORDER_WIDTH,
474-
TEXT,
475-
TEXT_SIZE,
476-
TEXT_WEIGHT,
477-
FONT_FAMILY,
478-
FONT_STYLE,
479-
MARGIN,
480-
PADDING,
485+
...STYLING_FIELDS_SEQUENCE.map((style)=>{
486+
if(style.name==='border'){
487+
return{
488+
...style,
489+
depType:DEP_TYPE.SELF,
490+
transformer:toSelf
491+
}
492+
}
493+
return{
494+
...style
495+
}
496+
})
481497
]asconst;
482498

483499
exportconstTextStyle=[
@@ -488,23 +504,14 @@ export const TextStyle = [
488504
depType:DEP_TYPE.SELF,
489505
transformer:toSelf,
490506
},
491-
TEXT,
492-
TEXT_SIZE,
493-
TEXT_WEIGHT,
494-
FONT_FAMILY,
495-
FONT_STYLE,
496-
BORDER,
497-
MARGIN,
498-
PADDING,
507+
...STYLING_FIELDS_SEQUENCE,
499508
{
500509
name:"links",
501510
label:trans("style.links"),
502511
depTheme:"primary",
503512
depType:DEP_TYPE.SELF,
504513
transformer:toSelf,
505514
},
506-
RADIUS,
507-
BORDER_WIDTH,
508515
]asconst;
509516

510517
exportconstMarginStyle=[
@@ -681,15 +688,8 @@ export const SliderStyle = [
681688

682689
exportconstInputLikeStyle=[
683690
LABEL,
684-
...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
685-
BORDER_WIDTH,
686-
TEXT,
687-
TEXT_SIZE,
688-
TEXT_WEIGHT,
689-
FONT_FAMILY,
690-
FONT_STYLE,
691-
MARGIN,
692-
PADDING,
691+
getStaticBackground(SURFACE_COLOR),
692+
...STYLING_FIELDS_SEQUENCE,
693693
...ACCENT_VALIDATE,
694694
]asconst;
695695

@@ -1046,21 +1046,15 @@ function handleToHoverLink(color: string) {
10461046
}
10471047

10481048
exportconstLinkStyle=[
1049-
...LinkTextStyle,
1049+
10501050
{
10511051
name:"background",
10521052
label:trans("style.background"),
10531053
depTheme:"canvas",
10541054
depType:DEP_TYPE.SELF,
10551055
transformer:toSelf,
10561056
},
1057-
MARGIN,
1058-
PADDING,
1059-
FONT_FAMILY,
1060-
FONT_STYLE,
1061-
BORDER,
1062-
BORDER_WIDTH,
1063-
TEXT_SIZE
1057+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'text',[...LinkTextStyle])
10641058
]asconst;
10651059

10661060
exportconstDividerStyle=[
@@ -1069,34 +1063,31 @@ export const DividerStyle = [
10691063
label:trans("color"),
10701064
color:lightenColor(SECOND_SURFACE_COLOR,0.05),
10711065
},
1072-
BORDER_WIDTH,
1073-
MARGIN,
1074-
PADDING,
1075-
{
1076-
name:"text",
1077-
label:trans("text"),
1078-
depName:"color",
1079-
transformer:handleToDividerText,
1080-
},
1081-
TEXT_SIZE,
1082-
TEXT_WEIGHT,
1083-
FONT_FAMILY,
1084-
FONT_STYLE
1066+
...STYLING_FIELDS_SEQUENCE.map((style)=>{
1067+
if(style.name==='text'){
1068+
return{
1069+
name:"text",
1070+
label:trans("text"),
1071+
depName:"color",
1072+
transformer:handleToDividerText,
1073+
}
1074+
}
1075+
returnstyle
1076+
})
10851077
]asconst;
10861078

1079+
// Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar
10871080
exportconstProgressStyle=[
1088-
{
1081+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'text',[{
10891082
name:"text",
10901083
label:trans("text"),
10911084
depTheme:"canvas",
10921085
depType:DEP_TYPE.CONTRAST_TEXT,
10931086
transformer:contrastText,
1094-
},
1087+
}]).filter((style)=>['border','borderWidth'].includes(style.name)===false),
10951088
TRACK,
10961089
FILL,
10971090
SUCCESS,
1098-
MARGIN,
1099-
PADDING,
11001091
]asconst;
11011092

11021093
exportconstNavigationStyle=[

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp