Advanced header by default (#9305)

* work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 update markup tests * work for surveyjs/private-tasks#411 update visual tests & etalons * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Jan 20, 2025 · 7b80b24 · 7b80b24
1 parent a0f792b
commit 7b80b24
Show file tree

Hide file tree

Showing 75 changed files with 267 additions and 199 deletions.
diff --git a/functionalTests/survey/options.js b/functionalTests/survey/options.js
@@ -49,6 +49,7 @@ const set_completed_html = ClientFunction(() => {
 
 const json = {
   title: "Software developer survey.",
+  headerView: "basic",
   showQuestionNumbers: "on",
   pages: [
     {

diff --git a/functionalTests/survey/survey.js b/functionalTests/survey/survey.js
@@ -163,52 +163,4 @@ frameworks.forEach((framework) => {
     await t.click("#sv-nav-preview input");
     await t.click("#sv-nav-complete input");
   });
-  test("Do not show advanced header if not set headerView === 'advanced'", async (t) => {
-    await initSurvey(framework, {
-      "title": "NPS Survey Question",
-      "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
-      "logoWidth": "200px",
-      "logoHeight": "80px",
-      "logoFit": "cover",
-      "logoPosition": "right",
-      "elements": [
-        {
-          "type": "rating",
-          "name": "nps-score",
-          "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
-          "rateMin": 0,
-          "rateMax": 10,
-          "minRateDescription": "Very unlikely",
-          "maxRateDescription": "Very likely"
-        },
-      ],
-    });
-    // await applyTheme({
-    //   backgroundImage:
-    //     "https://api.surveyjs.io/private/Surveys/files?name=4ffde38f-2bb3-4f57-aa0d-d5c7003e8ab1",
-    //   backgroundImageFit: "cover",
-    //   backgroundImageAttachment: "scroll",
-    //   header: {
-    //     height: 256,
-    //     inheritWidthFrom: "container",
-    //     textAreaWidth: 512,
-    //     overlapEnabled: false,
-    //     backgroundImageOpacity: 1,
-    //     backgroundImageFit: "cover",
-    //     logoPositionX: "right",
-    //     logoPositionY: "top",
-    //     titlePositionX: "left",
-    //     titlePositionY: "bottom",
-    //     descriptionPositionX: "left",
-    //     descriptionPositionY: "bottom",
-    //   },
-    //   themeName: "molisana",
-    //   isPanelless: false,
-    //   colorPalette: "light",
-    //   cssVariables: {
-    //   },
-    // });
-    await t.expect(Selector(".sd-title").visible).ok();
-    await t.expect(Selector(".sv-header").visible).notOk();
-  });
 });
diff --git a/packages/survey-angular-ui/src/components/header/header-mobile.component.html b/packages/survey-angular-ui/src/components/header/header-mobile.component.html
@@ -6,10 +6,10 @@
         <ng-template [component]="{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }"></ng-template>
       </div>
     </div>
-    <div *ngIf="model.survey.hasTitle" class="sv-header__title" [style]="{ maxWidth: model.renderedtextAreaWidth }">
+    <div *ngIf="model.survey.hasTitle" class="sv-header__title" [style]="{ maxWidth: model.renderedTextAreaWidth }">
       <sv-ng-element-title [element]="model.survey"></sv-ng-element-title>
     </div>
-    <div *ngIf="model.survey.renderedHasDescription" class="sv-header__description" [style]="{ maxWidth: model.renderedtextAreaWidth }">
+    <div *ngIf="model.survey.renderedHasDescription" class="sv-header__description" [style]="{ maxWidth: model.renderedTextAreaWidth }">
       <div *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></div>
     </div>
   </div>

diff --git a/packages/survey-angular-ui/src/components/header/header.component.html b/packages/survey-angular-ui/src/components/header/header.component.html
@@ -1,7 +1,7 @@
 <ng-template #template>
-  <div *ngIf="(survey.headerView === 'advanced')" [class]="model.headerClasses" [style]="{ height: model.renderedHeight }">
+  <div *ngIf="(survey.headerView === 'advanced') && !model.isEmpty" [class]="model.headerClasses" [style]="{ height: model.renderedHeight }">
     <div *ngIf="!!model.backgroundImage" [style]="model.backgroundImageStyle" [class]="model.backgroundImageClasses"></div>
-    <div *ngIf="!survey.isMobile" [class]="model.contentClasses" [style.width]="model.maxWidth">
+    <div *ngIf="!survey.isMobile" [class]="model.contentClasses" [style.maxWidth]="model.maxWidth">
       <ng-container *ngFor="let cell of model.cells">
         <sv-ng-header-cell [model]="cell"></sv-ng-header-cell>
       </ng-container>

diff --git a/packages/survey-angular-ui/test/events.spec.ts b/packages/survey-angular-ui/test/events.spec.ts
@@ -45,7 +45,7 @@ describe("event tests", () => {
   it("Check that that survey after render header is called correctly", (done: any) => {
     const fixture = TestBed.createComponent(SurveyComponent);
     const component = fixture.componentInstance;
-    const survey = new SurveyModel({ title: "Some title", elements: [{ type: "text", name: "q1" }] });
+    const survey = new SurveyModel({ headerView: "basic", title: "Some title", elements: [{ type: "text", name: "q1" }] });
     survey.css = { header: "sv_header" };
     component.model = survey;
     component.model.onAfterRenderHeader.add((sender: SurveyModel, opt: any) => {

diff --git a/packages/survey-core/src/default-theme/blocks/header.scss b/packages/survey-core/src/default-theme/blocks/header.scss
@@ -3,7 +3,11 @@
 
 .sv-header {
   position: relative;
-  background-color: $header-backcolor;
+  background-color: var(--sjs-header-backcolor, transparent);
+}
+
+.sv-header__background-color--accent {
+  background-color: var(--sjs-header-backcolor, #{$primary});
 }
 
 .sv-header__overlap {
@@ -58,8 +62,8 @@
   display: grid;
   gap: 0;
   // grid-auto-rows: min-content;
-  grid-auto-columns: 1fr 1fr 1fr;
-  grid-auto-rows: 1fr 1fr 1fr;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto;
 }
 
 .sv-header__content--static {
@@ -92,10 +96,17 @@
   flex-direction: column;
   position: absolute;
   width: max-content;
+  // height: max-content;
   top: 0;
   bottom: 0;
 }
 
+.sv-header--height-auto .sv-header__cell:not(.sv-header__cell--empty) .sv-header__cell-content {
+  position: static;
+  transform: unset;
+  width: 100%;
+}
+
 .sv-header__cell--left {
   .sv-header__cell-content {
     left: 0;
@@ -130,7 +141,7 @@
 
 .sv-header__title .sd-title {
   @include mixins.header_title;
-  color: $font-headertitle-color;
+  color: var(--sjs-font-headertitle-color, #{$font-pagetitle-color});
   font-family: $font-headertitle-family;
   font-weight: $font-headertitle-weight;
   margin: 0;
@@ -154,12 +165,21 @@
 
 .sv-header__description .sd-description {
   @include mixins.header_description;
-  color: $font-headerdescription-color;
+  color: var(--sjs-font-headerdescription-color, #{$font-pagedescription-color});
   font-family: $font-headerdescription-family;
   font-weight: $font-headerdescription-weight;
   margin: 0;
 }
 
+.sv-header__background-color--accent {
+  .sv-header__title .sd-title {
+    color: var(--sjs-font-headertitle-color, #{$primary-foreground});
+  }
+  .sv-header__description .sd-description {
+    color: $font-headerdescription-color;
+  }
+}
+
 .sv-header__content .sd-header__text h3 {
   margin: 0;
 }
@@ -173,15 +193,3 @@
     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 mixins.header_description;
-    color: $font-pagedescription-color;
-  }
-}
diff --git a/packages/survey-core/src/default-theme/mixins.scss b/packages/survey-core/src/default-theme/mixins.scss
@@ -200,7 +200,7 @@
 }
 
 @mixin header_description {
-  --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
+  --header-description-font-size: var(--sjs-font-headerdescription-size, 20px);
   font-size: var(--header-description-font-size);
   line-height: multiply(1.5, var(--header-description-font-size));
 }

diff --git a/packages/survey-core/src/default-theme/variables.scss b/packages/survey-core/src/default-theme/variables.scss
@@ -35,8 +35,6 @@ $foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #9
 $foreground-dim: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
 $foreground-dim-light: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 
-$header-backcolor: var(--sjs-header-backcolor, #{$primary});
-
 $border: var(--sjs-border-default, var(--border, #d6d6d6));
 $border-light: var(--sjs-border-light, var(--border-light, #eaeaea));
 $border-inside: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
@@ -77,7 +75,7 @@ $font-headertitle-weight: var(--sjs-font-headertitle-weight, 700);
 $font-headertitle-color: var(--sjs-font-headertitle-color, #{$primary-foreground});
 
 $font-headerdescription-family: var(--sjs-font-headerdescription-family, #{$font-family});
-$font-headerdescription-weight: var(--sjs-font-headerdescription-weight, 600);
+$font-headerdescription-weight: var(--sjs-font-headerdescription-weight, 400);
 $font-headerdescription-color: var(--sjs-font-headerdescription-color, #{$primary-foreground});
 
 $font-pagetitle-family: var(--sjs-font-pagetitle-family, #{$font-family});

diff --git a/packages/survey-core/src/header.ts b/packages/survey-core/src/header.ts
@@ -30,7 +30,13 @@ export class CoverCell {
     return this.cover.survey;
   }
   get css(): string {
-    const result = `${CoverCell.CLASSNAME} ${CoverCell.CLASSNAME}--${this.positionX} ${CoverCell.CLASSNAME}--${this.positionY}`;
+    const result = new CssClassBuilder()
+      .append(CoverCell.CLASSNAME)
+      .append(`${CoverCell.CLASSNAME}--${this.positionX}`)
+      .append(`${CoverCell.CLASSNAME}--${this.positionY}`)
+      .append(CoverCell.CLASSNAME + "--empty", this.isEmpty)
+      .toString();
+
     return result;
   }
   get style(): any {
@@ -55,11 +61,11 @@ export class CoverCell {
   get showDescription(): boolean {
     return this.survey.renderedHasDescription && this.positionX === this.cover.descriptionPositionX && this.positionY === this.cover.descriptionPositionY;
   }
+  get isEmpty(): boolean {
+    return !this.showLogo && !this.showTitle && !this.showDescription;
+  }
   get textAreaWidth(): string {
-    if (!this.cover.textAreaWidth) {
-      return "";
-    }
-    return "" + this.cover.textAreaWidth + "px";
+    return this.cover.renderedTextAreaWidth;
   }
 }
 
@@ -76,12 +82,16 @@ export class Cover extends Base {
     return backgroundImageFit;
   }
   private updateHeaderClasses(): void {
+    const backgroundColorNone = !this.backgroundColor || this.backgroundColor === "transparent";
+    const backgroundColorAccent = this.backgroundColor === "var(--sjs-primary-backcolor)";
+    const backgroundColorCustom = !backgroundColorNone && !backgroundColorAccent;
     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--height-auto", !this.renderedHeight)
+      .append("sv-header__without-background", backgroundColorNone && !this.backgroundImage)
+      .append("sv-header__background-color--none", backgroundColorNone && !this.titleColor && !this.descriptionColor)
+      .append("sv-header__background-color--accent", backgroundColorAccent && !this.titleColor && !this.descriptionColor)
+      .append("sv-header__background-color--custom", backgroundColorCustom && !this.titleColor && !this.descriptionColor)
       .append("sv-header__overlap", this.overlapEnabled)
       .toString();
   }
@@ -137,7 +147,7 @@ export class Cover extends Base {
   @property() public textAreaWidth: number;
   @property() public textGlowEnabled: boolean;
   @property() public overlapEnabled: boolean;
-  @property() public backgroundColor: string;
+  @property({ defaultValue: "transparent" }) public backgroundColor: string;
   @property() public titleColor: string;
   @property() public descriptionColor: string;
   @property({
@@ -171,9 +181,12 @@ export class Cover extends Base {
     }
     return undefined;
   }
-  public get renderedtextAreaWidth(): string {
+  public get renderedTextAreaWidth(): string {
     return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
   }
+  public get isEmpty(): boolean {
+    return !this.survey.hasLogo && !this.survey.hasTitle && !this.survey.renderedHasDescription;
+  }
   public get survey(): SurveyModel {
     return this._survey;
   }
@@ -201,7 +214,7 @@ export class Cover extends Base {
   }
   protected propertyValueChanged(name: string, oldValue: any, newValue: any, arrayChanges?: ArrayChanges, target?: Base): void {
     super.propertyValueChanged(name, oldValue, newValue);
-    if (name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
+    if (name === "height" || name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
       this.updateHeaderClasses();
     }
     if (name === "inheritWidthFrom") {
@@ -256,17 +269,17 @@ export class Cover extends Base {
 Serializer.addClass(
   "cover",
   [
-    { name: "height:number", minValue: 0, default: 256 },
+    { name: "height:number", minValue: 0, default: 0 },
     { name: "mobileHeight:number", minValue: 0, default: 0 },
-    { name: "inheritWidthFrom", default: "container" },
-    { name: "textAreaWidth:number", minValue: 0, default: 512 },
+    { name: "inheritWidthFrom", default: "survey" },
+    { name: "textAreaWidth:number", minValue: 0, default: 0 },
     { name: "textGlowEnabled:boolean" },
     { name: "overlapEnabled:boolean" },
     { name: "backgroundImage:file" },
     { name: "backgroundImageOpacity:number", minValue: 0, maxValue: 1, default: 1 },
     { name: "backgroundImageFit", default: "cover", choices: ["cover", "fill", "contain"] },
-    { name: "logoPositionX", default: "right" },
-    { name: "logoPositionY", default: "top" },
+    { name: "logoPositionX", default: "left" },
+    { name: "logoPositionY", default: "bottom" },
     { name: "titlePositionX", default: "left" },
     { name: "titlePositionY", default: "bottom" },
     { name: "descriptionPositionX", default: "left" },

diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
@@ -1065,6 +1065,9 @@ export class SurveyModel extends SurveyElementCore
 
     this.progressBarValue = new ProgressButtons(this);
 
+    if (this.headerView === "advanced") {
+      this.insertAdvancedHeader(new Cover());
+    }
     this.layoutElements.push({
       id: "timerpanel",
       template: "survey-timerpanel",
@@ -8653,7 +8656,7 @@ Serializer.addClass("survey", [
   { name: "gridLayoutEnabled:boolean", default: false },
   { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } },
   { name: "fitToContainer:boolean", default: true, visible: false },
-  { name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
+  { name: "headerView", default: "advanced", choices: ["basic", "advanced"], visible: false },
   { name: "backgroundImage:file", visible: false },
   { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
   { name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false },