resolve #4728 Let's make Accent color as a default background of cove…

…r. (#4816) Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Oct 25, 2023 · d49b372 · d49b372
1 parent 2b1692a
commit d49b372
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/theme-builder.ts b/packages/survey-creator-core/src/components/tabs/theme-builder.ts
@@ -175,6 +175,7 @@ export class ThemeBuilder extends Base {
       const suitableTheme = this.findSuitableTheme(this.themeName);
       assign(effectiveThemeCssVariables, ThemeBuilder.DefaultTheme.cssVariables || {}, suitableTheme.cssVariables || {});
       assign(effectiveThemeCssVariables, theme.cssVariables || {}, this.themeCssVariablesChanges);
+      this.trimCssVariables(effectiveThemeCssVariables);
       const effectiveTheme: ITheme = {
         backgroundImage: this.backgroundImage || suitableTheme.backgroundImage || "",
         backgroundImageFit: this.backgroundImageFit || suitableTheme.backgroundImageFit,
@@ -589,7 +590,8 @@ export class ThemeBuilder extends Base {
 
       const newCssVariables = {};
       assign(newCssVariables, this.currentTheme.cssVariables, this.themeCssVariablesChanges);
-      this.setCssVariablesIntoCurrentTheme(newCssVariables);
+      this.trimCssVariables(newCssVariables);
+      this.currentTheme.cssVariables = newCssVariables;
       this.updateSimulatorTheme();
 
       this.blockThemeChangedNotifications -= 1;
@@ -630,9 +632,9 @@ export class ThemeBuilder extends Base {
     return result;
   }
   private setHeaderBackgroundColorCssVariable(headerSettings: any) {
-    let headerBackgroundColorValue = "trasparent";
-    if (headerSettings["backgroundColorSwitch"] === "accentColor") {
-      headerBackgroundColorValue = this.currentTheme.cssVariables["--sjs-primary-backcolor"];
+    let headerBackgroundColorValue = undefined;
+    if (headerSettings["backgroundColorSwitch"] === "none") {
+      headerBackgroundColorValue = "trasparent";
     } else if (headerSettings["backgroundColorSwitch"] === "custom") {
       headerBackgroundColorValue = headerSettings.backgroundColor;
     }
@@ -656,8 +658,8 @@ export class ThemeBuilder extends Base {
   }
 
   private getBackgroundColorSwitchByValue(backgroundColor: string) {
-    if (!backgroundColor || backgroundColor === "trasparent") return "none";
-    if (backgroundColor === this.currentTheme.cssVariables["--sjs-primary-backcolor"]) return "accentColor";
+    if (!backgroundColor) return "accentColor";
+    if (backgroundColor === "trasparent") return "none";
     return "custom";
   }
   private updateVisibilityOfPropertyGridGroups() {
@@ -787,13 +789,12 @@ export class ThemeBuilder extends Base {
     });
   }
 
-  private setCssVariablesIntoCurrentTheme(newCssVariables: { [index: string]: string }) {
+  private trimCssVariables(newCssVariables: { [index: string]: string }): void {
     Object.keys(newCssVariables).forEach(key => {
       if (newCssVariables[key] === undefined || newCssVariables[key] === null) {
         delete newCssVariables[key];
       }
     });
-    this.currentTheme.cssVariables = newCssVariables;
   }
 
   private updateSimulatorTheme() {
@@ -933,7 +934,7 @@ export class ThemeBuilder extends Base {
                     "headerView": "basic",
                     "logoPosition": "right",
                     "inheritWidthFrom": "survey",
-                    "backgroundColorSwitch": "none",
+                    "backgroundColorSwitch": "accentColor",
                     "backgroundImageFit": "cover",
                     "backgroundImageOpacity": 100,
                     "overlapEnabled": false,

diff --git a/packages/survey-creator-core/src/creator-settings.ts b/packages/survey-creator-core/src/creator-settings.ts
@@ -28,7 +28,7 @@ export var settings = {
   theme: {
     exportFileName: "survey_theme.json",
     fontFamily: "Open Sans",
-    allowEditHeaderSettings: false,
+    allowEditHeaderSettings: true,
   },
   operators: {
     empty: [],

diff --git a/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts b/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts
@@ -1648,7 +1648,7 @@ test("headerViewContainer init state", (): any => {
     "logoPosition": "left",
     "inheritWidthFrom": "survey",
     "overlapEnabled": false,
-    "backgroundColorSwitch": "none",
+    "backgroundColorSwitch": "accentColor",
     "backgroundImageFit": "cover",
     "backgroundImageOpacity": 100,
     "logoPositionX": "right",
@@ -1899,7 +1899,10 @@ test("headerViewContainer: restore backgroundColorSwitch", (): any => {
   let headerViewContainer = themeBuilder.themeEditorSurvey.getQuestionByName("headerViewContainer").panels[0];
 
   headerViewContainer.getElementByName("headerView").value = "advanced";
-  expect(headerViewContainer.getElementByName("backgroundColorSwitch").value).toEqual("none");
+  expect(headerViewContainer.getElementByName("backgroundColorSwitch").value).toEqual("accentColor");
+  expect(headerViewContainer.getElementByName("backgroundColor").value).toBeUndefined();
+
+  headerViewContainer.getElementByName("backgroundColorSwitch").value = "none";
   expect(headerViewContainer.getElementByName("backgroundColor").value).toBeUndefined();
 
   creator.activeTab = "designer";
@@ -1913,6 +1916,30 @@ test("headerViewContainer: restore backgroundColorSwitch", (): any => {
   expect(headerViewContainer.getQuestionByName("backgroundColor").value).toBeUndefined();
 });
 
+test("headerViewContainer: background color", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+
+  creator.activeTab = "theme";
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+  let themeBuilder = themePlugin.model as ThemeBuilder;
+  let headerViewContainer = themeBuilder.themeEditorSurvey.getQuestionByName("headerViewContainer").panels[0];
+
+  headerViewContainer.getElementByName("headerView").value = "advanced";
+  expect(headerViewContainer.getElementByName("backgroundColorSwitch").value).toBe("accentColor");
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
+
+  headerViewContainer.getElementByName("backgroundColorSwitch").value = "none";
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("trasparent");
+
+  headerViewContainer.getElementByName("backgroundColorSwitch").value = "custom";
+  headerViewContainer.getElementByName("backgroundColor").value = "#5094ed";
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("#5094ed");
+
+  headerViewContainer.getElementByName("backgroundColorSwitch").value = "accentColor";
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
+});
+
 test("Get theme changes only", (): any => {
   const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
   creator.JSON = { questions: [{ type: "text", name: "q1" }] };