From 33f2ea773fa5c7b2e4776e2be4e1be1df61e78d5 Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Mon, 10 Jul 2023 18:51:21 +0530 Subject: [PATCH 1/4] feat: margin padding changes --- .../src/icons/icon-compress.svg | 4 + .../lowcoder-design/src/icons/icon-expand.svg | 4 + .../lowcoder-design/src/icons/index.ts | 2 + .../lowcoder/src/api/commonSettingApi.ts | 8 ++ .../lowcoder/src/components/ColorPicker.tsx | 94 ++++++++++++++++++- .../src/comps/controls/marginControl.tsx | 43 +++++++++ .../src/comps/controls/paddingControl.tsx | 44 +++++++++ .../comps/controls/styleControlConstants.tsx | 82 +++++++++++++++- .../packages/lowcoder/src/i18n/locales/en.ts | 10 ++ .../src/pages/setting/theme/detail/index.tsx | 30 +++++- .../pages/setting/theme/styledComponents.tsx | 21 +++++ 11 files changed, 332 insertions(+), 10 deletions(-) create mode 100644 client/packages/lowcoder-design/src/icons/icon-compress.svg create mode 100644 client/packages/lowcoder-design/src/icons/icon-expand.svg create mode 100644 client/packages/lowcoder/src/comps/controls/marginControl.tsx create mode 100644 client/packages/lowcoder/src/comps/controls/paddingControl.tsx diff --git a/client/packages/lowcoder-design/src/icons/icon-compress.svg b/client/packages/lowcoder-design/src/icons/icon-compress.svg new file mode 100644 index 000000000..7c93fdcb0 --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/icon-compress.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/packages/lowcoder-design/src/icons/icon-expand.svg b/client/packages/lowcoder-design/src/icons/icon-expand.svg new file mode 100644 index 000000000..3bd362686 --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/icon-expand.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index 8a3a9c6a2..532d23d0d 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -284,3 +284,5 @@ export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg"; export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg"; export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg"; +export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg"; +export { ReactComponent as CompressIcon } from "icons/icon-compress.svg" \ No newline at end of file diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 32228055f..00f185898 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -44,6 +44,8 @@ export interface ThemeDetail { primarySurface: string; // comp bg-color borderRadius: string; chart?: string; + margin?: string; + padding?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { @@ -60,6 +62,10 @@ export function getThemeDetailName(key: keyof ThemeDetail) { return trans("themeDetail.primarySurface"); case "borderRadius": return trans("themeDetail.borderRadius"); + case "margin": + return trans("style.margin"); + case "padding": + return trans("style.padding"); } return ""; } @@ -71,6 +77,8 @@ export function isThemeColorKey(key: string) { case "textLight": case "canvas": case "primarySurface": + case "margin": + case "padding": return true; } return false; diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx index 1d8dddec1..b45dd0c33 100644 --- a/client/packages/lowcoder/src/components/ColorPicker.tsx +++ b/client/packages/lowcoder/src/components/ColorPicker.tsx @@ -1,15 +1,19 @@ import _ from "lodash"; import { useEffect, useState } from "react"; -import { ConfigItem, Radius } from "../pages/setting/theme/styledComponents"; +import { ConfigItem, Radius, Margin, Padding } from "../pages/setting/theme/styledComponents"; import { isValidColor, toHex } from "components/colorSelect/colorUtils"; import { ColorSelect } from "components/colorSelect"; import { TacoInput } from "components/tacoInput"; +import { ExpandIcon, CompressIcon } from "lowcoder-design"; + export type configChangeParams = { colorKey: string; color?: string; radius?: string; chart?: string; + margin?: string; + padding?: string; }; type ColorConfigProps = { @@ -21,6 +25,8 @@ type ColorConfigProps = { radius?: string; configChange: (params: configChangeParams) => void; showVarName?: boolean; + margin?: string; + padding?: string; }; export default function ColorPicker(props: ColorConfigProps) { @@ -32,10 +38,16 @@ export default function ColorPicker(props: ColorConfigProps) { radius: defaultRadius, configChange, showVarName = true, + margin: defaultMargin, + padding: defaultPadding, } = props; const configChangeWithDebounce = _.debounce(configChange, 0); const [color, setColor] = useState(defaultColor); const [radius, setRadius] = useState(defaultRadius); + + const [margin, setMargin] = useState(defaultMargin); + const [padding, setPadding] = useState(defaultPadding); + const varName = `(${colorKey})`; const colorInputBlur = () => { @@ -62,6 +74,35 @@ export default function ColorPicker(props: ColorConfigProps) { configChange({ colorKey, radius: result }); }; + const marginInputBlur = (margin: string) => { + let result = ""; + if (!margin || Number(margin) === 0) { + result = "0"; + } else if (/^[0-9]+$/.test(margin)) { + result = Number(margin) + "px"; + } else if (/^[0-9]+(px|%)$/.test(margin)) { + result = margin; + } else { + result = "3px"; + } + setMargin(result); + configChange({ colorKey, margin: result }); + }; + const paddingInputBlur = (padding: string) => { + let result = ""; + if (!padding || Number(padding) === 0) { + result = "0"; + } else if (/^[0-9]+$/.test(padding)) { + result = Number(padding) + "px"; + } else if (/^[0-9]+(px|%)$/.test(padding)) { + result = padding; + } else { + result = "3px"; + } + setPadding(result); + configChange({ colorKey, padding: result }); + }; + useEffect(() => { if (color && isValidColor(color)) { configChangeWithDebounce({ colorKey, color }); @@ -77,6 +118,14 @@ export default function ColorPicker(props: ColorConfigProps) { setRadius(defaultRadius); }, [defaultRadius]); + useEffect(() => { + setMargin(defaultMargin); + }, [defaultMargin]); + + useEffect(() => { + setPadding(defaultPadding); + }, [defaultPadding]); + return (
@@ -85,7 +134,9 @@ export default function ColorPicker(props: ColorConfigProps) {
{desc}
- {colorKey !== "borderRadius" ? ( + {colorKey !== "borderRadius" && + colorKey !== "margin" && + colorKey !== "padding" && (
e.nativeEvent.key === "Enter" && colorInputBlur()} />
- ) : ( + )} + {colorKey === "borderRadius" && (
@@ -117,6 +169,42 @@ export default function ColorPicker(props: ColorConfigProps) { />
)} + {colorKey === "margin" && ( +
+ +
+ +
+ + setMargin(e.target.value)} + onBlur={(e) => marginInputBlur(e.target.value)} + onKeyUp={(e) => + e.nativeEvent.key === "Enter" && + marginInputBlur(e.currentTarget.value) + } + /> +
+ )} + {colorKey === "padding" && ( +
+ +
+ +
+ + setPadding(e.target.value)} + onBlur={(e) => paddingInputBlur(e.target.value)} + onKeyUp={(e) => + e.nativeEvent.key === "Enter" && + paddingInputBlur(e.currentTarget.value) + } + /> +
+ )} ); } diff --git a/client/packages/lowcoder/src/comps/controls/marginControl.tsx b/client/packages/lowcoder/src/comps/controls/marginControl.tsx new file mode 100644 index 000000000..0c1943519 --- /dev/null +++ b/client/packages/lowcoder/src/comps/controls/marginControl.tsx @@ -0,0 +1,43 @@ +import { StringControl } from "comps/controls/codeControl"; +import { withDefault } from "comps/generators"; +import { MultiCompBuilder } from "comps/generators/multi"; +import { trans } from "i18n"; +import styled from "styled-components"; + +const MarginContainer = styled.div<{}>` + display: flex; + justify-content: space-between; + .hUXIwu { + flex: 0 0 36px; + } + .fgbLEe { + margin-right: 5px; + margin-bottom: 10px; + } +`; +export const MarginControl = (function () { + const childrenMap = { + left: withDefault(StringControl, ""), + right: withDefault(StringControl, ""), + top: withDefault(StringControl, ""), + bottom: withDefault(StringControl, ""), + }; + return new MultiCompBuilder(childrenMap, (props) => props) + .setPropertyViewFn((children) => ( + <> + {children.top.propertyView({ + label: trans("componentDoc.top"), + })} + {children.right.propertyView({ + label: trans("componentDoc.right"), + })} + {children.bottom.propertyView({ + label: trans("componentDoc.bottom"), + })} + {children.left.propertyView({ + label: trans("componentDoc.left"), + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder/src/comps/controls/paddingControl.tsx b/client/packages/lowcoder/src/comps/controls/paddingControl.tsx new file mode 100644 index 000000000..d9db05108 --- /dev/null +++ b/client/packages/lowcoder/src/comps/controls/paddingControl.tsx @@ -0,0 +1,44 @@ +import { StringControl } from "comps/controls/codeControl"; +import { withDefault } from "comps/generators"; +import { MultiCompBuilder } from "comps/generators/multi"; +import { trans } from "i18n"; +import { Section } from "lowcoder-design"; +import styled from "styled-components"; + +const PaddingContainer = styled.div<{}>` + display: flex; + justify-content: space-between; + .hUXIwu { + flex: 0 0 36px; + } + .fgbLEe { + margin-right: 5px; + margin-bottom: 10px; + } +`; +export const PaddingControl = (function () { + const childrenMap = { + left: withDefault(StringControl, ""), + right: withDefault(StringControl, ""), + top: withDefault(StringControl, ""), + bottom: withDefault(StringControl, ""), + }; + return new MultiCompBuilder(childrenMap, (props) => props) + .setPropertyViewFn((children) => ( + <> + {children.top.propertyView({ + label: trans("componentDoc.top"), + })} + {children.right.propertyView({ + label: trans("componentDoc.right"), + })} + {children.bottom.propertyView({ + label: trans("componentDoc.bottom"), + })} + {children.left.propertyView({ + label: trans("componentDoc.left"), + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6672b6938..44de1f5fe 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -16,13 +16,19 @@ export type SimpleColorConfig = CommonColorConfig & { export type RadiusConfig = CommonColorConfig & { readonly radius: string; }; +export type MarginConfig = CommonColorConfig & { + readonly margin: string; +}; +export type PaddingConfig = CommonColorConfig & { + readonly padding: string; +}; export type DepColorConfig = CommonColorConfig & { readonly depName?: string; readonly depTheme?: keyof ThemeDetail; readonly depType?: DEP_TYPE; transformer: (color: string, ...rest: string[]) => string; }; -export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig; +export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig; export const defaultTheme: ThemeDetail = { primary: "#3377FF", @@ -31,6 +37,8 @@ export const defaultTheme: ThemeDetail = { canvas: "#F5F5F6", primarySurface: "#FFFFFF", borderRadius: "4px", + margin: "3px", + padding: "3px", }; export const SURFACE_COLOR = "#FFFFFF"; @@ -225,6 +233,17 @@ const RADIUS = { radius: "borderRadius", } as const; +const MARGIN = { + name: "margin", + label: trans("style.margin"), + margin: "margin", +} as const; +const PADDING = { + name: "padding", + label: trans("style.padding"), + padding: "padding", +} as const; + const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) => ({ name: "border", @@ -292,7 +311,7 @@ function getStaticBackground(color: string) { } as const; } -export const ButtonStyle = [...getBgBorderRadiusByBg("primary"), TEXT] as const; +export const ButtonStyle = [...getBgBorderRadiusByBg("primary"), TEXT, MARGIN, PADDING] as const; export const ToggleButtonStyle = [ getBackground("canvas"), @@ -305,6 +324,8 @@ export const ToggleButtonStyle = [ transformer: toSelf, }, RADIUS, + MARGIN, + PADDING, ] as const; export const TextStyle = [ @@ -316,6 +337,8 @@ export const TextStyle = [ transformer: toSelf, }, TEXT, + MARGIN, + PADDING, { name: "links", label: trans("style.links"), @@ -325,6 +348,15 @@ export const TextStyle = [ }, ] as const; +export const MarginStyle = [ + { + name: "margin", + label: trans("style.margin"), + margin: "margin", + }, +]; + + export const ContainerStyle = [ ...BG_STATIC_BORDER_RADIUS, HEADER_BACKGROUND, @@ -335,6 +367,8 @@ export const ContainerStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, + MARGIN, + PADDING, ] as const; export const SliderStyle = [ @@ -353,12 +387,16 @@ export const SliderStyle = [ color: SURFACE_COLOR, }, TRACK, + MARGIN, + PADDING, ] as const; export const InputLikeStyle = [ LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, + MARGIN, + PADDING, ...ACCENT_VALIDATE, ] as const; @@ -374,6 +412,8 @@ export const RatingStyle = [ label: trans("style.unchecked"), color: SECOND_SURFACE_COLOR, }, + MARGIN, + PADDING, ] as const; export const SwitchStyle = [ @@ -396,12 +436,16 @@ export const SwitchStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, + MARGIN, + PADDING, ] as const; export const SelectStyle = [ LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), TEXT, + MARGIN, + PADDING, ...ACCENT_VALIDATE, ] as const; @@ -409,6 +453,8 @@ const multiSelectCommon = [ LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), TEXT, + MARGIN, + PADDING, { name: "tags", label: trans("style.tags"), @@ -455,6 +501,8 @@ export const TabContainerStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, + MARGIN, + PADDING, ] as const; export const ModalStyle = getBgBorderRadiusByBg(); @@ -464,6 +512,8 @@ export const CascaderStyle = [ ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), TEXT, ACCENT, + MARGIN, + PADDING, ] as const; function checkAndUncheck() { @@ -502,6 +552,8 @@ export const CheckboxStyle = [ RADIUS, STATIC_TEXT, VALIDATE, + MARGIN, + PADDING, ] as const; export const RadioStyle = [ @@ -516,6 +568,8 @@ export const RadioStyle = [ }, STATIC_TEXT, VALIDATE, + MARGIN, + PADDING, ] as const; export const SegmentStyle = [ @@ -540,6 +594,8 @@ export const SegmentStyle = [ }, RADIUS, VALIDATE, + MARGIN, + PADDING, ] as const; export const TableStyle = [ @@ -600,20 +656,24 @@ export const TableStyle = [ }, ] as const; -export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT] as const; +export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const; export const FileViewerStyle = [ getStaticBackground("#FFFFFF"), getStaticBorder("#00000000"), RADIUS, + MARGIN, + PADDING, ] as const; -export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIUS] as const; +export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIUS, MARGIN, PADDING] as const; export const DateTimeStyle = [ LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, + MARGIN, + PADDING, ...ACCENT_VALIDATE, ] as const; @@ -625,6 +685,8 @@ export const LinkStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, + MARGIN, + PADDING, ] as const; export const DividerStyle = [ @@ -639,6 +701,8 @@ export const DividerStyle = [ depName: "color", transformer: handleToDividerText, }, + MARGIN, + PADDING, ] as const; export const ProgressStyle = [ @@ -652,6 +716,8 @@ export const ProgressStyle = [ TRACK, FILL, SUCCESS, + MARGIN, + PADDING, ] as const; export const NavigationStyle = [ @@ -665,9 +731,11 @@ export const NavigationStyle = [ ACCENT, getStaticBackground("#FFFFFF00"), getStaticBorder("#FFFFFF00"), + MARGIN, + PADDING, ] as const; -export const ImageStyle = [getStaticBorder("#00000000"), RADIUS] as const; +export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, MARGIN, PADDING] as const; export const ListViewStyle = BG_STATIC_BORDER_RADIUS; @@ -680,6 +748,8 @@ export const QRCodeStyle = [ label: trans("color"), color: "#000000", }, + MARGIN, + PADDING, ] as const; export const TreeStyle = [ @@ -757,6 +827,8 @@ export const SignatureStyle = [ label: trans("style.footerIcon"), color: "#222222", }, + MARGIN, + PADDING, ] as const; export const CarouselStyle = [getBackground("canvas")] as const; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 7829eb7d1..57be70859 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -279,6 +279,10 @@ export const en = { chart: "Chart style", chartDesc: "Input Echarts", echartsJson: "Theme JSON", + margin: "Margin", + marginDesc: "The default margin is typically used for most components", + padding: "Padding", + paddingDesc: "The default padding is typically used for most components", }, style: { resetTooltip: "Reset styles. Delete the input's value to reset an individual field.", @@ -321,6 +325,12 @@ export const en = { pen: "Pen", footerIcon: "Footer icon", tips: "Tips", + margin: "Margin", + padding: "Padding", + marginLeft: "Margin Left", + marginRight: "Margin Right", + marginTop: "Margin Top", + marginBottom: "Margin Bottom", }, export: { hiddenDesc: "If true, the component is hidden", diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx index 386f72e79..1097ee8cc 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx @@ -127,7 +127,7 @@ class ThemeDetailPage extends React.Component
+
+
+ {trans("themeDetail.margin")} + { + this.configChange(params); + }} + /> +
+
+ {trans("themeDetail.padding")} + { + this.configChange(params); + }} + /> +
+
{trans("themeDetail.chart")} {trans("themeDetail.chartDesc")} - + {" "} {trans("themeDetail.echartsJson")} diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx index b4fabe71e..b10866a07 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx @@ -653,3 +653,24 @@ export const CustomModalStyled = styled(CustomModal)` margin-top: 20px; } `; + +export const Margin = styled.div<{ margin: string }>` +> div { + margin: 3px; + overflow: hidden; + > svg { + fill: currentColor; + } + } +} +`; +export const Padding = styled.div<{ padding: string }>` +> div { + margin: 3px; + overflow: hidden; + > svg { + fill: currentColor; + } + } +} +`; From a4922bdc36dd08fd14eadae6c0e0ec5e4427f7e9 Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Wed, 12 Jul 2023 13:08:07 +0530 Subject: [PATCH 2/4] feat: margin padding and select box options --- .../comps/buttonComp/buttonCompConstants.tsx | 8 +- .../comps/comps/buttonComp/dropdownComp.tsx | 15 ++- .../src/comps/comps/buttonComp/linkComp.tsx | 2 +- .../src/comps/comps/dateComp/dateCompUtil.ts | 2 +- .../lowcoder/src/comps/comps/dividerComp.tsx | 13 +- .../src/comps/comps/fileComp/fileComp.tsx | 6 +- .../src/comps/comps/fileViewerComp.tsx | 7 +- .../lowcoder/src/comps/comps/imageComp.tsx | 7 +- .../comps/numberInputComp/numberInputComp.tsx | 14 +- .../comps/numberInputComp/rangeSliderComp.tsx | 1 + .../comps/numberInputComp/sliderComp.tsx | 1 + .../src/comps/comps/progressCircleComp.tsx | 6 +- .../lowcoder/src/comps/comps/progressComp.tsx | 6 +- .../lowcoder/src/comps/comps/qrCodeComp.tsx | 36 ++++-- .../selectInputComp/cascaderContants.tsx | 5 + .../comps/selectInputComp/checkboxComp.tsx | 1 + .../comps/selectInputComp/multiSelectComp.tsx | 5 + .../comps/comps/selectInputComp/radioComp.tsx | 4 +- .../selectInputComp/segmentedControl.tsx | 6 +- .../selectInputComp/selectCompConstants.tsx | 27 +++- .../src/comps/comps/signatureComp.tsx | 11 +- .../comps/comps/tabs/tabbedContainerComp.tsx | 6 +- .../lowcoder/src/comps/comps/textComp.tsx | 13 +- .../textInputComp/textInputConstants.tsx | 3 +- .../comps/triContainerComp/triContainer.tsx | 6 +- .../src/comps/controls/labelControl.tsx | 17 ++- .../src/comps/controls/styleControl.tsx | 121 +++++++++++++----- .../comps/controls/styleControlConstants.tsx | 57 +++++++++ .../packages/lowcoder/src/i18n/locales/en.ts | 1 + .../src/pages/queryLibrary/LeftNav.tsx | 2 +- 30 files changed, 337 insertions(+), 72 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 496408803..22fa3463e 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -12,6 +12,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) { const activeColor = genActiveColor(buttonStyle.background); return css` border-radius: ${buttonStyle.radius}; + margin: ${buttonStyle.margin}; + padding: ${buttonStyle.padding}; &:not(:disabled) { // click animation color --antd-wave-shadow-color: ${buttonStyle.border}; @@ -19,6 +21,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) { color: ${buttonStyle.text}; background-color: ${buttonStyle.background}; border-radius: ${buttonStyle.radius}; + margin: ${buttonStyle.margin}; + padding: ${buttonStyle.padding}; :hover, :focus { @@ -37,12 +41,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) { : buttonStyle.border}; } } + `; } export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>` ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)} - width: 100%; + width: -webkit-fill-available; + height: auto; display: inline-flex; justify-content: center; align-items: center; diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx index a6405d6b5..f8e9e1224 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -29,10 +29,14 @@ const DropdownButton = styled(Dropdown.Button)` const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>` width: calc(100% - 32px); - + ${(props) => `margin: ${props.$buttonStyle.margin};`} + margin-right: 0; .ant-btn { ${(props) => getButtonStyle(props.$buttonStyle)} + margin: 0 !important; + height: 100%; &.ant-btn-default { + margin: 0 !important; ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`} } width: 100%; @@ -40,12 +44,15 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>` `; const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>` - width: 32px; + // width: 32px; + ${(props) => `margin: ${props.$buttonStyle.margin};`} margin-left: -1px; - .ant-btn { ${(props) => getButtonStyle(props.$buttonStyle)} + margin: 0 !important; + height: 100%; &.ant-btn-default { + margin: 0 !important; ${(props) => `border-radius: 0 ${props.$buttonStyle.radius} ${props.$buttonStyle.radius} 0;`} } width: 100%; @@ -69,6 +76,7 @@ const DropdownTmpComp = (function () { .map((option, index) => ({ title: option.label, label: option.label, + style: {padding: props.style.padding}, key: option.label + " - " + index, disabled: option.disabled, icon: hasIcon && {option.prefixIcon}, @@ -83,6 +91,7 @@ const DropdownTmpComp = (function () { return ( + {console.log("props,", props)} {props.onlyMenu ? ( diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index d0e3bc517..7d753f43f 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -21,7 +21,7 @@ import { hasIcon } from "comps/utils"; import { RefControl } from "comps/controls/refControl"; const Link = styled(Button)<{ $style: LinkStyleType }>` - ${(props) => `color: ${props.$style.text};`} + ${(props) => `color: ${props.$style.text};margin: ${props.$style.margin}; padding: ${props.$style.padding};`} &.ant-btn { display: inline-flex; align-items: center; diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts index 8759dc8d6..2b31c9d59 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts @@ -63,7 +63,7 @@ export const disabledTime = (min: string, max: string) => { export const getStyle = (style: DateTimeStyleType) => { return css` border-radius: ${style.radius}; - + padding: ${style.padding}; &:not(.ant-picker-disabled) { border-color: ${style.border}; background-color: ${style.background}; diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index 1da6f8d2d..c3cede6c6 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design"; import _ from "lodash"; import styled from "styled-components"; import { styleControl } from "comps/controls/styleControl"; -import { DividerStyle, DividerStyleType } from "comps/controls/styleControlConstants"; +import { DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -22,6 +22,17 @@ const StyledDivider = styled(Divider)` display: flex; align-items: center; } + min-width: 0; + width: ${(props) => { + return widthCalculator(props.$style.margin); + }}; + min-height: ${(props) => { + return heightCalculator(props.$style.margin); + }}; + margin: ${(props) => { + return props.$style.margin; + }}; + padding: ${(props) => props.$style.padding}; border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color}; &.ant-divider-horizontal.ant-divider-with-text { diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx index f26e9f3c3..a2eb3cd88 100644 --- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx @@ -6,7 +6,7 @@ import { darkenColor } from "components/colorSelect/colorUtils"; import { Section, sectionNames } from "components/Section"; import { IconControl } from "comps/controls/iconControl"; import { styleControl } from "comps/controls/styleControl"; -import { FileStyle, FileStyleType } from "comps/controls/styleControlConstants"; +import { FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "comps/generators/withMethodExposing"; import { hasIcon } from "comps/utils"; import { getComponentDocUrl } from "comps/utils/compDocUtil"; @@ -133,6 +133,10 @@ const getStyle = (style: FileStyleType) => { return css` .ant-btn { border-radius: ${style.radius}; + margin: ${style.margin}; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; } .ant-btn:not(:disabled) { diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index 8952c63a5..e49c6928e 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { FileViewerStyle, FileViewerStyleType } from "comps/controls/styleControlConstants"; +import { FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { isEmpty } from "lodash"; import { useState } from "react"; import { DocumentViewer } from "react-documents"; @@ -13,6 +13,11 @@ import { trans } from "i18n"; const getStyle = (style: FileViewerStyleType) => { return css` + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; + padding: ${style.padding}; + overflow: hidden; background-color: ${style.background}; border: 1px solid ${style.border}; diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx index 297d97f45..871bfa9df 100644 --- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx @@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react"; import _ from "lodash"; import ReactResizeDetector from "react-resize-detector"; import { styleControl } from "comps/controls/styleControl"; -import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants"; +import { ImageStyle, ImageStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; @@ -23,7 +23,6 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>` display: flex; align-items: center; justify-content: center; - .ant-image, img { width: 100%; @@ -43,6 +42,10 @@ const getStyle = (style: ImageStyleType) => { img { border: 1px solid ${style.border}; border-radius: ${style.radius}; + margin: ${style.margin}; + padding: ${style.padding}; + max-width: ${widthCalculator(style.margin)}; + max-height: ${heightCalculator(style.margin)}; } .ant-image-mask { diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index a2e13ed11..4935e2d1d 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -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 } from "comps/controls/styleControlConstants"; +import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { disabledPropertyView, hiddenPropertyView, @@ -58,7 +58,9 @@ const getStyle = (style: InputLikeStyleType) => { color: ${style.text}; background-color: ${style.background}; border-color: ${style.border}; - + //margin: ${style.margin}; + padding: 0; + width: ${widthCalculator(style.margin)}; &.ant-input-number-focused { border-color: ${style.accent}; } @@ -71,6 +73,14 @@ const getStyle = (style: InputLikeStyleType) => { color: ${style.text}; opacity: 0.4; } + .ant-input-number { + margin: 0; + } + .ant-input-number input { + margin: 0; + padding: ${style.padding}; + height: ${heightCalculator(style.margin)}; + } .ant-input-number-handler-wrap { background-color: ${style.background}; diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index 4cb4e166e..bea60397c 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -28,6 +28,7 @@ const RangeSliderBasicComp = (function () { range={true} value={[props.start.value, props.end.value]} $style={props.style} + style={{margin: 0}} onChange={([start, end]) => { props.start.onChange(start); props.end.onChange(end); diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 931fe3a27..b86b07ef6 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -31,6 +31,7 @@ const SliderBasicComp = (function () { {...props} value={props.value.value} $style={props.style} + style={{margin: 0}} onChange={(e) => { props.value.onChange(e); props.onEvent("change"); diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx index 777774f90..e20cbf668 100644 --- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx @@ -1,6 +1,6 @@ import { Progress } from "antd"; import { styleControl } from "comps/controls/styleControl"; -import { ProgressStyle, ProgressStyleType } from "comps/controls/styleControlConstants"; +import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { Section, sectionNames } from "lowcoder-design"; import { numberExposingStateControl } from "../controls/codeStateControl"; @@ -11,6 +11,10 @@ import { trans } from "i18n"; const getStyle = (style: ProgressStyleType) => { return css` + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; + padding: ${style.padding}; .ant-progress-text { color: ${style.text}; } diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx index 1f3d74b42..d9ae4ed5d 100644 --- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx @@ -5,7 +5,7 @@ import { BoolControl } from "../controls/boolControl"; import { UICompBuilder } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { styleControl } from "comps/controls/styleControl"; -import { ProgressStyle, ProgressStyleType } from "comps/controls/styleControlConstants"; +import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -16,6 +16,10 @@ const getStyle = (style: ProgressStyleType) => { .ant-progress-text { color: ${style.text}; } + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; + padding: ${style.padding}; .ant-progress-inner { background-color: ${style.track}; .ant-progress-bg { diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx index cbfbc8236..f302a4eed 100644 --- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx @@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { styleControl } from "comps/controls/styleControl"; -import { QRCodeStyle } from "comps/controls/styleControlConstants"; +import { QRCodeStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; @@ -34,18 +34,28 @@ const QRCodeView = (props: RecordConstructorToView) => { return <>{trans("QRCode.maxLength")}; } return ( - +
+ +
); }; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index 21023e3d7..679abf1b0 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -18,6 +18,9 @@ import { i18nObjs, trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; import { CascaderRef } from "antd/lib/cascader"; +import { MarginControl } from "../../controls/marginControl"; +import { PaddingControl } from "../../controls/paddingControl"; + export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " "); export const CascaderChildren = { @@ -31,6 +34,8 @@ export const CascaderChildren = { style: styleControl(CascaderStyle), showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, + margin: MarginControl, + padding: PaddingControl, }; export const CascaderPropertyView = ( diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index 9b5284273..97bbab078 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -64,6 +64,7 @@ export const getStyle = (style: CheckboxStyleType) => { } .ant-checkbox-wrapper { + padding: ${style.padding}; .ant-checkbox-inner, .ant-checkbox-checked::after { border-radius: ${style.radius}; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index 8e6db99e6..c052f89fb 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -12,11 +12,16 @@ import { } from "./selectCompConstants"; import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputConstants"; +import { PaddingControl } from "../../controls/paddingControl"; +import { MarginControl } from "../../controls/marginControl"; + const MultiSelectBasicComp = (function () { const childrenMap = { ...SelectChildrenMap, value: arrayStringExposingStateControl("value", ["1", "2"]), style: styleControl(MultiSelectStyle), + margin: MarginControl, + padding: PaddingControl, }; return new UICompBuilder(childrenMap, (props, dispatch) => { const valueSet = new Set(props.options.map((o) => o.value)); // Filter illegal default values entered by the user diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx index c2f457757..473d9c9f7 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx @@ -16,9 +16,9 @@ const getStyle = (style: RadioStyleType) => { return css` .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) { color: ${style.staticText}; - height: 22px; + // height: 22px; max-width: calc(100% - 8px); - + padding: ${style.padding}; span:not(.ant-radio) { ${EllipsisTextCss}; } diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index 3a791fc4a..694fbdeb1 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -36,7 +36,9 @@ const getStyle = (style: SegmentStyleType) => { color: ${style.text}; border-radius: ${style.radius}; } - + .ant-segmented-item { + padding: ${style.padding}; + } .ant-segmented-item-selected, .ant-segmented-thumb { background-color: ${style.indicatorBackground}; @@ -52,7 +54,7 @@ const getStyle = (style: SegmentStyleType) => { const Segmented = styled(AntdSegmented)<{ $style: SegmentStyleType }>` width: 100%; - height: 32px; // keep the height unchanged when there are no options + min-height: 24px; // keep the height unchanged when there are no options ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index f0b1eb87e..f58339f91 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -7,6 +7,8 @@ import { import { BoolControl } from "../../controls/boolControl"; import { LabelControl } from "../../controls/labelControl"; import { BoolCodeControl, StringControl } from "../../controls/codeControl"; +import { PaddingControl } from "../../controls/paddingControl"; +import { MarginControl } from "../../controls/marginControl"; import { ControlNode, isDarkColor, @@ -31,8 +33,10 @@ import { MultiSelectStyleType, SelectStyleType, TreeSelectStyleType, + widthCalculator, + heightCalculator } from "comps/controls/styleControlConstants"; -import { stateComp } from "../../generators"; +import { stateComp, withDefault } from "../../generators"; import { allowClearPropertyView, disabledPropertyView, @@ -54,11 +58,24 @@ export const getStyle = ( &.ant-select .ant-select-selector, &.ant-select-multiple .ant-select-selection-item { border-radius: ${style.radius}; + padding: ${style.padding}; + height: auto; + } + .ant-select-selection-search { + padding: ${style.padding}; + } + .ant-select-selector::after, + .ant-select-selection-placeholder, + .ant-select-selection-item { + line-height: 1.5715 !important; } &.ant-select:not(.ant-select-disabled) { color: ${style.text}; - + .ant-select-selection-placeholder, + .ant-select-selection-item { + line-height: 1.5715 !important; + } .ant-select-selection-placeholder, &.ant-select-single.ant-select-open .ant-select-selection-item { color: ${style.text}; @@ -142,11 +159,15 @@ const getDropdownStyle = (style: MultiSelectStyleType) => { const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>` width: 100%; + ${(props) => props.$style && getStyle(props.$style)} `; const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>` ${(props) => props.$style && getDropdownStyle(props.$style)} + .ant-select-item-option-content { + ${(props) => `padding: ${props.$style.padding}`}; + } .option-label img { min-width: 14px; margin-right: 0; @@ -173,6 +194,8 @@ export const SelectChildrenMap = { inputValue: stateComp(""), // user's input value when search showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, + margin: MarginControl, + padding: PaddingControl, ...SelectInputValidationChildren, ...formDataChildren, }; diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index 293d42a1c..ae4842388 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -9,6 +9,8 @@ import { contrastColor, SignatureStyle, SignatureStyleType, + widthCalculator, + heightCalculator } from "comps/controls/styleControlConstants"; import { stateComp, withDefault } from "comps/generators/simpleGenerators"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; @@ -33,7 +35,14 @@ const Wrapper = styled.div<{ $style: SignatureStyleType; isEmpty: boolean }>` overflow: hidden; width: 100%; height: 100%; - + width: ${(props) => { + return widthCalculator(props.$style.margin); + }}; + height: ${(props) => { + return heightCalculator(props.$style.margin); + }}; + margin: ${(props) => props.$style.margin}; + padding: ${(props) => props.$style.padding}; .signature { background-color: ${(props) => props.$style.background}; opacity: ${(props) => (props.isEmpty ? 0 : 1)}; diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 5abdf6a2a..db4dc48d7 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -7,7 +7,7 @@ import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { eventHandlerControl } from "comps/controls/eventHandlerControl"; import { TabsOptionControl } from "comps/controls/optionsControl"; import { styleControl } from "comps/controls/styleControl"; -import { TabContainerStyle, TabContainerStyleType } from "comps/controls/styleControlConstants"; +import { TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; import { addMapChildAction } from "comps/generators/sameTypeMap"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; @@ -65,6 +65,10 @@ const getStyle = (style: TabContainerStyleType) => { border: 1px solid ${style.border}; border-radius: ${style.radius}; overflow: hidden; + margin: ${style.margin}; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; > .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout { background-color: ${style.background}; diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 4e7990617..8af381780 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -10,11 +10,14 @@ import { UICompBuilder } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { markdownCompCss, TacoMarkDown } from "lowcoder-design"; import { styleControl } from "comps/controls/styleControl"; -import { TextStyle, TextStyleType } from "comps/controls/styleControlConstants"; +import { TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { alignWithJustifyControl } from "comps/controls/alignControl"; +import { MarginControl } from "../controls/marginControl"; +import { PaddingControl } from "../controls/paddingControl"; + const getStyle = (style: TextStyleType) => { return css` border-radius: 4px; @@ -24,6 +27,10 @@ const getStyle = (style: TextStyleType) => { color: ${style.links}; } .markdown-body { + margin: ${style.margin} !important; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; h1 { line-height: 1.5; } @@ -60,7 +67,7 @@ const TextContainer = styled.div<{ type: string; styleConfig: TextStyleType }>` overflow: auto; margin: 0; ${(props) => - props.type === "text" && "white-space:break-spaces;line-height: 1.9;padding: 3px 0;"}; + props.type === "text" && "white-space:break-spaces;line-height: 1.9;"}; ${(props) => props.styleConfig && getStyle(props.styleConfig)} display: flex; font-size: 13px; @@ -107,6 +114,8 @@ let TextTmpComp = (function () { horizontalAlignment: alignWithJustifyControl(), verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"), style: styleControl(TextStyle), + margin: MarginControl, + padding: PaddingControl, }; return new UICompBuilder(childrenMap, (props) => { const value = props.text.value; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index ebc6a21f7..f6bdabe60 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -8,7 +8,7 @@ import { } from "comps/controls/codeControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { LabelControl } from "comps/controls/labelControl"; -import { InputLikeStyleType } from "comps/controls/styleControlConstants"; +import { InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { Section, sectionNames, ValueFromOption } from "lowcoder-design"; import _ from "lodash"; import { css } from "styled-components"; @@ -219,6 +219,7 @@ export const TextInputValidationSection = (children: TextInputComp) => ( export function getStyle(style: InputLikeStyleType) { return css` border-radius: ${style.radius}; + padding: ${style.padding}; // still use antd style when disabled &:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled), input { diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 886a0e6f3..2acc3abb9 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -1,4 +1,4 @@ -import { ContainerStyleType } from "comps/controls/styleControlConstants"; +import { ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { EditorContext } from "comps/editorState"; import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; import { HintPlaceHolder } from "lowcoder-design"; @@ -13,6 +13,10 @@ const getStyle = (style: ContainerStyleType) => { border-color: ${style.border}; border-radius: ${style.radius}; overflow: hidden; + margin: ${style.margin}; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; `; }; diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index fbe0d3d96..12413920d 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -15,6 +15,8 @@ import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; import { StarIcon } from "lowcoder-design"; +import { heightCalculator, widthCalculator } from "./styleControlConstants"; + type LabelViewProps = Pick & { children: ReactNode; style?: Record; @@ -146,7 +148,20 @@ export const LabelControl = (function () { }; return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => ( - + {!props.hidden && !isEmpty(props.text) && ( ) { type Names = T[number]["name"]; export type StyleConfigType = { [K in Names]: string }; @@ -46,6 +56,13 @@ function isEmptyRadius(radius: string) { return _.isEmpty(radius); } +function isEmptyMargin(margin: string) { + return _.isEmpty(margin); +} +function isEmptyPadding(padding: string) { + return _.isEmpty(padding); +} + /** * Calculate the actual used color from the dsl color */ @@ -60,15 +77,17 @@ function calcColors>( let res: Record = {}; colorConfigs.forEach((config) => { const name = config.name; - if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) { - if (/^[0-9]+$/.test(props[name])) { - res[name] = props[name] + "px"; - } else if (/^[0-9]+(px|%)$/.test(props[name])) { - res[name] = props[name]; - } else { - res[name] = config.radius; - } - return; + if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyMargin(props[name]) && isMarginConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) { + res[name] = props[name]; + return; } if (!isEmptyColor(props[name])) { if (isThemeColorKey(props[name])) { @@ -84,6 +103,12 @@ function calcColors>( if (isRadiusConfig(config)) { res[name] = themeWithDefault[config.radius]; } + if (isMarginConfig(config)) { + res[name] = themeWithDefault[config.margin]; + } + if (isPaddingConfig(config)) { + res[name] = themeWithDefault[config.padding]; + } }); // The second pass calculates dep colorConfigs.forEach((config) => { @@ -191,6 +216,13 @@ const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px; `; +const MarginIcon = styled(ExpandIcon)` +margin: 0 8px 0 -2px; +`; +const PaddingIcon = styled(CompressIcon)` +margin: 0 8px 0 -2px; +`; + const ResetIcon = styled(IconReset)` &:hover g g { stroke: #315efb; @@ -202,10 +234,15 @@ export function styleControl(colorConfig const childrenMap: any = {}; colorConfigs.map((config) => { const name: Names = config.name; - if (name === "radius") { - childrenMap[name] = RadiusControl; - } else { - childrenMap[name] = ColorControl; + if ( + name === "radius" || + name === "cardRadius" + ) { + childrenMap[name] = StringControl; + } else if (name === "margin" || name === "padding") { + childrenMap[name] = StringControl; + } else { + childrenMap[name] = ColorControl; } }); // [K in Names]: new (params: CompParams) => ColorControl; @@ -241,7 +278,11 @@ export function styleControl(colorConfig onClick={() => { colorConfigs.map((item) => { const name: Names = item.name; - if (name === "radius") { + if ( + name === "radius" || + name === "margin" || + name === "padding" + ) { children[name]?.dispatchChangeValueAction(""); } else { children[name] && @@ -278,20 +319,40 @@ export function styleControl(colorConfig } return controlItem( { filterText: config.label }, -
- {name === "radius" - ? (children[name] as InstanceType).propertyView({ - label: config.label, - preInputNode: , - placeholder: props[name], - }) - : children[name].propertyView({ - label: config.label, - panelDefaultColor: props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} +
+ {name === "radius" || + name === "gap" || + name === "cardRadius" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : name === "margin" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : name === "padding" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : children[name].propertyView({ + label: config.label, + panelDefaultColor: props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })}
); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index bcc907724..b15a572bd 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -841,6 +841,8 @@ export const LottieStyle = [ depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, + MARGIN, + PADDING, ] as const; ///////////////////// @@ -883,3 +885,58 @@ export type CalendarStyleType = StyleConfigType; export type SignatureStyleType = StyleConfigType; export type CarouselStyleType = StyleConfigType; export type RichTextEditorStyleType = StyleConfigType; + +export function widthCalculator(margin: string) { + const marginArr = margin?.trim().split(" ") || ""; + if (marginArr.length === 1) { + return `calc(100% - ${ + parseInt(margin.replace(/[^\d.]/g, "")) * 2 + margin.replace(/[0-9]/g, "") + })`; + } else if (marginArr.length === 2 || marginArr.length === 3) { + return `calc(100% - ${ + parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 + + marginArr[1].replace(/[0-9]/g, "") + })`; + } else { + return `calc(100% - ${ + parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") + + marginArr[1]?.replace(/[0-9]/g, "" || "px") + } - ${ + parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") + + marginArr[3]?.replace(/[0-9]/g, "" || "px") + })`; + } +} + +export function heightCalculator(margin: string) { + const marginArr = margin?.trim().split(" ") || ""; + if (marginArr.length === 1) { + return `calc(100% - ${ + parseInt(margin.replace(/[^\d.]/g, "")) * 2 + margin.replace(/[0-9]/g, "") + })`; + } else if (marginArr.length === 2) { + return `calc(100% - ${ + parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 + + marginArr[0].replace(/[0-9]/g, "") + })`; + } else { + return `calc(100% - ${ + parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + + marginArr[0]?.replace(/[0-9]/g, "") || "px" + } - ${ + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + + marginArr[2]?.replace(/[0-9]/g, "") || "px" + })`; + } +} + +export function marginCalculator(margin: string) { + const marginArr = margin?.trim().split(" ") || ""; + if (marginArr.length === 1) { + return parseInt(margin.replace(/[^\d.]/g, "")) * 2; + } else if (marginArr.length === 2) { + return parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2; + } else { + return parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + } +} diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 172132e9a..bf03cd9a2 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -2356,6 +2356,7 @@ export const en = { left: "Left", right: "Right", center: "Center", + bottom: "Bottom", justify: "Justify both ends", }, playground: { diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx index 85cb98f1b..a17c2541f 100644 --- a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx +++ b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx @@ -51,7 +51,7 @@ const AddIcon = styled(BluePlusIcon)` margin-right: 2px; `; const CreateBtn = styled(TacoButton)<{ readOnly?: boolean }>` - height: 32px; + min-height: 24px; width: 70px; padding: 4px 12px; display: flex; From 5b3b9b856c909abcddaca3c986ab294df3e0529b Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Wed, 12 Jul 2023 17:32:48 +0530 Subject: [PATCH 3/4] feat: container fix --- .../lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx | 5 ++--- .../src/comps/comps/triContainerComp/triContainer.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index db4dc48d7..a4a9ac6e3 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -65,10 +65,7 @@ const getStyle = (style: TabContainerStyleType) => { border: 1px solid ${style.border}; border-radius: ${style.radius}; overflow: hidden; - margin: ${style.margin}; padding: ${style.padding}; - width: ${widthCalculator(style.margin)}; - height: ${heightCalculator(style.margin)}; > .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout { background-color: ${style.background}; @@ -167,6 +164,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { // log.debug("TabbedContainer. props: ", props); return ( +
{ ); })} +
); }; diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 2acc3abb9..65c433e16 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -13,10 +13,10 @@ const getStyle = (style: ContainerStyleType) => { border-color: ${style.border}; border-radius: ${style.radius}; overflow: hidden; - margin: ${style.margin}; + // margin: ${style.margin}; padding: ${style.padding}; - width: ${widthCalculator(style.margin)}; - height: ${heightCalculator(style.margin)}; + // width: ${widthCalculator(style.margin)}; + // height: ${heightCalculator(style.margin)}; `; }; @@ -78,6 +78,7 @@ export function TriContainer(props: TriContainerProps) { const paddingWidth = isMobile ? 7 : 19; return ( +
{showHeader && ( @@ -128,5 +129,6 @@ export function TriContainer(props: TriContainerProps) { )} +
); } From 370bd215062d720ed1b4b5bd8597a84993428e2b Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Wed, 12 Jul 2023 21:34:20 +0530 Subject: [PATCH 4/4] feat: additional padding settings for container --- .../comps/triContainerComp/triContainer.tsx | 3 ++ .../src/comps/controls/styleControl.tsx | 12 ++++-- .../comps/controls/styleControlConstants.tsx | 39 ++++++++++++++++++- .../packages/lowcoder/src/i18n/locales/en.ts | 5 +++ 4 files changed, 55 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 65c433e16..9530c6f61 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -91,6 +91,7 @@ export function TriContainer(props: TriContainerProps) { containerPadding={[paddingWidth, 3]} showName={{ bottom: showBody || showFooter ? 20 : 0 }} backgroundColor={style?.headerBackground} + style={{padding: style.containerheaderpadding}} /> )} @@ -109,6 +110,7 @@ export function TriContainer(props: TriContainerProps) { hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder} backgroundColor={style?.background} borderColor={style?.border} + style={{padding: style.containerbodypadding}} /> )} @@ -125,6 +127,7 @@ export function TriContainer(props: TriContainerProps) { showName={{ top: showHeader || showBody ? 20 : 0 }} backgroundColor={style?.footerBackground} borderColor={style?.border} + style={{padding: style.containerfooterpadding}} /> )} diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index bc4cea364..42311c187 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -239,7 +239,7 @@ export function styleControl(colorConfig name === "cardRadius" ) { childrenMap[name] = StringControl; - } else if (name === "margin" || name === "padding") { + } else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") { childrenMap[name] = StringControl; } else { childrenMap[name] = ColorControl; @@ -281,7 +281,10 @@ export function styleControl(colorConfig if ( name === "radius" || name === "margin" || - name === "padding" + name === "padding" || + name==="containerheaderpadding" || + name==="containerfooterpadding" || + name==="containerbodypadding" ) { children[name]?.dispatchChangeValueAction(""); } else { @@ -338,7 +341,10 @@ export function styleControl(colorConfig preInputNode: , placeholder: props[name], }) - : name === "padding" + : name === "padding" || + name === "containerheaderpadding" || + name === "containerfooterpadding" || + name === "containerbodypadding" ? ( children[name] as InstanceType ).propertyView({ diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index b15a572bd..24937f44c 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -16,19 +16,33 @@ export type SimpleColorConfig = CommonColorConfig & { export type RadiusConfig = CommonColorConfig & { readonly radius: string; }; + +export type ContainerHeaderPaddigConfig = CommonColorConfig & { + readonly containerheaderpadding: string; +}; + +export type ContainerBodyPaddigConfig = CommonColorConfig & { + readonly containerbodypadding: string; +}; + +export type ContainerFooterPaddigConfig = CommonColorConfig & { + readonly containerfooterpadding: string; +}; + export type MarginConfig = CommonColorConfig & { readonly margin: string; }; export type PaddingConfig = CommonColorConfig & { readonly padding: string; }; + export type DepColorConfig = CommonColorConfig & { readonly depName?: string; readonly depTheme?: keyof ThemeDetail; readonly depType?: DEP_TYPE; transformer: (color: string, ...rest: string[]) => string; }; -export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig; +export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig; export const defaultTheme: ThemeDetail = { primary: "#3377FF", @@ -239,12 +253,32 @@ const MARGIN = { label: trans("style.margin"), margin: "margin", } as const; + const PADDING = { name: "padding", label: trans("style.padding"), padding: "padding", } as const; +const CONTAINERHEADERPADDING = { + name: "containerheaderpadding", + label: trans("style.containerheaderpadding"), + containerheaderpadding: "padding", +} as const; + +const CONTAINERFOOTERPADDING = { + name: "containerfooterpadding", + label: trans("style.containerfooterpadding"), + containerfooterpadding: "padding", +} as const; + + +const CONTAINERBODYPADDING = { + name: "containerbodypadding", + label: trans("style.containerbodypadding"), + containerbodypadding: "padding", +} as const; + const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) => ({ name: "border", @@ -370,6 +404,9 @@ export const ContainerStyle = [ }, MARGIN, PADDING, + CONTAINERHEADERPADDING, + CONTAINERFOOTERPADDING, + CONTAINERBODYPADDING ] as const; export const SliderStyle = [ diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index bf03cd9a2..d7753eabb 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -284,6 +284,8 @@ export const en = { marginDesc: "The default margin is typically used for most components", padding: "Padding", paddingDesc: "The default padding is typically used for most components", + containerheaderpadding: "Header Padding", + containerheaderpaddingDesc: "The default headerpadding is typically used for most components", //Added By Aqib Mirza gridColumns: "Grid Columns", gridColumnsDesc: @@ -336,6 +338,9 @@ export const en = { marginRight: "Margin Right", marginTop: "Margin Top", marginBottom: "Margin Bottom", + containerheaderpadding: "Header Padding", + containerfooterpadding: "Footer Padding", + containerbodypadding: "Body Padding", }, export: { hiddenDesc: "If true, the component is hidden",