Skip to content

Margin padding fixes #746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 12, 2024
Merged

Margin padding fixes #746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
345c18a
Label style work in progress
imtananikhwa Feb 29, 2024
e85db24
Merge branch 'imtanan-task1' of https://github.com/imtananikhwa/lowco…
imtananikhwa Feb 29, 2024
1f16453
Label style w.i.p
imtananikhwa Mar 1, 2024
15ee234
Rating component, signature component ,date component label styling p…
imtananikhwa Mar 4, 2024
e9a17d7
Fixed issue when apply bulk margin and padding
imtananikhwa Mar 7, 2024
d2b469e
Merge branch 'dev' into margin-padding-fixes
FalkWolsky Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion client/packages/lowcoder-design/src/components/Label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ export const labelCss: any = css`
user-select: none;

font-size: 13px;
color: #222222;

&:hover {
cursor: default;
Expand Down
1 change: 1 addition & 0 deletions client/packages/lowcoder-design/src/components/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ export const sectionNames = {
validation: trans("prop.validation"),
layout: trans("prop.layout"),
style: trans("prop.style"),
labelStyle:trans("prop.labelStyle"),
data: trans("prop.data"),
meetings : trans("prop.meetings"), // added by Falk Wolsky
};
1 change: 1 addition & 0 deletions client/packages/lowcoder-design/src/i18n/design/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const en = {
advanced: "Advanced",
validation: "Validation",
layout: "Layout",
labelStyle:"Label Style",
style: "Style",
meetings : "Meeting Settings",
data: "Data",
Expand Down
1 change: 1 addition & 0 deletions client/packages/lowcoder-design/src/i18n/design/locales/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const zh = {
advanced: "高级",
validation: "验证",
layout: "布局",
labelStyle:"标签样式",
style: "样式",
meetings: "会议",
data: "数据",
Expand Down
10 changes: 8 additions & 2 deletions client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { styleControl } from "comps/controls/styleControl";
import {
InputLikeStyle,
InputLikeStyleType,
LabelStyle,
} from "comps/controls/styleControlConstants";
import {
NameConfig,
Expand Down Expand Up @@ -73,6 +74,7 @@ const childrenMap = {
viewRef: RefControl<InputRef>,
allowClear: BoolControl.DEFAULT_TRUE,
style: styleControl(InputLikeStyle),
labelStyle:styleControl(LabelStyle),
prefixIcon: IconControl,
suffixIcon: IconControl,
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
Expand Down Expand Up @@ -276,8 +278,9 @@ let AutoCompleteCompBase = (function () {
</ConfigProvider>
</>
),
// style: props.style,
// ...validateState,
style: props.style,
labelStyle:props.labelStyle,
...validateState,
});
})
.setPropertyViewFn((children) => {
Expand Down Expand Up @@ -335,6 +338,9 @@ let AutoCompleteCompBase = (function () {
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<Section name={sectionNames.labelStyle}>
{children.labelStyle.getPropertyView()}
</Section>
</>
);
})
Expand Down
63 changes: 38 additions & 25 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
import { styleControl } from "comps/controls/styleControl";
import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
import { withMethodExposing } from "../../generators/withMethodExposing";
import {
disabledPropertyView,
Expand Down Expand Up @@ -72,6 +72,7 @@ const commonChildren = {
minuteStep: RangeControl.closed(1, 60, 1),
secondStep: RangeControl.closed(1, 60, 1),
style: styleControl(DateTimeStyle),
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
...validationChildren,
viewRef: RefControl<CommonPickerMethods>,
Expand Down Expand Up @@ -159,12 +160,13 @@ export type DateCompViewProps = Pick<

export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
let time = dayjs(null);
if(props.value.value !== '') {
if (props.value.value !== '') {
time = dayjs(props.value.value, DateParser);
}
return props.label({
required: props.required,
style: props.style,
labelStyle:props.labelStyle,
children: (
<DateUIView
viewRef={props.viewRef}
Expand Down Expand Up @@ -212,11 +214,11 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {

{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.validation}>
{requiredPropertyView(children)}
{dateValidationFields(children)}
{timeValidationFields(children)}
{children.customRule.propertyView({})}
</Section>
{requiredPropertyView(children)}
{dateValidationFields(children)}
{timeValidationFields(children)}
{children.customRule.propertyView({})}
</Section>
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
Expand All @@ -234,19 +236,24 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
{children.placeholder.propertyView({ label: trans("date.placeholderText") })}
</Section>
)}

{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.advanced}>
<><Section name={sectionNames.advanced}>
{timeFields(children, isMobile)}
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
</Section></>
)}
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<Section name={sectionNames.labelStyle}>
{children.labelStyle.getPropertyView()}
</Section>
</>
)}
</>
);
Expand All @@ -264,10 +271,10 @@ export const dateRangeControl = (function () {
return new UICompBuilder(childrenMap, (props) => {
let start = dayjs(null);
let end = dayjs(null);
if(props.start.value !== '') {
if (props.start.value !== '') {
start = dayjs(props.start.value, DateParser);
}
if(props.end.value !== '') {
if (props.end.value !== '') {
end = dayjs(props.end.value, DateParser);
}

Expand Down Expand Up @@ -310,12 +317,13 @@ export const dateRangeControl = (function () {
return props.label({
required: props.required,
style: props.style,
labelStyle:props.labelStyle,
children: children,
...(startResult.validateStatus !== "success"
? startResult
: endResult.validateStatus !== "success"
? endResult
: startResult),
? endResult
: startResult),
});
})
.setPropertyViewFn((children) => {
Expand All @@ -337,11 +345,11 @@ export const dateRangeControl = (function () {

{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.validation}>
{requiredPropertyView(children)}
{dateValidationFields(children)}
{timeValidationFields(children)}
{children.customRule.propertyView({})}
</Section>
{requiredPropertyView(children)}
{dateValidationFields(children)}
{timeValidationFields(children)}
{children.customRule.propertyView({})}
</Section>
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
Expand All @@ -358,7 +366,7 @@ export const dateRangeControl = (function () {
{children.placeholder.propertyView({ label: trans("date.placeholderText") })}
</Section>
)}

{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.advanced}>
{timeFields(children, isMobile)}
Expand All @@ -368,9 +376,14 @@ export const dateRangeControl = (function () {
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<Section name={sectionNames.labelStyle}>
{children.labelStyle.getPropertyView()}
</Section>
</>
)}

</>
Expand Down
9 changes: 8 additions & 1 deletion client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
import { RefControl } from "../../controls/refControl";
import { styleControl } from "comps/controls/styleControl";
import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import {
disabledPropertyView,
hiddenPropertyView,
Expand Down Expand Up @@ -258,6 +258,7 @@ const childrenMap = {
onEvent: InputEventHandlerControl,
viewRef: RefControl<HTMLInputElement>,
style: styleControl(InputLikeStyle),
labelStyle:styleControl(LabelStyle),
prefixIcon: IconControl,

// validation
Expand Down Expand Up @@ -380,6 +381,7 @@ let NumberInputTmpComp = (function () {
required: props.required,
children: <CustomInputNumber {...props} />,
style: props.style,
labelStyle:props.labelStyle,
...validate(props),
});
})
Expand Down Expand Up @@ -427,9 +429,14 @@ let NumberInputTmpComp = (function () {
)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<Section name={sectionNames.labelStyle}>
{children.labelStyle.getPropertyView()}
</Section>
</>
)}
</>
))
Expand Down
3 changes: 2 additions & 1 deletion client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const RangeSliderBasicComp = (function () {
return new UICompBuilder(childrenMap, (props) => {
return props.label({
style: props.style,
labelStyle: props.labelStyle,
children: (
<SliderWrapper
onMouseDown={(e: any) => {
Expand All @@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () {
range={true}
value={[props.start.value, props.end.value]}
$style={props.style}
style={{margin: 0}}
style={{ margin: 0 }}
onChange={([start, end]) => {
props.start.onChange(start);
props.end.onChange(end);
Expand Down
1 change: 1 addition & 0 deletions client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const SliderBasicComp = (function () {
return new UICompBuilder(childrenMap, (props) => {
return props.label({
style: props.style,
labelStyle:props.labelStyle,
children: (
<SliderWrapper
onMouseDown={(e: any) => {
Expand Down
6 changes: 5 additions & 1 deletion client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
import { Section, sectionNames } from "lowcoder-design";
import { RecordConstructorToComp } from "lowcoder-core";
import { styleControl } from "comps/controls/styleControl";
import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
import styled, { css } from "styled-components";
import { default as Slider } from "antd/es/slider";
import { darkenColor, fadeColor } from "lowcoder-design";
Expand Down Expand Up @@ -67,6 +67,7 @@ export const SliderChildren = {
disabled: BoolCodeControl,
onEvent: ChangeEventHandlerControl,
style: styleControl(SliderStyle),
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
prefixIcon: IconControl,
suffixIcon: IconControl,
};
Expand Down Expand Up @@ -96,6 +97,9 @@ export const SliderPropertyView = (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<Section name={sectionNames.labelStyle}>
{children.labelStyle.getPropertyView()}
</Section>
</>
)}
</>
Expand Down
31 changes: 19 additions & 12 deletions client/packages/lowcoder/src/comps/comps/ratingComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
import { styleControl } from "comps/controls/styleControl";
import { RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
import { migrateOldData } from "comps/generators/simpleGenerators";
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
Expand Down Expand Up @@ -44,6 +44,7 @@ const RatingBasicComp = (function () {
disabled: BoolCodeControl,
onEvent: eventHandlerControl(EventOptions),
style: migrateOldData(styleControl(RatingStyle), fixOldData),
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
...formDataChildren,
};
return new UICompBuilder(childrenMap, (props) => {
Expand All @@ -64,6 +65,7 @@ const RatingBasicComp = (function () {

return props.label({
style: props.style,
labelStyle: props.labelStyle,
children: (
<RateStyled
count={props.max}
Expand Down Expand Up @@ -93,14 +95,14 @@ const RatingBasicComp = (function () {

{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<><Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
{hiddenPropertyView(children)}
</Section>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
{hiddenPropertyView(children)}
</Section>
<Section name={sectionNames.advanced}>
{children.allowHalf.propertyView({
label: trans("rating.allowHalf"),
})}
{children.allowHalf.propertyView({
label: trans("rating.allowHalf"),
})}
</Section>
</>
)}
Expand All @@ -110,9 +112,14 @@ const RatingBasicComp = (function () {
)}

{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
<Section name={sectionNames.labelStyle}>
{children.labelStyle.getPropertyView()}
</Section>
</>
)}
</>
);
Expand Down Expand Up @@ -144,6 +151,6 @@ const getStyle = (style: RatingStyleType) => {
`;
};

export const RateStyled = styled(Rate)<{ $style: RatingStyleType }>`
export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>`
${(props) => props.$style && getStyle(props.$style)}
`;
1 change: 1 addition & 0 deletions client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ let CascaderBasicComp = (function () {
return new UICompBuilder(childrenMap, (props) => {
return props.label({
style: props.style,
labelStyle:props.labelStyle,
children: (
<CascaderStyle
ref={props.viewRef}
Expand Down
Loading