Merge pull request #640 from raheeliftikhar5/container-styling

Separate container styling into header, footer and body styles
lowcoder-org · Jan 16, 2024 · 90babb9 · 90babb9
2 parents e616845 + 6f055ab
commit 90babb9
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 64 deletions.
diff --git a/client/packages/lowcoder-design/src/components/Collapase.tsx b/client/packages/lowcoder-design/src/components/Collapase.tsx
@@ -26,6 +26,10 @@ const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
     line-height: 23px;
     user-select: none;
     cursor: pointer;
+
+    .ant-collapse-header-text {
+      min-width: 0;
+    }
   }
 
   .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -45,6 +45,21 @@ export const ContainerBaseComp = (function () {
             <Section name={sectionNames.style}>
               { children.container.stylePropertyView() }
             </Section>
+            {children.container.children.showHeader.getView() && (
+              <Section name={"Header Style"}>
+                { children.container.headerStylePropertyView() }
+              </Section>
+            )}
+            {children.container.children.showBody.getView() && (
+              <Section name={"Body Style"}>
+                { children.container.bodyStylePropertyView() }
+              </Section>
+            )}
+            {children.container.children.showFooter.getView() && (
+              <Section name={"Footer Style"}>
+                { children.container.footerStylePropertyView() }
+              </Section>
+            )}
             </>
           )}
         </>

diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -218,6 +218,21 @@ const FormBaseComp = (function () {
               <Section name={sectionNames.style}>
                 {children.container.stylePropertyView()}
               </Section>
+              {children.container.children.showHeader.getView() && (
+                <Section name={"Header Style"}>
+                  { children.container.headerStylePropertyView() }
+                </Section>
+              )}
+              {children.container.children.showBody.getView() && (
+                <Section name={"Body Style"}>
+                  { children.container.bodyStylePropertyView() }
+                </Section>
+              )}
+              {children.container.children.showFooter.getView() && (
+                <Section name={"Footer Style"}>
+                  { children.container.footerStylePropertyView() }
+                </Section>
+              )}
             </>
           )}
 

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -52,13 +52,14 @@ const BodyInnerGrid = styled(InnerGrid)<{
   $showBorder: boolean;
   $backgroundColor: string;
   $borderColor: string;
+  $borderWidth: string;
   $backgroundImage: string;
   $backgroundImageRepeat: string;
   $backgroundImageSize: string;
   $backgroundImagePosition: string;
   $backgroundImageOrigin: string;
 }>`
-  border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
+  border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
   flex: 1;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
@@ -73,13 +74,14 @@ const FooterInnerGrid = styled(InnerGrid)<{
   $showBorder: boolean;
   $backgroundColor: string;
   $borderColor: string;
+  $borderWidth: string;
   $footerBackgroundImage: string;
   $footerBackgroundImageRepeat: string;
   $footerBackgroundImageSize: string;
   $footerBackgroundImagePosition: string;
   $footerBackgroundImageOrigin: string;
 }>`
-  border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
+  border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
   overflow: visible;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
@@ -103,7 +105,12 @@ export function TriContainer(props: TriContainerProps) {
   const { items: headerItems, ...otherHeaderProps } = container.header;
   const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
   const { items: footerItems, ...otherFooterProps } = container.footer;
-  const { style } = container;
+  const {
+    style,
+    headerStyle,
+    bodyStyle,
+    footerStyle,
+  } = container;
 
   const editorState = useContext(EditorContext);
   const maxWidth = editorState.getAppSettings().maxWidth;
@@ -114,7 +121,7 @@ export function TriContainer(props: TriContainerProps) {
     <div style={{padding: style.margin, height: '100%'}}>
     <Wrapper $style={style}>
       {showHeader && (
-        <BackgroundColorContext.Provider value={container.style.headerBackground}>
+        <BackgroundColorContext.Provider value={headerStyle.headerBackground}>
           <HeaderInnerGrid
             {...otherHeaderProps}
             items={gridItemCompToGridItems(headerItems)}
@@ -123,19 +130,19 @@ export function TriContainer(props: TriContainerProps) {
             minHeight="46px"
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
-            $backgroundColor={style?.headerBackground}
-            $headerBackgroundImage={style?.headerBackgroundImage}
-            $headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
-            $headerBackgroundImageSize={style?.headerBackgroundImageSize}
-            $headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
-            $headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
-            style={{padding: style.containerheaderpadding}}
+            $backgroundColor={headerStyle?.headerBackground}
+            $headerBackgroundImage={headerStyle?.headerBackgroundImage}
+            $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
+            $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
+            $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
+            $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
+            style={{padding: headerStyle.containerheaderpadding}}
 
           />
         </BackgroundColorContext.Provider>
       )}
       {showBody && (
-        <BackgroundColorContext.Provider value={container.style.background}>
+        <BackgroundColorContext.Provider value={bodyStyle.background}>
           <BodyInnerGrid
             $showBorder={showHeader}
             {...otherBodyProps}
@@ -147,19 +154,20 @@ export function TriContainer(props: TriContainerProps) {
               (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
             }
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-            $backgroundColor={style?.background}
+            $backgroundColor={bodyStyle?.background}
             $borderColor={style?.border}
-            $backgroundImage={style?.backgroundImage}
-            $backgroundImageRepeat={style?.backgroundImageRepeat}
-            $backgroundImageSize={style?.backgroundImageSize}
-            $backgroundImagePosition={style?.backgroundImagePosition}
-            $backgroundImageOrigin={style?.backgroundImageOrigin}
-            style={{padding: style.containerbodypadding}}
+            $borderWidth={style?.borderWidth}
+            $backgroundImage={bodyStyle?.backgroundImage}
+            $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+            $backgroundImageSize={bodyStyle?.backgroundImageSize}
+            $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+            $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
+            style={{padding: bodyStyle.containerbodypadding}}
           />
         </BackgroundColorContext.Provider>
       )}
       {showFooter && (
-        <BackgroundColorContext.Provider value={container.style.footerBackground}>
+        <BackgroundColorContext.Provider value={footerStyle.footerBackground}>
           <FooterInnerGrid
             $showBorder={showHeader || showBody}
             {...otherFooterProps}
@@ -169,14 +177,15 @@ export function TriContainer(props: TriContainerProps) {
             minHeight={showBody ? "47px" : "46px"}
             containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
             showName={{ top: showHeader || showBody ? 20 : 0 }}
-            $backgroundColor={style?.footerBackground}
-            $footerBackgroundImage={style?.footerBackgroundImage}
-            $footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
-            $footerBackgroundImageSize={style?.footerBackgroundImageSize}
-            $footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
-            $footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
+            $backgroundColor={footerStyle?.footerBackground}
+            $footerBackgroundImage={footerStyle?.footerBackgroundImage}
+            $footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
+            $footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}
+            $footerBackgroundImagePosition={footerStyle?.footerBackgroundImagePosition}
+            $footerBackgroundImageOrigin={footerStyle?.footerBackgroundImageOrigin}
             $borderColor={style?.border}
-            style={{padding: style.containerfooterpadding}}
+            $borderWidth={style?.borderWidth}
+            style={{padding: footerStyle.containerfooterpadding}}
           />
         </BackgroundColorContext.Provider>
       )}

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
@@ -2,7 +2,12 @@ import { JSONValue } from "util/jsonTypes";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ContainerStyle } from "comps/controls/styleControlConstants";
+import {
+  ContainerStyle,
+  ContainerHeaderStyle,
+  ContainerBodyStyle,
+  ContainerFooterStyle,
+} from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { NameGenerator } from "comps/utils";
@@ -36,6 +41,9 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
 
   style: styleControl(ContainerStyle),
+  headerStyle: styleControl(ContainerHeaderStyle),
+  bodyStyle: styleControl(ContainerBodyStyle),
+  footerStyle: styleControl(ContainerFooterStyle),
 };
 
 // Compatible with old style data 2022-8-15
@@ -127,6 +135,17 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
     return this.children.style.getPropertyView();
   }
 
+  headerStylePropertyView() {
+    return this.children.headerStyle.getPropertyView();
+  }
+
+  bodyStylePropertyView() {
+    return this.children.bodyStyle.getPropertyView();
+  }
+
+  footerStylePropertyView() {
+    return this.children.footerStyle.getPropertyView();
+  }
 }
 
 function checkEquals(node1: Node<unknown>, node2: Node<unknown>): boolean {

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -489,46 +489,53 @@ export const MarginStyle = [
 
 
 export const ContainerStyle = [
-  ...BG_STATIC_BORDER_RADIUS,
+  // ...BG_STATIC_BORDER_RADIUS,
+  getStaticBorder(),
+  RADIUS,
   BORDER_WIDTH,
-  HEADER_BACKGROUND,
-  {
-    name: "footerBackground",
-    label: trans("style.footerBackground"),
-    depName: "background",
-    depType: DEP_TYPE.SELF,
-    transformer: toSelf,
-  },
   MARGIN,	
   PADDING,
+] as const;
+
+export const ContainerHeaderStyle = [
   CONTAINERHEADERPADDING,
-  CONTAINERFOOTERPADDING,
-  CONTAINERBODYPADDING,
+  HEADER_BACKGROUND,
   {
     name: "headerBackgroundImage",
-    label: trans("style.headerBackgroundImage"),
+    label: trans("style.backgroundImage"),
     headerBackgroundImage: "headerBackgroundImage",
   },
   {
     name: "headerBackgroundImageRepeat",
-    label: trans("style.headerBackgroundImageRepeat"),
+    label: trans("style.backgroundImageRepeat"),
     headerBackgroundImageRepeat: "headerBackgroundImageRepeat",
   },
   {
     name: "headerBackgroundImageSize",
-    label: trans("style.headerBackgroundImageSize"),
+    label: trans("style.backgroundImageSize"),
     headerBackgroundImageSize: "headerBackgroundImageSize",
   },
   {
     name: "headerBackgroundImagePosition",
-    label: trans("style.headerBackgroundImagePosition"),
+    label: trans("style.backgroundImagePosition"),
     headerBackgroundImagePosition: "headerBackgroundImagePosition",
   }
   ,{
     name: "headerBackgroundImageOrigin",
-    label: trans("style.headerBackgroundImageOrigin"),
+    label: trans("style.backgroundImageOrigin"),
     headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
   },
+] as const;
+
+export const ContainerBodyStyle = [
+  CONTAINERBODYPADDING,
+  {
+    name: "background",
+    label: trans("style.background"),
+    depName: "background",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
   {
     name: "backgroundImage",
     label: trans("style.backgroundImage"),
@@ -554,29 +561,40 @@ export const ContainerStyle = [
     label: trans("style.backgroundImageOrigin"),
     backgroundImageOrigin: "backgroundImageOrigin",
   },
+] as const;
+
+export const ContainerFooterStyle = [
+  CONTAINERFOOTERPADDING,
+  {
+    name: "footerBackground",
+    label: trans("style.background"),
+    depName: "background",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
   {
     name: "footerBackgroundImage",
-    label: trans("style.footerBackgroundImage"),
+    label: trans("style.backgroundImage"),
     footerBackgroundImage: "footerBackgroundImage",
   },
   {
     name: "footerBackgroundImageRepeat",
-    label: trans("style.footerBackgroundImageRepeat"),
+    label: trans("style.backgroundImageRepeat"),
     footerBackgroundImageRepeat: "footerBackgroundImageRepeat",
   },
   {
     name: "footerBackgroundImageSize",
-    label: trans("style.footerBackgroundImageSize"),
+    label: trans("style.backgroundImageSize"),
     footerBackgroundImageSize: "footerBackgroundImageSize",
   },
   {
     name: "footerBackgroundImagePosition",
-    label: trans("style.footerBackgroundImagePosition"),
+    label: trans("style.backgroundImagePosition"),
     footerBackgroundImagePosition: "footerBackgroundImagePosition",
   }
   ,{
     name: "footerBackgroundImageOrigin",
-    label: trans("style.footerBackgroundImageOrigin"),
+    label: trans("style.backgroundImageOrigin"),
     footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
   }
 ] as const;
@@ -1312,6 +1330,9 @@ export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
 export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
+export type ContainerHeaderStyleType = StyleConfigType<typeof ContainerHeaderStyle>;
+export type ContainerBodyStyleType = StyleConfigType<typeof ContainerBodyStyle>;
+export type ContainerFooterStyleType = StyleConfigType<typeof ContainerFooterStyle>;
 export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
 export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
 export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -360,21 +360,21 @@ export const en = {
     "aspectRatio": "Aspect Ratio",
     "textSize": "Text Size",
     "textWeight": "Text Weight",
-    "backgroundImage": "BgImage",
-    "backgroundImageRepeat": "BgImage Repeat",
-    "backgroundImageSize": "BgImage Size",
-    "backgroundImagePosition": "BgImage Position",
-    "backgroundImageOrigin": "BgImage Origin",
-    "headerBackgroundImage": "Header BgImage",
-    "headerBackgroundImageRepeat": "Header BgImage Repeat",
-    "headerBackgroundImageSize": "Header BgImage Size",
-    "headerBackgroundImagePosition": "Header BgImage Position",
-    "headerBackgroundImageOrigin": "Header BgImage Origin",
-    "footerBackgroundImage": "Footer BgImage",
-    "footerBackgroundImageRepeat": "Footer BgImage Repeat",
-    "footerBackgroundImageSize": "Footer BgImage Size",
-    "footerBackgroundImagePosition": "Footer BgImage Position",
-    "footerBackgroundImageOrigin": "Footer BgImage Origin",
+    "backgroundImage": "BG Image",
+    "backgroundImageRepeat": "BG Repeat",
+    "backgroundImageSize": "BG Size",
+    "backgroundImagePosition": "BG Position",
+    "backgroundImageOrigin": "BG Origin",
+    "headerBackgroundImage": "BgImage",
+    "headerBackgroundImageRepeat": "BgImage Repeat",
+    "headerBackgroundImageSize": "BgImage Size",
+    "headerBackgroundImagePosition": "BgImage Position",
+    "headerBackgroundImageOrigin": "BgImage Origin",
+    "footerBackgroundImage": "BgImage",
+    "footerBackgroundImageRepeat": "BgImage Repeat",
+    "footerBackgroundImageSize": "BgImage Size",
+    "footerBackgroundImagePosition": "BgImage Position",
+    "footerBackgroundImageOrigin": "BgImage Origin",
   },
   "export": {
     "hiddenDesc": "If true, the component is hidden",