work for surveyjs/private-tasks#310 (#7117)

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

packages/survey-angular-ui/src/components/cover/cover.component.html

@@ -1,7 +1,7 @@
 <ng-template #template>
   <div *ngIf="(survey.headerView === 'advanced' && survey.renderedHasHeader)" [class]="model.coverClasses" [style]="{ height: model.renderedHeight }">
     <div *ngIf="!!model.backgroundImage" [style]="model.backgroundImageStyle" [class]="model.backgroundImageClasses"></div>
-    <div [class]="model.contentClasses">
+    <div [class]="model.contentClasses" [style.width]="model.maxWidth">
       <ng-container *ngFor="let cell of model.cells">
         <sv-ng-cover-cell [model]="cell"></sv-ng-cover-cell>
       </ng-container>

packages/survey-vue3-ui/src/components/cover/Cover.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="model.coverClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
-    <div :class="model.contentClasses">
+    <div :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-cover-cell
       v-for="cell in model.cells"
       :model="cell"

src/cover.ts

@@ -83,10 +83,12 @@ export class Cover extends Base {
       .toString();
   }
   private updateContentClasses(): void {
+    const surveyWidthMode = !!this.survey && this.survey.calculateWidthMode();
+    this.maxWidth = this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static" && this.survey.renderedWidth;
     this.contentClasses = new CssClassBuilder()
       .append("sv-conver__content")
-      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && !!this.survey && this.survey.calculateWidthMode() === "static")
-      .append("sv-conver__content--responsive", this.inheritWidthFrom === "page" || (!!this.survey && this.survey.calculateWidthMode() === "responsive"))
+      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static")
+      .append("sv-conver__content--responsive", this.inheritWidthFrom === "page" || (!!surveyWidthMode && surveyWidthMode === "responsive"))
       .toString();
   }
   private updateBackgroundImageClasses(): void {
@@ -144,6 +146,7 @@ export class Cover extends Base {
   @property() descriptionStyle: { gridColumn: number, gridRow: number };
   @property() coverClasses: string;
   @property() contentClasses: string;
+  @property() maxWidth: string;
   @property() backgroundImageClasses: string;
 
   public get renderedHeight(): string {
@@ -162,7 +165,7 @@ export class Cover extends Base {
     if(!!newValue) {
       this.updateContentClasses();
       this._survey.onPropertyChanged.add((sender: any, options: any) => {
-        if (options.name == "widthMode") {
+        if (options.name == "widthMode" || options.name == "width") {
           this.updateContentClasses();
         }
       });

src/defaultV2-theme/blocks/cover.scss

@@ -1,24 +1,25 @@
 .sv-cover {
-  padding: calcSize(5);
-  box-sizing: border-box;
   position: relative;
   background-color: $cover-backcolor;
 }
 
 .sv-conver__overlap {
-  margin-bottom: calcSize(-13);
-  padding-bottom: calcSize(13);
+  margin-bottom: calcSize(-14);
+  padding-bottom: calcSize(8);
 }
 
 .sv-conver__overlap.sv-conver__without-background {
   margin-bottom: 0;
+  padding-bottom: 0;
 }
 
-.sv-conver__without-background {
+.sv-conver__without-background .sv-conver__content {
   padding-bottom: 0;
 }
 
 .sv-conver__content {
+  padding: calcSize(5);
+  box-sizing: border-box;
   height: 100%;
   position: relative;
   display: grid;
@@ -29,7 +30,7 @@
 }
 
 .sv-conver__content--static {
-  max-width: calcSize(80);
+  max-width: calcSize(88);
   margin-left: auto;
   margin-right: auto;
 }

src/knockout/components/cover/cover.html

@@ -3,7 +3,7 @@
   <!-- ko if: !!model.backgroundImage -->
   <div data-bind="style: model.backgroundImageStyle, css: model.backgroundImageClasses"></div>
   <!-- /ko -->
-  <div data-bind="css: model.contentClasses">
+  <div data-bind="css: model.contentClasses, style: { maxWidth: model.maxWidth }">
   <!-- ko foreach: model.cells -->
     <!-- ko component: { name: 'sv-cover-cell', params: { model: $data } } -->
     <!-- /ko -->

src/react/components/cover.tsx

@@ -65,7 +65,7 @@ export class CoverComponent extends SurveyElementBase<ILayoutElementProps<Cover>
     return (
       <div className={this.model.coverClasses} style={{ height: this.model.renderedHeight }}>
         {this.model.backgroundImage ? <div style={this.model.backgroundImageStyle} className={this.model.backgroundImageClasses}></div> : null}
-        <div className={this.model.contentClasses}>
+        <div className={this.model.contentClasses} style={{ maxWidth: this.model.maxWidth }}>
           {this.model.cells.map((cell, index) => <CoverCellComponent key={index} model={cell}/>)}
         </div>
       </div>

src/vue/components/cover/cover.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="model.coverClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
-    <div :class="model.contentClasses">
+    <div :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-cover-cell
       v-for="cell in model.cells"
       :model="cell"

tests/coverTests.ts

@@ -52,6 +52,28 @@ QUnit.test("cell calculations",
   }
 );
 
+QUnit.test("cover maxWidth",
+  function (assert) {
+    const cover = new Cover();
+    cover.survey = new SurveyModel();
+    assert.equal(cover.maxWidth, undefined, "survey.maxWidth is default");
+
+    cover.survey.width = "500";
+    assert.equal(cover.survey.widthMode, "auto", "default widthMode");
+    assert.equal(cover.inheritWidthFrom, "survey", "default inheritWidthFrom");
+    assert.equal(cover.maxWidth, "500px", "default maxWidth");
+
+    cover.survey = new SurveyModel({ widthMode: "responsive", width: "500" });
+    assert.equal(cover.maxWidth, false, "survey.maxWidth is responsive");
+
+    cover.survey = new SurveyModel({ widthMode: "static", width: "500" });
+    assert.equal(cover.maxWidth, "500px", "survey.maxWidth is static");
+
+    cover.inheritWidthFrom = "page";
+    assert.equal(cover.maxWidth, false, "inheritWidthFrom is page");
+  }
+);
+
 QUnit.test("contentClasses",
   function (assert) {
     const cover = new Cover();

visualRegressionTests/tests/defaultV2/advancedHeader.ts

@@ -0,0 +1,81 @@
+import { Selector, ClientFunction } from "testcafe";
+import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest } from "../../helper";
+
+const title = "Advanced header screenshot";
+
+fixture`${title}`.page`${url}`;
+
+const applyTheme = ClientFunction(theme => {
+  (<any>window).Survey.StylesManager.applyTheme(theme);
+});
+
+const theme = "defaultV2";
+
+frameworks.forEach(framework => {
+  fixture`${framework} ${title} ${theme}`
+    .page`${url_test}${theme}/${framework}`
+    .beforeEach(async t => {
+      await applyTheme(theme);
+    });
+
+  test("Check survey advanced header inherit width from survey", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1200, 1000);
+      await initSurvey(framework, {
+        title: "Survey Title",
+        description: "Survey description",
+        logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+        "widthMode": "static",
+        "width": "600",
+        headerView: "advanced",
+        questions: [
+          {
+            type: "text",
+            title: "Question title",
+            name: "q1"
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "header": {
+            height: "500px",
+          }
+        });
+      })();
+      await takeElementScreenshot("survey-advanced-header-width-by-survey.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
+  test("Check survey advanced header with overlap", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1200, 1000);
+      await initSurvey(framework, {
+        title: "Survey Title",
+        description: "Survey description",
+        logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+        "widthMode": "static",
+        "width": "600",
+        headerView: "advanced",
+        questions: [
+          {
+            type: "text",
+            title: "Question title",
+            name: "q1"
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "header": {
+            height: "500px",
+            "overlapEnabled": true,
+          },
+          "cssVariables": {
+            "--sjs-cover-backcolor": "rgba(25, 179, 148, 1)"
+          }
+        });
+      })();
+      await takeElementScreenshot("survey-advanced-header-with-overlap.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
+});