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 0000000000..fff4023540 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-mobile.png differ diff --git a/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-unselected.png b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-unselected.png new file mode 100644 index 0000000000..8c3ad2afdf Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed-unselected.png differ diff --git a/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed.png b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed.png new file mode 100644 index 0000000000..a4e84366e7 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed.png differ diff --git a/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-mobile.png b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-mobile.png new file mode 100644 index 0000000000..e5000cfdf3 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-mobile.png differ 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 0000000000..397e420278 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed-unselected.png differ 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 0000000000..01f7034300 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed.png differ diff --git a/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions-hover.png b/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions-hover.png index e193c35016..73f3fb8ab9 100644 Binary files a/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions-hover.png and b/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions-hover.png differ diff --git a/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions.png b/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions.png index 74037beae2..e70353664a 100644 Binary files a/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions.png and b/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions.png differ diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts index 574fabd2a3..45c250d5e8 100644 --- a/visualRegressionTests/tests/designer/surface.ts +++ b/visualRegressionTests/tests/designer/surface.ts @@ -2108,6 +2108,70 @@ test("Check adorner actions responsivity after convert", async (t) => { }); }); +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);