Cover remarks #3 resolve https://github.com/surveyjs/private-tasks/i…

…ssues/302
surveyjs · Oct 5, 2023 · ee4c9ca · ee4c9ca
1 parent 31d4c22
commit ee4c9ca
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 34 deletions.
diff --git a/src/cover.ts b/src/cover.ts
@@ -73,6 +73,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,6 +107,9 @@ 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 {
@@ -116,6 +140,9 @@ 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;
@@ -124,28 +151,6 @@ export class Cover extends Base {
     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 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();
-  }
   public get backgroundImageStyle() {
     if (!this.backgroundImage) return null;
     return {
@@ -154,6 +159,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));