theme canvas settings

Author: raheeliftikhar5

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

@@ -53,7 +53,14 @@ export interface ThemeDetail {
   chart?: string;
   margin?: string;
   padding?: string;
+  gridPadding?: string;
   gridColumns?: string; //Added By Aqib Mirza
+  gridRowHeight?: string;
+  gridBgImage?: string;
+  gridBgImageRepeat?: string;
+  gridBgImageSize?: string;
+  gridBgImagePosition?: string;
+  gridBgImageOrigin?: string;
   text?: string;
   textSize?: string;
   fontFamily?: string;

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

@@ -2581,7 +2581,8 @@ export const en = {
     "chartClick": "Click",
     "chartVisit": "Visit",
     "chartQuery": "Query",
-    "chartBuy": "Buy"
+    "chartBuy": "Buy",
+    "canvas": "Canvas Settings",
   },
   "themeDetail": {
     "primary": "Brand Color",
@@ -2617,11 +2618,27 @@ export const en = {
     "paddingDesc": "Default padding typically used for most components",
     "containerHeaderPadding": "Header Padding",
     "containerheaderpaddingDesc": "Default header padding typically used for most components",
-    "gridColumns": "Canvas Grid Columns",
+    "gridColumns": "Grid Columns",
     "gridColumnsDesc": "Default number of columns typically used for most containers",
     "loadingIndicators": "Loading Indicators",
     "showComponentLoadingIndicators": "Show loading indicators when component load",
-    "showDataLoadingIndicators": "Show loading indicators when data load"
+    "showDataLoadingIndicators": "Show loading indicators when data load",
+    "background": "Background Styles",
+    "gridSettings": "Grid Settings",
+    "gridRowHeight": "Grid Row Height",
+    "gridRowHeightDesc": "Height of each row in grid",
+    "gridPadding": "Canvas Padding",
+    "gridPaddingDesc": "Padding around the canvas",
+    "gridBgImage": "Background Image",
+    "gridBgImageDesc": "Canvas background image",
+    "gridBgImageRepeat": "Background Image Repeat",
+    "gridBgImageRepeatDesc": "Canvas background image repeat",
+    "gridBgImageSize": "Background Image Size",
+    "gridBgImageSizeDesc": "Canvas background image size",
+    "gridBgImagePosition": "Background Image Position",
+    "gridBgImagePositionDesc": "Canvas background image position",
+    "gridBgImageOrigin": "Background Image Origin",
+    "gridBgImageOriginDesc": "Canvas background image origin",
   },
   "pluginSetting": {
     "title": "Plugins",

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

@@ -215,6 +215,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const { margin, rowHeight } = this.props as Required<GridLayoutProps>;
     const { extraHeight, emptyRows } = this.props;
     const positionParams = genPositionParams(this.props);
+    console.log(positionParams);
     const { containerPadding } = positionParams;
     const layout = this.getUILayout(undefined, true);
     let nbRow = bottom(layout);

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

@@ -302,13 +302,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             type: "padding",
             value: this.state.theme?.padding,
           },
-          {
-            settingsKey: 'gridColumns',
-            name: trans('themeDetail.gridColumns'),
-            desc: trans('themeDetail.gridColumnsDesc'),
-            type: "gridColumns",
-            value: this.state.theme?.gridColumns,
-          }
+          // {
+          //   settingsKey: 'gridColumns',
+          //   name: trans('themeDetail.gridColumns'),
+          //   desc: trans('themeDetail.gridColumnsDesc'),
+          //   type: "gridColumns",
+          //   value: this.state.theme?.gridColumns,
+          // }
         ]
       },
       {
@@ -332,6 +332,80 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
       },
     ];
 
+    const canvasSettings = [
+      {
+        title: trans('themeDetail.gridSettings'),
+        items: [
+          {
+            settingsKey: 'gridColumns',
+            name: trans('themeDetail.gridColumns'),
+            desc: trans('themeDetail.gridColumnsDesc'),
+            type: "gridColumns",
+            value: this.state.theme?.gridColumns,
+          },
+          {
+            settingsKey: 'gridRowHeight',
+            name: trans('themeDetail.gridRowHeight'),
+            desc: trans('themeDetail.gridRowHeightDesc'),
+            type: "gridRowHeight",
+            value: this.state.theme?.gridRowHeight,
+          },
+        ]
+      },
+      {
+        title: trans('themeDetail.spacing'),
+        items: [
+          {
+            settingsKey: 'gridPadding',
+            name: trans('themeDetail.gridPadding'),
+            desc: trans('themeDetail.gridPaddingDesc'),
+            type: "gridPadding",
+            value: this.state.theme?.gridPadding,
+          }
+        ]
+      },
+      {
+        title: trans('themeDetail.background'),
+        items: [
+          {
+            settingsKey: 'gridBgImage',
+            name: trans('themeDetail.gridBgImage'),
+            desc: trans('themeDetail.gridBgImageDesc'),
+            type: "gridBgImage",
+            value: this.state.theme?.gridBgImage,
+          },
+          {
+            settingsKey: 'gridBgImageRepeat',
+            name: trans('themeDetail.gridBgImageRepeat'),
+            desc: trans('themeDetail.gridBgImageRepeatDesc'),
+            type: "gridBgImageRepeat",
+            value: this.state.theme?.gridBgImageRepeat,
+          },
+          {
+            settingsKey: 'gridBgImageSize',
+            name: trans('themeDetail.gridBgImageSize'),
+            desc: trans('themeDetail.gridBgImageSizeDesc'),
+            type: "gridBgImageSize",
+            value: this.state.theme?.gridBgImageSize,
+          },
+          {
+            settingsKey: 'gridBgImagePosition',
+            name: trans('themeDetail.gridBgImagePosition'),
+            desc: trans('themeDetail.gridBgImagePositionDesc'),
+            type: "gridBgImagePosition",
+            value: this.state.theme?.gridBgImagePosition,
+          },
+          {
+            settingsKey: 'gridBgImageOrigin',
+            name: trans('themeDetail.gridBgImageOrigin'),
+            desc: trans('themeDetail.gridBgImageOriginDesc'),
+            type: "gridBgImageOrigin",
+            value: this.state.theme?.gridBgImageOrigin,
+          }
+        ]
+      },
+    ];
+
     if (!this.themeDefault) {
       return (
         <Flex align="center" justify="center" vertical style={{
@@ -468,6 +542,45 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                 </Flex>
               </Card>
             </ThemeSettingsView>
+            
+            <ThemeSettingsView>
+              <StyleThemeSettingsCover>
+                <PageLayoutCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.canvas")}</h2>
+              </StyleThemeSettingsCover>
+              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+                <Flex gap={"middle"}>
+                  <List
+                    bordered
+                    dataSource={canvasSettings}
+                    renderItem={(item) => (
+                      <>
+                        {item.title && (
+                          <List.Item>
+                            <DetailTitle>{item.title}</DetailTitle>
+                          </List.Item>
+                        )}
+                        {item.items.map((canvasSettingItem) => (
+                          <Tooltip key={canvasSettingItem.settingsKey} title={canvasSettingItem.desc} placement="right">
+                            <List.Item key={canvasSettingItem.settingsKey}>
+                              <ThemeSettingsSelector
+                                themeSettingKey={canvasSettingItem.settingsKey}
+                                name={canvasSettingItem.name}
+                                radius={canvasSettingItem.value as string}
+                                configChange={(params) => {
+                                  this.configChange(params);
+                                }}
+                              />
+                          </List.Item>
+                          </Tooltip>
+                        ))}
+                      </>
+                    )}
+                  />
+                  <Divider type="vertical" style={{height: "610px"}}/>
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
+                </Flex>
+              </Card>
+            </ThemeSettingsView>
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>