Skip to content

Commit 90babb9

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #640 from raheeliftikhar5/container-styling
Separate container styling into header, footer and body styles
2 parents e616845 + 6f055ab commit 90babb9

File tree

7 files changed

+147
-64
lines changed

7 files changed

+147
-64
lines changed

‎client/packages/lowcoder-design/src/components/Collapase.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
2626
line-height: 23px;
2727
user-select: none;
2828
cursor: pointer;
29+
30+
.ant-collapse-header-text {
31+
min-width: 0;
32+
}
2933
}
3034
3135
.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,21 @@ export const ContainerBaseComp = (function () {
4545
<Section name={sectionNames.style}>
4646
{ children.container.stylePropertyView() }
4747
</Section>
48+
{children.container.children.showHeader.getView() && (
49+
<Section name={"Header Style"}>
50+
{ children.container.headerStylePropertyView() }
51+
</Section>
52+
)}
53+
{children.container.children.showBody.getView() && (
54+
<Section name={"Body Style"}>
55+
{ children.container.bodyStylePropertyView() }
56+
</Section>
57+
)}
58+
{children.container.children.showFooter.getView() && (
59+
<Section name={"Footer Style"}>
60+
{ children.container.footerStylePropertyView() }
61+
</Section>
62+
)}
4863
</>
4964
)}
5065
</>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,21 @@ const FormBaseComp = (function () {
218218
<Section name={sectionNames.style}>
219219
{children.container.stylePropertyView()}
220220
</Section>
221+
{children.container.children.showHeader.getView() && (
222+
<Section name={"Header Style"}>
223+
{ children.container.headerStylePropertyView() }
224+
</Section>
225+
)}
226+
{children.container.children.showBody.getView() && (
227+
<Section name={"Body Style"}>
228+
{ children.container.bodyStylePropertyView() }
229+
</Section>
230+
)}
231+
{children.container.children.showFooter.getView() && (
232+
<Section name={"Footer Style"}>
233+
{ children.container.footerStylePropertyView() }
234+
</Section>
235+
)}
221236
</>
222237
)}
223238

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

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,14 @@ const BodyInnerGrid = styled(InnerGrid)<{
5252
$showBorder: boolean;
5353
$backgroundColor: string;
5454
$borderColor: string;
55+
$borderWidth: string;
5556
$backgroundImage: string;
5657
$backgroundImageRepeat: string;
5758
$backgroundImageSize: string;
5859
$backgroundImagePosition: string;
5960
$backgroundImageOrigin: string;
6061
}>`
61-
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
62+
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
6263
flex: 1;
6364
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
6465
border-radius: 0;
@@ -73,13 +74,14 @@ const FooterInnerGrid = styled(InnerGrid)<{
7374
$showBorder: boolean;
7475
$backgroundColor: string;
7576
$borderColor: string;
77+
$borderWidth: string;
7678
$footerBackgroundImage: string;
7779
$footerBackgroundImageRepeat: string;
7880
$footerBackgroundImageSize: string;
7981
$footerBackgroundImagePosition: string;
8082
$footerBackgroundImageOrigin: string;
8183
}>`
82-
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
84+
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
8385
overflow: visible;
8486
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
8587
border-radius: 0;
@@ -103,7 +105,12 @@ export function TriContainer(props: TriContainerProps) {
103105
const { items: headerItems, ...otherHeaderProps } = container.header;
104106
const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
105107
const { items: footerItems, ...otherFooterProps } = container.footer;
106-
const { style } = container;
108+
const {
109+
style,
110+
headerStyle,
111+
bodyStyle,
112+
footerStyle,
113+
} = container;
107114

108115
const editorState = useContext(EditorContext);
109116
const maxWidth = editorState.getAppSettings().maxWidth;
@@ -114,7 +121,7 @@ export function TriContainer(props: TriContainerProps) {
114121
<div style={{padding: style.margin, height: '100%'}}>
115122
<Wrapper $style={style}>
116123
{showHeader && (
117-
<BackgroundColorContext.Provider value={container.style.headerBackground}>
124+
<BackgroundColorContext.Provider value={headerStyle.headerBackground}>
118125
<HeaderInnerGrid
119126
{...otherHeaderProps}
120127
items={gridItemCompToGridItems(headerItems)}
@@ -123,19 +130,19 @@ export function TriContainer(props: TriContainerProps) {
123130
minHeight="46px"
124131
containerPadding={[paddingWidth, 3]}
125132
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
126-
$backgroundColor={style?.headerBackground}
127-
$headerBackgroundImage={style?.headerBackgroundImage}
128-
$headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
129-
$headerBackgroundImageSize={style?.headerBackgroundImageSize}
130-
$headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
131-
$headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
132-
style={{padding: style.containerheaderpadding}}
133+
$backgroundColor={headerStyle?.headerBackground}
134+
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
135+
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
136+
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
137+
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
138+
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
139+
style={{padding: headerStyle.containerheaderpadding}}
133140

134141
/>
135142
</BackgroundColorContext.Provider>
136143
)}
137144
{showBody && (
138-
<BackgroundColorContext.Provider value={container.style.background}>
145+
<BackgroundColorContext.Provider value={bodyStyle.background}>
139146
<BodyInnerGrid
140147
$showBorder={showHeader}
141148
{...otherBodyProps}
@@ -147,19 +154,20 @@ export function TriContainer(props: TriContainerProps) {
147154
(showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
148155
}
149156
hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
150-
$backgroundColor={style?.background}
157+
$backgroundColor={bodyStyle?.background}
151158
$borderColor={style?.border}
152-
$backgroundImage={style?.backgroundImage}
153-
$backgroundImageRepeat={style?.backgroundImageRepeat}
154-
$backgroundImageSize={style?.backgroundImageSize}
155-
$backgroundImagePosition={style?.backgroundImagePosition}
156-
$backgroundImageOrigin={style?.backgroundImageOrigin}
157-
style={{padding: style.containerbodypadding}}
159+
$borderWidth={style?.borderWidth}
160+
$backgroundImage={bodyStyle?.backgroundImage}
161+
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
162+
$backgroundImageSize={bodyStyle?.backgroundImageSize}
163+
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
164+
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
165+
style={{padding: bodyStyle.containerbodypadding}}
158166
/>
159167
</BackgroundColorContext.Provider>
160168
)}
161169
{showFooter && (
162-
<BackgroundColorContext.Provider value={container.style.footerBackground}>
170+
<BackgroundColorContext.Provider value={footerStyle.footerBackground}>
163171
<FooterInnerGrid
164172
$showBorder={showHeader || showBody}
165173
{...otherFooterProps}
@@ -169,14 +177,15 @@ export function TriContainer(props: TriContainerProps) {
169177
minHeight={showBody ? "47px" : "46px"}
170178
containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
171179
showName={{ top: showHeader || showBody ? 20 : 0 }}
172-
$backgroundColor={style?.footerBackground}
173-
$footerBackgroundImage={style?.footerBackgroundImage}
174-
$footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
175-
$footerBackgroundImageSize={style?.footerBackgroundImageSize}
176-
$footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
177-
$footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
180+
$backgroundColor={footerStyle?.footerBackground}
181+
$footerBackgroundImage={footerStyle?.footerBackgroundImage}
182+
$footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
183+
$footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}
184+
$footerBackgroundImagePosition={footerStyle?.footerBackgroundImagePosition}
185+
$footerBackgroundImageOrigin={footerStyle?.footerBackgroundImageOrigin}
178186
$borderColor={style?.border}
179-
style={{padding: style.containerfooterpadding}}
187+
$borderWidth={style?.borderWidth}
188+
style={{padding: footerStyle.containerfooterpadding}}
180189
/>
181190
</BackgroundColorContext.Provider>
182191
)}

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import { JSONValue } from "util/jsonTypes";
22
import { AutoHeightControl } from "comps/controls/autoHeightControl";
33
import { BoolControl } from "comps/controls/boolControl";
44
import { styleControl } from "comps/controls/styleControl";
5-
import { ContainerStyle } from "comps/controls/styleControlConstants";
5+
import {
6+
ContainerStyle,
7+
ContainerHeaderStyle,
8+
ContainerBodyStyle,
9+
ContainerFooterStyle,
10+
} from "comps/controls/styleControlConstants";
611
import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
712
import { migrateOldData } from "comps/generators/simpleGenerators";
813
import { NameGenerator } from "comps/utils";
@@ -36,6 +41,9 @@ const childrenMap = {
3641
autoHeight: AutoHeightControl,
3742

3843
style: styleControl(ContainerStyle),
44+
headerStyle: styleControl(ContainerHeaderStyle),
45+
bodyStyle: styleControl(ContainerBodyStyle),
46+
footerStyle: styleControl(ContainerFooterStyle),
3947
};
4048

4149
// Compatible with old style data 2022-8-15
@@ -127,6 +135,17 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
127135
return this.children.style.getPropertyView();
128136
}
129137

138+
headerStylePropertyView() {
139+
return this.children.headerStyle.getPropertyView();
140+
}
141+
142+
bodyStylePropertyView() {
143+
return this.children.bodyStyle.getPropertyView();
144+
}
145+
146+
footerStylePropertyView() {
147+
return this.children.footerStyle.getPropertyView();
148+
}
130149
}
131150

132151
function checkEquals(node1: Node<unknown>, node2: Node<unknown>): boolean {

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

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -489,46 +489,53 @@ export const MarginStyle = [
489489

490490

491491
export const ContainerStyle = [
492-
...BG_STATIC_BORDER_RADIUS,
492+
// ...BG_STATIC_BORDER_RADIUS,
493+
getStaticBorder(),
494+
RADIUS,
493495
BORDER_WIDTH,
494-
HEADER_BACKGROUND,
495-
{
496-
name: "footerBackground",
497-
label: trans("style.footerBackground"),
498-
depName: "background",
499-
depType: DEP_TYPE.SELF,
500-
transformer: toSelf,
501-
},
502496
MARGIN,
503497
PADDING,
498+
] as const;
499+
500+
export const ContainerHeaderStyle = [
504501
CONTAINERHEADERPADDING,
505-
CONTAINERFOOTERPADDING,
506-
CONTAINERBODYPADDING,
502+
HEADER_BACKGROUND,
507503
{
508504
name: "headerBackgroundImage",
509-
label: trans("style.headerBackgroundImage"),
505+
label: trans("style.backgroundImage"),
510506
headerBackgroundImage: "headerBackgroundImage",
511507
},
512508
{
513509
name: "headerBackgroundImageRepeat",
514-
label: trans("style.headerBackgroundImageRepeat"),
510+
label: trans("style.backgroundImageRepeat"),
515511
headerBackgroundImageRepeat: "headerBackgroundImageRepeat",
516512
},
517513
{
518514
name: "headerBackgroundImageSize",
519-
label: trans("style.headerBackgroundImageSize"),
515+
label: trans("style.backgroundImageSize"),
520516
headerBackgroundImageSize: "headerBackgroundImageSize",
521517
},
522518
{
523519
name: "headerBackgroundImagePosition",
524-
label: trans("style.headerBackgroundImagePosition"),
520+
label: trans("style.backgroundImagePosition"),
525521
headerBackgroundImagePosition: "headerBackgroundImagePosition",
526522
}
527523
,{
528524
name: "headerBackgroundImageOrigin",
529-
label: trans("style.headerBackgroundImageOrigin"),
525+
label: trans("style.backgroundImageOrigin"),
530526
headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
531527
},
528+
] as const;
529+
530+
export const ContainerBodyStyle = [
531+
CONTAINERBODYPADDING,
532+
{
533+
name: "background",
534+
label: trans("style.background"),
535+
depName: "background",
536+
depType: DEP_TYPE.SELF,
537+
transformer: toSelf,
538+
},
532539
{
533540
name: "backgroundImage",
534541
label: trans("style.backgroundImage"),
@@ -554,29 +561,40 @@ export const ContainerStyle = [
554561
label: trans("style.backgroundImageOrigin"),
555562
backgroundImageOrigin: "backgroundImageOrigin",
556563
},
564+
] as const;
565+
566+
export const ContainerFooterStyle = [
567+
CONTAINERFOOTERPADDING,
568+
{
569+
name: "footerBackground",
570+
label: trans("style.background"),
571+
depName: "background",
572+
depType: DEP_TYPE.SELF,
573+
transformer: toSelf,
574+
},
557575
{
558576
name: "footerBackgroundImage",
559-
label: trans("style.footerBackgroundImage"),
577+
label: trans("style.backgroundImage"),
560578
footerBackgroundImage: "footerBackgroundImage",
561579
},
562580
{
563581
name: "footerBackgroundImageRepeat",
564-
label: trans("style.footerBackgroundImageRepeat"),
582+
label: trans("style.backgroundImageRepeat"),
565583
footerBackgroundImageRepeat: "footerBackgroundImageRepeat",
566584
},
567585
{
568586
name: "footerBackgroundImageSize",
569-
label: trans("style.footerBackgroundImageSize"),
587+
label: trans("style.backgroundImageSize"),
570588
footerBackgroundImageSize: "footerBackgroundImageSize",
571589
},
572590
{
573591
name: "footerBackgroundImagePosition",
574-
label: trans("style.footerBackgroundImagePosition"),
592+
label: trans("style.backgroundImagePosition"),
575593
footerBackgroundImagePosition: "footerBackgroundImagePosition",
576594
}
577595
,{
578596
name: "footerBackgroundImageOrigin",
579-
label: trans("style.footerBackgroundImageOrigin"),
597+
label: trans("style.backgroundImageOrigin"),
580598
footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
581599
}
582600
] as const;
@@ -1312,6 +1330,9 @@ export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
13121330
export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
13131331
export type TextStyleType = StyleConfigType<typeof TextStyle>;
13141332
export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
1333+
export type ContainerHeaderStyleType = StyleConfigType<typeof ContainerHeaderStyle>;
1334+
export type ContainerBodyStyleType = StyleConfigType<typeof ContainerBodyStyle>;
1335+
export type ContainerFooterStyleType = StyleConfigType<typeof ContainerFooterStyle>;
13151336
export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
13161337
export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
13171338
export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -360,21 +360,21 @@ export const en = {
360360
"aspectRatio": "Aspect Ratio",
361361
"textSize": "Text Size",
362362
"textWeight": "Text Weight",
363-
"backgroundImage": "BgImage",
364-
"backgroundImageRepeat": "BgImage Repeat",
365-
"backgroundImageSize": "BgImage Size",
366-
"backgroundImagePosition": "BgImage Position",
367-
"backgroundImageOrigin": "BgImage Origin",
368-
"headerBackgroundImage": "Header BgImage",
369-
"headerBackgroundImageRepeat": "Header BgImage Repeat",
370-
"headerBackgroundImageSize": "Header BgImage Size",
371-
"headerBackgroundImagePosition": "Header BgImage Position",
372-
"headerBackgroundImageOrigin": "Header BgImage Origin",
373-
"footerBackgroundImage": "Footer BgImage",
374-
"footerBackgroundImageRepeat": "Footer BgImage Repeat",
375-
"footerBackgroundImageSize": "Footer BgImage Size",
376-
"footerBackgroundImagePosition": "Footer BgImage Position",
377-
"footerBackgroundImageOrigin": "Footer BgImage Origin",
363+
"backgroundImage": "BG Image",
364+
"backgroundImageRepeat": "BG Repeat",
365+
"backgroundImageSize": "BG Size",
366+
"backgroundImagePosition": "BG Position",
367+
"backgroundImageOrigin": "BG Origin",
368+
"headerBackgroundImage": "BgImage",
369+
"headerBackgroundImageRepeat": "BgImage Repeat",
370+
"headerBackgroundImageSize": "BgImage Size",
371+
"headerBackgroundImagePosition": "BgImage Position",
372+
"headerBackgroundImageOrigin": "BgImage Origin",
373+
"footerBackgroundImage": "BgImage",
374+
"footerBackgroundImageRepeat": "BgImage Repeat",
375+
"footerBackgroundImageSize": "BgImage Size",
376+
"footerBackgroundImagePosition": "BgImage Position",
377+
"footerBackgroundImageOrigin": "BgImage Origin",
378378
},
379379
"export": {
380380
"hiddenDesc": "If true, the component is hidden",

0 commit comments

Comments
 (0)