Skip to content

Commit 5a4e1c4

Browse files
imtananikhwaimtananikhwa
committed
Common style config added, number input component updated, link component fixes
1 parent 12b4551 commit 5a4e1c4

File tree

3 files changed

+75
-81
lines changed

3 files changed

+75
-81
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
import React, { useContext } from "react";
2525

26-
const Link = styled(Button)<{ $style: LinkStyleType }>`
26+
const Link = 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-
<Section name={sectionNames.advanced}>
122-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
123-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
124-
</Section></>
122+
<Section name={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-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
129-
)}
128+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
129+
<><Section name={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
const getStyle = (style: InputLikeStyleType) => {
5757
return css`
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-number input {
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-
const InputNumber = styled(AntdInputNumber)<{
120+
const InputNumber = 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-
<Section name={sectionNames.interaction}>
381-
{children.onEvent.getPropertyView()}
382-
{disabledPropertyView(children)}
383-
{hiddenPropertyView(children)}
384-
</Section>
387+
<Section name={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/controls/styleControlConstants.tsx

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

399399
const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
400+
const STYLING_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
const FILL = {
402414
name: "fill",
@@ -450,34 +462,23 @@ function getStaticBackground(color: string) {
450462

451463
export const ButtonStyle = [
452464
...getBgBorderRadiusByBg("primary"),
453-
BORDER_WIDTH,
454-
TEXT,
455-
TEXT_SIZE,
456-
TEXT_WEIGHT,
457-
FONT_FAMILY,
458-
FONT_STYLE,
459-
MARGIN,
460-
PADDING
465+
...STYLING_FIELDS_SEQUENCE
461466
] as const;
462467

463468
export const ToggleButtonStyle = [
464469
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,
470+
...STYLING_FIELDS_SEQUENCE.map((style) => {
471+
if (style.name === 'border') {
472+
return {
473+
...style,
474+
depType: DEP_TYPE.SELF,
475+
transformer: toSelf
476+
}
477+
}
478+
return {
479+
...style
480+
}
481+
})
481482
] as const;
482483

483484
export const TextStyle = [
@@ -488,23 +489,14 @@ export const TextStyle = [
488489
depType: DEP_TYPE.SELF,
489490
transformer: toSelf,
490491
},
491-
TEXT,
492-
TEXT_SIZE,
493-
TEXT_WEIGHT,
494-
FONT_FAMILY,
495-
FONT_STYLE,
496-
BORDER,
497-
MARGIN,
498-
PADDING,
492+
...STYLING_FIELDS_SEQUENCE,
499493
{
500494
name: "links",
501495
label: trans("style.links"),
502496
depTheme: "primary",
503497
depType: DEP_TYPE.SELF,
504498
transformer: toSelf,
505499
},
506-
RADIUS,
507-
BORDER_WIDTH,
508500
] as const;
509501

510502
export const MarginStyle = [
@@ -681,15 +673,16 @@ export const SliderStyle = [
681673

682674
export const InputLikeStyle = [
683675
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,
676+
getStaticBackground(SURFACE_COLOR),
677+
// TEXT,
678+
// TEXT_SIZE,
679+
// TEXT_WEIGHT,
680+
// FONT_FAMILY,
681+
// FONT_STYLE,
682+
// MARGIN,
683+
// PADDING,
684+
// BORDER_WIDTH,
685+
...STYLING_FIELDS_SEQUENCE,
693686
...ACCENT_VALIDATE,
694687
] as const;
695688

@@ -1046,21 +1039,16 @@ function handleToHoverLink(color: string) {
10461039
}
10471040

10481041
export const LinkStyle = [
1049-
...LinkTextStyle,
1042+
10501043
{
10511044
name: "background",
10521045
label: trans("style.background"),
10531046
depTheme: "canvas",
10541047
depType: DEP_TYPE.SELF,
10551048
transformer: toSelf,
10561049
},
1057-
MARGIN,
1058-
PADDING,
1059-
FONT_FAMILY,
1060-
FONT_STYLE,
1061-
BORDER,
1062-
BORDER_WIDTH,
1063-
TEXT_SIZE
1050+
...LinkTextStyle,
1051+
...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'text')
10641052
] as const;
10651053

10661054
export const DividerStyle = [
@@ -1069,19 +1057,17 @@ export const DividerStyle = [
10691057
label: trans("color"),
10701058
color: lightenColor(SECOND_SURFACE_COLOR, 0.05),
10711059
},
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
1060+
...STYLING_FIELDS_SEQUENCE.map((style) => {
1061+
if (style.name === 'text') {
1062+
return {
1063+
name: "text",
1064+
label: trans("text"),
1065+
depName: "color",
1066+
transformer: handleToDividerText,
1067+
}
1068+
}
1069+
return style
1070+
})
10851071
] as const;
10861072

10871073
export const ProgressStyle = [

0 commit comments

Comments
 (0)