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

Fixed https://github.com/surveyjs/service/issues/1637 - Background image reveals some empty spaces #7405

Merged
merged 16 commits into from
Nov 29, 2023
Merged

Fixed https://github.com/surveyjs/service/issues/1637 - Background image reveals some empty spaces #7405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
edb2608
Fixed https://github.com/surveyjs/service/issues/1637 - Background im…
Nov 22, 2023
a8dd03d
Merge branch 'master' into bug/S1637-extra-space-above-toc
Nov 23, 2023
d3e456c
Work for https://github.com/surveyjs/service/issues/1637 - background…
Nov 23, 2023
e367707
Work for https://github.com/surveyjs/service/issues/1637 - fixed mark…
Nov 23, 2023
b60f541
Merge branch 'master' into bug/S1637-extra-space-above-toc
Nov 24, 2023
09b01e5
Work for https://github.com/surveyjs/service/issues/1637 - Background…
Nov 24, 2023
21e23da
Work for https://github.com/surveyjs/service/issues/1637 - Background…
Nov 24, 2023
98675d2
Work for https://github.com/surveyjs/service/issues/1637 - Background…
Nov 24, 2023
d0f1e76
Work for https://github.com/surveyjs/service/issues/1637 - Background…
Nov 24, 2023
cc0f0da
Updated etalon for vr-test
Nov 24, 2023
9377638
Fixed vr-test
Nov 24, 2023
52949aa
Fixed f-test for vue3
Nov 24, 2023
175bb1d
Merge branch 'master' into bug/S1637-extra-space-above-toc
Nov 27, 2023
b334ab8
Work for https://github.com/surveyjs/service/issues/1637 - Background…
Nov 27, 2023
6c4a4c9
Work for https://github.com/surveyjs/service/issues/1637 - Background…
Nov 27, 2023
1032cb3
Updated screenshot
Nov 27, 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
25 changes: 14 additions & 11 deletions packages/survey-angular-ui/src/survey-content.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
49 changes: 26 additions & 23 deletions packages/survey-vue3-ui/src/Survey.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Expand Down
2 changes: 1 addition & 1 deletion src/base-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion src/defaultCss/cssmodern.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: "",
Expand Down
2 changes: 1 addition & 1 deletion src/defaultCss/cssstandard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: "",
Expand Down
2 changes: 1 addition & 1 deletion src/defaultCss/defaultV2Css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions src/defaultV2-theme/blocks/sd-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
25 changes: 14 additions & 11 deletions src/knockout/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 11 additions & 8 deletions src/react/reactSurvey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/survey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7325,7 +7325,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);
}
Expand Down
21 changes: 12 additions & 9 deletions src/vue/survey.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 4 additions & 5 deletions testCafe/survey/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
28 changes: 15 additions & 13 deletions tests/markup/snapshots/survey-navigation.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 14 additions & 9 deletions tests/surveytests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16939,10 +16939,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");
Expand All @@ -16961,10 +16962,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"
Expand All @@ -16975,7 +16977,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");
Expand All @@ -16989,10 +16992,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"
Expand Down Expand Up @@ -17197,11 +17201,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",
Expand Down
Binary file modified visualRegressionTests/tests/defaultV2/etalons/survey-completed-before.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visualRegressionTests/tests/defaultV2/etalons/survey-custom-navigation.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-and-toc.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ressionTests/tests/defaultV2/etalons/survey-without-tilte-and-with-progress.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 14 additions & 2 deletions visualRegressionTests/tests/defaultV2/survey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,18 @@ frameworks.forEach(framework => {
await takeElementScreenshot("survey-custom-navigation.png", Selector(".sd-container-modern"), t, comparer);
});
});
test("Check survey with progress top and TOC", async (t) => {
await wrapVisualTest(t, async (t, comparer) => {
await t.resizeWindow(1920, 1080);
await initSurvey(framework, json);
await ClientFunction(() => {
(<any>window).survey.showTOC = true;
(<any>window).survey.progressBarType = "pages";
(<any>window).survey.currentPageNo = 1;
})();
await takeElementScreenshot("survey-progress-bar-top-and-toc.png", Selector(".sd-container-modern"), t, comparer); // title + progress
});
});

const testedPages = [{
name: "page1",
Expand Down Expand Up @@ -934,8 +946,8 @@ frameworks.forEach(framework => {
await t.resizeWindow(1600, 900);
const json = {
"cookieName": "survey-id",
"completedHtml": "<h3>Completed</h3><button>OK</button>",
"completedBeforeHtml": "<h3>Already completed</h3><button>OK</button>",
"completedHtml": "<h3>Completed</h3><button style='display: inline-block;'>OK</button>",
"completedBeforeHtml": "<h3>Already completed</h3><button style='display: inline-block;'>OK</button>",
pages: [
{
"elements": [
Expand Down