theme canvas settings

lowcoder-org · FalkWolsky · Oct 25, 2024 · Oct 8, 2024 · Oct 8, 2024 · Oct 10, 2024
commit dba909705339c584168a40b02c7c8860451cce74
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
@@ -21,14 +21,21 @@ export type configChangeParams = {
   chart?: string;
   margin?: string;  
   padding?: string;
-  gridColumns?: string; // Added By Aqib Mirza
   borderStyle?: string;
   borderColor?: string;
   borderWidth?: string;
   fontFamily?: string;
   components?: Record<string, object>,
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  gridColumns?: string;
+  gridRowHeight?: string;
+  gridPadding?: string;
+  gridBgImage?: string;
+  gridBgImageRepeat?: string;
+  gridBgImageSize?: string;
+  gridBgImagePosition?: string;
+  gridBgImageOrigin?: string;
 };
 
 type ColorConfigProps = {
@@ -47,10 +54,16 @@ type ColorConfigProps = {
   fontFamily?: string;
   margin?: string;  
   padding?: string;
-  gridColumns?: string; // Added By Aqib Mirza
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
-  canvasItemValue?: string;
+  gridColumns?: string;
+  gridRowHeight?: string;
+  gridPadding?: string;
+  gridBgImage?: string;
+  gridBgImageRepeat?: string;
+  gridBgImageSize?: string;
+  gridBgImagePosition?: string;
+  gridBgImageOrigin?: string;
 };
 
 export default function ThemeSettingsSelector(props: ColorConfigProps) {
@@ -64,29 +77,41 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     showVarName = true,
     margin: defaultMargin,  
     padding: defaultPadding,
-    gridColumns: defaultGridColumns,
     borderStyle: defaultBorderStyle,
     borderWidth: defaultBorderWidth,
     borderColor: defaultBorderColor,
     fontFamily: defaultFontFamily,
     showComponentLoadingIndicators: defaultShowComponentLoaders,
     showDataLoadingIndicators: defaultShowDataLoaders,
-    canvasItemValue: defaultCanvasItemValue,
+    gridColumns: defaultGridColumns,
+    gridRowHeight: defaultGridRowHeight,
+    gridPadding: defaultGridPadding,
+    gridBgImage: defaultGridBgImage,
+    gridBgImageRepeat: defaultGridBgImageRepeat,
+    gridBgImageSize: defaultGridBgImageSize,
+    gridBgImagePosition: defaultGridBgImagePosition,
+    gridBgImageOrigin: defaultGridBgImageOrigin,
   } = 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); 
   const [borderStyle, setBorderStyle] = useState(defaultBorderStyle);
   const [borderWidth, setBorderWidth] = useState(defaultBorderWidth);
   const [borderColor, setBorderColor] = useState(defaultBorderColor);
   const [fontFamily, setFontFamily] = useState(defaultFontFamily);
   const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
   const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
-  const [canvasValue, setCanvasValue] = useState(defaultCanvasItemValue);
+  const [gridColumns, setGridColumns] = useState(defaultGridColumns); 
+  const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight); 
+  const [gridPadding, setGridPadding] = useState(defaultGridPadding); 
+  const [gridBgImage, setGridBgImage] = useState(defaultGridBgImage); 
+  const [gridBgImageRepeat, setGridBgImageRepeat] = useState(defaultGridBgImageRepeat); 
+  const [gridBgImageSize, setGridBgImageSize] = useState(defaultGridBgImageSize); 
+  const [gridBgImagePosition, setGridBgImagePosition] = useState(defaultGridBgImagePosition); 
+  const [gridBgImageOrigin, setGridBgImageOrigin] = useState(defaultGridBgImageOrigin); 
 
   const varName = `(${themeSettingKey})`;
 
@@ -139,20 +164,15 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
       result = padding;  
     } else {  
       result = "3px";  
-    }  
-    setPadding(result);  
-    configChange({ themeSettingKey, padding: result });  
-  };
+    }
 
-  const gridColumnsInputBlur = (gridColumns: string) => {
-    let result = "";
-    if (!gridColumns) {
-      result = "24";
-    } else {
-      result = gridColumns;
+    if (themeSettingKey === 'gridPadding') {
+      setGridPadding(result);  
+      configChange({ themeSettingKey, gridPadding: result });
+      return;
     }
-    setGridColumns(result);
-    configChange({ themeSettingKey, gridColumns: result });
+    setPadding(result);  
+    configChange({ themeSettingKey, padding: result });
   };
 
   const borderStyleInputBlur = (borderStyle: string) => {
@@ -197,6 +217,46 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     configChange({ themeSettingKey, fontFamily: result });
   };
 
+  const gridSizeInputBlur = (value: string) => {
+    let result = "";
+    if (!value) {
+      result = themeSettingKey === 'gridRowHeight' ? '8' : '24';
+    } else {
+      result = value;
+    }
+    if (themeSettingKey === 'gridRowHeight') {
+      setGridRowHeight(result);
+      configChange({ themeSettingKey, gridRowHeight: result });
+      return;
+    }
+    setGridColumns(result);
+    configChange({ themeSettingKey, gridColumns: result });
+  };
+
+  const gridBackgroundInputBlur = (value: string) => {
+    switch (themeSettingKey) {
+      case 'gridBgImage':
+        setGridBgImage(value);
+        configChange({ themeSettingKey, gridBgImage: value });
+        break;
+      case 'gridBgImageRepeat':
+        setGridBgImageRepeat(value || 'no-repeat');
+        configChange({ themeSettingKey, gridBgImageRepeat: value });
+        break;
+      case 'gridBgImageSize':
+        setGridBgImageSize(value || "cover");
+        configChange({ themeSettingKey, gridBgImageSize: value });
+        break;
+      case 'gridBgImagePosition':
+        setGridBgImagePosition(value || "center");
+        configChange({ themeSettingKey, gridBgImagePosition: value });
+        break;
+      case 'gridBgImageOrigin':
+        setGridBgImageOrigin(value || 'padding-box');
+        configChange({ themeSettingKey, gridBgImageOrigin: value });
+        break;
+    }
+  }
 
   useEffect(() => {
     if (color && isValidColor(color)) {
@@ -248,10 +308,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     setDataLoaders(defaultShowDataLoaders);
   }, [defaultShowDataLoaders]);
 
-  useEffect(() => {
-    setCanvasValue(defaultCanvasItemValue);
-  }, [defaultCanvasItemValue]);
-
   return (
     <ConfigItem className={props.className}>
       {themeSettingKey !== "showDataLoadingIndicators"
@@ -268,12 +324,19 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
       {themeSettingKey !== "radius" &&  
         themeSettingKey !== "margin" &&  
         themeSettingKey !== "padding" && 
-        themeSettingKey !== "gridColumns" &&
         themeSettingKey !== "borderStyle" &&
         themeSettingKey !== "borderWidth" &&
         themeSettingKey !== "fontFamily" && 
         themeSettingKey !== "showComponentLoadingIndicators" && 
-        themeSettingKey !== "showDataLoadingIndicators" && (
+        themeSettingKey !== "showDataLoadingIndicators" &&
+        themeSettingKey !== "gridColumns" &&
+        themeSettingKey !== "gridRowHeight" &&
+        themeSettingKey !== "gridPadding" &&
+        themeSettingKey !== "gridBgImage" &&
+        themeSettingKey !== "gridBgImageRepeat" &&
+        themeSettingKey !== "gridBgImageSize" &&
+        themeSettingKey !== "gridBgImagePosition" &&
+        themeSettingKey !== "gridBgImageOrigin" && (
         <div className="config-input">
           <ColorSelect
             changeColor={_.debounce(setColor, 500, {
@@ -396,25 +459,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
         </div>
       )}
 
-      {themeSettingKey === "gridColumns" && (
-        <div className="config-input">
-          <GridColumns $gridColumns={defaultGridColumns || "24"}>
-            <div>
-              <TableCellsIcon title="" />
-            </div>
-          </GridColumns>
-
-          <Slider 
-            style={{ width: "90%", margin: "8px 5% 0 5%"}}
-            min={8}  // Define the minimum value for the slider
-            max={48} // Define the maximum value for the slider
-            value={parseInt(gridColumns || "24")}
-            onChange={(value) => setGridColumns(value.toString())}
-            onChangeComplete={(value) => gridColumnsInputBlur(value.toString())}
-          />
-        </div>
-      )}
-
       {themeSettingKey === "fontFamily" && (
         <div className="config-input">
           <TacoInput
@@ -460,6 +504,116 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
           <span>{name}</span>
         </div>
       )}
+
+      {themeSettingKey === "gridColumns" && (
+        <div className="config-input">
+          <GridColumns $gridColumns={defaultGridColumns || "24"}>
+            <div>
+              <TableCellsIcon title="" />
+            </div>
+          </GridColumns>
+
+          <Slider 
+            style={{ width: "90%", margin: "8px 5% 0 5%"}}
+            min={8}  // Define the minimum value for the slider
+            max={48} // Define the maximum value for the slider
+            value={parseInt(gridColumns || "24")}
+            onChange={(value) => setGridColumns(value.toString())}
+            onChangeComplete={(value) => gridSizeInputBlur(value.toString())}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "gridRowHeight" && (
+        <div className="config-input">
+          <GridColumns $gridColumns={defaultGridColumns || "24"}>
+            <div>
+              <TableCellsIcon title="" />
+            </div>
+          </GridColumns>
+
+          <Slider 
+            style={{ width: "90%", margin: "8px 5% 0 5%"}}
+            min={6}  // Define the minimum value for the slider
+            max={16} // Define the maximum value for the slider
+            value={parseInt(gridRowHeight || "8")}
+            onChange={(value) => setGridRowHeight(value.toString())}
+            onChangeComplete={(value) => gridSizeInputBlur(value.toString())}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "gridPadding" && (  
+        <div className="config-input">  
+          <Padding $padding={defaultGridPadding || "0px"}>  
+            <div><CompressIcon title="" /></div>  
+          </Padding>  
+          <TacoInput  
+            value={gridPadding}  
+            onChange={(e) => setGridPadding(e.target.value)}  
+            onBlur={(e) => paddingInputBlur(e.target.value)}  
+            onKeyUp={(e) =>  
+              e.nativeEvent.key === "Enter" &&  
+              paddingInputBlur(e.currentTarget.value)  
+            }  
+          />  
+        </div>
+      )}
+
+      {themeSettingKey === "gridBgImage" && (
+        <div className="config-input">
+          <TacoInput
+            value={gridBgImage}
+            onChange={(e) => setGridBgImage(e.target.value)}
+            onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "gridBgImageRepeat" && (
+        <div className="config-input">
+          <TacoInput
+            value={gridBgImageRepeat}
+            onChange={(e) => setGridBgImageRepeat(e.target.value)}
+            onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "gridBgImageSize" && (
+        <div className="config-input">
+          <TacoInput
+            value={gridBgImageSize}
+            onChange={(e) => setGridBgImageSize(e.target.value)}
+            onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "gridBgImagePosition" && (
+        <div className="config-input">
+          <TacoInput
+            value={gridBgImagePosition}
+            onChange={(e) => setGridBgImagePosition(e.target.value)}
+            onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "gridBgImageOrigin" && (
+        <div className="config-input">
+          <TacoInput
+            value={gridBgImageOrigin}
+            onChange={(e) => setGridBgImageOrigin(e.target.value)}
+            onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
     </ConfigItem>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -342,20 +342,21 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   const horizontalGridCells = props.horizontalGridCells ? String(props.horizontalGridCells) : undefined;
   const currentTheme = useContext(ThemeContext)?.theme;
   const [currentRowCount, setRowCount] = useState(rowCount || Infinity);
-  const [currentRowHeight, setRowHeight] = useState(DEFAULT_ROW_HEIGHT);
+  const [currentRowHeight, setRowHeight] = useState(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
   const editorState = useContext(EditorContext);
   const { readOnly } = useContext(ExternalEditorContext);
+  const appSettingsComp = editorState.getAppSettingsComp().getView();
+
+  const maxWidth = useMemo(() => appSettingsComp.maxWidth, [appSettingsComp.maxWidth]);
 
   // Falk: TODO: Here we can define the inner grid columns dynamically
-  //Added By Aqib Mirza
   const defaultGrid = useMemo(() => {
     return horizontalGridCells ||
     currentTheme?.gridColumns ||
     defaultTheme?.gridColumns ||
-    "12";
+    String(DEFAULT_GRID_COLUMNS);
   }, [horizontalGridCells, currentTheme?.gridColumns, defaultTheme?.gridColumns]);
 
-  /////////////////////
   const isDroppable =
     useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
   const isDraggable = !readOnly && (_.isNil(props.isDraggable) || props.isDraggable);
@@ -479,14 +480,12 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
 
   useEffect(() => {
     if (!isRowCountLocked) {
-      setRowHeight(DEFAULT_ROW_HEIGHT);
+      setRowHeight(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
       setRowCount(Infinity);
       onRowCountChange?.(0);
     }
   }, [isRowCountLocked, onRowCountChange]);
 
-  const maxWidth = editorState.getAppSettings().maxWidth;
-
   // log.info("rowCount:", currentRowCount, "rowHeight:", currentRowHeight);
 
   return (