Skip to content

Commit f5d941e

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request lowcoder-org#705 from imtananikhwa/imtanan-task1
Checkbox, Radio and Select styles added
2 parents b31e606 + 67d578c commit f5d941e

File tree

6 files changed

+74
-42
lines changed

6 files changed

+74
-42
lines changed

‎client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { refMethods } from "comps/generators/withMethodExposing";
1111

1212
const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
1313
width: 100%;
14+
font-family:"Montserrat";
1415
${(props) => props.$style && getStyle(props.$style)}
1516
`;
1617

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const getStyle = (style: CheckboxStyleType) => {
3838
.ant-checkbox-inner {
3939
background-color: ${style.checkedBackground};
4040
border-color: ${style.checkedBackground};
41+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
4142
4243
&::after {
4344
border-color: ${style.checked};
@@ -46,6 +47,7 @@ export const getStyle = (style: CheckboxStyleType) => {
4647
4748
&::after {
4849
border-color: ${style.checkedBackground};
50+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
4951
border-radius: ${style.radius};
5052
}
5153
}
@@ -54,15 +56,23 @@ export const getStyle = (style: CheckboxStyleType) => {
5456
border-radius: ${style.radius};
5557
background-color: ${style.uncheckedBackground};
5658
border-color: ${style.uncheckedBorder};
59+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
5760
}
5861
5962
&:hover .ant-checkbox-inner,
6063
.ant-checkbox:hover .ant-checkbox-inner,
6164
.ant-checkbox-input:focus + .ant-checkbox-inner {
6265
border-color: ${style.checkedBackground};
66+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
6367
}
6468
}
6569
70+
.ant-checkbox-group-item {
71+
font-family:${style.fontFamily};
72+
font-size:${style.textSize};
73+
font-weight:${style.textWeight};
74+
font-style:${style.fontStyle};
75+
}
6676
.ant-checkbox-wrapper {
6777
padding: ${style.padding};
6878
.ant-checkbox-inner,
@@ -73,7 +83,7 @@ export const getStyle = (style: CheckboxStyleType) => {
7383
`;
7484
};
7585

76-
const CheckboxGroup = styled(AntdCheckboxGroup)<{
86+
const CheckboxGroup = styled(AntdCheckboxGroup) <{
7787
$style: CheckboxStyleType;
7888
$layout: ValueFromOption<typeof RadioLayoutOptions>;
7989
}>`

‎client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const getStyle = (style: RadioStyleType) => {
2121
padding: ${style.padding};
2222
span:not(.ant-radio) {
2323
${EllipsisTextCss};
24+
font-family:${style.fontFamily};
25+
font-size:${style.textSize};
26+
font-weight:${style.textWeight};
27+
font-style:${style.fontStyle};
2428
}
2529
2630
.ant-radio-checked {
@@ -37,7 +41,7 @@ const getStyle = (style: RadioStyleType) => {
3741
.ant-radio-inner {
3842
background-color: ${style.uncheckedBackground};
3943
border-color: ${style.uncheckedBorder};
40-
44+
border-width:${style.borderWidth};
4145
&::after {
4246
background-color: ${style.checked};
4347
}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import { BoolControl } from "../../controls/boolControl";
88
import { LabelControl } from "../../controls/labelControl";
99
import { BoolCodeControl, StringControl } from "../../controls/codeControl";
10-
import { PaddingControl } from "../../controls/paddingControl";
10+
import { PaddingControl } from "../../controls/paddingControl";
1111
import { MarginControl } from "../../controls/marginControl";
1212
import {
1313
ControlNode,
@@ -65,8 +65,15 @@ export const getStyle = (
6565
height: auto;
6666
}
6767
.ant-select-selection-search {
68-
padding: ${style.padding};
68+
padding: ${style.padding};
6969
}
70+
.ant-select-selection-search-input {
71+
font-family:${(style as SelectStyleType).fontFamily} !important;
72+
font-size:${(style as SelectStyleType).textSize} !important;
73+
font-weight:${(style as SelectStyleType).textWeight};
74+
color:${(style as SelectStyleType).text} !important;
75+
font-style:${(style as SelectStyleType).fontStyle};
76+
}
7077
.ant-select-selector::after,
7178
.ant-select-selection-placeholder,
7279
.ant-select-selection-item {
@@ -88,6 +95,7 @@ export const getStyle = (
8895
.ant-select-selector {
8996
background-color: ${style.background};
9097
border-color: ${style.border};
98+
border-width:${(style as SelectStyleType).borderWidth};
9199
}
92100
93101
&.ant-select-focused,
@@ -101,18 +109,18 @@ export const getStyle = (
101109
.ant-select-clear {
102110
background-color: ${style.background};
103111
color: ${style.text === "#222222"
104-
? "#8B8FA3"
105-
: isDarkColor(style.text)
106-
? lightenColor(style.text, 0.2)
107-
: style.text};
112+
? "#8B8FA3"
113+
: isDarkColor(style.text)
114+
? lightenColor(style.text, 0.2)
115+
: style.text};
108116
}
109117
110118
.ant-select-clear:hover {
111119
color: ${style.text === "#222222"
112-
? "#8B8FA3"
113-
: isDarkColor(style.text)
114-
? lightenColor(style.text, 0.1)
115-
: style.text};
120+
? "#8B8FA3"
121+
: isDarkColor(style.text)
122+
? lightenColor(style.text, 0.1)
123+
: style.text};
116124
}
117125
118126
&.ant-select-multiple .ant-select-selection-item {
@@ -160,7 +168,7 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
160168
`;
161169
};
162170

163-
const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>`
171+
const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleType }>`
164172
width: 100%;
165173
166174
${(props) => props.$style && getStyle(props.$style)}
@@ -197,7 +205,7 @@ export const SelectChildrenMap = {
197205
inputValue: stateComp<string>(""), // user's input value when search
198206
showSearch: BoolControl.DEFAULT_TRUE,
199207
viewRef: RefControl<BaseSelectRef>,
200-
margin: MarginControl,
208+
margin: MarginControl,
201209
padding: PaddingControl,
202210
...SelectInputValidationChildren,
203211
...formDataChildren,
@@ -235,8 +243,8 @@ export const SelectUIView = (
235243
onSearch={
236244
props.showSearch
237245
? (value) => {
238-
props.dispatch(changeChildAction("inputValue", value, false));
239-
}
246+
props.dispatch(changeChildAction("inputValue", value, false));
247+
}
240248
: undefined
241249
}
242250
>
@@ -248,6 +256,7 @@ export const SelectUIView = (
248256
label={option.label}
249257
disabled={option.disabled}
250258
key={option.value}
259+
style={{fontFamily:"Montserrat"}}
251260
>
252261
<Wrapper className="option-label">
253262
{props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 &&

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,21 @@ type SelectEditProps = {
2323
options: any[];
2424
};
2525

26+
const defaultProps: any = {}
2627
const SelectEdit = (props: SelectEditProps) => {
2728
const [currentValue, setCurrentValue] = useState(props.initialValue);
2829

2930
return (
30-
<SelectUIView
31+
<SelectUIView
32+
{...defaultProps}
3133
value={currentValue}
3234
options={options}
3335
onChange={(val) => {
3436
props.onChange(val);
3537
setCurrentValue(val)
3638
}}
37-
onEvent={async (eventName)=>{
38-
if(eventName==="blur"){
39+
onEvent={async (eventName) => {
40+
if (eventName === "blur") {
3941
props.onChangeEnd()
4042
}
4143
return []
@@ -66,7 +68,8 @@ export const ColumnSelectComp = (function () {
6668
onChange={props.onChange}
6769
onChangeEnd={props.onChangeEnd}
6870
/>
69-
)})
71+
)
72+
})
7073
.setPropertyViewFn((children) => {
7174
return (
7275
<>

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

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -735,20 +735,23 @@ export const SwitchStyle = [
735735
] as const;
736736

737737
export const SelectStyle = [
738-
LABEL,
739-
...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
740-
TEXT,
741-
MARGIN,
742-
PADDING,
738+
// LABEL,
739+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
740+
741+
// ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
742+
// TEXT,
743+
// MARGIN,
744+
// PADDING,
743745
...ACCENT_VALIDATE,
744746
] as const;
745747

746748
const multiSelectCommon = [
747-
LABEL,
748-
...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
749-
TEXT,
750-
MARGIN,
751-
PADDING,
749+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
750+
// LABEL,
751+
// ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
752+
// TEXT,
753+
// MARGIN,
754+
// PADDING,
752755
{
753756
name: "tags",
754757
label: trans("style.tags"),
@@ -841,7 +844,8 @@ function checkAndUncheck() {
841844
}
842845

843846
export const CheckboxStyle = [
844-
LABEL,
847+
// LABEL,
848+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
845849
...checkAndUncheck(),
846850
{
847851
name: "checked",
@@ -850,15 +854,16 @@ export const CheckboxStyle = [
850854
depType: DEP_TYPE.CONTRAST_TEXT,
851855
transformer: contrastText,
852856
},
853-
RADIUS,
854-
STATIC_TEXT,
855-
VALIDATE,
856-
MARGIN,
857-
PADDING,
857+
// RADIUS,
858+
// STATIC_TEXT,
859+
// VALIDATE,
860+
// MARGIN,
861+
// PADDING,
858862
] as const;
859863

860864
export const RadioStyle = [
861-
LABEL,
865+
// LABEL,
866+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
862867
...checkAndUncheck(),
863868
{
864869
name: "checked",
@@ -867,10 +872,10 @@ export const RadioStyle = [
867872
depType: DEP_TYPE.SELF,
868873
transformer: toSelf,
869874
},
870-
STATIC_TEXT,
871-
VALIDATE,
872-
MARGIN,
873-
PADDING,
875+
// STATIC_TEXT,
876+
// VALIDATE,
877+
// MARGIN,
878+
// PADDING,
874879
] as const;
875880

876881
export const SegmentStyle = [
@@ -1019,7 +1024,7 @@ export const TableColumnLinkStyle = [
10191024
export const FileStyle = [
10201025
// ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
10211026
getStaticBackground(SURFACE_COLOR),
1022-
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]),
1027+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]),
10231028
// TEXT, ACCENT, MARGIN, PADDING
10241029
] as const;
10251030

0 commit comments

Comments
 (0)