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

Commit 83b5d43

Browse files
Merge pull request #278 from aaron1604/feat/margin-padding
Feat: margin padding
2 parents 11cf265 + 6a20c91 commit 83b5d43

39 files changed

+711
-80
lines changed
Lines changed: 4 additions & 0 deletions
Loading[フレーム]
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,4 +284,6 @@ 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"
287289
export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza

‎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
gridColumns?: string; //Added By Aqib Mirza
4850
}
4951

@@ -61,6 +63,10 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
6163
return trans("themeDetail.primarySurface");
6264
case "borderRadius":
6365
return trans("themeDetail.borderRadius");
66+
case "margin":
67+
return trans("style.margin");
68+
case "padding":
69+
return trans("style.padding");
6470
//Added By Aqib Mirza
6571
case "gridColumns":
6672
return trans("themeDetail.gridColumns");
@@ -75,6 +81,8 @@ export function isThemeColorKey(key: string) {
7581
case "textLight":
7682
case "canvas":
7783
case "primarySurface":
84+
case "margin":
85+
case "padding":
7886
case "gridColumns": //Added By Aqib Mirza
7987
return true;
8088
}

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

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import _ from "lodash";
22
import { useEffect, useState } from "react";
3-
import { ConfigItem, Radius, GridColumns } from "../pages/setting/theme/styledComponents";
3+
import { ConfigItem, Radius, Margin,Padding,GridColumns } 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
import { TableCellsIcon as GridIcon } from "lowcoder-design"; //Added By Aqib Mirza
88

9+
import { ExpandIcon, CompressIcon } from "lowcoder-design";
10+
911
export type configChangeParams = {
1012
colorKey: string;
1113
color?: string;
1214
radius?: string;
1315
chart?: string;
16+
margin?: string;
17+
padding?: string;
1418
gridColumns?: string; //Added By Aqib Mirza
1519
};
1620

@@ -23,6 +27,8 @@ type ColorConfigProps = {
2327
radius?: string;
2428
configChange: (params: configChangeParams) => void;
2529
showVarName?: boolean;
30+
margin?: string;
31+
padding?: string;
2632
gridColumns?: string; //Added By Aqib Mirza
2733
};
2834

@@ -35,12 +41,16 @@ export default function ColorPicker(props: ColorConfigProps) {
3541
radius: defaultRadius,
3642
configChange,
3743
showVarName = true,
44+
margin: defaultMargin,
45+
padding: defaultPadding,
3846
gridColumns: defaultGridColumns, //Added By Aqib Mirza
3947
} = props;
4048
const configChangeWithDebounce = _.debounce(configChange, 0);
4149
const [color, setColor] = useState(defaultColor);
4250
const [radius, setRadius] = useState(defaultRadius);
4351

52+
const [margin, setMargin] = useState(defaultMargin);
53+
const [padding, setPadding] = useState(defaultPadding);
4454
const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
4555

4656
const varName = `(${colorKey})`;
@@ -69,6 +79,35 @@ export default function ColorPicker(props: ColorConfigProps) {
6979
configChange({ colorKey, radius: result });
7080
};
7181

82+
const marginInputBlur = (margin: string) => {
83+
let result = "";
84+
if (!margin || Number(margin) === 0) {
85+
result = "0";
86+
} else if (/^[0-9]+$/.test(margin)) {
87+
result = Number(margin) + "px";
88+
} else if (/^[0-9]+(px|%)$/.test(margin)) {
89+
result = margin;
90+
} else {
91+
result = "3px";
92+
}
93+
setMargin(result);
94+
configChange({ colorKey, margin: result });
95+
};
96+
const paddingInputBlur = (padding: string) => {
97+
let result = "";
98+
if (!padding || Number(padding) === 0) {
99+
result = "0";
100+
} else if (/^[0-9]+$/.test(padding)) {
101+
result = Number(padding) + "px";
102+
} else if (/^[0-9]+(px|%)$/.test(padding)) {
103+
result = padding;
104+
} else {
105+
result = "3px";
106+
}
107+
setPadding(result);
108+
configChange({ colorKey, padding: result });
109+
};
110+
72111
//Added By Aqib Mirza
73112

74113
const gridColumnsInputBlur = (gridColumns: string) => {
@@ -99,6 +138,13 @@ export default function ColorPicker(props: ColorConfigProps) {
99138
setRadius(defaultRadius);
100139
}, [defaultRadius]);
101140

141+
useEffect(() => {
142+
setMargin(defaultMargin);
143+
}, [defaultMargin]);
144+
145+
useEffect(() => {
146+
setPadding(defaultPadding);
147+
}, [defaultPadding]);
102148
// Added By Aqib Mirza
103149
useEffect(() => {
104150
setGridColumns(defaultGridColumns);
@@ -113,7 +159,9 @@ export default function ColorPicker(props: ColorConfigProps) {
113159
</div>
114160
<div className="desc">{desc}</div>
115161
</div>
116-
{colorKey !== "borderRadius" &&
162+
{colorKey !== "borderRadius" &&
163+
colorKey !== "margin" &&
164+
colorKey !== "padding" &&
117165
colorKey !== "gridColumns" && (
118166
<div className="config-input">
119167
<ColorSelect
@@ -147,6 +195,42 @@ export default function ColorPicker(props: ColorConfigProps) {
147195
/>
148196
</div>
149197
)}
198+
{colorKey === "margin" && (
199+
<div className="config-input">
200+
<Margin margin={defaultMargin || "3px"}>
201+
<div>
202+
<ExpandIcon title="" />
203+
</div>
204+
</Margin>
205+
<TacoInput
206+
value={margin}
207+
onChange={(e) => setMargin(e.target.value)}
208+
onBlur={(e) => marginInputBlur(e.target.value)}
209+
onKeyUp={(e) =>
210+
e.nativeEvent.key === "Enter" &&
211+
marginInputBlur(e.currentTarget.value)
212+
}
213+
/>
214+
</div>
215+
)}
216+
{colorKey === "padding" && (
217+
<div className="config-input">
218+
<Padding padding={defaultPadding || "3px"}>
219+
<div>
220+
<CompressIcon title="" />
221+
</div>
222+
</Padding>
223+
<TacoInput
224+
value={padding}
225+
onChange={(e) => setPadding(e.target.value)}
226+
onBlur={(e) => paddingInputBlur(e.target.value)}
227+
onKeyUp={(e) =>
228+
e.nativeEvent.key === "Enter" &&
229+
paddingInputBlur(e.currentTarget.value)
230+
}
231+
/>
232+
</div>
233+
)}
150234
{colorKey === "gridColumns" && (
151235
<div className="config-input">
152236
<GridColumns gridColumns={defaultGridColumns || "24"}>

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1212
const activeColor = genActiveColor(buttonStyle.background);
1313
return css`
1414
border-radius: ${buttonStyle.radius};
15+
margin: ${buttonStyle.margin};
16+
padding: ${buttonStyle.padding};
1517
&:not(:disabled) {
1618
// click animation color
1719
--antd-wave-shadow-color: ${buttonStyle.border};
1820
border-color: ${buttonStyle.border};
1921
color: ${buttonStyle.text};
2022
background-color: ${buttonStyle.background};
2123
border-radius: ${buttonStyle.radius};
24+
margin: ${buttonStyle.margin};
25+
padding: ${buttonStyle.padding};
2226
2327
:hover,
2428
:focus {
@@ -37,12 +41,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
3741
: buttonStyle.border};
3842
}
3943
}
44+
4045
`;
4146
}
4247

4348
export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
4449
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
45-
width: 100%;
50+
width: -webkit-fill-available;
51+
height: auto;
4652
display: inline-flex;
4753
justify-content: center;
4854
align-items: center;

‎client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,23 +29,30 @@ const DropdownButton = styled(Dropdown.Button)`
2929

3030
const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
3131
width: calc(100% - 32px);
32-
32+
${(props) => `margin: ${props.$buttonStyle.margin};`}
33+
margin-right: 0;
3334
.ant-btn {
3435
${(props) => getButtonStyle(props.$buttonStyle)}
36+
margin: 0 !important;
37+
height: 100%;
3538
&.ant-btn-default {
39+
margin: 0 !important;
3640
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
3741
}
3842
width: 100%;
3943
}
4044
`;
4145

4246
const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
43-
width: 32px;
47+
// width: 32px;
48+
${(props) => `margin: ${props.$buttonStyle.margin};`}
4449
margin-left: -1px;
45-
4650
.ant-btn {
4751
${(props) => getButtonStyle(props.$buttonStyle)}
52+
margin: 0 !important;
53+
height: 100%;
4854
&.ant-btn-default {
55+
margin: 0 !important;
4956
${(props) => `border-radius: 0 ${props.$buttonStyle.radius} ${props.$buttonStyle.radius} 0;`}
5057
}
5158
width: 100%;
@@ -69,6 +76,7 @@ const DropdownTmpComp = (function () {
6976
.map((option, index) => ({
7077
title: option.label,
7178
label: option.label,
79+
style: {padding: props.style.padding},
7280
key: option.label + " - " + index,
7381
disabled: option.disabled,
7482
icon: hasIcon && <span>{option.prefixIcon}</span>,
@@ -83,6 +91,7 @@ const DropdownTmpComp = (function () {
8391

8492
return (
8593
<ButtonCompWrapper disabled={props.disabled}>
94+
{console.log("props,", props)}
8695
{props.onlyMenu ? (
8796
<Dropdown disabled={props.disabled} overlay={menu}>
8897
<Button100 $buttonStyle={props.style} disabled={props.disabled}>

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { hasIcon } from "comps/utils";
2121
import { RefControl } from "comps/controls/refControl";
2222

2323
const Link = styled(Button)<{ $style: LinkStyleType }>`
24-
${(props) => `color: ${props.$style.text};`}
24+
${(props) => `color: ${props.$style.text};margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
2525
&.ant-btn {
2626
display: inline-flex;
2727
align-items: center;

‎client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const disabledTime = (min: string, max: string) => {
6363
export const getStyle = (style: DateTimeStyleType) => {
6464
return css`
6565
border-radius: ${style.radius};
66-
66+
padding:${style.padding};
6767
&:not(.ant-picker-disabled) {
6868
border-color: ${style.border};
6969
background-color: ${style.background};

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
88
import _ from "lodash";
99
import styled from "styled-components";
1010
import { styleControl } from "comps/controls/styleControl";
11-
import { DividerStyle, DividerStyleType } from "comps/controls/styleControlConstants";
11+
import { DividerStyle, DividerStyleType,heightCalculator,widthCalculator } from "comps/controls/styleControlConstants";
1212
import { migrateOldData } from "comps/generators/simpleGenerators";
1313
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1414
import { trans } from "i18n";
@@ -22,6 +22,17 @@ const StyledDivider = styled(Divider)<IProps>`
2222
display: flex;
2323
align-items: center;
2424
}
25+
min-width: 0;
26+
width: ${(props) => {
27+
return widthCalculator(props.$style.margin);
28+
}};
29+
min-height: ${(props) => {
30+
return heightCalculator(props.$style.margin);
31+
}};
32+
margin: ${(props) => {
33+
return props.$style.margin;
34+
}};
35+
padding: ${(props) => props.$style.padding};
2536
border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
2637
2738
&.ant-divider-horizontal.ant-divider-with-text {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /