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 370bd21

Browse files
author
Aqib Mirza
committed
feat: additional padding settings for container
1 parent 5b3b9b8 commit 370bd21

File tree

4 files changed

+55
-4
lines changed

4 files changed

+55
-4
lines changed

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export function TriContainer(props: TriContainerProps) {
9191
containerPadding={[paddingWidth, 3]}
9292
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
9393
backgroundColor={style?.headerBackground}
94+
style={{padding: style.containerheaderpadding}}
9495
/>
9596
</BackgroundColorContext.Provider>
9697
)}
@@ -109,6 +110,7 @@ export function TriContainer(props: TriContainerProps) {
109110
hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
110111
backgroundColor={style?.background}
111112
borderColor={style?.border}
113+
style={{padding: style.containerbodypadding}}
112114
/>
113115
</BackgroundColorContext.Provider>
114116
)}
@@ -125,6 +127,7 @@ export function TriContainer(props: TriContainerProps) {
125127
showName={{ top: showHeader || showBody ? 20 : 0 }}
126128
backgroundColor={style?.footerBackground}
127129
borderColor={style?.border}
130+
style={{padding: style.containerfooterpadding}}
128131
/>
129132
</BackgroundColorContext.Provider>
130133
)}

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
239239
name === "cardRadius"
240240
) {
241241
childrenMap[name] = StringControl;
242-
} else if (name === "margin" || name === "padding") {
242+
} else if (name === "margin" || name === "padding"||name==="containerheaderpadding"||name==="containerfooterpadding"||name==="containerbodypadding") {
243243
childrenMap[name] = StringControl;
244244
} else {
245245
childrenMap[name] = ColorControl;
@@ -281,7 +281,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
281281
if (
282282
name === "radius" ||
283283
name === "margin" ||
284-
name === "padding"
284+
name === "padding" ||
285+
name==="containerheaderpadding" ||
286+
name==="containerfooterpadding" ||
287+
name==="containerbodypadding"
285288
) {
286289
children[name]?.dispatchChangeValueAction("");
287290
} else {
@@ -338,7 +341,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
338341
preInputNode: <MarginIcon title="" />,
339342
placeholder: props[name],
340343
})
341-
: name === "padding"
344+
: name === "padding" ||
345+
name === "containerheaderpadding" ||
346+
name === "containerfooterpadding" ||
347+
name === "containerbodypadding"
342348
? (
343349
children[name] as InstanceType<typeof StringControl>
344350
).propertyView({

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

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,33 @@ export type SimpleColorConfig = CommonColorConfig & {
1616
export type RadiusConfig = CommonColorConfig & {
1717
readonly radius: string;
1818
};
19+
20+
export type ContainerHeaderPaddigConfig = CommonColorConfig & {
21+
readonly containerheaderpadding: string;
22+
};
23+
24+
export type ContainerBodyPaddigConfig = CommonColorConfig & {
25+
readonly containerbodypadding: string;
26+
};
27+
28+
export type ContainerFooterPaddigConfig = CommonColorConfig & {
29+
readonly containerfooterpadding: string;
30+
};
31+
1932
export type MarginConfig = CommonColorConfig & {
2033
readonly margin: string;
2134
};
2235
export type PaddingConfig = CommonColorConfig & {
2336
readonly padding: string;
2437
};
38+
2539
export type DepColorConfig = CommonColorConfig & {
2640
readonly depName?: string;
2741
readonly depTheme?: keyof ThemeDetail;
2842
readonly depType?: DEP_TYPE;
2943
transformer: (color: string, ...rest: string[]) => string;
3044
};
31-
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig;
45+
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig|ContainerHeaderPaddigConfig|ContainerFooterPaddigConfig|ContainerBodyPaddigConfig;
3246

3347
export const defaultTheme: ThemeDetail = {
3448
primary: "#3377FF",
@@ -239,12 +253,32 @@ const MARGIN = {
239253
label: trans("style.margin"),
240254
margin: "margin",
241255
} as const;
256+
242257
const PADDING = {
243258
name: "padding",
244259
label: trans("style.padding"),
245260
padding: "padding",
246261
} as const;
247262

263+
const CONTAINERHEADERPADDING = {
264+
name: "containerheaderpadding",
265+
label: trans("style.containerheaderpadding"),
266+
containerheaderpadding: "padding",
267+
} as const;
268+
269+
const CONTAINERFOOTERPADDING = {
270+
name: "containerfooterpadding",
271+
label: trans("style.containerfooterpadding"),
272+
containerfooterpadding: "padding",
273+
} as const;
274+
275+
276+
const CONTAINERBODYPADDING = {
277+
name: "containerbodypadding",
278+
label: trans("style.containerbodypadding"),
279+
containerbodypadding: "padding",
280+
} as const;
281+
248282
const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
249283
({
250284
name: "border",
@@ -370,6 +404,9 @@ export const ContainerStyle = [
370404
},
371405
MARGIN,
372406
PADDING,
407+
CONTAINERHEADERPADDING,
408+
CONTAINERFOOTERPADDING,
409+
CONTAINERBODYPADDING
373410
] as const;
374411

375412
export const SliderStyle = [

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,8 @@ export const en = {
284284
marginDesc: "The default margin is typically used for most components",
285285
padding: "Padding",
286286
paddingDesc: "The default padding is typically used for most components",
287+
containerheaderpadding: "Header Padding",
288+
containerheaderpaddingDesc: "The default headerpadding is typically used for most components",
287289
//Added By Aqib Mirza
288290
gridColumns: "Grid Columns",
289291
gridColumnsDesc:
@@ -336,6 +338,9 @@ export const en = {
336338
marginRight: "Margin Right",
337339
marginTop: "Margin Top",
338340
marginBottom: "Margin Bottom",
341+
containerheaderpadding: "Header Padding",
342+
containerfooterpadding: "Footer Padding",
343+
containerbodypadding: "Body Padding",
339344
},
340345
export: {
341346
hiddenDesc: "If true, the component is hidden",

0 commit comments

Comments
(0)

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