Merge branch 'main' of https://github.com/aaron1604/lowcoder into fea…

…t/margin-padding
lowcoder-org · FalkWolsky · Jul 12, 2023 · Jul 10, 2023 · Jul 10, 2023 · Jul 12, 2023
commit cf3a59e578e03f289e727cc1bf6ec288df950d59
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -285,4 +285,5 @@ 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"
+export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"
+export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -46,6 +46,7 @@ export interface ThemeDetail {
   chart?: string;
   margin?: string;	
   padding?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -66,6 +67,9 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
       return trans("style.margin");	
     case "padding":	
       return trans("style.padding");
+    //Added By Aqib Mirza
+    case "gridColumns":
+      return trans("themeDetail.gridColumns");
   }
   return "";
 }
@@ -79,6 +83,7 @@ export function isThemeColorKey(key: string) {
     case "primarySurface":
     case "margin":	
     case "padding":
+    case "gridColumns": //Added By Aqib Mirza
       return true;
   }
   return false;

diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
@@ -1,6 +1,6 @@
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { ConfigItem, Radius, Margin, Padding } from "../pages/setting/theme/styledComponents";
+import { ConfigItem, Radius, Margin, Padding, GridColumns } from "../pages/setting/theme/styledComponents";
 import { isValidColor, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
 import { TacoInput } from "components/tacoInput";
@@ -15,6 +15,7 @@ export type configChangeParams = {
   chart?: string;
   margin?: string;	
   padding?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 };
 
 type ColorConfigProps = {
@@ -28,6 +29,7 @@ type ColorConfigProps = {
   showVarName?: boolean;
   margin?: string;	
   padding?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 };
 
 export default function ColorPicker(props: ColorConfigProps) {
@@ -41,13 +43,15 @@ export default function ColorPicker(props: ColorConfigProps) {
     showVarName = true,
     margin: defaultMargin,	
     padding: defaultPadding,
+    gridColumns: defaultGridColumns, //Added By Aqib Mirza
   } = 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 [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
 
   const varName = `(${colorKey})`;
 
@@ -104,6 +108,21 @@ export default function ColorPicker(props: ColorConfigProps) {
     configChange({ colorKey, padding: result });	
   };
 
+  //Added By Aqib Mirza
+
+  const gridColumnsInputBlur = (gridColumns: string) => {
+    let result = "";
+    if (!gridColumns) {
+      result = "0";
+    } else {
+      result = gridColumns;
+    }
+    setGridColumns(result);
+    configChange({ colorKey, gridColumns: result });
+  };
+
+  /////////////////////
+
   useEffect(() => {
     if (color && isValidColor(color)) {
       configChangeWithDebounce({ colorKey, color });
@@ -126,6 +145,11 @@ export default function ColorPicker(props: ColorConfigProps) {
   useEffect(() => {	
     setPadding(defaultPadding);	
   }, [defaultPadding]);
+  // Added By Aqib Mirza
+  useEffect(() => {
+    setGridColumns(defaultGridColumns);
+  }, [defaultGridColumns]);
+  //////////////////////
 
   return (
     <ConfigItem className={props.className}>
@@ -137,7 +161,8 @@ export default function ColorPicker(props: ColorConfigProps) {
       </div>
       {colorKey !== "borderRadius" &&	
         colorKey !== "margin" &&	
-        colorKey !== "padding" && (
+        colorKey !== "padding" && 
+      colorKey !== "gridColumns" && (
         <div className="config-input">
           <ColorSelect
             changeColor={_.debounce(setColor, 500, {
@@ -154,7 +179,7 @@ export default function ColorPicker(props: ColorConfigProps) {
             onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
           />
         </div>
-      )}
+      )} 
       {colorKey === "borderRadius" && (
         <div className="config-input">
           <Radius radius={defaultRadius || "0"}>
@@ -204,7 +229,25 @@ export default function ColorPicker(props: ColorConfigProps) {
               paddingInputBlur(e.currentTarget.value)	
             }	
           />	
-        </div>	
+        </div>
+        )}
+      {colorKey === "gridColumns" && (
+        <div className="config-input">
+          <GridColumns gridColumns={defaultGridColumns || "24"}>
+            <div>
+              <GridIcon title="" />
+            </div>
+          </GridColumns>
+          <TacoInput
+            value={gridColumns}
+            onChange={(e) => setGridColumns(e.target.value)}
+            onBlur={(e) => gridColumnsInputBlur(e.target.value)}
+            onKeyUp={(e) =>
+              e.nativeEvent.key === "Enter" &&
+              gridColumnsInputBlur(e.currentTarget.value)
+            }
+          />
+        </div>
       )}
     </ConfigItem>
   );

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -39,6 +39,7 @@ export const defaultTheme: ThemeDetail = {
   borderRadius: "4px",
   margin: "3px",	
   padding: "3px",
+  gridColumns: "24",
 };
 
 export const SURFACE_COLOR = "#FFFFFF";

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -284,6 +284,10 @@ 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",
+    //Added By Aqib Mirza
+    gridColumns: "Grid Columns",
+    gridColumnsDesc:
+      "The default number of columns is typically used for most containers",
   },
   style: {
     resetTooltip: "Reset styles. Delete the input's value to reset an individual field.",

diff --git 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<ThemeDetailPageProps, ThemeDetailP
     this.setState({
       theme: {
         ...this.state.theme,
-        [params.colorKey]: params.color || params.radius || params.chart || params.margin || params.padding,
+        [params.colorKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.gridColumns,
       },
     });
   }
@@ -272,6 +272,18 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   }}
                 />
               </div>
+              <div>
+                <DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
+                <ColorPicker
+                  colorKey="gridColumns"
+                  name={trans("themeDetail.gridColumns")}
+                  desc={trans("themeDetail.gridColumnsDesc")}
+                  gridColumns={this.state.theme.gridColumns}
+                  configChange={(params) => {
+                    this.configChange(params);
+                  }}
+                />
+              </div>
             </div>
             <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />
             <div className="chart">

diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -672,5 +672,15 @@ export const Padding = styled.div<{ padding: string }>`
       fill: currentColor;	
     }	
   }	
-}	
+}`
+// Added By Aqib Mirza
+export const GridColumns = styled.div<{ gridColumns: string }>`
+  > div {
+    margin: 3px;
+    overflow: hidden;
+      > svg {
+        fill: currentColor;
+      }
+    }
+  }
 `;