Merge branch 'master' of https://github.com/surveyjs/survey-library

surveyjs · Nov 29, 2023 · c47cacc · c47cacc
2 parents 0d9caa1 + 3961e2f
commit c47cacc
Show file tree

Hide file tree

Showing 23 changed files with 156 additions and 96 deletions.
diff --git a/packages/survey-angular-ui/src/survey-content.component.html b/packages/survey-angular-ui/src/survey-content.component.html
@@ -9,18 +9,21 @@
           <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
           <div *ngIf="model.isShowingPage" [class]="model.bodyContainerCss">
             <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'left' } }"></ng-template>
-            <div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
-              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
-              <!-- ko if: activePage -->
-                <ng-container *ngIf="model.activePage">
-                    <sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page>
-                </ng-container>
-                <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
-                <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
+            <div class="sv-components-column sv-components-column--expandable">
+              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'center' } }"></ng-template>
+              <div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
+                <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
+                <!-- ko if: activePage -->
+                  <ng-container *ngIf="model.activePage">
+                      <sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page>
+                  </ng-container>
+                  <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
+                  <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
+                  <!-- /ko -->
+                  <!-- /ko -->
                 <!-- /ko -->
-                <!-- /ko -->
-              <!-- /ko -->
-              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
+                <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
+              </div>
             </div>
             <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
           </div>

diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue
@@ -32,29 +32,32 @@
                 :container="'left'"
                 :needRenderWrapper="true"
               ></component>
-              <div
-                :class="vueSurvey.bodyCss"
-                :style="{ maxWidth: vueSurvey.renderedWidth }"
-                :id="pageId"
-              >
-                <component
-                  :is="'sv-components-container'"
-                  :survey="vueSurvey"
-                  :container="'contentTop'"
-                  :needRenderWrapper="true"
-                ></component>
-                <survey-page
-                  :key="pageKey"
-                  :survey="vueSurvey"
-                  :page="vueSurvey.activePage"
-                  :css="css"
-                />
-                <component
-                  :is="'sv-components-container'"
-                  :survey="vueSurvey"
-                  :container="'contentBottom'"
-                  :needRenderWrapper="true"
-                ></component>
+              <div class="sv-components-column sv-components-column--expandable">
+                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'center'" :needRenderWrapper="true"></component>
+                <div
+                  :class="vueSurvey.bodyCss"
+                  :style="{ maxWidth: vueSurvey.renderedWidth }"
+                  :id="pageId"
+                >
+                  <component
+                    :is="'sv-components-container'"
+                    :survey="vueSurvey"
+                    :container="'contentTop'"
+                    :needRenderWrapper="true"
+                  ></component>
+                  <survey-page
+                    :key="pageKey"
+                    :survey="vueSurvey"
+                    :page="vueSurvey.activePage"
+                    :css="css"
+                  />
+                  <component
+                    :is="'sv-components-container'"
+                    :survey="vueSurvey"
+                    :container="'contentBottom'"
+                    :needRenderWrapper="true"
+                  ></component>
+                </div>
               </div>
               <component
                 :is="'sv-components-container'"

diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts
@@ -366,7 +366,7 @@ export type ISurveyEnvironment = {
   stylesSheetsMountContainer: HTMLElement,
 }
 
-export type LayoutElementContainer = "header" | "footer" | "left" | "right" | "contentTop" | "contentBottom";
+export type LayoutElementContainer = "header" | "footer" | "left" | "right" | "contentTop" | "contentBottom" | "center";
 export type HorizontalAlignment = "left" | "center" | "right";
 export type VerticalAlignment = "top" | "middle" | "bottom";
 

diff --git a/src/defaultCss/cssmodern.ts b/src/defaultCss/cssmodern.ts
@@ -7,7 +7,7 @@ export var modernCss = {
   header: "sv-title sv-container-modern__title",
   headerClose: "sv-container-modern__close",
   bodyContainer: "sv-components-row",
-  body: "sv-components-column sv-components-column--expandable sv-body",
+  body: "sv-body",
   bodyEmpty: "sv-body sv-body--empty",
   footer: "sv-footer sv-body__footer sv-clearfix",
   title: "",

diff --git a/src/defaultCss/cssstandard.ts b/src/defaultCss/cssstandard.ts
@@ -5,7 +5,7 @@ export var defaultStandardCss = {
   container: "sv_container",
   header: "sv_header",
   bodyContainer: "sv-components-row",
-  body: "sv-components-column sv-components-column--expandable sv_body",
+  body: "sv_body",
   bodyEmpty: "sv_body sv_body_empty",
   footer: "sv_nav",
   title: "",

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -22,7 +22,7 @@ export var defaultV2Css = {
   container: "sd-container-modern",
   header: "sd-title sd-container-modern__title",
   bodyContainer: "sv-components-row",
-  body: "sv-components-column sv-components-column--expandable sd-body",
+  body: "sd-body",
   bodyWithTimer: "sd-body--with-timer",
   clockTimerRoot: "sd-timer",
   clockTimerRootTop: "sd-timer--top",

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -1,6 +1,8 @@
 @import "../defaultV2-theme/mixins.scss";
+
 .sd-body {
   width: 100%;
+  box-sizing: border-box;
 
   .sd-body__page {
     min-width: min(100%, 300px);

diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
@@ -17,6 +17,10 @@
   gap: calcSize(4);
   box-shadow: 0px 2px 0px $primary;
 
+  .sd-logo.sv-logo--right {
+    margin-left: auto;
+  }
+
   .sd-logo__image {
     margin-top: calcSize(1);
   }

diff --git a/src/knockout/templates/index.html b/src/knockout/templates/index.html
@@ -20,17 +20,20 @@
               <!-- ko if: isShowingPage -->
               <div data-bind="css: $data.bodyContainerCss">
                   <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "left" } } --><!-- /ko -->
-                  <div data-bind="css: bodyCss, style:{maxWidth: renderedWidth}, attr: { id: activePage ? activePage.id : '' }">
-                        <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "contentTop" } } --><!-- /ko -->
-                        <!-- ko if: activePage -->
-                        <!-- ko template: { name: 'survey-page', data: activePage, afterRender: koAfterRenderPage } -->
-                        <!-- /ko -->
-                        <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
-                        <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
-                        <!-- /ko -->
-                        <!-- /ko -->
-                        <!-- /ko -->
-                        <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "contentBottom" } } --><!-- /ko -->
+                  <div class="sv-components-column sv-components-column--expandable">
+                    <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "center" } } --><!-- /ko -->
+                    <div data-bind="css: bodyCss, style:{maxWidth: renderedWidth}, attr: { id: activePage ? activePage.id : '' }">
+                          <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "contentTop" } } --><!-- /ko -->
+                          <!-- ko if: activePage -->
+                          <!-- ko template: { name: 'survey-page', data: activePage, afterRender: koAfterRenderPage } -->
+                          <!-- /ko -->
+                          <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
+                          <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
+                          <!-- /ko -->
+                          <!-- /ko -->
+                          <!-- /ko -->
+                          <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "contentBottom" } } --><!-- /ko -->
+                    </div>
                   </div>
                   <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "right" } } --><!-- /ko -->
               </div>

diff --git a/src/react/reactSurvey.tsx b/src/react/reactSurvey.tsx
@@ -179,14 +179,17 @@ export class Survey extends SurveyElementBase<any, any>
     return (
       <div className={this.survey.bodyContainerCss}>
         <ComponentsContainer survey={this.survey} container={"left"}></ComponentsContainer>
-        <div
-          id={pageId}
-          className={className}
-          style={style}
-        >
-          <ComponentsContainer survey={this.survey} container={"contentTop"}></ComponentsContainer>
-          {activePage}
-          <ComponentsContainer survey={this.survey} container={"contentBottom"}></ComponentsContainer>
+        <div className="sv-components-column sv-components-column--expandable">
+          <ComponentsContainer survey={this.survey} container={"center"}></ComponentsContainer>
+          <div
+            id={pageId}
+            className={className}
+            style={style}
+          >
+            <ComponentsContainer survey={this.survey} container={"contentTop"}></ComponentsContainer>
+            {activePage}
+            <ComponentsContainer survey={this.survey} container={"contentBottom"}></ComponentsContainer>
+          </div>
         </div>
         <ComponentsContainer survey={this.survey} container={"right"}></ComponentsContainer>
       </div>

diff --git a/src/survey.ts b/src/survey.ts
@@ -7348,7 +7348,7 @@ export class SurveyModel extends SurveyElementCore
           }
         }
       } else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
-        if (container === "header") {
+        if (container === "center") {
           if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
             containerLayoutElements.push(layoutElement);
           }

diff --git a/src/vue/survey.vue b/src/vue/survey.vue
@@ -14,15 +14,18 @@
           >
             <div :class="vueSurvey.bodyContainerCss">
               <component :is="'sv-components-container'" :survey="vueSurvey" :container="'left'"></component>
-              <div :class="vueSurvey.bodyCss"  :style="{maxWidth: survey.renderedWidth}" :id="pageId">
-                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentTop'"></component>
-                <survey-page
-                  :key="pageKey"
-                  :survey="vueSurvey"
-                  :page="vueSurvey.activePage"
-                  :css="css"
-                />
-                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
+              <div class="sv-components-column sv-components-column--expandable">
+                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'center'"></component>
+                <div :class="vueSurvey.bodyCss"  :style="{maxWidth: survey.renderedWidth}" :id="pageId">
+                  <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentTop'"></component>
+                  <survey-page
+                    :key="pageKey"
+                    :survey="vueSurvey"
+                    :page="vueSurvey.activePage"
+                    :css="css"
+                  />
+                  <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
+                </div>
               </div>
               <component :is="'sv-components-container'" :survey="vueSurvey" :container="'right'"></component>
             </div>

diff --git a/testCafe/survey/options.js b/testCafe/survey/options.js
@@ -186,11 +186,10 @@ frameworks.forEach(framework => {
   });
 
   test("show top progress bar", async t => {
-    let progressSelector = ".sv_container > div:nth-of-type(2)";
-    if(framework === "vue") { // TODO: reanimate Vue after Vue3 supported
-      progressSelector = ".sv_container > .sv-components-column > div";
-    }
-
+    let progressSelector = ".sv_container .sv-components-column--expandable > .sv-components-column > div";
+    // if(framework === "vue3") {
+    //   progressSelector = ".sv_container .sv-components-column--expandable > div";
+    // }
     const progressElement = Selector(progressSelector);
     await t.expect(progressbar.exists).notOk();
 

diff --git a/tests/markup/snapshots/survey-navigation.snap.html b/tests/markup/snapshots/survey-navigation.snap.html
@@ -2,26 +2,28 @@
 </div>
 <div class="sv_container">
 	<div class="sv-components-row">
-		<div class="sv_body sv_body--static sv-components-column sv-components-column--expandable" id="testidpage0">
-			<div class="sv_p_root">
-				<div class="sv_row">
-					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-						<div class="sv_q sv_qstn" data-name="q1" id="testid0">
-							<div role="presentation">
-								<div>
+		<div class="sv-components-column sv-components-column--expandable">
+			<div class="sv_body sv_body--static" id="testidpage0">
+				<div class="sv_p_root">
+					<div class="sv_row">
+						<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+							<div class="sv_q sv_qstn" data-name="q1" id="testid0">
+								<div role="presentation">
 									<div>
+										<div>
+										</div>
 									</div>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-			<div class="sv-components-column">
-				<div class="sv_nav sv-action-bar sv-action-bar--default-size-mode">
-					<div class="sv-action" id="custom-action">
-						<div class="sv-action__content">
-							<input class="sv_nav_btn" title="Custom Tooltip" type="button" value="Custom Action">
+				<div class="sv-components-column">
+					<div class="sv_nav sv-action-bar sv-action-bar--default-size-mode">
+						<div class="sv-action" id="custom-action">
+							<div class="sv-action__content">
+								<input class="sv_nav_btn" title="Custom Tooltip" type="button" value="Custom Action">
+							</div>
 						</div>
 					</div>
 				</div>

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -16986,10 +16986,11 @@ QUnit.test("getContainerContent - progress", function (assert) {
   assert.deepEqual(getContainerContent("right"), [], "default right");
 
   survey.showProgressBar = "top";
-  assert.deepEqual(getContainerContent("header"), [{
+  assert.deepEqual(getContainerContent("header"), [], "progress top header");
+  assert.deepEqual(getContainerContent("center"), [{
     "component": "sv-progress-pages",
     "id": "progress-pages"
-  }], "progress top  header");
+  }], "progress top center");
   assert.deepEqual(getContainerContent("footer"), [], "progress top footer");
   assert.deepEqual(getContainerContent("contentTop"), [], "progress top contentTop");
   assert.deepEqual(getContainerContent("contentBottom"), [], "progress top contentBottom");
@@ -17008,10 +17009,11 @@ QUnit.test("getContainerContent - progress", function (assert) {
   assert.deepEqual(getContainerContent("right"), [], "progress bottom right");
 
   survey.showProgressBar = "both";
-  assert.deepEqual(getContainerContent("header"), [{
+  assert.deepEqual(getContainerContent("header"), [], "progress both header");
+  assert.deepEqual(getContainerContent("center"), [{
     "component": "sv-progress-pages",
     "id": "progress-pages"
-  }], "progress both  header");
+  }], "progress both center");
   assert.deepEqual(getContainerContent("footer"), [{
     "component": "sv-progress-pages",
     "id": "progress-pages"
@@ -17022,7 +17024,8 @@ QUnit.test("getContainerContent - progress", function (assert) {
   assert.deepEqual(getContainerContent("right"), [], "progress both right");
 
   survey.progressBarType = "questions";
-  assert.deepEqual(getContainerContent("header"), [{
+  assert.deepEqual(getContainerContent("header"), [], "progress questions both header");
+  assert.deepEqual(getContainerContent("center"), [{
     "component": "sv-progress-questions",
     "id": "progress-questions"
   }], "progress questions both header");
@@ -17036,10 +17039,11 @@ QUnit.test("getContainerContent - progress", function (assert) {
   assert.deepEqual(getContainerContent("right"), [], "progress questions both right");
 
   survey.showTOC = true;
-  assert.deepEqual(getContainerContent("header"), [{
+  assert.deepEqual(getContainerContent("header"), [], "progress toc both header");
+  assert.deepEqual(getContainerContent("center"), [{
     "component": "sv-progress-questions",
     "id": "progress-questions"
-  }], "progress toc both header");
+  }], "progress toc both center");
   assert.deepEqual(getContainerContent("footer"), [{
     "component": "sv-progress-questions",
     "id": "progress-questions"
@@ -17244,11 +17248,12 @@ QUnit.test("getContainerContent - do not show buttons progress on completed page
     return result;
   }
 
-  assert.deepEqual(getContainerContent("header"), [{
+  assert.deepEqual(getContainerContent("header"), [], "");
+  assert.deepEqual(getContainerContent("footer"), [], "");
+  assert.deepEqual(getContainerContent("center"), [{
     "component": "sv-progress-buttons",
     "id": "progress-buttons"
   }], "");
-  assert.deepEqual(getContainerContent("footer"), [], "");
   assert.deepEqual(getContainerContent("contentTop"), [], "");
   assert.deepEqual(getContainerContent("contentBottom"), [{
     "component": "sv-action-bar",

diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-completed-before.png b/visualRegressionTests/tests/defaultV2/etalons/survey-completed-before.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-custom-navigation.png b/visualRegressionTests/tests/defaultV2/etalons/survey-custom-navigation.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-logo-right-without-title.png b/visualRegressionTests/tests/defaultV2/etalons/survey-logo-right-without-title.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-and-toc.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-and-toc.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-title-with-logo.png b/visualRegressionTests/tests/defaultV2/etalons/survey-title-with-logo.png
diff --git a/...ressionTests/tests/defaultV2/etalons/survey-without-tilte-and-with-progress.png b/...ressionTests/tests/defaultV2/etalons/survey-without-tilte-and-with-progress.png