Skip to content

Commit 33f2ea7

Browse files
author
Aqib Mirza
committed
feat: margin padding changes
1 parent 94f4478 commit 33f2ea7

File tree

11 files changed

+332
-10
lines changed

11 files changed

+332
-10
lines changed

‎client/packages/lowcoder-design/src/icons/icon-compress.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/icon-expand.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,3 +284,5 @@ export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete
284284
export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg";
285285
export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg";
286286
export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";
287+
export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg";
288+
export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"

‎client/packages/lowcoder/src/api/commonSettingApi.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export interface ThemeDetail {
4444
primarySurface: string; // comp bg-color
4545
borderRadius: string;
4646
chart?: string;
47+
margin?: string;
48+
padding?: string;
4749
}
4850

4951
export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -60,6 +62,10 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
6062
return trans("themeDetail.primarySurface");
6163
case "borderRadius":
6264
return trans("themeDetail.borderRadius");
65+
case "margin":
66+
return trans("style.margin");
67+
case "padding":
68+
return trans("style.padding");
6369
}
6470
return "";
6571
}
@@ -71,6 +77,8 @@ export function isThemeColorKey(key: string) {
7177
case "textLight":
7278
case "canvas":
7379
case "primarySurface":
80+
case "margin":
81+
case "padding":
7482
return true;
7583
}
7684
return false;

‎client/packages/lowcoder/src/components/ColorPicker.tsx‎

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import _ from "lodash";
22
import { useEffect, useState } from "react";
3-
import { ConfigItem, Radius } from "../pages/setting/theme/styledComponents";
3+
import { ConfigItem, Radius, Margin, Padding } from "../pages/setting/theme/styledComponents";
44
import { isValidColor, toHex } from "components/colorSelect/colorUtils";
55
import { ColorSelect } from "components/colorSelect";
66
import { TacoInput } from "components/tacoInput";
77

8+
import { ExpandIcon, CompressIcon } from "lowcoder-design";
9+
810
export type configChangeParams = {
911
colorKey: string;
1012
color?: string;
1113
radius?: string;
1214
chart?: string;
15+
margin?: string;
16+
padding?: string;
1317
};
1418

1519
type ColorConfigProps = {
@@ -21,6 +25,8 @@ type ColorConfigProps = {
2125
radius?: string;
2226
configChange: (params: configChangeParams) => void;
2327
showVarName?: boolean;
28+
margin?: string;
29+
padding?: string;
2430
};
2531

2632
export default function ColorPicker(props: ColorConfigProps) {
@@ -32,10 +38,16 @@ export default function ColorPicker(props: ColorConfigProps) {
3238
radius: defaultRadius,
3339
configChange,
3440
showVarName = true,
41+
margin: defaultMargin,
42+
padding: defaultPadding,
3543
} = props;
3644
const configChangeWithDebounce = _.debounce(configChange, 0);
3745
const [color, setColor] = useState(defaultColor);
3846
const [radius, setRadius] = useState(defaultRadius);
47+
48+
const [margin, setMargin] = useState(defaultMargin);
49+
const [padding, setPadding] = useState(defaultPadding);
50+
3951
const varName = `(${colorKey})`;
4052

4153
const colorInputBlur = () => {
@@ -62,6 +74,35 @@ export default function ColorPicker(props: ColorConfigProps) {
6274
configChange({ colorKey, radius: result });
6375
};
6476

77+
const marginInputBlur = (margin: string) => {
78+
let result = "";
79+
if (!margin || Number(margin) === 0) {
80+
result = "0";
81+
} else if (/^[0-9]+$/.test(margin)) {
82+
result = Number(margin) + "px";
83+
} else if (/^[0-9]+(px|%)$/.test(margin)) {
84+
result = margin;
85+
} else {
86+
result = "3px";
87+
}
88+
setMargin(result);
89+
configChange({ colorKey, margin: result });
90+
};
91+
const paddingInputBlur = (padding: string) => {
92+
let result = "";
93+
if (!padding || Number(padding) === 0) {
94+
result = "0";
95+
} else if (/^[0-9]+$/.test(padding)) {
96+
result = Number(padding) + "px";
97+
} else if (/^[0-9]+(px|%)$/.test(padding)) {
98+
result = padding;
99+
} else {
100+
result = "3px";
101+
}
102+
setPadding(result);
103+
configChange({ colorKey, padding: result });
104+
};
105+
65106
useEffect(() => {
66107
if (color && isValidColor(color)) {
67108
configChangeWithDebounce({ colorKey, color });
@@ -77,6 +118,14 @@ export default function ColorPicker(props: ColorConfigProps) {
77118
setRadius(defaultRadius);
78119
}, [defaultRadius]);
79120

121+
useEffect(() => {
122+
setMargin(defaultMargin);
123+
}, [defaultMargin]);
124+
125+
useEffect(() => {
126+
setPadding(defaultPadding);
127+
}, [defaultPadding]);
128+
80129
return (
81130
<ConfigItem className={props.className}>
82131
<div className="text-desc">
@@ -85,7 +134,9 @@ export default function ColorPicker(props: ColorConfigProps) {
85134
</div>
86135
<div className="desc">{desc}</div>
87136
</div>
88-
{colorKey !== "borderRadius" ? (
137+
{colorKey !== "borderRadius" &&
138+
colorKey !== "margin" &&
139+
colorKey !== "padding" && (
89140
<div className="config-input">
90141
<ColorSelect
91142
changeColor={_.debounce(setColor, 500, {
@@ -102,7 +153,8 @@ export default function ColorPicker(props: ColorConfigProps) {
102153
onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
103154
/>
104155
</div>
105-
) : (
156+
)}
157+
{colorKey === "borderRadius" && (
106158
<div className="config-input">
107159
<Radius radius={defaultRadius || "0"}>
108160
<div>
@@ -117,6 +169,42 @@ export default function ColorPicker(props: ColorConfigProps) {
117169
/>
118170
</div>
119171
)}
172+
{colorKey === "margin" && (
173+
<div className="config-input">
174+
<Margin margin={defaultMargin || "3px"}>
175+
<div>
176+
<ExpandIcon title="" />
177+
</div>
178+
</Margin>
179+
<TacoInput
180+
value={margin}
181+
onChange={(e) => setMargin(e.target.value)}
182+
onBlur={(e) => marginInputBlur(e.target.value)}
183+
onKeyUp={(e) =>
184+
e.nativeEvent.key === "Enter" &&
185+
marginInputBlur(e.currentTarget.value)
186+
}
187+
/>
188+
</div>
189+
)}
190+
{colorKey === "padding" && (
191+
<div className="config-input">
192+
<Padding padding={defaultPadding || "3px"}>
193+
<div>
194+
<CompressIcon title="" />
195+
</div>
196+
</Padding>
197+
<TacoInput
198+
value={padding}
199+
onChange={(e) => setPadding(e.target.value)}
200+
onBlur={(e) => paddingInputBlur(e.target.value)}
201+
onKeyUp={(e) =>
202+
e.nativeEvent.key === "Enter" &&
203+
paddingInputBlur(e.currentTarget.value)
204+
}
205+
/>
206+
</div>
207+
)}
120208
</ConfigItem>
121209
);
122210
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { StringControl } from "comps/controls/codeControl";
2+
import { withDefault } from "comps/generators";
3+
import { MultiCompBuilder } from "comps/generators/multi";
4+
import { trans } from "i18n";
5+
import styled from "styled-components";
6+
7+
const MarginContainer = styled.div<{}>`
8+
display: flex;
9+
justify-content: space-between;
10+
.hUXIwu {
11+
flex: 0 0 36px;
12+
}
13+
.fgbLEe {
14+
margin-right: 5px;
15+
margin-bottom: 10px;
16+
}
17+
`;
18+
export const MarginControl = (function () {
19+
const childrenMap = {
20+
left: withDefault(StringControl, ""),
21+
right: withDefault(StringControl, ""),
22+
top: withDefault(StringControl, ""),
23+
bottom: withDefault(StringControl, ""),
24+
};
25+
return new MultiCompBuilder(childrenMap, (props) => props)
26+
.setPropertyViewFn((children) => (
27+
<>
28+
{children.top.propertyView({
29+
label: trans("componentDoc.top"),
30+
})}
31+
{children.right.propertyView({
32+
label: trans("componentDoc.right"),
33+
})}
34+
{children.bottom.propertyView({
35+
label: trans("componentDoc.bottom"),
36+
})}
37+
{children.left.propertyView({
38+
label: trans("componentDoc.left"),
39+
})}
40+
</>
41+
))
42+
.build();
43+
})();

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { StringControl } from "comps/controls/codeControl";
2+
import { withDefault } from "comps/generators";
3+
import { MultiCompBuilder } from "comps/generators/multi";
4+
import { trans } from "i18n";
5+
import { Section } from "lowcoder-design";
6+
import styled from "styled-components";
7+
8+
const PaddingContainer = styled.div<{}>`
9+
display: flex;
10+
justify-content: space-between;
11+
.hUXIwu {
12+
flex: 0 0 36px;
13+
}
14+
.fgbLEe {
15+
margin-right: 5px;
16+
margin-bottom: 10px;
17+
}
18+
`;
19+
export const PaddingControl = (function () {
20+
const childrenMap = {
21+
left: withDefault(StringControl, ""),
22+
right: withDefault(StringControl, ""),
23+
top: withDefault(StringControl, ""),
24+
bottom: withDefault(StringControl, ""),
25+
};
26+
return new MultiCompBuilder(childrenMap, (props) => props)
27+
.setPropertyViewFn((children) => (
28+
<>
29+
{children.top.propertyView({
30+
label: trans("componentDoc.top"),
31+
})}
32+
{children.right.propertyView({
33+
label: trans("componentDoc.right"),
34+
})}
35+
{children.bottom.propertyView({
36+
label: trans("componentDoc.bottom"),
37+
})}
38+
{children.left.propertyView({
39+
label: trans("componentDoc.left"),
40+
})}
41+
</>
42+
))
43+
.build();
44+
})();

0 commit comments

Comments
 (0)