#6738 No space appears for a Progress Bar and the last question on a …

…page (#6893) * Resolved #6738 - No space appears for a Progress Bar and the last question on a page * Resolved #6738 - No space appears for a Progress Bar and the last question on a page - updated u-test * Resolved #6738 - No space appears for a Progress Bar and the last question on a page - fixed lint * Work for #6738 - No space appears for a Progress Bar and the last question on a page * Work for #6738 - No space appears for a Progress Bar and the last question on a page - passed container to navigation on all platforms * Work for #6738 - No space appears for a Progress Bar and the last question on a page - added vr-tests * Work for #6738 - No space appears for a Progress Bar and the last question on a page - fixed tests * Work for #6738 - No space appears for a Progress Bar and the last question on a page - fixed lint * Work for #6738 - No space appears for a Progress Bar and the last question on a page - fixed tests * Work for #6738 - No space appears for a Progress Bar and the last question on a page - fixed f-test in angular * Work for #6738 - No space appears for a Progress Bar and the last question on a page - updated vr-test with brand info * Work for #6738 - No space appears for a Progress Bar and the last question on a page - changed progress text padding * Work for #6738 - No space appears for a Progress Bar and the last question on a page - updated etalons --------- Co-authored-by: tsv2013 <[email protected]>
surveyjs · Sep 6, 2023 · 4bf9080 · 4bf9080
1 parent 6bff363
commit 4bf9080
Show file tree

Hide file tree

Showing 25 changed files with 193 additions and 124 deletions.
diff --git a/examples/knockout/index.html b/examples/knockout/index.html
@@ -8,12 +8,12 @@
 
     <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"> -->
     <!-- <script src="../../build/survey-core/plugins/bootstrap-integration.js"></script> -->
-    <link rel="stylesheet" href="../../build/survey-knockout/survey.css" />
-    <!-- <link rel="stylesheet" href="../../build/survey-knockout/modern.css" /> -->
-    <link rel="stylesheet" href="../../build/survey-knockout/defaultV2.css" />
+    <!-- <link rel="stylesheet" href="../../build/survey-core/survey.css" /> -->
+    <!-- <link rel="stylesheet" href="../../build/survey-core/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-core/defaultV2.css" />
     <script src="../../build/survey-core/survey.core.js"></script>
-    <script src="../../build/survey-knockout/survey.ko.js"></script>
-    <!-- <script src="../../build/survey-knockout-ui/survey-knockout-ui.js"></script> -->
+    <!-- <script src="../../build/survey-knockout/survey.ko.js"></script> -->
+    <script src="../../build/survey-knockout-ui/survey-knockout-ui.js"></script>
 </head>
 
   <body>

diff --git a/examples/react/index.html b/examples/react/index.html
@@ -14,10 +14,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
 
     <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"> -->
-    <!-- <link rel="stylesheet" href="../../build/survey-react/survey.css" /> -->
-    <!-- <link rel="stylesheet" href="../../build/survey-react/modern.css" /> -->
-    <link rel="stylesheet" href="../../build/survey-react/defaultV2.css" />
-    <script src="../../build/survey-react/survey.react.js"></script>
+    <!-- <link rel="stylesheet" href="../../build/survey-core/survey.css" /> -->
+    <!-- <link rel="stylesheet" href="../../build/survey-core/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-core/defaultV2.css" />
+    <script src="../../build/survey-core/survey.core.js"></script>
+    <!-- <script src="../../build/survey-react/survey.react.js"></script> -->
+    <script src="../../build/survey-react-ui/survey-react-ui.js"></script>
   </head>
 
   <body>

diff --git a/examples/react/index.js b/examples/react/index.js
@@ -1031,7 +1031,7 @@ function init() {
 
   //Survey.StylesManager.applyTheme("default");
   //Survey.StylesManager.applyTheme("modern");
-  Survey.StylesManager.applyTheme("defaultV2");
+  // Survey.StylesManager.applyTheme("defaultV2");
 
   var model = new Survey.Model(json);
   //model.setDesignMode(true);
@@ -1048,7 +1048,7 @@ function init() {
     });
 
   ReactDOM.render(
-    <Survey.Survey model={model} />,
+    <SurveyReact.Survey model={model} />,
     document.getElementById("surveyElement")
   );
 }

diff --git a/packages/survey-angular-ui/src/components-container.component.html b/packages/survey-angular-ui/src/components-container.component.html
@@ -2,13 +2,13 @@
   <ng-container *ngIf="isNeedRenderWrapper">
     <div *ngIf="components.length > 0" class="sv-components-column">
       <ng-container *ngFor="let component of components">
-        <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+        <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
       </ng-container>
     </div>
   </ng-container>
   <ng-container *ngIf="!isNeedRenderWrapper && components.length > 0">
     <ng-container *ngFor="let component of components">
-      <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+      <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
     </ng-container>
   </ng-container>
 </ng-template>
diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.html b/packages/survey-angular-ui/src/components/progress/default/progress.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div [class]="model.getProgressCssClasses()">
+  <div [class]="model.getProgressCssClasses(container)">
     <div [class]="model.css.progressBar" [style.width]="model.progressValue + '%'"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span [class]="getProgressTextInBarCss(model.css)">

diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.ts b/packages/survey-angular-ui/src/components/progress/default/progress.component.ts
@@ -8,6 +8,7 @@ import { EmbeddedViewContentComponent } from "../../../embedded-view-content.com
   templateUrl: "./progress.component.html"
 })
 export class ProgressDefaultComponent extends EmbeddedViewContentComponent {
+  @Input() container?: string;
   @Input() model: any;
   getProgressTextInBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextInBarCss(css);

diff --git a/packages/survey-vue3-ui/src/components/Container.vue b/packages/survey-vue3-ui/src/components/Container.vue
@@ -5,6 +5,7 @@
         <component
           :is="component.component"
           :survey="survey"
+          :container="container"
           :model="component.data"
         ></component>
       </template>

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -24,6 +24,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   model: ActionContainer;
+  container?: string;
   handleClick?: boolean;
 }>();
 const root = ref<HTMLDivElement>(null as any as HTMLDivElement);

diff --git a/packages/survey-vue3-ui/src/components/progress/Progress.vue b/packages/survey-vue3-ui/src/components/progress/Progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="survey.getProgressCssClasses()">
+  <div :class="survey.getProgressCssClasses(container)">
     <div
       :class="survey.css.progressBar"
       :style="{ width: progress }"
@@ -23,6 +23,7 @@ import { SurveyModel, SurveyProgressModel } from "survey-core";
 
 const props = defineProps<{
   survey: SurveyModel;
+  container?: string;
   css?: any;
 }>();
 const progress = computed(() => props.survey.progressValue + "%");

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -93,16 +93,6 @@
   gap: calcSize(2);
 }
 
-.sd-body__progress {
-  margin-bottom: calcSize(4);
-}
-
-.sd-body__progress--top {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-}
-
 .sd-body--empty {
   min-height: 400px;
   text-align: center;
@@ -158,6 +148,7 @@
     &:hover {
       background-color: $background-dark;
     }
+
     &:focus {
       box-shadow: 0 0 0 2px $primary;
     }

diff --git a/src/defaultV2-theme/blocks/sd-progress.scss b/src/defaultV2-theme/blocks/sd-progress.scss
@@ -27,4 +27,15 @@
   @media only screen and (max-width: calcSize(125)) {
     margin-left: 10px;
   }
+}
+
+.sd-body__progress--top {
+  margin-bottom: calcSize(4);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.sd-body__progress--bottom .sd-progress__text {
+  margin-top: calcSize(-3.5);
 }
diff --git a/src/knockout/components/components-container/components-container.html b/src/knockout/components/components-container/components-container.html
@@ -3,7 +3,7 @@
 <div data-bind="css: css">
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
-  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data, container: $parent.container } } -->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: $data.template -->
@@ -16,7 +16,7 @@
 <!-- ko ifnot: $data.needRenderWrapper -->
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
-  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data, container: $parent.container } } -->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: $data.template -->

diff --git a/src/knockout/components/progress/progress.html b/src/knockout/components/progress/progress.html
@@ -1,4 +1,4 @@
-<div data-bind="css: model.getProgressCssClasses()">
+<div data-bind="css: getProgressCssClasses()">
     <div data-bind="css: model.css.progressBar, style: { width: model.progressValue + '%' }"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span data-bind="text: model.progressText, css: getProgressTextInBarCss(model.css)"></span>

diff --git a/src/knockout/components/progress/progress.ts b/src/knockout/components/progress/progress.ts
@@ -3,20 +3,23 @@ import { SurveyProgressModel } from "survey-core";
 const template = require("html-loader?interpolate!val-loader!./progress.html");
 
 export class ProgressViewModel {
-  constructor(public model: any) {}
+  constructor(public model: any, private container: string = "header") { }
 
   getProgressTextInBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextInBarCss(css);
   }
   getProgressTextUnderBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextUnderBarCss(css);
   }
+  getProgressCssClasses() {
+    return this.model.getProgressCssClasses(this.container);
+  }
 }
 
 ko.components.register("sv-progress-progress", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: template
@@ -26,31 +29,31 @@ const templateBridge = "<!-- ko component: { name: 'sv-progress-progress', param
 ko.components.register("sv-progress-pages", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
 });
 ko.components.register("sv-progress-questions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
 });
 ko.components.register("sv-progress-correctquestions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
 });
 ko.components.register("sv-progress-requiredquestions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge

diff --git a/src/react/components/components-container.tsx b/src/react/components/components-container.tsx
@@ -12,13 +12,13 @@ export class ComponentsContainer extends React.Component<any, any> {
     if(!needRenderWrapper) {
       return <>
         {components.map(component => {
-          return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, key: component.id });
+          return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, container: this.props.container, key: component.id });
         })}
       </>;
     }
     return <div className="sv-components-column">
       {components.map(component => {
-        return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, key: component.id });
+        return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, container: this.props.container, key: component.id });
       })}
     </div>;
   }

diff --git a/src/react/reactSurveyProgress.tsx b/src/react/reactSurveyProgress.tsx
@@ -21,7 +21,7 @@ export class SurveyProgress extends SurveyNavigationBase {
       width: this.progress + "%",
     };
     return (
-      <div className={this.survey.getProgressCssClasses()}>
+      <div className={this.survey.getProgressCssClasses(this.props.container)}>
         <div
           style={progressStyle}
           className={this.css.progressBar}

diff --git a/src/survey.ts b/src/survey.ts
@@ -2529,11 +2529,11 @@ export class SurveyModel extends SurveyElementCore
   public getProgressTypeComponent(): string {
     return "sv-progress-" + this.progressBarType.toLowerCase();
   }
-  public getProgressCssClasses(): string {
+  public getProgressCssClasses(container: string = ""): string {
     return new CssClassBuilder()
       .append(this.css.progress)
-      .append(this.css.progressTop, this.isShowProgressBarOnTop)
-      .append(this.css.progressBottom, this.isShowProgressBarOnBottom)
+      .append(this.css.progressTop, this.isShowProgressBarOnTop && (!container || container == "header"))
+      .append(this.css.progressBottom, this.isShowProgressBarOnBottom && (!container || container == "footer"))
       .toString();
   }
   private canShowProresBar(): boolean {
@@ -7244,7 +7244,7 @@ export class SurveyModel extends SurveyElementCore
             containerLayoutElements.push(layoutElement);
           }
         }
-        if(container === "contentBottom") {
+        if(container === "footer") {
           if(this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
             containerLayoutElements.push(layoutElement);
           }

diff --git a/src/vue/components/action-bar/action-bar.vue b/src/vue/components/action-bar/action-bar.vue
@@ -31,6 +31,7 @@ export * from "./action-bar-separator.vue";
 @Component
 export class ActionBarViewModel extends BaseVue {
   @Prop() model: ActionContainer;
+  @Prop() container: string;
   @Prop() handleClick: boolean;
   constructor(props: any) {
     super(props);

diff --git a/src/vue/components/container.vue b/src/vue/components/container.vue
@@ -4,6 +4,7 @@
       <component 
         :is="component.component"
         :survey="survey"
+        :container="container"
         :model="component.data"
       ></component>
     </template>

diff --git a/src/vue/progress.vue b/src/vue/progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="survey.getProgressCssClasses()">
+  <div :class="survey.getProgressCssClasses(container)">
     <div
       :class="survey.css.progressBar"
       :style="{ width: progress }"
@@ -25,6 +25,7 @@ import { SurveyModel, SurveyProgressModel } from "survey-core";
 @Component
 export class Progress extends Vue {
   @Prop() survey: SurveyModel;
+  @Prop() container: string;
   @Prop() css: any;
   public get progress() {
     return this.survey.progressValue + "%";

diff --git a/testCafe/survey/options.js b/testCafe/survey/options.js
@@ -202,14 +202,18 @@ frameworks.forEach(framework => {
   });
 
   test("show bottom progress bar", async t => {
-    const questionElements = Selector(".sv_body > .sv-components-column > div");
+    const progressRootElement = Selector(".sv_main > form > .sv_container .sv-components-row ~ div");
     await t.expect(progressbar.exists).notOk();
 
     await show_bottom_progress_bar();
     await t
       .expect(progressbar.visible).ok()
-      .expect(progressbar.textContent).contains("Page 1 of 3")
-      .expect(questionElements.classNames).contains("sv_progress");
+      .expect(progressbar.textContent).contains("Page 1 of 3");
+    if(framework === "vue") {
+      await t.expect(progressRootElement.find(".sv_progress").visible).ok();
+    } else {
+      await t.expect(progressRootElement.classNames).contains("sv_progress");
+    }
   });
 
   test("check progress bar page 2", async t => {