Merge pull request #270 from aaron1604/feat./grid-column-settings

feat: grid column settings in  theme

Author: FalkWolsky

client/packages/lowcoder-design/src/icons/icon-table-cells.svg

@@ -284,3 +284,4 @@ export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete
 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 TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza

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

@@ -44,6 +44,7 @@ export interface ThemeDetail {
   primarySurface: string; // comp bg-color
   borderRadius: string;
   chart?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -60,6 +61,9 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
       return trans("themeDetail.primarySurface");
     case "borderRadius":
       return trans("themeDetail.borderRadius");
+    //Added By Aqib Mirza
+    case "gridColumns":
+      return trans("themeDetail.gridColumns");
   }
   return "";
 }
@@ -71,6 +75,7 @@ export function isThemeColorKey(key: string) {
     case "textLight":
     case "canvas":
     case "primarySurface":
+    case "gridColumns": //Added By Aqib Mirza
       return true;
   }
   return false;

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -1,15 +1,17 @@
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { ConfigItem, Radius } from "../pages/setting/theme/styledComponents";
+import { ConfigItem, Radius, GridColumns } from "../pages/setting/theme/styledComponents";
 import { isValidColor, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
 import { TacoInput } from "components/tacoInput";
+import { TableCellsIcon as GridIcon } from "lowcoder-design"; //Added By Aqib Mirza
 
 export type configChangeParams = {
   colorKey: string;
   color?: string;
   radius?: string;
   chart?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 };
 
 type ColorConfigProps = {
@@ -21,6 +23,7 @@ type ColorConfigProps = {
   radius?: string;
   configChange: (params: configChangeParams) => void;
   showVarName?: boolean;
+  gridColumns?: string; //Added By Aqib Mirza
 };
 
 export default function ColorPicker(props: ColorConfigProps) {
@@ -32,10 +35,14 @@ export default function ColorPicker(props: ColorConfigProps) {
     radius: defaultRadius,
     configChange,
     showVarName = true,
+    gridColumns: defaultGridColumns, //Added By Aqib Mirza
   } = props;
   const configChangeWithDebounce = _.debounce(configChange, 0);
   const [color, setColor] = useState(defaultColor);
   const [radius, setRadius] = useState(defaultRadius);
+
+  const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
+
   const varName = `(${colorKey})`;
 
   const colorInputBlur = () => {
@@ -62,6 +69,21 @@ export default function ColorPicker(props: ColorConfigProps) {
     configChange({ colorKey, radius: 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 });
@@ -77,6 +99,12 @@ export default function ColorPicker(props: ColorConfigProps) {
     setRadius(defaultRadius);
   }, [defaultRadius]);
 
+  // Added By Aqib Mirza
+  useEffect(() => {
+    setGridColumns(defaultGridColumns);
+  }, [defaultGridColumns]);
+  //////////////////////
+
   return (
     <ConfigItem className={props.className}>
       <div className="text-desc">
@@ -85,7 +113,8 @@ export default function ColorPicker(props: ColorConfigProps) {
         </div>
         <div className="desc">{desc}</div>
       </div>
-      {colorKey !== "borderRadius" ? (
+      {colorKey !== "borderRadius" &&
+      colorKey !== "gridColumns" && (
         <div className="config-input">
           <ColorSelect
             changeColor={_.debounce(setColor, 500, {
@@ -102,7 +131,8 @@ export default function ColorPicker(props: ColorConfigProps) {
             onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
           />
         </div>
-      ) : (
+      )} 
+      {colorKey === "borderRadius" && (
         <div className="config-input">
           <Radius radius={defaultRadius || "0"}>
             <div>
@@ -117,6 +147,24 @@ export default function ColorPicker(props: ColorConfigProps) {
           />
         </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>
   );
 }

client/packages/lowcoder/src/components/ColorPicker.tsx

@@ -58,6 +58,8 @@ import { checkIsMobile } from "util/commonUtils";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { selectCompModifierKeyPressed } from "util/keyUtils";
 import { defaultLayout, GridItemComp, GridItemDataType } from "../gridItemComp";
+import { ThemeContext } from "comps/utils/themeContext";
+import { defaultTheme } from "comps/controls/styleControlConstants";
 
 const childrenMap = {
   layout: valueComp<Layout>({}),
@@ -312,6 +314,12 @@ export function InnerGrid(props: ViewPropsWithSelect) {
   const editorState = useContext(EditorContext);
   const { readOnly } = useContext(ExternalEditorContext);
 
+  //Added By Aqib Mirza
+  const defaultGrid =
+    useContext(ThemeContext)?.theme?.gridColumns ||
+    defaultTheme?.gridColumns ||
+    "24";
+  /////////////////////
   const isDroppable =
     useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
   const isDraggable = !readOnly && (_.isNil(props.isDraggable) || props.isDraggable);
@@ -354,7 +362,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
           margin: [0, 0],
           containerPadding: [0, 0],
           containerWidth: width,
-          cols: DEFAULT_GRID_COLUMNS,
+          cols: parseInt(defaultGrid),
           rowHeight: currentRowHeight,
           maxRows: currentRowCount,
         };
@@ -493,7 +501,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
       rowHeight={currentRowHeight}
       overflow={props.overflow}
       extraHeight={props.extraHeight}
-      cols={DEFAULT_GRID_COLUMNS}
+      cols={parseInt(defaultGrid)}
       autoHeight={props.autoHeight}
       minHeight={props.minHeight}
       bgColor={props.bgColor}

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

@@ -91,6 +91,18 @@ export function CanvasView(props: ContainerBaseProps) {
   const isModule = appType === AppTypeEnum.Module;
   const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
 
+  // Added By Aqib Mirza
+  const defaultGrid =
+    useContext(ThemeContext)?.theme?.gridColumns ||
+    defaultTheme?.gridColumns ||
+    "24";
+
+  const positionParams = {
+    ...props.positionParams,
+    cols: parseInt(defaultGrid),
+  };
+  //////////////////////
+
   if (readOnly) {
     return (
       <UICompContainer
@@ -105,6 +117,7 @@ export function CanvasView(props: ContainerBaseProps) {
               containerPadding={rootContainerPadding}
               overflow={rootContainerOverflow}
               {...props}
+              positionParams={positionParams} // Added By Aqib Mirza
               {...gridLayoutCanvasProps}
               bgColor={bgColor}
               radius="0px"

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

@@ -23,6 +23,7 @@ import ModuleMethodListComp from "./moduleMethodListComp";
 import { ConfigViewWrapper } from "./styled";
 import { CNRootContainer } from "constants/styleSelectors";
 import styled from "styled-components";
+import { ThemeContext } from "comps/utils/themeContext";
 
 export const MODULE_LAYOUT_COMP = "@moduleLayoutComp";
 
@@ -60,6 +61,8 @@ const moduleContainerId = "moduleContainer";
 function ModuleLayoutView(props: IProps) {
   const { containerSize, containerView, positionParams, onPositionParamsChange, onLayoutChange } =
     props;
+
+  const defaultGrid = useContext(ThemeContext)?.theme?.gridColumns || "24"; //Added By Aqib Mirza
   const { readOnly } = useContext(ExternalEditorContext);
 
   if (readOnly) {
@@ -94,7 +97,7 @@ function ModuleLayoutView(props: IProps) {
     <CanvasView
       layout={layout}
       items={items}
-      positionParams={positionParams}
+      positionParams={{ ...positionParams, cols: parseInt(defaultGrid) }}
       onPositionParamsChange={onPositionParamsChange}
       dispatch={_.noop}
       onLayoutChange={onLayoutChange}

client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx

@@ -31,6 +31,7 @@ export const defaultTheme: ThemeDetail = {
   canvas: "#F5F5F6",
   primarySurface: "#FFFFFF",
   borderRadius: "4px",
+  gridColumns: "24",
 };
 
 export const SURFACE_COLOR = "#FFFFFF";

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

@@ -280,6 +280,10 @@ export const en = {
     chart: "Chart style",
     chartDesc: "Input Echarts",
     echartsJson: "Theme JSON",
+    //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.",

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

@@ -7,7 +7,17 @@ export type PositionParams = Pick<
   "margin" | "containerPadding" | "containerWidth" | "cols" | "rowHeight" | "maxRows"
 >;
 
-export const DEFAULT_GRID_COLUMNS = 24;
+// Added By Aqib Mirza
+let gridColumns: number;
+
+const getDefaultGridColumns = () => {
+  return gridColumns;
+};
+
+export { getDefaultGridColumns };
+export const DEFAULT_GRID_COLUMNS = getDefaultGridColumns() || 24;
+//////////////////////
+
 export const DEFAULT_ROW_HEIGHT = 8;
 
 export const DEFAULT_POSITION_PARAMS: PositionParams = {

client/packages/lowcoder/src/layout/calculateUtils.tsx

@@ -147,7 +147,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
       );
       // log.debug("layout: getDrivedState. nextProps: ", nextProps.layout, " prevState: ", prevState.layout, " newLayoutBase: ", newLayoutBase, " newLayout: ", newLayout);
       return {
-        layout: newLayout,
+        layout: draggingUtils.isDragging() ? newLayout : nextProps.layout,
         // We need to save these props to state for using
         // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
         children: nextProps.children,

client/packages/lowcoder/src/layout/gridLayout.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.colorKey]: params.color || params.radius || params.chart || params.gridColumns,
       },
     });
   }
@@ -247,12 +247,26 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                 />
               </div>
             </div>
+            <div className="common">
+              <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">
               <DetailTitle>{trans("themeDetail.chart")}</DetailTitle>
               <ChartDesc>
                 {trans("themeDetail.chartDesc")}
-                <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html">
+                <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
                   {" "}
                   {trans("themeDetail.echartsJson")}
                 </a>

client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

@@ -653,3 +653,15 @@ export const CustomModalStyled = styled(CustomModal)`
     margin-top: 20px;
   }
 `;
+
+// Added By Aqib Mirza
+export const GridColumns = styled.div<{ gridColumns: string }>`
+  > div {
+    margin: 3px;
+    overflow: hidden;
+      > svg {
+        fill: currentColor;
+      }
+    }
+  }
+`;

client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx

@@ -29,6 +29,7 @@ export const themeTemplateList = [
       primarySurface: "#FFFFFF",
       borderRadius: "4px",
       chart: JSON.stringify(ChartTheme, null, 2),
+      gridColumns: "24", //Added By Aqib Mirza
     },
   },
   {
@@ -43,6 +44,7 @@ export const themeTemplateList = [
       primarySurface: "#495780",
       borderRadius: "4px",
       chart: JSON.stringify(ChartYellowTheme, null, 2),
+      gridColumns: "24", //Added By Aqib Mirza
     },
   },
   {
@@ -57,6 +59,7 @@ export const themeTemplateList = [
       primarySurface: "#FFFFFF",
       borderRadius: "4px",
       chart: JSON.stringify(ChartGreenTheme, null, 2),
+      gridColumns: "24", //Added By Aqib Mirza
     },
   },
 ];