Skip to content

Commit 8471891

Browse files
FalkWolskyFalkWolsky
authoredMar 12, 2024
Merge pull request #746 from imtananikhwa/margin-padding-fixes
Margin padding fixes
2 parents a222250 + d2b469e commit 8471891

33 files changed

+392
-196
lines changed
 

‎client/packages/lowcoder-design/src/components/Label.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export const labelCss: any = css`
55
user-select: none;
66
77
font-size: 13px;
8-
color: #222222;
98
109
&:hover {
1110
cursor: default;

‎client/packages/lowcoder-design/src/components/Section.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ export const sectionNames = {
142142
validation: trans("prop.validation"),
143143
layout: trans("prop.layout"),
144144
style: trans("prop.style"),
145+
labelStyle:trans("prop.labelStyle"),
145146
data: trans("prop.data"),
146147
meetings : trans("prop.meetings"), // added by Falk Wolsky
147148
};

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const en = {
2222
advanced: "Advanced",
2323
validation: "Validation",
2424
layout: "Layout",
25+
labelStyle:"Label Style",
2526
style: "Style",
2627
meetings : "Meeting Settings",
2728
data: "Data",

‎client/packages/lowcoder-design/src/i18n/design/locales/zh.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const zh = {
2222
advanced: "高级",
2323
validation: "验证",
2424
layout: "布局",
25+
labelStyle:"标签样式",
2526
style: "样式",
2627
meetings: "会议",
2728
data: "数据",

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { styleControl } from "comps/controls/styleControl";
55
import {
66
InputLikeStyle,
77
InputLikeStyleType,
8+
LabelStyle,
89
} from "comps/controls/styleControlConstants";
910
import {
1011
NameConfig,
@@ -73,6 +74,7 @@ const childrenMap = {
7374
viewRef: RefControl<InputRef>,
7475
allowClear: BoolControl.DEFAULT_TRUE,
7576
style: styleControl(InputLikeStyle),
77+
labelStyle:styleControl(LabelStyle),
7678
prefixIcon: IconControl,
7779
suffixIcon: IconControl,
7880
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -276,8 +278,9 @@ let AutoCompleteCompBase = (function () {
276278
</ConfigProvider>
277279
</>
278280
),
279-
// style: props.style,
280-
// ...validateState,
281+
style: props.style,
282+
labelStyle:props.labelStyle,
283+
...validateState,
281284
});
282285
})
283286
.setPropertyViewFn((children) => {
@@ -335,6 +338,9 @@ let AutoCompleteCompBase = (function () {
335338
<Section name={sectionNames.style}>
336339
{children.style.getPropertyView()}
337340
</Section>
341+
<Section name={sectionNames.labelStyle}>
342+
{children.labelStyle.getPropertyView()}
343+
</Section>
338344
</>
339345
);
340346
})

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

+38-25
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
2020
import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
2121
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
23+
import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
2424
import { withMethodExposing } from "../../generators/withMethodExposing";
2525
import {
2626
disabledPropertyView,
@@ -72,6 +72,7 @@ const commonChildren = {
7272
minuteStep: RangeControl.closed(1, 60, 1),
7373
secondStep: RangeControl.closed(1, 60, 1),
7474
style: styleControl(DateTimeStyle),
75+
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
7576
suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
7677
...validationChildren,
7778
viewRef: RefControl<CommonPickerMethods>,
@@ -159,12 +160,13 @@ export type DateCompViewProps = Pick<
159160

160161
export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
161162
let time = dayjs(null);
162-
if(props.value.value !== '') {
163+
if (props.value.value !== '') {
163164
time = dayjs(props.value.value, DateParser);
164165
}
165166
return props.label({
166167
required: props.required,
167168
style: props.style,
169+
labelStyle:props.labelStyle,
168170
children: (
169171
<DateUIView
170172
viewRef={props.viewRef}
@@ -212,11 +214,11 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
212214

213215
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
214216
<><Section name={sectionNames.validation}>
215-
{requiredPropertyView(children)}
216-
{dateValidationFields(children)}
217-
{timeValidationFields(children)}
218-
{children.customRule.propertyView({})}
219-
</Section>
217+
{requiredPropertyView(children)}
218+
{dateValidationFields(children)}
219+
{timeValidationFields(children)}
220+
{children.customRule.propertyView({})}
221+
</Section>
220222
<Section name={sectionNames.interaction}>
221223
{children.onEvent.getPropertyView()}
222224
{disabledPropertyView(children)}
@@ -234,19 +236,24 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
234236
{children.placeholder.propertyView({ label: trans("date.placeholderText") })}
235237
</Section>
236238
)}
237-
239+
238240
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
239-
<><Section name={sectionNames.advanced}>
241+
<><Section name={sectionNames.advanced}>
240242
{timeFields(children, isMobile)}
241243
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
242244
</Section></>
243245
)}
244246
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
245247

246248
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
247-
<Section name={sectionNames.style}>
248-
{children.style.getPropertyView()}
249-
</Section>
249+
<>
250+
<Section name={sectionNames.style}>
251+
{children.style.getPropertyView()}
252+
</Section>
253+
<Section name={sectionNames.labelStyle}>
254+
{children.labelStyle.getPropertyView()}
255+
</Section>
256+
</>
250257
)}
251258
</>
252259
);
@@ -264,10 +271,10 @@ export const dateRangeControl = (function () {
264271
return new UICompBuilder(childrenMap, (props) => {
265272
let start = dayjs(null);
266273
let end = dayjs(null);
267-
if(props.start.value !== '') {
274+
if (props.start.value !== '') {
268275
start = dayjs(props.start.value, DateParser);
269276
}
270-
if(props.end.value !== '') {
277+
if (props.end.value !== '') {
271278
end = dayjs(props.end.value, DateParser);
272279
}
273280

@@ -310,12 +317,13 @@ export const dateRangeControl = (function () {
310317
return props.label({
311318
required: props.required,
312319
style: props.style,
320+
labelStyle:props.labelStyle,
313321
children: children,
314322
...(startResult.validateStatus !== "success"
315323
? startResult
316324
: endResult.validateStatus !== "success"
317-
? endResult
318-
: startResult),
325+
? endResult
326+
: startResult),
319327
});
320328
})
321329
.setPropertyViewFn((children) => {
@@ -337,11 +345,11 @@ export const dateRangeControl = (function () {
337345

338346
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
339347
<><Section name={sectionNames.validation}>
340-
{requiredPropertyView(children)}
341-
{dateValidationFields(children)}
342-
{timeValidationFields(children)}
343-
{children.customRule.propertyView({})}
344-
</Section>
348+
{requiredPropertyView(children)}
349+
{dateValidationFields(children)}
350+
{timeValidationFields(children)}
351+
{children.customRule.propertyView({})}
352+
</Section>
345353
<Section name={sectionNames.interaction}>
346354
{children.onEvent.getPropertyView()}
347355
{disabledPropertyView(children)}
@@ -358,7 +366,7 @@ export const dateRangeControl = (function () {
358366
{children.placeholder.propertyView({ label: trans("date.placeholderText") })}
359367
</Section>
360368
)}
361-
369+
362370
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
363371
<><Section name={sectionNames.advanced}>
364372
{timeFields(children, isMobile)}
@@ -368,9 +376,14 @@ export const dateRangeControl = (function () {
368376
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}
369377

370378
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
371-
<Section name={sectionNames.style}>
372-
{children.style.getPropertyView()}
373-
</Section>
379+
<>
380+
<Section name={sectionNames.style}>
381+
{children.style.getPropertyView()}
382+
</Section>
383+
<Section name={sectionNames.labelStyle}>
384+
{children.labelStyle.getPropertyView()}
385+
</Section>
386+
</>
374387
)}
375388

376389
</>

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
3030
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
3131
import { RefControl } from "../../controls/refControl";
3232
import { styleControl } from "comps/controls/styleControl";
33-
import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
33+
import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
3434
import {
3535
disabledPropertyView,
3636
hiddenPropertyView,
@@ -258,6 +258,7 @@ const childrenMap = {
258258
onEvent: InputEventHandlerControl,
259259
viewRef: RefControl<HTMLInputElement>,
260260
style: styleControl(InputLikeStyle),
261+
labelStyle:styleControl(LabelStyle),
261262
prefixIcon: IconControl,
262263

263264
// validation
@@ -380,6 +381,7 @@ let NumberInputTmpComp = (function () {
380381
required: props.required,
381382
children: <CustomInputNumber {...props} />,
382383
style: props.style,
384+
labelStyle:props.labelStyle,
383385
...validate(props),
384386
});
385387
})
@@ -427,9 +429,14 @@ let NumberInputTmpComp = (function () {
427429
)}
428430

429431
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
432+
<>
430433
<Section name={sectionNames.style}>
431434
{children.style.getPropertyView()}
432435
</Section>
436+
<Section name={sectionNames.labelStyle}>
437+
{children.labelStyle.getPropertyView()}
438+
</Section>
439+
</>
433440
)}
434441
</>
435442
))

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const RangeSliderBasicComp = (function () {
1515
return new UICompBuilder(childrenMap, (props) => {
1616
return props.label({
1717
style: props.style,
18+
labelStyle: props.labelStyle,
1819
children: (
1920
<SliderWrapper
2021
onMouseDown={(e: any) => {
@@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () {
2829
range={true}
2930
value={[props.start.value, props.end.value]}
3031
$style={props.style}
31-
style={{margin: 0}}
32+
style={{ margin: 0 }}
3233
onChange={([start, end]) => {
3334
props.start.onChange(start);
3435
props.end.onChange(end);

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

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const SliderBasicComp = (function () {
1919
return new UICompBuilder(childrenMap, (props) => {
2020
return props.label({
2121
style: props.style,
22+
labelStyle:props.labelStyle,
2223
children: (
2324
<SliderWrapper
2425
onMouseDown={(e: any) => {

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
55
import { Section, sectionNames } from "lowcoder-design";
66
import { RecordConstructorToComp } from "lowcoder-core";
77
import { styleControl } from "comps/controls/styleControl";
8-
import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
8+
import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
99
import styled, { css } from "styled-components";
1010
import { default as Slider } from "antd/es/slider";
1111
import { darkenColor, fadeColor } from "lowcoder-design";
@@ -67,6 +67,7 @@ export const SliderChildren = {
6767
disabled: BoolCodeControl,
6868
onEvent: ChangeEventHandlerControl,
6969
style: styleControl(SliderStyle),
70+
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
7071
prefixIcon: IconControl,
7172
suffixIcon: IconControl,
7273
};
@@ -96,6 +97,9 @@ export const SliderPropertyView = (
9697
<Section name={sectionNames.style}>
9798
{children.style.getPropertyView()}
9899
</Section>
100+
<Section name={sectionNames.labelStyle}>
101+
{children.labelStyle.getPropertyView()}
102+
</Section>
99103
</>
100104
)}
101105
</>

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

+19-12
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
1010
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
1111
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
1212
import { styleControl } from "comps/controls/styleControl";
13-
import { RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
13+
import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
1414
import { migrateOldData } from "comps/generators/simpleGenerators";
1515
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
1616
import { trans } from "i18n";
@@ -44,6 +44,7 @@ const RatingBasicComp = (function () {
4444
disabled: BoolCodeControl,
4545
onEvent: eventHandlerControl(EventOptions),
4646
style: migrateOldData(styleControl(RatingStyle), fixOldData),
47+
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
4748
...formDataChildren,
4849
};
4950
return new UICompBuilder(childrenMap, (props) => {
@@ -64,6 +65,7 @@ const RatingBasicComp = (function () {
6465

6566
return props.label({
6667
style: props.style,
68+
labelStyle: props.labelStyle,
6769
children: (
6870
<RateStyled
6971
count={props.max}
@@ -93,14 +95,14 @@ const RatingBasicComp = (function () {
9395

9496
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
9597
<><Section name={sectionNames.interaction}>
96-
{children.onEvent.getPropertyView()}
97-
{disabledPropertyView(children)}
98-
{hiddenPropertyView(children)}
99-
</Section>
98+
{children.onEvent.getPropertyView()}
99+
{disabledPropertyView(children)}
100+
{hiddenPropertyView(children)}
101+
</Section>
100102
<Section name={sectionNames.advanced}>
101-
{children.allowHalf.propertyView({
102-
label: trans("rating.allowHalf"),
103-
})}
103+
{children.allowHalf.propertyView({
104+
label: trans("rating.allowHalf"),
105+
})}
104106
</Section>
105107
</>
106108
)}
@@ -110,9 +112,14 @@ const RatingBasicComp = (function () {
110112
)}
111113

112114
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
113-
<Section name={sectionNames.style}>
114-
{children.style.getPropertyView()}
115-
</Section>
115+
<>
116+
<Section name={sectionNames.style}>
117+
{children.style.getPropertyView()}
118+
</Section>
119+
<Section name={sectionNames.labelStyle}>
120+
{children.labelStyle.getPropertyView()}
121+
</Section>
122+
</>
116123
)}
117124
</>
118125
);
@@ -144,6 +151,6 @@ const getStyle = (style: RatingStyleType) => {
144151
`;
145152
};
146153

147-
export const RateStyled = styled(Rate)<{ $style: RatingStyleType }>`
154+
export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>`
148155
${(props) => props.$style && getStyle(props.$style)}
149156
`;

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

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ let CascaderBasicComp = (function () {
2121
return new UICompBuilder(childrenMap, (props) => {
2222
return props.label({
2323
style: props.style,
24+
labelStyle:props.labelStyle,
2425
children: (
2526
<CascaderStyle
2627
ref={props.viewRef}

0 commit comments

Comments
 (0)