Advanced header by default

functionalTests/designer/add-new-question.ts

@@ -141,7 +141,6 @@ test("Add New Question with sub type", async t => {
     .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Stars");
 
   let expectedJson = {
-    "logoPosition": "right",
     "pages": [
       {
         "name": "page1",
@@ -168,7 +167,6 @@ test("Add New Question with sub type", async t => {
     .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Password");
 
   expectedJson = <any>{
-    "logoPosition": "right",
     "pages": [
       {
         "name": "page1",
@@ -195,7 +193,6 @@ test("Add New Question with sub type", async t => {
     .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Labels");
 
   expectedJson = <any>{
-    "logoPosition": "right",
     "pages": [
       {
         "name": "page1",

functionalTests/designer/logo-image.ts

@@ -21,7 +21,7 @@ test("Set logo in property grid and remove it in designer", async (t) => {
 });
 
 test("Set logo in designer, change it and check it in test tab", async (t) => {
-  await setJSON({ pages: [{ name: "page1" }] });
+  await setJSON({ pages: [{ name: "page1", "elements": [{ "type": "text", "name": "question1" }] }] });
   await t
     .setFilesToUpload(Selector(".svc-logo-image input[type=file]"), "./image.jpg")
     .click(Selector(".svc-logo-image-placeholder svg"));

functionalTests/designer/toolbox.ts

@@ -373,7 +373,6 @@ test("toolbox subTypes: add items by drag-n-drop", async (t) => {
     .expect(toolboxSubTypesPopup.visible).notOk();
 
   const expectedJson = {
-    "logoPosition": "right",
     "pages": [
       {
         "name": "page1",
@@ -418,7 +417,6 @@ test("toolbox subTypes: add items by click", async (t) => {
     .expect(toolboxSubTypesPopup.visible).ok();
 
   const expectedJson = {
-    "logoPosition": "right",
     "pages": [
       {
         "name": "page1",

functionalTests/preview/toolbar.ts

@@ -23,6 +23,7 @@ const json = {
 };
 
 const json2 = {
+  headerView: "basic",
   title: {
     default: "My Survey",
     de: "Meine Umfrage"

packages/survey-creator-core/src/components/tabs/header-model.ts

@@ -4,6 +4,8 @@ import { fontsettingsFromCssVariable, fontsettingsToCssVariable } from "./theme-
 import { assign } from "../../utils/utils";
 
 export class HeaderModel extends Base implements IHeader {
+  static primaryColorStr = "var(--sjs-primary-backcolor)";
+
   height: number;
   mobileHeight: number;
   inheritWidthFrom: "survey" | "container";
@@ -85,17 +87,17 @@ export class HeaderModel extends Base implements IHeader {
 
   private setHeaderBackgroundColorCssVariable(cssVariables: any) {
     if (this["backgroundColorSwitch"] === "none") {
-      cssVariables["--sjs-header-backcolor"] = "transparent";
+      cssVariables["--sjs-header-backcolor"] = undefined;
     } else if (this["backgroundColorSwitch"] === "custom") {
       cssVariables["--sjs-header-backcolor"] = this["backgroundColor"] ?? "transparent";
     } else {
-      cssVariables["--sjs-header-backcolor"] = undefined;
+      cssVariables["--sjs-header-backcolor"] = HeaderModel.primaryColorStr;
     }
   }
 
   private getBackgroundColorSwitchByValue(backgroundColor: string) {
-    if (!backgroundColor) return "accentColor";
-    if (backgroundColor === "transparent") return "none";
+    if (backgroundColor === HeaderModel.primaryColorStr) return "accentColor";
+    if (!backgroundColor || backgroundColor === "transparent") return "none";
     return "custom";
   }
 
@@ -112,7 +114,7 @@ function getDefaultTitleSetting() {
 function getDefaultDescriptionSetting(isAdvanced?: boolean) {
   const result = { family: settings.themeEditor.defaultFontFamily, weight: "400", size: 16 };
   if (isAdvanced) {
-    result["weight"] = "600";
+    result["size"] = 20;
   }
   return result;
 }
@@ -151,7 +153,7 @@ Serializer.addClass(
     {
       type: "buttongroup",
       name: "headerView",
-      default: "basic",
+      default: "advanced",
       choices: [
         { value: "basic" },
         { value: "advanced" }
@@ -171,7 +173,7 @@ Serializer.addClass(
       type: "spinedit",
       name: "height",
       visibleIf: (obj) => obj.headerView === "advanced",
-      default: 256,
+      default: 0,
       onPropertyEditorUpdate: function (obj: any, editor: any) {
         if (!!editor) {
           editor.unit = "px";
@@ -195,7 +197,7 @@ Serializer.addClass(
       type: "buttongroup",
       name: "inheritWidthFrom",
       visibleIf: (obj) => obj.headerView === "advanced",
-      default: "container",
+      default: "survey",
       choices: [
         { value: "survey" },
         { value: "container" }
@@ -205,7 +207,7 @@ Serializer.addClass(
       type: "spinedit",
       name: "textAreaWidth",
       visibleIf: (obj) => obj.headerView === "advanced",
-      default: 512,
+      default: 0,
       onPropertyEditorUpdate: function (obj: any, editor: any) {
         if (!!editor) {
           editor.unit = "px";
@@ -218,7 +220,7 @@ Serializer.addClass(
       name: "backgroundColorSwitch",
       visibleIf: (obj) => obj.headerView === "advanced",
       isSerializable: false,
-      default: "accentColor",
+      default: "none",
       choices: [
         { value: "none" },
         { value: "accentColor" },
@@ -294,8 +296,8 @@ Serializer.addClass(
       }
     },
 
-    getHorizontalAlignment("logoPositionX", "right"),
-    getVerticalAlignment("logoPositionY", "top"),
+    getHorizontalAlignment("logoPositionX", "left"),
+    getVerticalAlignment("logoPositionY", "bottom"),
     getHorizontalAlignment("titlePositionX", "left"),
     getVerticalAlignment("titlePositionY", "bottom"),
     getHorizontalAlignment("descriptionPositionX", "left"),

packages/survey-creator-core/src/creator-base.ts

@@ -2063,9 +2063,6 @@ export class SurveyCreatorModel extends Base
    * @returns true if initial survey doesn't have any elements or properties
    */
   protected initSurveyWithJSON(json: any, clearState: boolean): void {
-    if (!json) {
-      json = { "logoPosition": "right" };
-    }
     this.existingPages = {};
     const survey = this.createSurvey({}, "designer", undefined, (survey: SurveyModel) => {
       survey.skeletonHeight = 188;

packages/survey-creator-core/tests/creator-base-1.tests.ts

@@ -3170,44 +3170,6 @@ test("doClickQuestionCore", () => {
   expect(creator.survey.getAllQuestions()[3].startWithNewLine).toEqual(false);
 });
 
-test("logoPosition set right for emtpy survey only", () => {
-  const creator = new CreatorTester();
-  expect(creator.survey.logoPosition).toEqual("right");
-  creator.JSON = {
-    "pages": [
-      {
-        "name": "page1",
-        "elements": [
-          {
-            "type": "text",
-            "name": "question1"
-          }
-        ]
-      }
-    ]
-  };
-  expect(creator.survey.logoPosition).toEqual("left");
-  creator.JSON = {
-    "logoPosition": "top",
-    "pages": [
-      {
-        "name": "page1",
-        "elements": [
-          {
-            "type": "text",
-            "name": "question1"
-          }
-        ]
-      }
-    ]
-  };
-  expect(creator.survey.logoPosition).toEqual("top");
-  creator.text = "";
-  expect(creator.survey.logoPosition).toEqual("right");
-  creator.JSON = undefined;
-  expect(creator.survey.logoPosition).toEqual("right");
-});
-
 test("Add new question to Panel and Page", (): any => {
   surveySettings.animationEnabled = false;
   const creator = new CreatorTester();
@@ -3585,7 +3547,7 @@ test("get survey JSON with pageEditModeValue=single #2711", (): any => {
   try {
     let creator = new CreatorTester({ pageEditMode: "single" });
     creator.text = "";
-    expect(creator.JSON).toStrictEqual({ "logoPosition": "right" });
+    expect(creator.JSON).toStrictEqual({ });
   } finally {
     surveySettings.allowShowEmptyTitleInDesignMode = true;
     surveySettings.allowShowEmptyDescriptionInDesignMode = true;

packages/survey-creator-core/tests/creator-base-2.tests.ts

@@ -91,7 +91,7 @@ test("onModified is raised for mask settings", (): any => {
 test("json editor default indent", (): any => {
   const creator = new CreatorTester();
   expect(settings.jsonEditor.indentation).toBe(2);
-  expect(creator.text).toBe("{\n  \"logoPosition\": \"right\",\n  \"pages\": [\n    {\n      \"name\": \"page1\"\n    }\n  ]\n}");
+  expect(creator.text).toBe("{\n  \"pages\": [\n    {\n      \"name\": \"page1\"\n    }\n  ]\n}");
 });
 test("onSetPropertyEditorOptions -> onConfigureTablePropertyEditor", (): any => {
   const creator = new CreatorTester();

packages/survey-creator-core/tests/tabs/theme-header-model.tests.ts

@@ -26,7 +26,7 @@ test("IHeader de/serialization", (): any => {
     headerView: "advanced",
     header: {
       "height": 300,
-      "inheritWidthFrom": "survey",
+      "inheritWidthFrom": "container",
       "textAreaWidth": 600,
       "overlapEnabled": true,
       "backgroundImage": "https://t4.ftcdn.net/jpg/02/83/13/61/360_F_283136113_b3VRHNiOPFMOluzYJPpfuoH8Czh9c743.jpg",
@@ -95,7 +95,7 @@ test("set headerViewContainer advanced", (): any => {
 
   header["headerView"] = "advanced";
   header.height = 300;
-  header.inheritWidthFrom = "survey";
+  header.inheritWidthFrom = "container";
   header.textAreaWidth = 600;
   header["backgroundColorSwitch"] = "custom";
   header["backgroundColor"] = "#5094ed";
@@ -116,7 +116,7 @@ test("set headerViewContainer advanced", (): any => {
   const result = themeModel.toJSON();
   expect(result.header).toStrictEqual({
     "height": 300,
-    "inheritWidthFrom": "survey",
+    "inheritWidthFrom": "container",
     "textAreaWidth": 600,
     "overlapEnabled": true,
     "backgroundImage": "https://t4.ftcdn.net/jpg/02/83/13/61/360_F_283136113_b3VRHNiOPFMOluzYJPpfuoH8Czh9c743.jpg",
@@ -203,20 +203,19 @@ test("headerViewContainer: restore backgroundColorSwitch", (): any => {
   let themeModel = themePlugin.themeModel as ThemeModel;
   let header = themeModel.header as HeaderModel;
 
-  header["headerView"] = "advanced";
-  expect(header["backgroundColorSwitch"]).toEqual("accentColor");
+  expect(header["backgroundColorSwitch"]).toEqual("none");
   expect(header["backgroundColor"]).toBeUndefined();
 
-  header["backgroundColorSwitch"] = "none";
+  header["backgroundColorSwitch"] = "accentColor";
   expect(header["backgroundColor"]).toBeUndefined();
 
   creator.activeTab = "designer";
-  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("transparent");
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe(HeaderModel.primaryColorStr);
 
   creator.activeTab = "theme";
   header = themeModel.header as HeaderModel;
 
-  expect(header["backgroundColorSwitch"]).toEqual("none");
+  expect(header["backgroundColorSwitch"]).toEqual("accentColor");
   expect(header["backgroundColor"]).toBeUndefined();
 
   header["backgroundColorSwitch"] = "custom";
@@ -242,20 +241,19 @@ test("headerViewContainer: background color", (): any => {
   let themeModel = themePlugin.themeModel as ThemeModel;
   let header = themeModel.header as HeaderModel;
 
-  header["headerView"] = "advanced";
-  expect(header["backgroundColorSwitch"]).toBe("accentColor");
+  expect(header["backgroundColorSwitch"]).toBe("none");
   expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
 
-  header["backgroundColorSwitch"] = "none";
-  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("transparent");
+  header["backgroundColorSwitch"] = "accentColor";
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe(HeaderModel.primaryColorStr);
 
   header["backgroundColorSwitch"] = "custom";
   expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("transparent");
 
   header["backgroundColor"] = "#5094ed";
   expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("#5094ed");
 
-  header["backgroundColorSwitch"] = "accentColor";
+  header["backgroundColorSwitch"] = "none";
   expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
 });
 
@@ -268,16 +266,15 @@ test("headerViewContainer: background color reset #5940", (): any => {
   let themeModel = themePlugin.themeModel as ThemeModel;
   let header = themeModel.header as HeaderModel;
 
-  header["headerView"] = "advanced";
-  expect(header["backgroundColorSwitch"]).toBe("accentColor");
+  expect(header["backgroundColorSwitch"]).toBe("none");
   expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
   expect(themeModel.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
 
-  header["backgroundColorSwitch"] = "none";
-  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe("transparent");
-  expect(themeModel.cssVariables["--sjs-header-backcolor"]).toBe("transparent");
-
   header["backgroundColorSwitch"] = "accentColor";
+  expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBe(HeaderModel.primaryColorStr);
+  expect(themeModel.cssVariables["--sjs-header-backcolor"]).toBe(HeaderModel.primaryColorStr);
+
+  header["backgroundColorSwitch"] = "none";
   expect(creator.theme.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
   expect(themeModel.cssVariables["--sjs-header-backcolor"]).toBeUndefined();
 
@@ -301,8 +298,7 @@ test("header custom background color and theme changes", (): any => {
   expect(themeChooser.value).toEqual("default");
   expect(primaryBackColor.value).toEqual("rgba(25, 179, 148, 1)");
 
-  header["headerView"] = "advanced";
-  expect(header["backgroundColorSwitch"]).toEqual("accentColor");
+  expect(header["backgroundColorSwitch"]).toEqual("none");
   expect(header["backgroundColor"]).toBeUndefined();
 
   header["backgroundColorSwitch"] = "custom";
@@ -346,7 +342,6 @@ test("set backgroundImage into header", (): any => {
   const themeModel = new ThemeModel();
   const header = themeModel.header as HeaderModel;
 
-  header["headerView"] = "advanced";
   header.backgroundImage = "https://t4.ftcdn.net/jpg/02/83/13/61/360_F_283136113_b3VRHNiOPFMOluzYJPpfuoH8Czh9c743.jpg";
   header.backgroundImageFit = "contain";
   header.backgroundImageOpacity = 50;