Implement sub groups for creator theme settings

surveyjs · Oct 22, 2024 · 4874d6a · 4874d6a
1 parent 3acc052
commit 4874d6a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 8 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -125,12 +125,16 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     if (this.creator.showCreatorThemeSettings) {
       this.themeModel.loadTheme(this.creator.creatorTheme);
       this.themePropertyGrid.obj = this.themeModel;
+      this.themePropertyGrid.survey.onUpdatePanelCssClasses.add((_, options) => {
+        options.cssClasses.panel.container += " spg-panel--group";
+      });
       this.updatePredefinedColorChoices();
     }
   }
   private createCreatorThemeSettingsPage(creator: SurveyCreatorModel) {
     this.themeModel = new CreatorThemeModel();
     this.themePropertyGrid = new PropertyGridModel(undefined, creator, creatorThemeModelPropertyGridDefinition);
+    this.themePropertyGrid.survey.css.root += "svc-creator-theme-settings";
     this.themePropertyGrid.showOneCategoryInPropertyGrid = true;
     this.themePropertyGrid.surveyInstanceCreatedArea = "designer-tab:creator-settings";
     const themePropertyGridViewModel = new PropertyGridViewModel(this.themePropertyGrid, creator);

diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts
@@ -1,16 +1,20 @@
 import { ISurveyPropertiesDefinition, ISurveyPropertyGridDefinition } from "../question-editor/definition";
 
 const creatorThemeModelProperties: ISurveyPropertiesDefinition = {
-  "creatorTheme": {
+  "creatortheme": {
     properties: [
       { name: "themeName", index: 1 },
       { name: "--sjs-special-background", index: 10 },
-      { name: "--sjs-primary-background-500", index: 20 },
-      { name: "--sjs-secondary-background-500", index: 30 },
-      { name: "fontScale", index: 40 },
-      { name: "scale", index: 50 },
-      { name: "surfaceScale", index: 60 },
+      { name: "--sjs-primary-background-500", index: 10, tab: "accentColors" },
+      { name: "--sjs-secondary-background-500", index: 20, tab: "accentColors" },
+      { name: "fontScale", index: 40, tab: "scaling" },
+      { name: "scale", index: 50, tab: "scaling" },
+      { name: "surfaceScale", index: 60, tab: "scaling" },
     ],
+    tabs: [
+      { name: "accentColors", "parent": "general", index: 20 },
+      { name: "scaling", "parent": "general", index: 30 }
+    ]
   },
 };
 

diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts
@@ -215,14 +215,21 @@ Serializer.addProperties("creatortheme", [
     default: "#19B394FF",
     onPropertyEditorUpdate: function (obj: any, editor: any) {
       if (!!editor) {
+        editor.titleLocation = "left";
         editor.title = getLocString("creatortheme.--sjs-primary-background-500");
       }
     },
   }, {
     type: "color",
     name: "--sjs-secondary-background-500",
     default: "#FF9814FF",
-    displayName: ""
+    displayName: "",
+    onPropertyEditorUpdate: function (obj: any, editor: any) {
+      if (!!editor) {
+        editor.titleLocation = "left";
+        editor.title = getLocString("creatortheme.--sjs-secondary-background-500");
+      }
+    },
   }, {
     name: "--ctr-font-unit",
     default: "8px",

diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts
@@ -789,6 +789,7 @@ export var enStrings = {
       panel: {
         layout: "Panel Layout"
       },
+
       general: "General",
       fileOptions: "Options",
       html: "HTML Editor",
@@ -831,6 +832,8 @@ export var enStrings = {
       header: "Header",
       background: "Background",
       appearance: "Appearance",
+      accentColors: "Accent colors",
+      scaling: "Scaling",
       others: "Others"
     },
     editProperty: "Edit property '{0}'",
@@ -1713,7 +1716,8 @@ export var enStrings = {
   },
   creatortheme: {
     "--sjs-special-background": "Surface background",
-    "--sjs-primary-background-500": "Accent colors",
+    "--sjs-primary-background-500": "Primary",
+    "--sjs-secondary-background-500": "Secondary",
     "surfaceScale": "Surface",
     "userInterfaceBaseUnit": "User interface",
     "fontScale": "Font",

diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss
@@ -131,4 +131,21 @@
   .spg-panel__content--leave {
     animation: none;
   }
+}
+.spg-panel.spg-panel--group {
+  &>.spg-panel__content {
+    padding: 0;
+    box-shadow: none;
+  }
+  .spg-panel__title {
+    @include question_tile;
+    box-shadow: none;
+    background-color: transparent;
+  }
+  .spg-row {
+    margin-top: calcSize(1)
+  }
+  .spg-row:first-of-type {
+    margin-top: 0;
+  }
 }