Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Sep 6, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2bc2b7a
Resolved #6738 - No space appears for a Progress Bar and the last que…
Sep 5, 2023
a82ed11
Resolved #6738 - No space appears for a Progress Bar and the last que…
Sep 5, 2023
657ee9f
Resolved #6738 - No space appears for a Progress Bar and the last que…
Sep 5, 2023
936deb4
Merge branch 'master' into bug/6738-bottom-progress
Sep 6, 2023
88363dc
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
b61cf4d
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
f6cf79e
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
8a006e1
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
89374b9
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
c1e469a
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
d61dcc3
Merge branch 'master' into bug/6738-bottom-progress
Sep 6, 2023
135ecd4
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
d1bf575
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
bad2a9a
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
7ec6720
Work for #6738 - No space appears for a Progress Bar and the last que…
Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/knockout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@

<!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/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>
Expand Down
10 changes: 6 additions & 4 deletions examples/react/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/bootstrap@3.3.7/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>
Expand Down
4 changes: 2 additions & 2 deletions examples/react/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -1048,7 +1048,7 @@ function init() {
});

ReactDOM.render(
<Survey.Survey model={model} />,
<SurveyReact.Survey model={model} />,
document.getElementById("surveyElement")
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/survey-angular-ui/src/components-container.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion packages/survey-angular-ui/src/components/progress/default/progress.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)">
Expand Down
1 change: 1 addition & 0 deletions packages/survey-angular-ui/src/components/progress/default/progress.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions packages/survey-vue3-ui/src/components/Container.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<component
:is="component.component"
:survey="survey"
:container="container"
:model="component.data"
></component>
</template>
Expand Down
1 change: 1 addition & 0 deletions packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion packages/survey-vue3-ui/src/components/progress/Progress.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div :class="survey.getProgressCssClasses()">
<div :class="survey.getProgressCssClasses(container)">
<div
:class="survey.css.progressBar"
:style="{ width: progress }"
Expand All @@ -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 + "%");
Expand Down
11 changes: 1 addition & 10 deletions src/defaultV2-theme/blocks/sd-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -158,6 +148,7 @@
&:hover {
background-color: $background-dark;
}

&:focus {
box-shadow: 0 0 0 2px $primary;
}
Expand Down
11 changes: 11 additions & 0 deletions src/defaultV2-theme/blocks/sd-progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
4 changes: 2 additions & 2 deletions src/knockout/components/components-container/components-container.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion src/knockout/components/progress/progress.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
15 changes: 9 additions & 6 deletions src/knockout/components/progress/progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/react/components/components-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Expand Down
2 changes: 1 addition & 1 deletion src/react/reactSurveyProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions src/survey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand Down
1 change: 1 addition & 0 deletions src/vue/components/action-bar/action-bar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/vue/components/container.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<component
:is="component.component"
:survey="survey"
:container="container"
:model="component.data"
></component>
</template>
Expand Down
3 changes: 2 additions & 1 deletion src/vue/progress.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div :class="survey.getProgressCssClasses()">
<div :class="survey.getProgressCssClasses(container)">
<div
:class="survey.css.progressBar"
:style="{ width: progress }"
Expand All @@ -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 + "%";
Expand Down
10 changes: 7 additions & 3 deletions testCafe/survey/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
Loading