From 590f2959fae49557e16886e88bead7f2daaf3c89 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Tue, 9 Jul 2024 10:24:47 +0300 Subject: [PATCH] Issue/4895-Add-an-option-to-expand-and-collapse-panels-on-a-design-surface (#5631) * #4895 Add an option to expand and collapse panels on a design surface Fixes #4895 * #4895 - fixed buttons * #4895 panel and question expand/collapse Fixes #4895 * #4895 - saving expanded collapsed state * #4895 - all platforms and v-test * #4895 - styles, tests * #4895 do not grow collapsed questions in row Fixes #4895 * #4895 fix knockout focus Fixes #4895 * #4895 - add option * Rename the property and add a description draft * fixed unit and knockout v-tests * #4895 - rename property * #4895 - fixed markup * #4895 - fix f-test * #4895 - update screenshots * #4895 - fix f-test * #4895 - fix f-test * #4895 - fixed v-test --------- Co-authored-by: Aleksey Novikov Co-authored-by: RomanTsukanov --- .../src/panel.component.html | 3 + .../src/question.component.html | 3 + .../components/action-container-view-model.ts | 29 ++++- .../src/components/question.scss | 89 ++++++++++++++- .../src/components/question.ts | 7 +- .../src/components/tabs/designer-plugin.ts | 9 ++ .../components/tabs/designer-state-manager.ts | 54 +++++++++ .../survey-creator-core/src/creator-base.ts | 12 ++ .../src/images/collapse-v_16x16.svg | 5 + .../src/images/expand-v_16x16.svg | 10 ++ .../src/images/restore_16x16.svg | 3 + .../survey-creator-core/src/responsivity.scss | 4 +- .../tests/question-adorner.tests.ts | 105 ++++++++++++++++++ .../src/adorners/panel.html | 6 +- .../src/adorners/question.html | 8 +- .../src/adorners/Question.tsx | 2 +- .../src/adorners/QuestionHeader.tsx | 3 + .../survey-creator-vue/src/adorners/Panel.vue | 6 + .../src/adorners/QuestionBase.vue | 6 + testCafe/designer/question-wrapper.ts | 37 ++++++ .../panel-adorner-collapsed-mobile.png | Bin 0 -> 1806 bytes .../panel-adorner-collapsed-unselected.png | Bin 0 -> 1259 bytes .../etalons/panel-adorner-collapsed.png | Bin 0 -> 2023 bytes .../question-adorner-collapsed-mobile.png | Bin 0 -> 2358 bytes .../question-adorner-collapsed-unselected.png | Bin 0 -> 1810 bytes .../etalons/question-adorner-collapsed.png | Bin 0 -> 2587 bytes .../question-content-mobile-actions-hover.png | Bin 9430 -> 9430 bytes .../question-content-mobile-actions.png | Bin 11850 -> 11850 bytes .../tests/designer/surface.ts | 64 +++++++++++ 29 files changed, 454 insertions(+), 11 deletions(-) create mode 100644 packages/survey-creator-core/src/components/tabs/designer-state-manager.ts create mode 100644 packages/survey-creator-core/src/images/collapse-v_16x16.svg create mode 100644 packages/survey-creator-core/src/images/expand-v_16x16.svg create mode 100644 packages/survey-creator-core/src/images/restore_16x16.svg create mode 100644 visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-mobile.png create mode 100644 visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-unselected.png create mode 100644 visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed.png create mode 100644 visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-mobile.png create mode 100644 visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-unselected.png create mode 100644 visualRegressionTests/tests/designer/etalons/question-adorner-collapsed.png diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html index ec6fa10aca..f7db2f1586 100644 --- a/packages/survey-creator-angular/src/panel.component.html +++ b/packages/survey-creator-angular/src/panel.component.html @@ -9,6 +9,9 @@ (pointerdown)="adorner.onPointerDown($event)"> +
+ +
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html index 3b278971d4..608c5dabc9 100644 --- a/packages/survey-creator-angular/src/question.component.html +++ b/packages/survey-creator-angular/src/question.component.html @@ -7,6 +7,9 @@
+
+ +
diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts index 74088d24e2..d651ea66d0 100644 --- a/packages/survey-creator-core/src/components/action-container-view-model.ts +++ b/packages/survey-creator-core/src/components/action-container-view-model.ts @@ -6,10 +6,14 @@ import { SurveyElement, property, actionModeType, - IAction + IAction, + ActionContainer, + ComputedUpdater } from "survey-core"; import { SurveyCreatorModel } from "../creator-base"; import { settings } from "../creator-settings"; +import { DesignerStateManager } from "./tabs/designer-state-manager"; +import { TabDesignerPlugin } from "./tabs/designer-plugin"; export class SurveyElementActionContainer extends AdaptiveActionContainer { private needToShrink(item: Action, shrinkStart: boolean, shrinkEnd: boolean) { @@ -86,7 +90,16 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer { export class SurveyElementAdornerBase extends Base { public actionContainer: SurveyElementActionContainer; + public topActionContainer: ActionContainer; + protected designerStateManager: DesignerStateManager; @property({ defaultValue: true }) allowDragging: boolean; + @property({ + onSet: (val, target: SurveyElementAdornerBase) => { + target.renderedCollapsed = val; + if (target.designerStateManager && target.surveyElement) target.designerStateManager.getElementState(target.surveyElement).collapsed = val; + } + }) collapsed: boolean; + @property() renderedCollapsed: boolean; private allowEditOption: boolean; private selectedPropPageFunc: (sender: Base, options: any) => void; private sidebarFlyoutModeChangedFunc: (sender: Base, options: any) => void; @@ -96,6 +109,8 @@ export class SurveyElementAdornerBase e protected surveyElement: T ) { super(); + this.designerStateManager = (creator.getPlugin("designer") as TabDesignerPlugin)?.designerStateManager; + this.designerStateManager?.initForElement(surveyElement); this.selectedPropPageFunc = (sender: Base, options: any) => { if (options.name === "isSelectedInDesigner") { this.onElementSelectedChanged(options.newValue); @@ -109,6 +124,18 @@ export class SurveyElementAdornerBase e this.actionContainer = new SurveyElementActionContainer(); this.actionContainer.dotsItem.iconSize = 16; this.actionContainer.dotsItem.popupModel.horizontalPosition = "center"; + + this.topActionContainer = new ActionContainer(); + this.topActionContainer.sizeMode = "small"; + this.topActionContainer.setItems([{ + id: "collapse", + iconName: new ComputedUpdater(() => this.collapsed ? "icon-restore_16x16" : "icon-collapse-detail-light_16x16") as any, + iconSize: 16, + action: () => { + this.collapsed = !this.collapsed; + } + }]); + this.collapsed = !!surveyElement && (this.designerStateManager?.getElementState(surveyElement).collapsed); this.setSurveyElement(surveyElement); this.creator.sidebar.onPropertyChanged.add(this.sidebarFlyoutModeChangedFunc); this.setShowAddQuestionButton(true); diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 27f642ad7b..28cbd66ee7 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -85,7 +85,8 @@ svc-question { } } -.svc-question__content>div { +.svc-question__content>div, +.svc-question__placeholders>div { overflow: visible; } @@ -451,21 +452,73 @@ svc-question, // EO reset styles for drag-drop-ghost-survey-element to avoid layout jumping while dragging -.svc-hovered>.svc-question__content>.svc-question__drag-area { +.svc-hovered>.svc-question__content>.svc-question__drag-area>.svc-question__drag-element { visibility: visible; } -.svc-question__content.svc-question__content--selected>.svc-question__drag-area { +.svc-question__content.svc-question__content--selected>.svc-question__drag-area>.svc-question__drag-element { visibility: visible; z-index: 1; } +.svc-question__adorner--collapsed { + .svc-question__content { + &>* { + display: none + } + .svc-question__drag-area { + display: flex, + } + .sd-element { + display: block; + &>*:not(.sd-element__header ) { + display: none + } + .sd-element__header + { + &>*:not(.sd-element__title) { + display: none; + } + .sd-element__title, + .sd-title.sd-element__title.sd-element__title--hidden { + display: block; + } + } + } + } +} + +.svc-question__adorner--collapsed { + .svc-question__content { + flex-grow: 0; + padding-bottom: calcSize(4); + .sd-element__header, + .sd-element--complex > .sd-element__header { + padding-top: 0; + padding-bottom: 0; + } + } +} +.svc-creator--mobile { + .svc-question__top-actions { + padding: 0; + } + .svc-question__adorner--collapsed { + .svc-question__content { + padding-bottom: calcSize(2); + } + .svc-question__content--selected { + padding-bottom: calcSize(3); + } + } +} + + .svc-question__drag-area { position: absolute; cursor: move; top: 0; left: 0; - visibility: hidden; height: calcSize(3.5); width: 100%; display: flex; @@ -477,6 +530,7 @@ svc-question, width: 100%; height: calcSize(4); opacity: 0.5; + visibility: hidden; use { fill: $foreground-light; @@ -863,4 +917,31 @@ svc-question, } } } +} + +.svc-question__top-actions { + padding: calcSize(0.5); + position: absolute; + top: 0; + right: 0; + visibility: hidden; + .sv-action-bar-item { + use { + fill: $foreground-dim-light; + } + margin: 0; + padding: calcSize(0.5); + opacity: 0.5; + height: 24px; + &:hover, &:focus { + opacity: initial; + } + } +} + +.svc-question__adorner--collapse-onhover.svc-hovered, +.svc-question__adorner--collapse-always { + .svc-question__top-actions { + visibility: visible; + } } \ No newline at end of file diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts index 331aeb0c1e..cedf2e0375 100644 --- a/packages/survey-creator-core/src/components/question.ts +++ b/packages/survey-creator-core/src/components/question.ts @@ -45,6 +45,7 @@ export interface QuestionBannerParams { export class QuestionAdornerViewModel extends SurveyElementAdornerBase { @property() isDragged: boolean; @property({ defaultValue: "" }) currentAddQuestionType: string; + placeholderComponent: string; placeholderComponentData: any; @@ -98,7 +99,11 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { } rootCss() { - return this.surveyElement.isQuestion && !(this.surveyElement).startWithNewLine ? " svc-question__adorner--start-with-new-line" : ""; + const isStartWithNewLine = this.surveyElement.isQuestion && !(this.surveyElement).startWithNewLine; + return new CssClassBuilder() + .append("svc-question__adorner--start-with-new-line", isStartWithNewLine) + .append("svc-question__adorner--collapse-" + this.creator.expandCollapseButtonVisibility, true) + .append("svc-question__adorner--collapsed", !!this.renderedCollapsed).toString(); } css() { diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts index fbaba92832..cb4d86e206 100644 --- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts @@ -6,6 +6,7 @@ import { PropertyGridModel } from "../../property-grid"; import { PropertyGridViewModel } from "../../property-grid/property-grid-view-model"; import { SidebarTabModel } from "../side-bar/side-bar-tab-model"; import { TabDesignerViewModel } from "./designer"; +import { DesignerStateManager } from "./designer-state-manager"; export class TabDesignerPlugin implements ICreatorPlugin { public model: TabDesignerViewModel; @@ -16,6 +17,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { private saveSurveyAction: Action; public previewAction: Action; private designerAction: Action; + public designerStateManager: DesignerStateManager; private get isSurveySelected(): boolean { return this.creator.isElementSelected(this.creator.survey); @@ -48,6 +50,13 @@ export class TabDesignerPlugin implements ICreatorPlugin { return result; }); this.toolboxTab = this.creator.sidebar.addTab("toolbox", "svc-toolbox", creator); + this.designerStateManager = new DesignerStateManager(); + this.designerStateManager.initForSurvey(this.creator.survey); + this.creator.onSurveyInstanceCreated.add((s, o) => { + if (o.reason == "designer") { + this.designerStateManager.initForSurvey(o.survey); + } + }); this.creator.onPropertyChanged.add((sender, options) => { if (options.name === "toolboxLocation") { if (this.toolboxTab.visible && options.newVal !== "sidebar") { diff --git a/packages/survey-creator-core/src/components/tabs/designer-state-manager.ts b/packages/survey-creator-core/src/components/tabs/designer-state-manager.ts new file mode 100644 index 0000000000..06f1702070 --- /dev/null +++ b/packages/survey-creator-core/src/components/tabs/designer-state-manager.ts @@ -0,0 +1,54 @@ +import { SurveyElement, SurveyModel } from "survey-core"; +class ElementState { + collapsed: boolean = false; +} + +interface ElementStateMap { + [key: string]: ElementState; +} + +export class DesignerStateManager { + private elementState: ElementStateMap = {}; + private pageState: ElementStateMap = {}; + private getStateMapForElement(element: SurveyElement) { + return (element && element.isPage) ? this.pageState : this.elementState; + } + + private onQuestionAddedHandler = (sender, opts): void => { + this.elementState[opts.question.name] = new ElementState(); + } + private onPageAddedHandler = (sender, opts): void => { + this.pageState[opts.page.name] = new ElementState(); + } + private onPanelAddedHandler = (sender, opts): void => { + this.elementState[opts.panel.name] = new ElementState(); + } + initForSurvey(survey: SurveyModel) { + survey.onQuestionAdded.add(this.onQuestionAddedHandler); + survey.onPageAdded.add(this.onPageAddedHandler); + survey.onPanelAdded.add(this.onPanelAddedHandler); + } + initForElement(element: SurveyElement): void { + if (!element) return; + const stateMap = this.getStateMapForElement(element); + element.registerFunctionOnPropertyValueChanged( + "name", + (newName) => { + delete stateMap[element.name]; + stateMap[newName] = new ElementState(); + }, + "designerStateManager" + ); + } + getElementState(element: SurveyElement): ElementState { + const stateMap = this.getStateMapForElement(element); + const name = element.name; + let state = stateMap[name]; + if (state) return state; + state = new ElementState(); + stateMap[name] = new ElementState(); + return state; + } + constructor() { + } +} diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index 7f868cc6fb..5c43f4370a 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -3624,6 +3624,18 @@ export class SurveyCreatorModel extends Base * @see toolboxLocation */ @property({ defaultValue: "right" }) sidebarLocation: "left" | "right"; + + /* + * Specifies the visibility of the buttons that expand and collapse survey elements on the design surface. + * + * Possible values: + * + * - `"onhover"` (default) - Displays an expand/collapse button when a survey element is hovered over or selected. + * - `"always"` - Displays the expand/collapse buttons permanently. + * - `"never"` - Hides the expand/collapse buttons. + */ + @property({ defaultValue: "never" }) expandCollapseButtonVisibility?: "never" | "onhover" | "always"; + selectFromStringEditor: boolean; @property({ diff --git a/packages/survey-creator-core/src/images/collapse-v_16x16.svg b/packages/survey-creator-core/src/images/collapse-v_16x16.svg new file mode 100644 index 0000000000..bb3278cf62 --- /dev/null +++ b/packages/survey-creator-core/src/images/collapse-v_16x16.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/survey-creator-core/src/images/expand-v_16x16.svg b/packages/survey-creator-core/src/images/expand-v_16x16.svg new file mode 100644 index 0000000000..b8e5b012fd --- /dev/null +++ b/packages/survey-creator-core/src/images/expand-v_16x16.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/survey-creator-core/src/images/restore_16x16.svg b/packages/survey-creator-core/src/images/restore_16x16.svg new file mode 100644 index 0000000000..52736ce616 --- /dev/null +++ b/packages/survey-creator-core/src/images/restore_16x16.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/survey-creator-core/src/responsivity.scss b/packages/survey-creator-core/src/responsivity.scss index f9599a7e0c..84de2e65c5 100644 --- a/packages/survey-creator-core/src/responsivity.scss +++ b/packages/survey-creator-core/src/responsivity.scss @@ -35,7 +35,9 @@ } } } - + .svc-question__drag-area { + height: calcSize(3); + } .svc-question__content--selected { .svc-rating-question-controls { bottom: calcSize(10); diff --git a/packages/survey-creator-core/tests/question-adorner.tests.ts b/packages/survey-creator-core/tests/question-adorner.tests.ts index 739fa12123..04a9116cdb 100644 --- a/packages/survey-creator-core/tests/question-adorner.tests.ts +++ b/packages/survey-creator-core/tests/question-adorner.tests.ts @@ -1,6 +1,8 @@ import { QuestionAdornerViewModel } from "../src/components/question"; import { Action, settings } from "survey-core"; import { CreatorTester } from "./creator-tester"; +import { PageAdorner } from "../src/components/page"; +import { TabDesignerPlugin } from "../src/components/tabs/designer-plugin"; settings.supportCreatorV2 = true; @@ -110,4 +112,107 @@ test("Check question adorners location", (): any => { expect(questionAdorner.actionContainer.getActionById("isrequired").innerItem.location).toBe("end"); expect(questionAdorner.actionContainer.getActionById("delete").innerItem.location).toBe("end"); expect(questionAdorner.actionContainer.getActionById("duplicate").innerItem.location).toBe("end"); +}); + +test("Check question adorners expand-collapse - save state", (): any => { + const creator = new CreatorTester(); + creator.JSON = { + elements: [ + { type: "text", name: "q1" }, + ] + }; + const question = creator.survey.getQuestionByName("q1"); + let questionAdorner = new QuestionAdornerViewModel( + creator, + question, + undefined + ); + + let action = questionAdorner.topActionContainer.getActionById("collapse"); + expect(questionAdorner.collapsed).toBeFalsy(); + expect(action.iconName).toBe("icon-collapse-detail-light_16x16"); + action.action(); + expect(questionAdorner.collapsed).toBeTruthy(); + expect(action.iconName).toBe("icon-restore_16x16"); + + let questionAdorner2 = new QuestionAdornerViewModel( + creator, + question, + undefined + ); + let action2 = questionAdorner2.topActionContainer.getActionById("collapse"); + expect(questionAdorner2.collapsed).toBeTruthy(); + action2.action(); + expect(questionAdorner2.collapsed).toBeFalsy(); + + let questionAdorner3 = new QuestionAdornerViewModel( + creator, + question, + undefined + ); + expect(questionAdorner3.collapsed).toBeFalsy(); +}); + +test("Check question adorners expand-collapse - restore state after add", (): any => { + const creator = new CreatorTester(); + const designerPlugin = ( + creator.getPlugin("designer") + ); + let pageModel = new PageAdorner(creator, designerPlugin.model.newPage); + pageModel.addNewQuestion(pageModel, null); + + let question2 = creator.survey.getQuestionByName("question1"); + let questionAdorner = new QuestionAdornerViewModel( + creator, + question2, + undefined + ); + + let action = questionAdorner.topActionContainer.getActionById("collapse"); + expect(questionAdorner.collapsed).toBeFalsy(); + action.action(); + expect(questionAdorner.collapsed).toBeTruthy(); + + expect(creator.survey.getAllQuestions().length).toBe(1); + question2.delete(); + expect(creator.survey.getAllQuestions().length).toBe(0); + + pageModel = new PageAdorner(creator, designerPlugin.model.newPage); + pageModel.addNewQuestion(pageModel, null); + questionAdorner = new QuestionAdornerViewModel( + creator, + question2, + undefined + ); + expect(questionAdorner.collapsed).toBeFalsy(); + + creator.JSON = { + elements: [ + { type: "text", name: "question1" }, + ] + }; + question2 = creator.survey.getQuestionByName("question1"); + questionAdorner = new QuestionAdornerViewModel( + creator, + question2, + undefined + ); + + action = questionAdorner.topActionContainer.getActionById("collapse"); + expect(questionAdorner.collapsed).toBeFalsy(); + action.action(); + expect(questionAdorner.collapsed).toBeTruthy(); + + expect(creator.survey.getAllQuestions().length).toBe(1); + question2.delete(); + expect(creator.survey.getAllQuestions().length).toBe(0); + + pageModel = new PageAdorner(creator, designerPlugin.model.newPage); + pageModel.addNewQuestion(pageModel, null); + questionAdorner = new QuestionAdornerViewModel( + creator, + question2, + undefined + ); + expect(questionAdorner.collapsed).toBeFalsy(); }); \ No newline at end of file diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html index 7126db043c..0ba773622d 100644 --- a/packages/survey-creator-knockout/src/adorners/panel.html +++ b/packages/survey-creator-knockout/src/adorners/panel.html @@ -3,9 +3,13 @@
-
+
+
+ + +
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html index 9ed0ff047b..1b042e2989 100644 --- a/packages/survey-creator-knockout/src/adorners/question.html +++ b/packages/survey-creator-knockout/src/adorners/question.html @@ -2,12 +2,16 @@ data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
-
+
+
+ + +
- diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx index 71e777bb62..f12703defd 100644 --- a/packages/survey-creator-react/src/adorners/Question.tsx +++ b/packages/survey-creator-react/src/adorners/Question.tsx @@ -59,7 +59,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
allowInteractions && this.model.hover(e.nativeEvent, e.currentTarget)} onMouseOver={e => allowInteractions && this.model.hover(e.nativeEvent, e.currentTarget)} > diff --git a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx index 2769577fae..1f24a61065 100644 --- a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx +++ b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx @@ -27,6 +27,9 @@ export class QuestionWrapperHeader extends React.Component +
+ +
); } diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue index a817e3ce9a..a6d9c94c16 100644 --- a/packages/survey-creator-vue/src/adorners/Panel.vue +++ b/packages/survey-creator-vue/src/adorners/Panel.vue @@ -29,6 +29,12 @@ :iconName="'icon-drag-area-indicator_24x16'" :size="24" > +
+ +
diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue index f463fefd91..09f7fb4033 100644 --- a/packages/survey-creator-vue/src/adorners/QuestionBase.vue +++ b/packages/survey-creator-vue/src/adorners/QuestionBase.vue @@ -31,6 +31,12 @@ size: 24, }" > +
+ +
{ .pressKey("tab") .pressKey("tab") .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok(); +}); + +test("Question adorner - collapse button in differen modes", async (t) => { + await t.resizeWindow(1920, 1080); + const json = { + elements: [ + { + type: "text", + name: "question1" + } + ] + }; + await setJSON(json); + await t.hover(getToolboxItemByText("Single-Line Input")); + const qContent = Selector(".svc-question__content"); + const qCollapseButton = Selector(".svc-question__content #collapse"); + await t.hover(qContent, { offsetX: 10, offsetY: 10 }); + await t.expect(Selector(".svc-question__adorner").hasClass("svc-hovered")).ok(); + await t.expect(qCollapseButton.visible).notOk(); + await t.click(qContent, { offsetX: 10, offsetY: 10 }); + await t.expect(qContent.hasClass("svc-question__content--selected")).ok(); + await t.expect(qCollapseButton.visible).notOk(); + + await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "onhover"; })(); + json.elements[0].name = "question2"; + await setJSON(json); + await t.hover(getToolboxItemByText("Single-Line Input")); + await t.expect(qCollapseButton.visible).notOk(); + await t.hover(qContent, { offsetX: 10, offsetY: 10 }); + await t.expect(qCollapseButton.visible).ok(); + + await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "always"; })(); + json.elements[0].name = "question3"; + await t.hover(getToolboxItemByText("Single-Line Input")); + await setJSON(json); + await t.expect(qCollapseButton.visible).ok(); + await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "never"; })(); }); \ No newline at end of file diff --git a/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-mobile.png b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..fff402354060e5d0bc6a7d40fccd15fea262b946 GIT binary patch literal 1806 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 literal 0 HcmV?d00001 diff --git a/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-unselected.png b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-unselected.png new file mode 100644 index 0000000000000000000000000000000000000000..397e420278c3de2ebcef4cd7cfb5e998509b297a GIT binary patch literal 1810 zcmb_ddoai~D(W*nUnY|Y#;EEoN`<*+(0{_e_VsxIaCm)QB#ZAQIRKQaiLR8*zFT|{J^3fkYIo100csDyG^Il#U?;7T517@%Tu)hLM;Zk z>|+1Vsmf;~Mw~HF8?N5IaXO(`(x?rCAwzxfc!N^G;Cokp6XYMX()dg3iq5HatCx=> zlK>e-k~Os9SAkFn=KsyE50ySysy`Da>LTUgtiKV;!&cf)OV(S>{GG7tvLE0h@V5e1++q8&b`hdZ1?AwhRecyU)%H&PIg>$HV-dc>O53% zlad-YMdMY!SnABEC%cHr@ihTl&|@1!cN)5X#ll;0HMF}e@Y3~yFCiA!>e>>kPIlPh zq9PJ7n77HGa*B59=Q7GifziI8W?~5ClXAC)`pNUtaPQ0-<@+NSb}W96tOF=QFA^2` zh=_JhtNlt$u4?QFy1ohF`c(f`+7V4C5Q#j0jT(0&NS?XtO7bHrk!;kN3- z=f>+@YYy(F?6CU?bVT9ZefG`1)5Q8!nbF^&IuqQ}ffdXj$|=@)MVC^T!(>*9=J~=K?P9Q2h8vwe zG`F#4xpR8QC1ljsT$%lc?Xvh6^>Wun42wQ^^qU&JSnlkyg^T!l>OcP#-9@cW8z7&v z;`z->^i)bMa?;@|548kNitw@nJ@A1l^?)nh%0r@`b;}Zd*D>3@H;$R=CAxv=y3yk! z5glc=S|d8{aF# z$m1Bs6$f+<)wny#!$b_)T5K9UKBB0BTdJkKNdBlLq~H* z;Gb49WX3@URbD)NhP_C_KPuS@z-Gob$OaBTzcTD&vcO(B>RahWP{*OsWRxxhqAH_p zEuc_Ybw9q&XBc*%W~M&M*IdLuEt_WU)LN6*HM|PRCMTdVP`vs8A7umHdJ4JXXDb!<)4ZDwc*hc~(!ewSXA z^4C*J7IW6|M%ApO!Y=gJr7QNC%x=#2K<(DNgVuQoCE2SR<)o%AknCqMN*b}xe?D5> zI`nS%Tv-ZlbU)KJcXVtVUa*)XozYaE@b|Z&YptvwgSDS04Y&7BgVmZ3(a;^wlc|+c zxM1iKr+&2K7{<>TOR!`u)J8Vx4Sw3Qu-tlv9o4jGXjDEz&2;gbE~3+OmbOWMUW2iX zIALLLdva=R?mO-}+2DU0Xi-1eCNita2k0R0|6{QdsnlTC+&eouZp&t7`~frP0y6>q zG2`&A(f@`2hDPe83Fbu%H;P=7^tAR!Kn0*mX`Q_;*NTdY^0={G9peqIpRgeeB-WvT PAqOJ(5%I0Ki?{v_q@qw0 literal 0 HcmV?d00001 diff --git a/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed.png b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed.png new file mode 100644 index 0000000000000000000000000000000000000000..01f70343000cdffc129a9f9e038498c5f661236f GIT binary patch literal 2587 zcmcguXH-+!77kr$Dgq)x07*cKbeu;CB1IAi(gZPpNCzQ;ln^>N2+{(Cp#&)^L1bvs zL5fIkp;zfG6sd#sHkUW^W8QjYt@q=-ANTBY&)H|Mz0ddUZ=EpR2O3QDob(_NhzS8# z(+7blU4Xgq1zKSAaBJ@c3?)MC-a{zqzq z!6T_I>RGT1d-(H2ep-~-x^6nsxW_MhhF3uRx;e@mU#Ic|x(hwTbKH{sah?CZ_ zvLfv0=vZwJ47vIFMTUQ@e*4BbW`jmY zrKn6(v0}c&j#$mi5#2l^p~McS)&*Chz7RwRM+p)7pqa^{$9hHmN<>72lW@GInw}b~ zx~P~~QT9V&U{#N`u%hBMq{)y45uUAf^J@l# zKuFWWo3Yb+04C9RI3$Mng_Z)i;D1-porP_$dI@4#S%R-p^q*JeF0U=0YMb*{b06<7 zR#3Cc>A5j!5;_z!Mks4GdI)?A5g(ECT}rp8y2UeXOMr zQiS5i~k{9ljb?kETPH(u?qim?_pqL3q2rp*)n&F7EiP%(jVI{KEUAEfFuiW zAXtW%fILRZXx>8BL*~Js2_(&U%Hn7;u2$(-KdlJYNepQvV`9tO7wm$zQ z4naBhXrYX1I=#BZv!d$F88&k03Hx5Q#o2qHga zTbnHTZBR{$yZ5y2y}u!ijEsJ9S}&Ur=%gjM=Evhw{e>_%I>#E)RR|Jw->?q$NVTg_ zs!T_|h)kW}cTcPAnm=WHldvej0ZyB)FNL<2^&CA3%AhindFAVTz;faYezzP~uyi}x zb+*AFe>^t^9T2@2olY!}n@{@`!nx~u*e7(jVz;D$htxd7JH@rHesQT;-{3eN6PG*L z@Wf)SY+L!cN1O7GdA*K9N9m@Kr)O-Q1&Zp33*&l+VJey1kc?}4y2UaL`;w%!x#FraUW6B2?)Y1c!@=&+qr( z9XRxIE$Sc*M&0l_f^_z_4Io(FNwt@CaG1zRq{m>fgGF|H#F-@0q!qR{3f*N&wL2x> z;?4tF;mT%_NwOX7NPjPq|B_5OW)o@jT)&!9=4 zHeqE))sWD^Eu_&SW7~2axCR6!^ejk^%KHuZ-ZJsPHCML zvUf!@y1ora+w(y^zWqR2((mU`8~bODK^==iT)FRhdM_-<351K3fQCl~;N5gBNvq(Q zx>_i6&6LI?_5^lvg?D!BDS-l&D6V(Q6x!c^&!-GGxFCW=Qmn15wz=qh$c}=U+8$$r zR+SZU@AUN#Yr;%|(TtJ15+0k>ettIe+(2_!&5qmH%QY+ezyNL1;cvtE%v1TwOfPhl@W{8_O+_!PQSl!eZ`VB*yU)+4oif)LFM7L%DkXJ= zXo`KquXwqPJ?XGItZhrO>k@dLtLKxCICqVi_2WnVa5u7IT*Kn^0uWP`!-hO5tL4ak zo{qF3iTSm4rk8<{n_#o&W97cH1t;VecRq2l!D3%t6-?kAQ`sntmXq&MH#o=L0Fj%= zj|;b2T?N0}?(`7Yvje2p+wh;29P(liH9eF^2~<{)d@k$%N{9bT+5UgH`})wGC)-%= zd7WDeaCu`+mA)_Y4SN!8c zqTl3+e9{SSPoh!_wfTgpj`} lhw+`9yj4tK^Gp7lA|f9DtRo|yK4M`20#8>zmvv4FO#u6zTY3Nh delta 229 zcmccSdChY}Am3zeDXz(){71}XT-GJty?b}dwrxV;5fL74Zfu2kxk}fSnopR%nHVb1G&-4d3KI{?ql1CwSLv+&J;otE^uts;Y)nUow7~n3)B|#`?}*vP8wLU(R>_ zv14wlRz|j5)<1*>4>5tBkqL@7q+ywPo6X9jOFCB{L%^?cUH)B+&Pexl+@AL`7p`Q x(D2BSBLy30%#Z*I3GBQ$Sy0@5v$w!&S&=nIe-z4cy!T}Q0#8>zmvv4FO#pnlVTS+! delta 249 zcmX>Vb1G&-4c}yKajtrqjyngWq@`D`Ter+VC`f3rd;c>3cyMB(@|Sddc$CZyW}iK_ z^hS=E-qEzpib@FrI~!Hi)!l`qq`WFBEKZ(0IcM^mIX)Q~8V?^nR8dzi_A4qfTDWjw zOM5#|yyryksm2q$I%;ZdGiFHWi3tlk`}pvPcXxIws;RL}l%6}eobSTqPzlY+4a#hr dy#-#&if9S_D12I3vy1@ { }); }); +test("Question adorner - collapsed", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1920, 1080); + const json = { + elements: [ + { + type: "text", + name: "question1" + }, + { + type: "panel", + name: "panel1" + } + ] + }; + await ClientFunction(() => { + window["creator"].expandCollapseButtonVisibility = "onhover"; + })(); + await setJSON(json); + const qContent = Selector(".svc-question__content"); + const qCollapseButton = Selector(".svc-question__content #collapse"); + await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 }); + await t.click(qCollapseButton.filterVisible()); + await takeElementScreenshot("question-adorner-collapsed.png", qContent.nth(0), t, comparer); + await t.click(qContent.nth(1), { offsetX: 10, offsetY: 10 }); + await t.click(qCollapseButton.filterVisible()); + await takeElementScreenshot("panel-adorner-collapsed.png", qContent.nth(1), t, comparer); + }); +}); + +test("Question adorner - collapsed mobile", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(500, 1080); + const json = { + elements: [ + { + type: "text", + name: "question1" + }, + { + type: "panel", + name: "panel1" + } + ] + }; + await ClientFunction(() => { + window["creator"].expandCollapseButtonVisibility = "onhover"; + })(); + await setJSON(json); + const qContent = Selector(".svc-question__content"); + const qCollapseButton = Selector(".svc-question__content #collapse"); + await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 }); + await t.click(qCollapseButton.filterVisible()); + await takeElementScreenshot("question-adorner-collapsed-mobile.png", qContent.nth(0), t, comparer); + await t.click(qContent.nth(1), { offsetX: 10, offsetY: 10 }); + await t.click(qCollapseButton.filterVisible()); + await takeElementScreenshot("panel-adorner-collapsed-mobile.png", qContent.nth(1), t, comparer); + + await t.click(Selector(".svc-creator"), { offsetX: 1, offsetY: 1 }); + await takeElementScreenshot("question-adorner-collapsed-unselected.png", qContent.nth(0), t, comparer); + await takeElementScreenshot("panel-adorner-collapsed-unselected.png", qContent.nth(1), t, comparer); + }); +}); + test("Question types with subtypes", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1000, 700);