diff --git a/src/defaultV2-theme/blocks/header.scss b/src/defaultV2-theme/blocks/header.scss index fa218aa80e..4d143e82a4 100644 --- a/src/defaultV2-theme/blocks/header.scss +++ b/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; + } +} \ No newline at end of file diff --git a/src/header.ts b/src/header.ts index 50dd2b9bf7..43787670be 100644 --- a/src/header.ts +++ b/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); diff --git a/tests/surveytests.ts b/tests/surveytests.ts index 0857d76eb8..68307f6503 100644 --- a/tests/surveytests.ts +++ b/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"); +}); diff --git a/visualRegressionTests/tests/defaultV2/advancedHeader.ts b/visualRegressionTests/tests/defaultV2/advancedHeader.ts index c17f640339..8edb8cfe74 100644 --- a/visualRegressionTests/tests/defaultV2/advancedHeader.ts +++ b/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(() => { + (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(() => { + (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(() => { + (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(() => { + (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); + }); + }); }); \ No newline at end of file diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-accent.png b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-accent.png new file mode 100644 index 0000000000..39c74ff363 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-accent.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-custom-none.png b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-custom-none.png new file mode 100644 index 0000000000..0df0dfbd6e Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-custom-none.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-custom-set.png b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-custom-set.png new file mode 100644 index 0000000000..d871d0707b Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-custom-set.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-none.png b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-none.png new file mode 100644 index 0000000000..0df0dfbd6e Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-background-none.png differ