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.

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#4371 - Theme builder/Preview : strange resulting page #4626

Merged
merged 6 commits into from
Sep 21, 2023
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ng-template #template>
<div role="button" class="svc-preview__test-again svc-btn" (click)="model.action()" [key2click]>
<div role="button" class="svc-preview__test-again svc-btn" (click)="action.action()" [key2click]>
<span class="svc-text svc-text--normal svc-text--bold">
{{model.title}}
{{action.title}}
</span>
</div>
</ng-template>
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import { Component, Input } from "@angular/core";
import { BaseAngular } from "survey-angular-ui";
import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
import { Action } from "survey-core";
import { TestSurveyTabViewModel } from "survey-creator-core";

@Component({
selector: "survey-test-again",
templateUrl: "./test-again.component.html",
styles: [":host { display: none; }"]
})
export class TestAgainActionComponent extends BaseAngular<Action> {
@Input() model!: Action;
@Input() model!: { testAgainAction: Action };
protected getModel(): Action {
return this.model;
return this.model.testAgainAction;
}
}
get action() {
return this.getModel();
}
}
AngularComponentFactory.Instance.registerComponent("svc-complete-page", TestAgainActionComponent);
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@
<div class="svc-plugin-tab__content">
<survey-simulator [model]="model.simulator"></survey-simulator>
<ng-container *ngIf="!model.isRunning">
<survey-test-again [model]="model.testAgainAction"></survey-test-again>
<survey-results [survey]="model.survey"></survey-results>
</ng-container>
</div>
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@
<div class="svc-plugin-tab__content">
<survey-simulator [model]="model.simulator"></survey-simulator>
<ng-container *ngIf="!model.isRunning">
<survey-test-again [model]="model.testAgainAction"></survey-test-again>
<survey-results [survey]="model.survey"></survey-results>
</ng-container>
</div>
19 changes: 12 additions & 7 deletions packages/survey-creator-core/src/components/results.scss
Original file line number Diff line number Diff line change
@@ -2,12 +2,9 @@

.svd-test-results {
font-family: $font-family;
width: 80%;
margin: auto;
margin-bottom: calcSize(5);
background-color: $background;
box-shadow: $shadow-small;
border-radius: 4px;
box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));

.svd-test-results__header {
display: flex;
@@ -17,10 +14,12 @@
font-size: calcSize(2);
color: $foreground-light;
border-bottom: 2px solid $border-light;
background-color: $background;

.svd-test-results__header-text {
margin: 0;
}

.svd-test-results__header-types {
display: flex;
gap: calcSize(1);
@@ -34,12 +33,17 @@
overflow: auto;
user-select: text;
white-space: pre-wrap;
background-color: $background;
}

.svd-test-results__table {
background-color: $background;
width: 100%;
box-shadow: $shadow-small;

table {
width: 100%;
border-collapse: collapse;
border-collapse: collapse;

.svd-test-results__marker {
position: absolute;
@@ -55,7 +59,7 @@

&.svd-test-results__marker--expanded .sv-svg-icon {
transform-origin: center;
transform: rotate(90deg) ;
transform: rotate(90deg);
}
}

@@ -84,6 +88,7 @@
width: 50%;
font-weight: 600;
}

&:nth-child(2) {
width: 50%;
padding-right: calcSize(3);
2 changes: 2 additions & 0 deletions packages/survey-creator-core/src/components/simulator.scss
Original file line number Diff line number Diff line change
@@ -141,6 +141,8 @@
justify-content: center;
width: 100%;
height: 100%;
// border-bottom: 1px solid $border-inside;
box-shadow: inset 0px -1px 0px 0px $border-inside;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
2 changes: 1 addition & 1 deletion packages/survey-creator-core/src/components/tabs/test.scss
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ svc-tab-test {
width: calcSize(33);
margin-left: auto;
margin-right: auto;
margin-bottom: 72px;
margin-bottom: calcSize(12);
margin-top: 8px;
}
}
8 changes: 7 additions & 1 deletion packages/survey-creator-core/src/components/tabs/test.ts
Original file line number Diff line number Diff line change
@@ -84,6 +84,12 @@ export class TestSurveyTabViewModel extends Base {
newSurvey.setCss(theme, false);
}
newSurvey.fitToContainer = true;
newSurvey.addLayoutElement({
id: "complete-customization",
container: "completePage" as any,
component: "svc-complete-page",
data: this
});
this.simulator.survey = newSurvey;
if (this.onSurveyCreatedCallback) this.onSurveyCreatedCallback(this.survey);
this.survey.onComplete.add((sender: SurveyModel) => {
@@ -266,7 +272,7 @@ export class TestSurveyTabViewModel extends Base {
}
private getPageItemByPage(page: PageModel): IAction {
const model = this.selectPageAction.popupModel.contentComponentData.model;
if(!model || !Array.isArray(model.actions)) return undefined;
if (!model || !Array.isArray(model.actions)) return undefined;
const items: IAction[] = model.actions;
for (let i = 0; i < items.length; i++) {
if (items[i].data === page) return items[i];
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ svc-tab-test {
width: calcSize(33);
margin-left: auto;
margin-right: auto;
margin-bottom: 72px;
margin-bottom: calcSize(12);
margin-top: 8px;
}
}
Original file line number Diff line number Diff line change
@@ -203,6 +203,12 @@ export class ThemeBuilder extends Base {
const newSurvey = this.surveyProvider.createSurvey(json || {}, "theme", this);
newSurvey.setCss(theme, false);
newSurvey.fitToContainer = true;
newSurvey.addLayoutElement({
id: "complete-customization",
container: "completePage" as any,
component: "svc-complete-page",
data: this
});
this.simulator.survey = newSurvey;
this.updateSimulatorTheme();
if (this.onSurveyCreatedCallback) this.onSurveyCreatedCallback(this.survey);
1 change: 1 addition & 0 deletions packages/survey-creator-knockout/src/entries/index.ts
Original file line number Diff line number Diff line change
@@ -50,6 +50,7 @@ export * from "../simulator";
export * from "../svg-bundle";
export * from "../survey-renderers/dropdown";
export * from "../tabs/test";
export * from "../tabs/test-complete";
export * from "../tabs/theme";
export * from "../tabbed-menu/tabbed-menu";
export * from "../tabbed-menu/tabbed-menu-item";
5 changes: 5 additions & 0 deletions packages/survey-creator-knockout/src/tabs/test-complete.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div role="button" class="svc-preview__test-again svc-btn"
data-bind="click: testAgainAction.action, key2click, clickBubble: false">
<span class="svc-text svc-text--normal svc-text--bold" data-bind="text: testAgainAction.title">
</span>
</div>
19 changes: 19 additions & 0 deletions packages/survey-creator-knockout/src/tabs/test-complete.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import * as ko from "knockout";
import { ImplementorBase } from "survey-knockout-ui";
import { TestSurveyTabViewModel } from "survey-creator-core";

const template = require("./test-complete.html");
// import template from "./test-complete.html";

ko.components.register("svc-complete-page", {
viewModel: {
createViewModel: (params: any, componentInfo: any) => {
const model: TestSurveyTabViewModel = params.model;
new ImplementorBase(model.testAgainAction);
return {
testAgainAction: model.testAgainAction
};
},
},
template: template
});
5 changes: 0 additions & 5 deletions packages/survey-creator-knockout/src/tabs/test.html
Original file line number Diff line number Diff line change
@@ -3,11 +3,6 @@
<div class="svc-plugin-tab__content">
<survey-simulator params="model: simulator"></survey-simulator>
<!-- ko ifnot: isRunning -->
<div role="button" class="svc-preview__test-again svc-btn"
data-bind="click: testAgainAction.action, key2click, clickBubble: false">
<span class="svc-text svc-text--normal svc-text--bold" data-bind="text: testAgainAction.title">
</span>
</div>
<survey-results params="survey: survey"></survey-results>
<!-- /ko -->
</div>
1 change: 0 additions & 1 deletion packages/survey-creator-knockout/src/tabs/test.ts
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@ ko.components.register("svc-tab-test", {
createViewModel: (params: any, componentInfo: any) => {
const plugin: TabTestPlugin = params.data;
new ImplementorBase(plugin.model.simulator);
new ImplementorBase(plugin.model.testAgainAction);
new ImplementorBase(plugin.model);
return plugin.model;
},
5 changes: 0 additions & 5 deletions packages/survey-creator-knockout/src/tabs/theme.html
Original file line number Diff line number Diff line change
@@ -3,11 +3,6 @@
<div class="svc-plugin-tab__content">
<survey-simulator params="model: simulator"></survey-simulator>
<!-- ko ifnot: isRunning -->
<div role="button" class="svc-preview__test-again svc-btn"
data-bind="click: testAgainAction.action, key2click, clickBubble: false">
<span class="svc-text svc-text--normal svc-text--bold" data-bind="text: testAgainAction.title">
</span>
</div>
<survey-results params="survey: survey"></survey-results>
<!-- /ko -->
</div>
5 changes: 2 additions & 3 deletions packages/survey-creator-react/src/tabs/Preview.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ import { SurveyResults } from "../Results";

export class TabPreviewTestSurveyAgainComponent extends SurveyElementBase<any, any> {
private get model(): Action {
return this.props.button;
return this.props.model.testAgainAction;
}
protected getStateElement(): Base {
return this.model;
@@ -35,7 +35,7 @@ export class TabPreviewTestSurveyAgainComponent extends SurveyElementBase<any, a
</div>);
}
}
ReactElementFactory.Instance.registerElement("svc-tab-preview-test-again", (props) => {
ReactElementFactory.Instance.registerElement("svc-complete-page", (props) => {
return React.createElement(TabPreviewTestSurveyAgainComponent, props);
});

@@ -56,7 +56,6 @@ export class TabPreviewSurveyComponent extends SurveyElementBase<any, any> {
<div className={tabContentClassName}>
<div className="svc-plugin-tab__content">
<SurveySimulator model={this.model.simulator}></SurveySimulator>
{!this.model.isRunning ? <TabPreviewTestSurveyAgainComponent button={this.model.testAgainAction} /> : null}
{!this.model.isRunning ? <SurveyResults survey={this.model.simulator.survey} /> : null}
</div>
{this.getBottomToolbar()}
1 change: 0 additions & 1 deletion packages/survey-creator-react/src/tabs/Theme.tsx
Original file line number Diff line number Diff line change
@@ -25,7 +25,6 @@ export class TabThemeSurveyComponent extends SurveyElementBase<any, any> {
<div className={tabContentClassName}>
<div className="svc-plugin-tab__content">
<SurveySimulator model={this.model.simulator}></SurveySimulator>
{!this.model.isRunning ? <TabPreviewTestSurveyAgainComponent button={this.model.testAgainAction} /> : null}
{!this.model.isRunning ? <SurveyResults survey={this.model.simulator.survey} /> : null}
</div>
{this.getBottomToolbar()}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.