Fixed#4371 - Theme builder/Preview : strange resulting page (#4626)

* Fixed#4371 - Theme builder/Preview : strange resulting page * Work for #4371 - Theme builder/Preview : strange resulting page - updated etalons * Work for #4371 - Theme builder/Preview : strange resulting page - updated etalons --------- Co-authored-by: tsv2013 <[email protected]>
surveyjs · Sep 21, 2023 · 17fd6b9 · 17fd6b9
1 parent 27f905e
commit 17fd6b9
Show file tree

Hide file tree

Showing 25 changed files with 67 additions and 33 deletions.
diff --git a/packages/survey-creator-angular/src/tabs/preview/test-again.component.html b/packages/survey-creator-angular/src/tabs/preview/test-again.component.html
@@ -1,7 +1,7 @@
 <ng-template #template>
-  <div role="button" class="svc-preview__test-again svc-btn" (click)="model.action()" [key2click]>
+  <div role="button" class="svc-preview__test-again svc-btn" (click)="action.action()" [key2click]>
     <span class="svc-text svc-text--normal svc-text--bold">
-      {{model.title}}
+      {{action.title}}
     </span>
   </div>
 </ng-template>
diff --git a/packages/survey-creator-angular/src/tabs/preview/test-again.component.ts b/packages/survey-creator-angular/src/tabs/preview/test-again.component.ts
@@ -1,15 +1,20 @@
 import { Component, Input } from "@angular/core";
-import { BaseAngular } from "survey-angular-ui";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
 import { Action } from "survey-core";
+import { TestSurveyTabViewModel } from "survey-creator-core";
 
 @Component({
   selector: "survey-test-again",
   templateUrl: "./test-again.component.html",
   styles: [":host { display: none; }"]
 })
 export class TestAgainActionComponent extends BaseAngular<Action> {
-  @Input() model!: Action;
+  @Input() model!: { testAgainAction: Action };
   protected getModel(): Action {
-    return this.model;
+    return this.model.testAgainAction;
   }
-}
+  get action() {
+    return this.getModel();
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-complete-page", TestAgainActionComponent);
diff --git a/packages/survey-creator-angular/src/tabs/preview/test.component.html b/packages/survey-creator-angular/src/tabs/preview/test.component.html
@@ -3,7 +3,6 @@
     <div class="svc-plugin-tab__content">
       <survey-simulator [model]="model.simulator"></survey-simulator>
       <ng-container *ngIf="!model.isRunning">
-        <survey-test-again [model]="model.testAgainAction"></survey-test-again>
         <survey-results [survey]="model.survey"></survey-results>
       </ng-container>
     </div>

diff --git a/packages/survey-creator-angular/src/tabs/theme/theme.component.html b/packages/survey-creator-angular/src/tabs/theme/theme.component.html
@@ -3,7 +3,6 @@
     <div class="svc-plugin-tab__content">
       <survey-simulator [model]="model.simulator"></survey-simulator>
       <ng-container *ngIf="!model.isRunning">
-        <survey-test-again [model]="model.testAgainAction"></survey-test-again>
         <survey-results [survey]="model.survey"></survey-results>
       </ng-container>
     </div>

diff --git a/packages/survey-creator-core/src/components/results.scss b/packages/survey-creator-core/src/components/results.scss
@@ -2,12 +2,9 @@
 
 .svd-test-results {
   font-family: $font-family;
-  width: 80%;
-  margin: auto;
-  margin-bottom: calcSize(5);
-  background-color: $background;
-  box-shadow: $shadow-small;
   border-radius: 4px;
+  box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
 
   .svd-test-results__header {
     display: flex;
@@ -17,10 +14,12 @@
     font-size: calcSize(2);
     color: $foreground-light;
     border-bottom: 2px solid $border-light;
+    background-color: $background;
 
     .svd-test-results__header-text {
       margin: 0;
     }
+
     .svd-test-results__header-types {
       display: flex;
       gap: calcSize(1);
@@ -34,12 +33,17 @@
     overflow: auto;
     user-select: text;
     white-space: pre-wrap;
+    background-color: $background;
   }
+
   .svd-test-results__table {
+    background-color: $background;
     width: 100%;
+    box-shadow: $shadow-small;
+
     table {
       width: 100%;
-      border-collapse: collapse; 
+      border-collapse: collapse;
 
       .svd-test-results__marker {
         position: absolute;
@@ -55,7 +59,7 @@
 
         &.svd-test-results__marker--expanded .sv-svg-icon {
           transform-origin: center;
-          transform: rotate(90deg) ;
+          transform: rotate(90deg);
         }
       }
 
@@ -84,6 +88,7 @@
           width: 50%;
           font-weight: 600;
         }
+
         &:nth-child(2) {
           width: 50%;
           padding-right: calcSize(3);

diff --git a/packages/survey-creator-core/src/components/simulator.scss b/packages/survey-creator-core/src/components/simulator.scss
@@ -141,6 +141,8 @@
   justify-content: center;
   width: 100%;
   height: 100%;
+  // border-bottom: 1px solid $border-inside;
+  box-shadow: inset 0px -1px 0px 0px $border-inside;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {

diff --git a/packages/survey-creator-core/src/components/tabs/test.scss b/packages/survey-creator-core/src/components/tabs/test.scss
@@ -24,7 +24,7 @@ svc-tab-test {
     width: calcSize(33);
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 72px;
+    margin-bottom: calcSize(12);
     margin-top: 8px;
   }
 }

diff --git a/packages/survey-creator-core/src/components/tabs/test.ts b/packages/survey-creator-core/src/components/tabs/test.ts
@@ -84,6 +84,12 @@ export class TestSurveyTabViewModel extends Base {
       newSurvey.setCss(theme, false);
     }
     newSurvey.fitToContainer = true;
+    newSurvey.addLayoutElement({
+      id: "complete-customization",
+      container: "completePage" as any,
+      component: "svc-complete-page",
+      data: this
+    });
     this.simulator.survey = newSurvey;
     if (this.onSurveyCreatedCallback) this.onSurveyCreatedCallback(this.survey);
     this.survey.onComplete.add((sender: SurveyModel) => {
@@ -266,7 +272,7 @@ export class TestSurveyTabViewModel extends Base {
   }
   private getPageItemByPage(page: PageModel): IAction {
     const model = this.selectPageAction.popupModel.contentComponentData.model;
-    if(!model || !Array.isArray(model.actions)) return undefined;
+    if (!model || !Array.isArray(model.actions)) return undefined;
     const items: IAction[] = model.actions;
     for (let i = 0; i < items.length; i++) {
       if (items[i].data === page) return items[i];

diff --git a/packages/survey-creator-core/src/components/tabs/theme-builder.scss b/packages/survey-creator-core/src/components/tabs/theme-builder.scss
@@ -24,7 +24,7 @@ svc-tab-test {
     width: calcSize(33);
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 72px;
+    margin-bottom: calcSize(12);
     margin-top: 8px;
   }
 }

diff --git a/packages/survey-creator-core/src/components/tabs/theme-builder.ts b/packages/survey-creator-core/src/components/tabs/theme-builder.ts
@@ -203,6 +203,12 @@ export class ThemeBuilder extends Base {
     const newSurvey = this.surveyProvider.createSurvey(json || {}, "theme", this);
     newSurvey.setCss(theme, false);
     newSurvey.fitToContainer = true;
+    newSurvey.addLayoutElement({
+      id: "complete-customization",
+      container: "completePage" as any,
+      component: "svc-complete-page",
+      data: this
+    });
     this.simulator.survey = newSurvey;
     this.updateSimulatorTheme();
     if (this.onSurveyCreatedCallback) this.onSurveyCreatedCallback(this.survey);

diff --git a/packages/survey-creator-knockout/src/entries/index.ts b/packages/survey-creator-knockout/src/entries/index.ts
@@ -50,6 +50,7 @@ export * from "../simulator";
 export * from "../svg-bundle";
 export * from "../survey-renderers/dropdown";
 export * from "../tabs/test";
+export * from "../tabs/test-complete";
 export * from "../tabs/theme";
 export * from "../tabbed-menu/tabbed-menu";
 export * from "../tabbed-menu/tabbed-menu-item";

diff --git a/packages/survey-creator-knockout/src/tabs/test-complete.html b/packages/survey-creator-knockout/src/tabs/test-complete.html
@@ -0,0 +1,5 @@
+<div role="button" class="svc-preview__test-again svc-btn"
+  data-bind="click: testAgainAction.action, key2click, clickBubble: false">
+  <span class="svc-text svc-text--normal svc-text--bold" data-bind="text: testAgainAction.title">
+  </span>
+</div>
diff --git a/packages/survey-creator-knockout/src/tabs/test-complete.ts b/packages/survey-creator-knockout/src/tabs/test-complete.ts
@@ -0,0 +1,19 @@
+import * as ko from "knockout";
+import { ImplementorBase } from "survey-knockout-ui";
+import { TestSurveyTabViewModel } from "survey-creator-core";
+
+const template = require("./test-complete.html");
+// import template from "./test-complete.html";
+
+ko.components.register("svc-complete-page", {
+  viewModel: {
+    createViewModel: (params: any, componentInfo: any) => {
+      const model: TestSurveyTabViewModel = params.model;
+      new ImplementorBase(model.testAgainAction);
+      return {
+        testAgainAction: model.testAgainAction
+      };
+    },
+  },
+  template: template
+});
diff --git a/packages/survey-creator-knockout/src/tabs/test.html b/packages/survey-creator-knockout/src/tabs/test.html
@@ -3,11 +3,6 @@
   <div class="svc-plugin-tab__content">
     <survey-simulator params="model: simulator"></survey-simulator>
     <!-- ko ifnot: isRunning -->
-    <div role="button" class="svc-preview__test-again svc-btn"
-      data-bind="click: testAgainAction.action, key2click, clickBubble: false">
-      <span class="svc-text svc-text--normal svc-text--bold" data-bind="text: testAgainAction.title">
-      </span>
-    </div>
     <survey-results params="survey: survey"></survey-results>
     <!-- /ko -->
   </div>

diff --git a/packages/survey-creator-knockout/src/tabs/test.ts b/packages/survey-creator-knockout/src/tabs/test.ts
@@ -10,7 +10,6 @@ ko.components.register("svc-tab-test", {
     createViewModel: (params: any, componentInfo: any) => {
       const plugin: TabTestPlugin = params.data;
       new ImplementorBase(plugin.model.simulator);
-      new ImplementorBase(plugin.model.testAgainAction);
       new ImplementorBase(plugin.model);
       return plugin.model;
     },

diff --git a/packages/survey-creator-knockout/src/tabs/theme.html b/packages/survey-creator-knockout/src/tabs/theme.html
@@ -3,11 +3,6 @@
   <div class="svc-plugin-tab__content">
     <survey-simulator params="model: simulator"></survey-simulator>
     <!-- ko ifnot: isRunning -->
-    <div role="button" class="svc-preview__test-again svc-btn"
-      data-bind="click: testAgainAction.action, key2click, clickBubble: false">
-      <span class="svc-text svc-text--normal svc-text--bold" data-bind="text: testAgainAction.title">
-      </span>
-    </div>
     <survey-results params="survey: survey"></survey-results>
     <!-- /ko -->
   </div>

diff --git a/packages/survey-creator-react/src/tabs/Preview.tsx b/packages/survey-creator-react/src/tabs/Preview.tsx
@@ -12,7 +12,7 @@ import { SurveyResults } from "../Results";
 
 export class TabPreviewTestSurveyAgainComponent extends SurveyElementBase<any, any> {
   private get model(): Action {
-    return this.props.button;
+    return this.props.model.testAgainAction;
   }
   protected getStateElement(): Base {
     return this.model;
@@ -35,7 +35,7 @@ export class TabPreviewTestSurveyAgainComponent extends SurveyElementBase<any, a
     </div>);
   }
 }
-ReactElementFactory.Instance.registerElement("svc-tab-preview-test-again", (props) => {
+ReactElementFactory.Instance.registerElement("svc-complete-page", (props) => {
   return React.createElement(TabPreviewTestSurveyAgainComponent, props);
 });
 
@@ -56,7 +56,6 @@ export class TabPreviewSurveyComponent extends SurveyElementBase<any, any> {
       <div className={tabContentClassName}>
         <div className="svc-plugin-tab__content">
           <SurveySimulator model={this.model.simulator}></SurveySimulator>
-          {!this.model.isRunning ? <TabPreviewTestSurveyAgainComponent button={this.model.testAgainAction} /> : null}
           {!this.model.isRunning ? <SurveyResults survey={this.model.simulator.survey} /> : null}
         </div>
         {this.getBottomToolbar()}

diff --git a/packages/survey-creator-react/src/tabs/Theme.tsx b/packages/survey-creator-react/src/tabs/Theme.tsx
@@ -25,7 +25,6 @@ export class TabThemeSurveyComponent extends SurveyElementBase<any, any> {
       <div className={tabContentClassName}>
         <div className="svc-plugin-tab__content">
           <SurveySimulator model={this.model.simulator}></SurveySimulator>
-          {!this.model.isRunning ? <TabPreviewTestSurveyAgainComponent button={this.model.testAgainAction} /> : null}
           {!this.model.isRunning ? <SurveyResults survey={this.model.simulator.survey} /> : null}
         </div>
         {this.getBottomToolbar()}

diff --git a/visualRegressionTests/tests/designer/etalons/complete-tab-results-part.png b/visualRegressionTests/tests/designer/etalons/complete-tab-results-part.png
diff --git a/visualRegressionTests/tests/designer/etalons/complete-tab-results-via-json.png b/visualRegressionTests/tests/designer/etalons/complete-tab-results-via-json.png
diff --git a/visualRegressionTests/tests/designer/etalons/complete-tab-results-via-table-1.png b/visualRegressionTests/tests/designer/etalons/complete-tab-results-via-table-1.png
diff --git a/visualRegressionTests/tests/designer/etalons/complete-tab-results-via-table-2.png b/visualRegressionTests/tests/designer/etalons/complete-tab-results-via-table-2.png
diff --git a/visualRegressionTests/tests/designer/etalons/theme-default-test-again.png b/visualRegressionTests/tests/designer/etalons/theme-default-test-again.png
diff --git a/visualRegressionTests/tests/designer/etalons/theme-legacy-test-again.png b/visualRegressionTests/tests/designer/etalons/theme-legacy-test-again.png
diff --git a/visualRegressionTests/tests/designer/etalons/theme-modern-test-again.png b/visualRegressionTests/tests/designer/etalons/theme-modern-test-again.png