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

Commitf5d941e

Browse files
authored
Merge pull request#705 from imtananikhwa/imtanan-task1
Checkbox, Radio and Select styles added
2 parentsb31e606 +67d578c commitf5d941e

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
constCascaderStyle=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-
constCheckboxGroup=styled(AntdCheckboxGroup)<{
86+
constCheckboxGroup=styled(AntdCheckboxGroup)<{
7787
$style:CheckboxStyleType;
7888
$layout:ValueFromOption<typeofRadioLayoutOptions>;
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:${(styleasSelectStyleType).fontFamily} !important;
72+
font-size:${(styleasSelectStyleType).textSize} !important;
73+
font-weight:${(styleasSelectStyleType).textWeight};
74+
color:${(styleasSelectStyleType).text} !important;
75+
font-style:${(styleasSelectStyleType).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:${(styleasSelectStyleType).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-
constSelect=styled(AntdSelect)<{$style:SelectStyleType&MultiSelectStyleType}>`
171+
constSelect=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
<WrapperclassName="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+
constdefaultProps:any={}
2627
constSelectEdit=(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
]asconst;
736736

737737
exportconstSelectStyle=[
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
]asconst;
745747

746748
constmultiSelectCommon=[
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
exportconstCheckboxStyle=[
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
]asconst;
859863

860864
exportconstRadioStyle=[
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
]asconst;
875880

876881
exportconstSegmentStyle=[
@@ -1019,7 +1024,7 @@ export const TableColumnLinkStyle = [
10191024
exportconstFileStyle=[
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
]asconst;
10251030

0 commit comments

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