Column Layout & Responsive Layout style update

Author: FalkWolsky

client/packages/lowcoder-design/src/components/Section.tsx

@@ -158,4 +158,5 @@ export const sectionNames = {
   headerStyle:trans("prop.headerStyle"),
   bodyStyle:trans("prop.bodyStyle"),
   badgeStyle:trans("prop.badgeStyle"),
+  columnStyle:trans("prop.columnStyle"),
 };

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -37,6 +37,7 @@ export const en = {
     headerStyle: 'Header Style',
     bodyStyle: 'Body Style',
     badgeStyle: 'Badge Style',
+    columnStyle: 'Column Style',
   },
   passwordInput: {
     label: "Password:",

client/packages/lowcoder-design/src/i18n/design/locales/zh.ts

@@ -1,4 +1,7 @@
-export const zh = {
+import {en} from "./en";
+
+export const zh: typeof en = {
+    ...en,
     addItem: "添加",
     duplicate: "复制",
     rename: "重命名",
@@ -10,54 +13,64 @@ export const zh = {
     nextStep: "下一步",
     finish: "完成",
     country: {
-      china: "中国",
+        ...en.country,
+        china: "中国",
     },
     notification: {
-      copySuccess: "复制成功",
-      copyFail: "复制失败",
+        ...en.notification,
+        copySuccess: "复制成功",
+        copyFail: "复制失败",
     },
     prop: {
-      basic: "基础",
-      resources: "资源",
-      interaction: "交互",
-      advanced: "高级",
-      validation: "验证",
-      layout: "布局",
-      labelStyle:"标签样式",
-      style: "样式",
-      meetings: "会议",
-      data: "数据",
+        ...en.prop,
+        basic: "基础",
+        resources: "资源",
+        interaction: "交互",
+        advanced: "高级",
+        validation: "验证",
+        layout: "布局",
+        labelStyle:"标签样式",
+        style: "样式",
+        meetings: "会议",
+        data: "数据",
     },
     passwordInput: {
+        ...en.passwordInput,
         label: "密码:",
         placeholder: "请输入密码",
         inconsistentPassword: "两次密码输入不一致",
         confirmPasswordLabel: "确认密码:",
         confirmPasswordPlaceholder: "请再次输入密码",
     },
     verifyCodeInput: {
+        ...en.verifyCodeInput,
         label: "验证码:",
         errorMsg: "验证码应为 {digitNum} 位数字",
         placeholder: "请输入 {digitNum} 位数字验证码",
         sendCode: "发送验证码",
     },
     iconSelect: {
+        ...en.iconSelect,
         title: "选择图标",
         searchPlaceholder: "搜索图标",
     },
     eventHandler: {
+        ...en.eventHandler,
         advanced: "高级",
     },
     comp: {
+        ...en.comp,
         selectedCompsTitle: "已选择 {selectCompNum} 个组件",
         selectedCompsDetail: "点击组件查看其属性",
         batchDelete: "批量删除",
     },
     optionsControl: {
+        ...en.optionsControl,
         optionItemErrorMSg: `发现重复的选项值 "{value}"，只会显示第一项,请更改为唯一值.`,
         emptyList: "无选项",
     },
     container: {
+        ...en.container,
         hintPlaceHolder: "从右侧面板拖动组件",
     },
   };

client/packages/lowcoder-design/src/icons/index.ts

@@ -264,6 +264,7 @@ export { ReactComponent as ChartCompIconSmall } from "./v2/pie-chart-s.svg";
 export { ReactComponent as CheckboxCompIconSmall } from "./v2/checkbox-s.svg";
 export { ReactComponent as ColorPickerCompIconSmall } from "./v2/colorpicker-s.svg"; // new
 export { ReactComponent as CollapsibleContainerCompIconSmall } from "./v2/collapsible-container-s.svg"; // new
+export { ReactComponent as ColumnLayoutCompIconSmall } from "./v2/column-layout-s.svg"; // new
 export { ReactComponent as CommentCompIconSmall } from "./v2/comment-s.svg";
 export { ReactComponent as ContainerCompIconSmall } from "./v2/container-s.svg";
 export { ReactComponent as CustomCompIconSmall } from "./v2/custom-code-s.svg"; // new
@@ -365,6 +366,7 @@ export { ReactComponent as CascaderCompIcon } from "./v2/cascader-m.svg";
 export { ReactComponent as ChartCompIcon } from "./v2/pie-chart-m.svg";
 export { ReactComponent as CheckboxCompIcon } from "./v2/checkbox-m.svg";
 export { ReactComponent as CollapsibleContainerCompIcon } from "./v2/collapsible-container-m.svg";
+export { ReactComponent as ColumnLayoutCompIcon } from "./v2/column-layout-m.svg";
 export { ReactComponent as CommentCompIcon } from "./v2/comment-m.svg";
 export { ReactComponent as ColorPickerCompIcon } from "./v2/colorpicker-m.svg";
 export { ReactComponent as ContainerCompIcon } from "./v2/container-m.svg";

client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

@@ -7,11 +7,12 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { ColumnOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
-  ResponsiveLayoutRowStyle,
-  ResponsiveLayoutRowStyleType,
+  ContainerStyle,
+  ContainerStyleType,
   ResponsiveLayoutColStyleType,
   ResponsiveLayoutColStyle
 } from "comps/controls/styleControlConstants";
+
 import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
@@ -40,14 +41,33 @@ import { EditorContext } from "comps/editorState";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 
+const ContainWrapper = styled.div<{
+  $style: ContainerStyleType | undefined;
+}>`
+  background-color: ${(props) => props.$style?.background} !important;
+  border-radius: ${(props) => props.$style?.radius};
+  border-width: ${(props) => props.$style?.borderWidth};
+  border-color: ${(props) => props.$style?.border};
+  border-style: ${(props) => props.$style?.borderStyle};
+  rotate: ${(props) => props.$style?.rotation};
+  margin: ${(props) => props.$style?.margin};
+  padding: ${(props) => props.$style?.padding};
+`;
 
 const ColWrapper = styled(Col)<{
-  $style: ResponsiveLayoutColStyleType,
+  $style: ResponsiveLayoutColStyleType | undefined,
   $minWidth?: string,
   $matchColumnsHeight: boolean,
 }>`
   > div {
     height: ${(props) => props.$matchColumnsHeight ? '100%' : 'auto'};
+    background-color: ${(props) => props.$style?.background} !important;
+    border-radius: ${(props) => props.$style?.radius};
+    border-width: ${(props) => props.$style?.borderWidth};
+    border-color: ${(props) => props.$style?.border};
+    border-style: ${(props) => props.$style?.borderStyle};
+    margin: ${(props) => props.$style?.margin};
+    padding: ${(props) => props.$style?.padding};
   }
 `;
 
@@ -64,7 +84,8 @@ const childrenMap = {
   rowGap: withDefault(StringControl, "20px"),
   templateColumns: withDefault(StringControl, "1fr 1fr"),
   columnGap: withDefault(StringControl, "20px"),
-  columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {})
+  style: withDefault(styleControl(ContainerStyle), {}),
+  columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle),{borderWidth:'1px'})
 };
 
 type ViewProps = RecordConstructorToView<typeof childrenMap>;
@@ -89,7 +110,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
 
 const ColumnLayout = (props: ColumnLayoutProps) => {
   let {
-    columns,
+    columns, 
     containers,
     dispatch,
     matchColumnsHeight,
@@ -103,15 +124,15 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
   return (
     <BackgroundColorContext.Provider value={"none"}>
       <DisabledContext.Provider value={props.disabled}>
-        <div style={{height: '100%', backgroundColor: "pink"}}>
+        <ContainWrapper $style={props.style}>
           <div style={{display: "grid", gridTemplateColumns: templateColumns, columnGap, gridTemplateRows: templateRows, rowGap}}>
             {columns.map(column => {
               const id = String(column.id);
               const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
               if(!containers[id]) return null
               const containerProps = containers[id].children;
 
-              const columnCustomStyle = {
+              /* const columnCustomStyle = {
                 margin: "0",
                 padding: !_.isEmpty(column.padding) ? column.padding : "0",
                 radius: "0",
@@ -121,16 +142,16 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
                 backgroundImage: "linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, rgba(253, 246, 199, 1) 0%, rgba(253, 246, 199, 1) 100%)",
                 backgroundClip: "content-box, padding-box", 
                
-              }
+              } */
               const noOfColumns = columns.length;
-              let backgroundStyle = columnCustomStyle.background;
+              /* let backgroundStyle = columnCustomStyle.background;
               if(!_.isEmpty(column.backgroundImage))  {
                 backgroundStyle = `center / cover url('${column.backgroundImage}') no-repeat, ${backgroundStyle}`;
-              }
+              } */
               return (
                 <ColWrapper
                   key={id}
-                  $style={columnCustomStyle}
+                  $style={props.columnStyle}
                   $minWidth={column.minWidth}
                   $matchColumnsHeight={matchColumnsHeight}
                 >
@@ -140,17 +161,14 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
                     positionParams={containerProps.positionParams.getView()}
                     dispatch={childDispatch}
                     autoHeight={props.autoHeight}
-                    style={{
-                      ...columnCustomStyle,
-                      background: backgroundStyle,
-                    }}
+                    style={columnStyle}
                   />
                 </ColWrapper>
               )
               })
             }
           </div>
-        </div>
+        </ContainWrapper>
         </DisabledContext.Provider>
     </BackgroundColorContext.Provider>
   );
@@ -170,8 +188,6 @@ export const ResponsiveLayoutBaseComp = (function () {
               title: trans("responsiveLayout.column"),
               newOptionLabel: "Column",
             })}
-            {children.templateColumns.propertyView({label: "Column Definition"})}
-            {children.templateRows.propertyView({label: "Row Definition"})}
           </Section>
 
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
@@ -187,19 +203,29 @@ export const ResponsiveLayoutBaseComp = (function () {
               {children.autoHeight.getPropertyView()}
             </Section>
             <Section name={trans("responsiveLayout.columnsLayout")}>
-              {children.matchColumnsHeight.propertyView({
-                label: trans("responsiveLayout.matchColumnsHeight")
+              {children.matchColumnsHeight.propertyView({ label: trans("responsiveLayout.matchColumnsHeight")
               })}
               {controlItem({}, (
-                <div style={{ marginTop: '8px' }}>
-                  {trans("responsiveLayout.columnsSpacing")}
-                </div>
+                <div style={{ marginTop: '8px' }}>{trans("responsiveLayout.columnsSpacing")}</div>
               ))}
+              {children.templateColumns.propertyView({label: "Column Definition"})}
+              {children.templateRows.propertyView({label: "Row Definition"})}
               {children.columnGap.propertyView({label: "Column Gap"})}
               {children.rowGap.propertyView({label: "Row Gap"})}
             </Section>
             </>
           )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.columnStyle}>
+                {children.columnStyle.getPropertyView()}
+              </Section>
+            </>
+          )}
         </>
       );
     })

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

@@ -22,7 +22,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;
 
-const Warpper = styled.div<{
+const Wrapper = styled.div<{
   $style: CardStyleType | undefined;
   $showMate: boolean;
   $cardType: string;
@@ -103,12 +103,12 @@ const Warpper = styled.div<{
   }
 `;
 
-const ContainWarpper = styled.div`
+const ContainWrapper = styled.div`
   height: 100%;
   width: 100%;
 `
 
-const IconWarpper = styled.div<{ $style: CardStyleType | undefined, disabled: boolean }>`
+const IconWrapper = styled.div<{ $style: CardStyleType | undefined, disabled: boolean }>`
   pointer-events: ${props => props.disabled ? 'none' : ''};
   svg {
     color: ${props => props.disabled ? '#d9d9d9' : props.$style?.IconColor};
@@ -208,7 +208,7 @@ export const ContainerBaseComp = (function () {
     };
     return (
       <ReactResizeDetector onResize={onResize}>
-        <Warpper
+        <Wrapper
           ref={conRef}
           $style={props.style}
           $animationStyle={props.animationStyle}
@@ -233,23 +233,23 @@ export const ContainerBaseComp = (function () {
             actions={props.cardType == 'common' && props.showActionIcon ?
               props.actionOptions.filter(item => !item.hidden).map(item => {
                 return (
-                  <IconWarpper
+                  <IconWrapper
                     onClick={() => item.onEvent('click')}
                     disabled={item.disabled}
                     $style={props.style}
                   >
                     {item.icon}
-                  </IconWarpper>)
+                  </IconWrapper>)
               }
               ) : []
             }
           >
             {props.cardType == 'common' && props.showMeta && <Meta title={props.metaTitle} description={props.metaDesc} />}
-            {props.cardType == 'custom' && <ContainWarpper>
-              <TriContainer {...props} /></ContainWarpper>}
+            {props.cardType == 'custom' && <ContainWrapper>
+              <TriContainer {...props} /></ContainWrapper>}
           </Card>
           }
-        </Warpper>
+        </Wrapper>
       </ReactResizeDetector>
     );
   })