added canvas bg color option in app Settings

Author: raheeliftikhar5

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

@@ -22,6 +22,7 @@ import { BoolControl } from "../controls/boolControl";
 import { getNpmPackageMeta } from "../utils/remote";
 import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
 import type { AppState } from "@lowcoder-ee/redux/reducers";
+import { ColorControl } from "../controls/colorControl";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -106,12 +107,32 @@ const DivStyled = styled.div`
     
     > div {
       width: 100%;
+      flex: 0 0 100%;
       display: block;
+
+      .tooltipLabel {
+        width: 100%;
+      }
     }
 
     > div:first-child {
       margin-bottom: 6px;
     }
+    
+    > div:nth-child(2) {
+      > div {
+        width: 100%;
+        justify-content: flex-start;
+        > div:first-child {
+          flex: 0 0 24px;
+        }
+        > div:nth-child(2) {
+          > div:nth-child(2) {
+            width: 100%;
+          }
+        }
+      }
+    }
 
   }
   // custom styles for icon selector
@@ -194,6 +215,7 @@ const childrenMap = {
   gridRowCount: NumberControl,
   gridPaddingX: NumberControl,
   gridPaddingY: NumberControl,
+  gridBg: ColorControl,
   gridBgImage: StringControl,
   gridBgImageRepeat: StringControl,
   gridBgImageSize: StringControl,
@@ -225,6 +247,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     gridRowCount,
     gridPaddingX,
     gridPaddingY,
+    gridBg,
     gridBgImage,
     gridBgImageRepeat,
     gridBgImageSize,
@@ -365,6 +388,9 @@ function AppSettingsModal(props: ChildrenInstance) {
           label: trans("appSetting.gridPaddingY"),
           placeholder: '20',
         })}
+        {gridBg.propertyView({
+          label: trans("style.background"),
+        })}
         {gridBgImage.propertyView({
           label: trans("appSetting.gridBgImage"),
           placeholder: '',

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

@@ -203,12 +203,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             desc: trans('themeDetail.primaryDesc'),
             color: this.state.theme?.primary,
           },
-          {
-            settingsKey: 'canvas',
-            name: trans('themeDetail.canvas'),
-            desc: trans('themeDetail.canvasDesc'),
-            color: this.state.theme?.canvas,
-          },
           {
             settingsKey: 'primarySurface',
             name: trans('themeDetail.primarySurface'),
@@ -374,6 +368,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
       {
         title: trans('themeDetail.background'),
         items: [
+          {
+            settingsKey: 'canvas',
+            type: "canvas",
+            name: trans('themeDetail.canvas'),
+            desc: trans('themeDetail.canvasDesc'),
+            color: this.state.theme?.canvas,
+          },
           {
             settingsKey: 'gridBgImage',
             name: trans('themeDetail.gridBgImage'),
@@ -619,6 +620,17 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                   }}
                                 />
                               }
+                              {canvasSettingItem.type == "canvas" &&
+                                <ThemeSettingsSelector
+                                  themeSettingKey={canvasSettingItem.settingsKey}
+                                  name={canvasSettingItem.name}
+                                  // desc={colorItem.desc}
+                                  color={(canvasSettingItem as any).color}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
                               {canvasSettingItem.type == "gridBgImage" && 
                                 <ThemeSettingsSelector
                                   themeSettingKey={canvasSettingItem.settingsKey}