From 2bc2b7a7dd57d363d03b456eecf10c8aa3c83ea1 Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Tue, 5 Sep 2023 10:45:57 +0300 Subject: [PATCH 01/13] Resolved #6738 - No space appears for a Progress Bar and the last question on a page --- src/defaultV2-theme/blocks/sd-body.scss | 11 +---------- src/defaultV2-theme/blocks/sd-progress.scss | 11 +++++++++++ .../components-container.html | 4 ++-- src/knockout/components/progress/progress.html | 2 +- src/knockout/components/progress/progress.ts | 15 +++++++++------ 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss index cac51f858d..29a27b758a 100644 --- 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 index 18627cec38..d547d54600 100644 --- 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); } \ No newline at end of file diff --git a/src/knockout/components/components-container/components-container.html b/src/knockout/components/components-container/components-container.html index f5e8f7e429..b1d5a86b45 100644 --- a/src/knockout/components/components-container/components-container.html +++ b/src/knockout/components/components-container/components-container.html @@ -3,7 +3,7 @@
- + @@ -16,7 +16,7 @@ - + diff --git a/src/knockout/components/progress/progress.html b/src/knockout/components/progress/progress.html index 44d35b786a..5b789f5401 100644 --- a/src/knockout/components/progress/progress.html +++ b/src/knockout/components/progress/progress.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/knockout/components/progress/progress.ts b/src/knockout/components/progress/progress.ts index b0c2537f9e..447096b442 100644 --- a/src/knockout/components/progress/progress.ts +++ b/src/knockout/components/progress/progress.ts @@ -3,7 +3,7 @@ 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); @@ -11,12 +11,15 @@ export class ProgressViewModel { 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,7 +29,7 @@ const templateBridge = " - - - + + + - - + + diff --git a/examples/react/index.html b/examples/react/index.html index 2ae859b783..d4a6d20ad0 100644 --- a/examples/react/index.html +++ b/examples/react/index.html @@ -14,10 +14,12 @@ - - - - + + + + + + diff --git a/examples/react/index.js b/examples/react/index.js index b1a7c65137..a9d89e7d9b 100644 --- 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( - , + , 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 index 3f67502dc5..1063bd6531 100644 --- a/packages/survey-angular-ui/src/components-container.component.html +++ b/packages/survey-angular-ui/src/components-container.component.html @@ -2,13 +2,13 @@
- +
- + \ No newline at end of file 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 index 93d9bb7673..4763ba36f9 100644 --- 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 @@ -
+
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 index 902abeb845..6cb4952ee5 100644 --- 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 index 39757bc9d0..b731bc21f9 100644 --- a/packages/survey-vue3-ui/src/components/Container.vue +++ b/packages/survey-vue3-ui/src/components/Container.vue @@ -5,6 +5,7 @@ diff --git a/packages/survey-vue3-ui/src/components/progress/Progress.vue b/packages/survey-vue3-ui/src/components/progress/Progress.vue index 2a3187aaaf..40fa4d8fa5 100644 --- a/packages/survey-vue3-ui/src/components/progress/Progress.vue +++ b/packages/survey-vue3-ui/src/components/progress/Progress.vue @@ -1,5 +1,5 @@ diff --git a/src/vue/progress.vue b/src/vue/progress.vue index 71a9bd65fe..354b37387d 100644 --- a/src/vue/progress.vue +++ b/src/vue/progress.vue @@ -1,5 +1,5 @@