Fixed https://github.com/surveyjs/private-tasks/issues/361 - Advanced Header. Titles' font colors by default for different backgrounds

src/defaultV2-theme/blocks/header.scss

@@ -14,6 +14,7 @@
 }
 
 .sv-header__without-background {
+
   .sv-header--mobile,
   .sv-header__content {
     padding-bottom: 0;
@@ -111,15 +112,15 @@
   margin: 0;
 }
 
-.sv-header__logo ~ .sv-header__title {
+.sv-header__logo~.sv-header__title {
   margin-top: calcSize(3);
 }
 
-.sv-header__logo ~ .sv-header__description {
+.sv-header__logo~.sv-header__description {
   margin-top: calcSize(3);
 }
 
-.sv-header__title ~ .sv-header__description {
+.sv-header__title~.sv-header__description {
   margin-top: calcSize(1);
 }
 
@@ -148,3 +149,15 @@
     max-width: 100%;
   }
 }
+
+.sv-header__background-color--none,
+.sv-header__background-color--custom {
+  .sv-header__title .sd-title {
+    color: $font-pagetitle-color;
+  }
+
+  .sv-header__description .sd-description {
+    @include header_description;
+    color: $font-pagedescription-color;
+  }
+}

src/header.ts

@@ -79,6 +79,9 @@ export class Cover extends Base {
     this.headerClasses = new CssClassBuilder()
       .append("sv-header")
       .append("sv-header__without-background", (this.backgroundColor === "transparent") && !this.backgroundImage)
+      .append("sv-header__background-color--none", this.backgroundColor === "transparent" && !this.titleColor && !this.descriptionColor)
+      .append("sv-header__background-color--accent", !this.backgroundColor && !this.titleColor && !this.descriptionColor)
+      .append("sv-header__background-color--custom", !!this.backgroundColor && this.backgroundColor !== "transparent" && !this.titleColor && !this.descriptionColor)
       .append("sv-header__overlap", this.overlapEnabled)
       .toString();
   }
@@ -102,18 +105,24 @@ export class Cover extends Base {
     super.fromJSON(theme.header);
     if (!!theme.cssVariables) {
       this.backgroundColor = theme.cssVariables["--sjs-header-backcolor"];
+      this.titleColor = theme.cssVariables["--sjs-font-headertitle-color"];
+      this.descriptionColor = theme.cssVariables["--sjs-font-headerdescription-color"];
     }
+    this.init();
+  }
+  private init() {
+    this.renderBackgroundImage = wrapUrlForBackgroundImage(this.backgroundImage);
+    this.updateHeaderClasses();
+    this.updateContentClasses();
+    this.updateBackgroundImageClasses();
   }
 
   constructor() {
     super();
-    this.renderBackgroundImage = wrapUrlForBackgroundImage(this.backgroundImage);
     ["top", "middle", "bottom"].forEach((positionY: VerticalAlignment) =>
       ["left", "center", "right"].forEach((positionX: HorizontalAlignment) => this.cells.push(new CoverCell(this, positionX, positionY)))
     );
-    this.updateHeaderClasses();
-    this.updateContentClasses();
-    this.updateBackgroundImageClasses();
+    this.init();
   }
 
   public getType(): string {
@@ -128,6 +137,8 @@ export class Cover extends Base {
   @property() public textGlowEnabled: boolean;
   @property() public overlapEnabled: boolean;
   @property() public backgroundColor: string;
+  @property() public titleColor: string;
+  @property() public descriptionColor: string;
   @property({
     onSet: (newVal: string, target: Cover) => {
       target.renderBackgroundImage = wrapUrlForBackgroundImage(newVal);

tests/surveytests.ts

@@ -63,6 +63,8 @@ import { getRenderedSize, getRenderedStyleSize, increaseHeightByContent, wrapUrl
 import { Helpers } from "../src/helpers";
 import { defaultV2Css } from "../src/defaultCss/defaultV2Css";
 import { StylesManager } from "../src/stylesmanager";
+import { ITheme } from "../src/themes";
+import { Cover } from "../src/header";
 
 export default QUnit.module("Survey");
 
@@ -19227,3 +19229,47 @@ QUnit.test("onOpenFileChooser fires", function (assert) {
   survey.chooseFiles(document.createElement("input"), () => { });
   assert.equal(log, "->onOpenFileChooser");
 });
+QUnit.test("Advanced header title/description color", function (assert) {
+  const survey = new SurveyModel();
+
+  const accHeaderBackTheme: any = { "cssVariables": {}, "header": {}, "headerView": "advanced" };
+  survey.applyTheme(accHeaderBackTheme);
+  let headerLayoutElement = survey.findLayoutElement("advanced-header");
+  let headerModel = headerLayoutElement.data as Cover;
+  assert.equal(headerModel.headerClasses, "sv-header sv-header__background-color--accent");
+  // assert.equal(survey.themeVariables["--sjs-font-headertitle-color"], undefined);
+  // assert.equal(survey.themeVariables["--sjs-font-headertitle-color"], undefined);
+  // assert.equal(survey.themeVariables["--sjs-font-headerdescription-color"], undefined);
+  // assert.equal(accHeaderBackTheme.cssVariables["--sjs-font-headertitle-color"], undefined);
+  // assert.equal(accHeaderBackTheme.cssVariables["--sjs-font-headerdescription-color"], undefined);
+
+  const noneHeaderBackTheme: any = { "cssVariables": { "--sjs-header-backcolor": "transparent" }, "header": {}, "headerView": "advanced" };
+  survey.applyTheme(noneHeaderBackTheme);
+  headerLayoutElement = survey.findLayoutElement("advanced-header");
+  headerModel = headerLayoutElement.data as Cover;
+  assert.equal(headerModel.headerClasses, "sv-header sv-header__without-background sv-header__background-color--none");
+
+  const customNotSetHeaderBackTheme: any = { "cssVariables": { "--sjs-header-backcolor": "transparent" }, "header": {}, "headerView": "advanced" };
+  survey.applyTheme(customNotSetHeaderBackTheme);
+  headerLayoutElement = survey.findLayoutElement("advanced-header");
+  headerModel = headerLayoutElement.data as Cover;
+  assert.equal(headerModel.headerClasses, "sv-header sv-header__without-background sv-header__background-color--none");
+
+  const customHeaderBackTheme: any = { "cssVariables": { "--sjs-header-backcolor": "rgba(0, 255, 0, 1)" }, "header": {}, "headerView": "advanced" };
+  survey.applyTheme(customHeaderBackTheme);
+  headerLayoutElement = survey.findLayoutElement("advanced-header");
+  headerModel = headerLayoutElement.data as Cover;
+  assert.equal(headerModel.headerClasses, "sv-header sv-header__background-color--custom");
+
+  const customNotSetHeaderBackAndTitleTheme: any = { "cssVariables": { "--sjs-font-headertitle-color": "rgba(255, 0, 0, 1)", "--sjs-font-headerdescription-color": "rgba(255, 0, 0, 1)", "--sjs-header-backcolor": "transparent" }, "header": {}, "headerView": "advanced" };
+  survey.applyTheme(customNotSetHeaderBackAndTitleTheme);
+  headerLayoutElement = survey.findLayoutElement("advanced-header");
+  headerModel = headerLayoutElement.data as Cover;
+  assert.equal(headerModel.headerClasses, "sv-header sv-header__without-background");
+
+  const customHeaderBackAndTitleTheme: any = { "cssVariables": { "--sjs-font-headertitle-color": "rgba(255, 0, 0, 1)", "--sjs-font-headerdescription-color": "rgba(255, 0, 0, 1)", "--sjs-header-backcolor": "rgba(0, 255, 0, 1)" }, "header": {}, "headerView": "advanced" };
+  survey.applyTheme(customHeaderBackAndTitleTheme);
+  headerLayoutElement = survey.findLayoutElement("advanced-header");
+  headerModel = headerLayoutElement.data as Cover;
+  assert.equal(headerModel.headerClasses, "sv-header");
+});

visualRegressionTests/tests/defaultV2/advancedHeader.ts

@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest } from "../../helper";
+import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper";
 
 const title = "Advanced header screenshot";
 
@@ -88,4 +88,48 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-advanced-header-mobile-with-overlap.png", Selector(".sd-root-modern"), t, comparer);
     });
   });
+  test("Check header background color modes", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 600);
+      await initSurvey(framework, {
+        focusFirstQuestionAutomatic: true,
+        title: "Survey Title",
+        description: "Survey description",
+        questions: [
+          {
+            type: "text",
+            title: "Question title",
+            name: "q1"
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({ "cssVariables": {}, "header": {}, "headerView": "advanced" });
+      })();
+      await t.wait(500);
+      await resetFocusToBody();
+      await takeElementScreenshot("survey-advanced-header-background-accent.png", Selector(".sd-root-modern"), t, comparer);
+
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({ "cssVariables": { "--sjs-header-backcolor": "transparent" }, "header": {}, "headerView": "advanced" });
+      })();
+      await t.wait(500);
+      await resetFocusToBody();
+      await takeElementScreenshot("survey-advanced-header-background-none.png", Selector(".sd-root-modern"), t, comparer);
+
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({ "cssVariables": { "--sjs-header-backcolor": "transparent" }, "header": {}, "headerView": "advanced" });
+      })();
+      await t.wait(500);
+      await resetFocusToBody();
+      await takeElementScreenshot("survey-advanced-header-background-custom-none.png", Selector(".sd-root-modern"), t, comparer);
+
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({ "cssVariables": { "--sjs-font-headertitle-color": "rgba(255, 0, 0, 1)", "--sjs-font-headerdescription-color": "rgba(255, 0, 0, 1)", "--sjs-header-backcolor": "rgba(0, 255, 0, 1)" }, "header": {}, "headerView": "advanced" });
+      })();
+      await t.wait(500);
+      await resetFocusToBody();
+      await takeElementScreenshot("survey-advanced-header-background-custom-set.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
 });