Cover remarks 3 (#7086)

* fix cover (cherry picked from commit 6a7b6e2) * Cover remarks #3 resolve surveyjs/private-tasks#302 * fix for unit tests * fix maximum call stack --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Oct 9, 2023 · bf277bd · bf277bd
1 parent 4dff2c6
commit bf277bd
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 33 deletions.
diff --git a/src/cover.ts b/src/cover.ts
@@ -64,6 +64,8 @@ export class CoverCell {
 }
 
 export class Cover extends Base {
+  private _survey: SurveyModel;
+
   private calcBackgroundSize(backgroundImageFit: "cover" | "fill" | "contain" | "tile"): string {
     if (backgroundImageFit === "fill") {
       return "100% 100%";
@@ -73,6 +75,27 @@ export class Cover extends Base {
     }
     return backgroundImageFit;
   }
+  private updateCoverClasses(): void {
+    this.coverClasses = new CssClassBuilder()
+      .append("sv-cover")
+      .append("sv-conver__without-background", (!this.backgroundColor || this.backgroundColor === "trasparent") && !this.backgroundImage)
+      .append("sv-conver__overlap", this.overlapEnabled)
+      .toString();
+  }
+  private updateContentClasses(): void {
+    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"))
+      .toString();
+  }
+  private updateBackgroundImageClasses(): void {
+    this.backgroundImageClasses = new CssClassBuilder()
+      .append("sv-cover__background-image")
+      .append("sv-cover__background-image--contain", this.backgroundImageFit === "contain")
+      .append("sv-cover__background-image--tile", this.backgroundImageFit === "tile")
+      .toString();
+  }
   public fromTheme(theme: ITheme): void {
     super.fromJSON(theme.cover);
     if(!!theme.cssVariables) {
@@ -86,12 +109,15 @@ export class Cover extends Base {
     ["top", "middle", "bottom"].forEach((positionY: VerticalAlignment) =>
       ["left", "center", "right"].forEach((positionX: HorizontalAlignment) => this.cells.push(new CoverCell(this, positionX, positionY)))
     );
+    this.updateCoverClasses();
+    this.updateContentClasses();
+    this.updateBackgroundImageClasses();
   }
 
   public getType(): string {
     return "cover";
   }
-  public survey: SurveyModel;
+
   public cells: CoverCell[] = [];
   @property() public height: number;
   @property() public inheritWidthFrom: "survey" | "page";
@@ -116,36 +142,33 @@ export class Cover extends Base {
   @property() logoStyle: { gridColumn: number, gridRow: number };
   @property() titleStyle: { gridColumn: number, gridRow: number };
   @property() descriptionStyle: { gridColumn: number, gridRow: number };
+  @property() coverClasses: string;
+  @property() contentClasses: string;
+  @property() backgroundImageClasses: string;
 
   public get renderedHeight(): string {
     return this.height ? this.height + "px" : undefined;
   }
   public get renderedtextAreaWidth(): string {
     return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
   }
-
-  public get coverClasses(): string {
-    return new CssClassBuilder()
-      .append("sv-cover")
-      .append("sv-conver__without-background", !this.backgroundColor && !this.backgroundImage)
-      .append("sv-conver__overlap", this.overlapEnabled)
-      .toString();
-  }
-  public get contentClasses(): string {
-    return new CssClassBuilder()
-      .append("sv-conver__content")
-      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && this.survey.calculateWidthMode() === "static")
-      .append("sv-conver__content--responsive", this.inheritWidthFrom === "page" || this.survey.calculateWidthMode() === "responsive")
-      .toString();
+  public get survey(): SurveyModel {
+    return this._survey;
   }
+  public set survey(newValue: SurveyModel) {
+    if(this._survey === newValue) return;
 
-  public get backgroundImageClasses(): string {
-    return new CssClassBuilder()
-      .append("sv-cover__background-image")
-      .append("sv-cover__background-image--contain", this.backgroundImageFit === "contain")
-      .append("sv-cover__background-image--tile", this.backgroundImageFit === "tile")
-      .toString();
+    this._survey = newValue;
+    if(!!newValue) {
+      this.updateContentClasses();
+      this._survey.onPropertyChanged.add((sender: any, options: any) => {
+        if (options.name == "widthMode") {
+          this.updateContentClasses();
+        }
+      });
+    }
   }
+
   public get backgroundImageStyle() {
     if (!this.backgroundImage) return null;
     return {
@@ -154,6 +177,18 @@ export class Cover extends Base {
       backgroundSize: this.calcBackgroundSize(this.backgroundImageFit),
     };
   }
+  protected propertyValueChanged(name: string, oldValue: any, newValue: any): void {
+    super.propertyValueChanged(name, oldValue, newValue);
+    if (name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
+      this.updateCoverClasses();
+    }
+    if (name === "inheritWidthFrom") {
+      this.updateContentClasses();
+    }
+    if (name === "backgroundImageFit") {
+      this.updateBackgroundImageClasses();
+    }
+  }
 }
 
 Serializer.addClass(

diff --git a/src/defaultV2-theme/blocks/cover.scss b/src/defaultV2-theme/blocks/cover.scss
@@ -11,7 +11,7 @@
 }
 
 .sv-conver__overlap.sv-conver__without-background {
-  margin-bottom: calcSize(-8);
+  margin-bottom: 0;
 }
 
 .sv-conver__without-background {
@@ -69,12 +69,11 @@
   }
 }
 
-// .sv-cover__cell--center {
-//   .sv-cover__cell-content {
-//     left: 0;
-//     right: 0;
-//   }
-// }
+.sv-cover__cell--center {
+  .sv-cover__cell-content {
+    min-width: 100%;
+  }
+}
 
 .sv-cover__cell--right {
   .sv-cover__cell-content {
@@ -105,5 +104,8 @@
 
 .sv-cover__description .sd-description {
   margin: 0;
-  color: $foreground-dim-light;
-}
+  color: $cover-description-forecolor;
+}
+.sv-conver__content .sd-header__text h3 {
+  margin: 0;
+}
diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
@@ -61,8 +61,6 @@
 }
 
 .sd-root-modern {
-
-  .sv-conver__content,
   .sd-container-modern__title {
     .sd-header__text h3 {
       margin: 0;

diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
@@ -32,7 +32,8 @@ $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));
 
 $cover-backcolor: var(--sjs-cover-backcolor);
-$cover-title-forecolor: var(--sjs-cover-title-forecolor, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+$cover-title-forecolor: var(--sjs-cover-title-forecolor, #{$foreground-dim});
+$cover-description-forecolor: var(--sjs-cover-description-forecolor, #{$foreground-dim-light});
 
 $border: var(--sjs-border-default, var(--border, #d6d6d6));
 $border-light: var(--sjs-border-light, var(--border-light, #eaeaea));