From 45caa3e4631f4e75b37caaa9a4d8fb1a0feabe41 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Thu, 1 Aug 2024 12:41:06 +0300 Subject: [PATCH] #5610 - Add an option to expand and collapse pages on a design surface (#5659) * #5610 Add an option to expand and collapse pages on a design surface Fixes #5610 * #5610 - add option * #5610 - support doubleclick * #5610 add screenshots * #5610 - fix unit-tests * #5610 fixed react event bubbling Fixes #5610 * #5610 - do not expand on doubleclick when setting is "never" * #5610 - key for pages in vue * #5610 - move page collapse button to toolbar * #5610 broken double click Fixes #5610 * #5610 fixed page styles Fixes #5610 * #5610 - fix border radius for dashed page * #5610 - updated screenshots * #5610 - keep inner border for mobile pages * #5610 - update screenshots and mask * #5610 - update screenshots * #5610 - fixed tests * #5610 refresh screenshots Fixes #5610 * #5610 - fix expand-collapse icon color --- .../src/page.component.html | 2 +- .../src/panel.component.html | 1 + .../src/question.component.html | 1 + .../components/action-container-view-model.ts | 19 ++- .../src/components/page.scss | 112 ++++++++++++++- .../src/components/page.ts | 10 +- .../src/components/question.scss | 90 ++++++------ .../src/components/question.ts | 14 +- .../src/creator-options.ts | 2 + .../tests/page-adorner.tests.ts | 8 +- .../src/adorners/panel.html | 2 +- .../src/adorners/question.html | 2 +- .../survey-creator-knockout/src/page.html | 2 +- packages/survey-creator-knockout/src/page.ts | 2 +- .../src/adorners/Page.tsx | 1 + .../src/adorners/Question.tsx | 1 + .../example/src/components/Example.vue | 2 +- .../survey-creator-vue/src/adorners/Panel.vue | 1 + .../src/adorners/QuestionBase.vue | 1 + .../src/tabs/designer/Page.vue | 19 +-- testCafe/designer/question-wrapper.ts | 130 ++++++++++++++++++ .../etalons/actions-on-converted-question.png | Bin 15433 -> 15127 bytes .../actions-on-converted-question_mask.png | Bin 1806 -> 0 bytes .../convert-to-popup-panel-not-empty.png | Bin 25180 -> 25866 bytes .../etalons/convert-to-popup-panel.png | Bin 29893 -> 31237 bytes .../designer/etalons/convert-to-popup.png | Bin 27181 -> 27168 bytes .../etalons/convert-to-popup_mask.png | Bin 1772 -> 0 bytes .../design-surface-navigated-to-3rd.png | Bin 73725 -> 80181 bytes .../designer/etalons/drag-drop-scroll.png | Bin 11584 -> 11455 bytes .../drag-drop-survey-element-empty-page.png | Bin 19385 -> 19632 bytes .../drag-drop-survey-element-ghost-page-4.png | Bin 11820 -> 11733 bytes .../drag-drop-survey-element-ghost.png | Bin 11783 -> 11682 bytes .../etalons/drag-drop-to-multiline-end.png | Bin 10434 -> 10467 bytes .../drag-drop-to-multiline-from-toolbox.png | Bin 34924 -> 35108 bytes .../drag-drop-to-multiline-middle-1.png | Bin 10435 -> 10468 bytes .../drag-drop-to-multiline-middle-2.png | Bin 10435 -> 10468 bytes .../etalons/drag-drop-to-multiline-start.png | Bin 10435 -> 10468 bytes ...e-picker-responsive-dragging-file_mask.png | Bin 2198 -> 2357 bytes .../image-picker-responsive-hover_mask.png | Bin 2210 -> 2376 bytes .../etalons/imagepicker-loading_mask.png | Bin 0 -> 2331 bytes .../etalons/page-adorner-collapsed.png | Bin 0 -> 4347 bytes .../etalons/page-adorner-expanded.png | Bin 0 -> 18289 bytes .../designer/etalons/page-content-click.png | Bin 28370 -> 28523 bytes .../designer/etalons/page-content-hover.png | Bin 26367 -> 28395 bytes .../tests/designer/etalons/page-content.png | Bin 25865 -> 25876 bytes .../page-navigator-by-page-not-overlaped.png | Bin 72196 -> 72226 bytes .../etalons/page-navigator-not-overlaped.png | Bin 72081 -> 72152 bytes .../page-navigator-select-long-page_mask.png | Bin 6244 -> 6654 bytes .../page-navigator-select-short-page_mask.png | Bin 6454 -> 6653 bytes .../page-navigator-with-popup_mask.png | Bin 3633 -> 3640 bytes .../page-placeholder-without-elements.png | Bin 21178 -> 21208 bytes .../designer/etalons/page-title-click.png | Bin 29494 -> 29661 bytes .../designer/etalons/pg-overlay-popup.png | Bin 57789 -> 58021 bytes .../etalons/question-5-selected-in-view.png | Bin 84699 -> 88498 bytes .../designer/etalons/question-add-hover.png | Bin 10079 -> 10103 bytes .../etalons/question-adorner-width.png | Bin 64287 -> 64542 bytes .../etalons/question-checkboxes-scroll.png | Bin 26023 -> 26054 bytes .../etalons/question-content-click.png | Bin 14455 -> 14478 bytes .../etalons/question-content-hover.png | Bin 14449 -> 14471 bytes .../designer/etalons/question-content.png | Bin 10112 -> 10136 bytes .../etalons/question-panel-content-hover.png | Bin 28767 -> 28782 bytes .../question-tiny-dots-popup-required.png | Bin 14954 -> 14984 bytes .../etalons/question-tiny-dots-popup.png | Bin 14687 -> 14713 bytes .../etalons/scrollbar-creator-content.png | Bin 56476 -> 60536 bytes .../designer/etalons/select-type-popup.png | Bin 32609 -> 32652 bytes .../etalons/toolbox-left-adaptive-compact.png | Bin 79343 -> 78433 bytes .../toolbox-left-compact-hover-item.png | Bin 81584 -> 80640 bytes .../designer/etalons/toolbox-left-popup.png | Bin 104638 -> 103989 bytes .../toolbox-right-adaptive-compact.png | Bin 43468 -> 43521 bytes .../toolbox-right-compact-hover-item.png | Bin 47374 -> 47397 bytes .../designer/etalons/toolbox-right-popup.png | Bin 69946 -> 69949 bytes .../toolbox-right-rtl-adaptive-compact.png | Bin 43622 -> 43647 bytes .../toolbox-right-rtl-compact-hover-item.png | Bin 47539 -> 47538 bytes .../etalons/toolbox-right-rtl-popup.png | Bin 70025 -> 69990 bytes ...ox-right-rtl-scroll-compact-hover-item.png | Bin 48724 -> 48838 bytes .../toolbox-right-rtl-scroll-compact.png | Bin 44861 -> 44910 bytes ...oolbox-right-scroll-compact-hover-item.png | Bin 48589 -> 48702 bytes .../etalons/toolbox-right-scroll-compact.png | Bin 44732 -> 44784 bytes .../toolbox-search-compact-entered.png | Bin 68174 -> 67498 bytes .../toolbox-search-compact-placeholder.png | Bin 65917 -> 65274 bytes .../etalons/toolbox-search-compact.png | Bin 79710 -> 78986 bytes .../etalons/toolbox-search-right-entered.png | Bin 52251 -> 52247 bytes .../toolbox-search-right-placeholder.png | Bin 50096 -> 50086 bytes .../designer/etalons/toolbox-search-right.png | Bin 57630 -> 57774 bytes .../toolbox-search-rtl-compact-entered.png | Bin 68371 -> 67784 bytes ...toolbox-search-rtl-compact-placeholder.png | Bin 66136 -> 65538 bytes .../etalons/toolbox-search-rtl-compact.png | Bin 79692 -> 78947 bytes .../tests/designer/page-navigator.ts | 4 +- .../tests/designer/surface.ts | 27 ++++ 89 files changed, 357 insertions(+), 96 deletions(-) delete mode 100644 visualRegressionTests/tests/designer/etalons/actions-on-converted-question_mask.png delete mode 100644 visualRegressionTests/tests/designer/etalons/convert-to-popup_mask.png create mode 100644 visualRegressionTests/tests/designer/etalons/imagepicker-loading_mask.png create mode 100644 visualRegressionTests/tests/designer/etalons/page-adorner-collapsed.png create mode 100644 visualRegressionTests/tests/designer/etalons/page-adorner-expanded.png diff --git a/packages/survey-creator-angular/src/page.component.html b/packages/survey-creator-angular/src/page.component.html index 2a8d3d06cb..4aa6f21b1f 100644 --- a/packages/survey-creator-angular/src/page.component.html +++ b/packages/survey-creator-angular/src/page.component.html @@ -1,5 +1,5 @@
diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html index f7db2f1586..6bb0447d64 100644 --- a/packages/survey-creator-angular/src/panel.component.html +++ b/packages/survey-creator-angular/src/panel.component.html @@ -1,5 +1,6 @@
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html index 608c5dabc9..cef649550d 100644 --- a/packages/survey-creator-angular/src/question.component.html +++ b/packages/survey-creator-angular/src/question.component.html @@ -1,5 +1,6 @@
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 d43ae20513..fc861bc769 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 @@ -90,7 +90,7 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer { export class SurveyElementAdornerBase extends Base { public actionContainer: SurveyElementActionContainer; - public topActionContainer: ActionContainer; + protected expandCollapseAction: IAction; protected designerStateManager: DesignerStateManager; @property({ defaultValue: true }) allowDragging: boolean; @property({ @@ -106,6 +106,11 @@ export class SurveyElementAdornerBase e } }) collapsed: boolean; @property() renderedCollapsed: boolean; + + public dblclick(event) { + if (this.creator.expandCollapseButtonVisibility != "never") this.collapsed = !this.collapsed; + event.stopPropagation(); + } private allowEditOption: boolean; private selectedPropPageFunc: (sender: Base, options: any) => void; private sidebarFlyoutModeChangedFunc: (sender: Base, options: any) => void; @@ -131,16 +136,18 @@ export class SurveyElementAdornerBase e this.actionContainer.dotsItem.iconSize = 16; this.actionContainer.dotsItem.popupModel.horizontalPosition = "center"; - this.topActionContainer = new ActionContainer(); - this.topActionContainer.sizeMode = "small"; - this.topActionContainer.setItems([{ + const collapseIcon = "icon-collapse-detail-light_16x16"; + const expandIcon = "icon-restore_16x16"; + this.expandCollapseAction = { id: "collapse", - iconName: new ComputedUpdater(() => this.collapsed ? "icon-restore_16x16" : "icon-collapse-detail-light_16x16") as any, + css: "sv-action-bar-item--secondary sv-action-bar-item--collapse", + iconName: new ComputedUpdater(() => this.collapsed ? expandIcon : collapseIcon) 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); diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss index 72c0cce30a..0b1f1cf590 100644 --- a/packages/survey-creator-core/src/components/page.scss +++ b/packages/survey-creator-core/src/components/page.scss @@ -8,7 +8,7 @@ svc-page { margin-top: calcSize(2); .sd-page__title { - margin: calcSize(2.5) 0 0 0; + margin: calcSize(3) 0 0 0; color: var(--ctr-survey-page-header-title-color-placeholder, $foreground-dim); } @@ -33,12 +33,15 @@ svc-page { .svc-page__content-actions { position: absolute; - display: none; + visibility: hidden; top: calcSize(1); inset-inline-end: 0; // right padding: 0 calcSize(1.5); z-index: 1; + .sv-action-bar-separator { + margin: 0 calcSize(1); + } h4.sd-title { .sv-string-editor { &[aria-placeholder]:empty:before { @@ -102,20 +105,66 @@ svc-page { .svc-page__content:not(.svc-page__content--new):focus, .svc-hovered.svc-page__content:not(.svc-page__content--new) { + box-shadow: 0 0 0 2px $secondary-light; background: var(--ctr-survey-page-background-color-hovered, $secondary-backcolor-semi-light); } +.svc-page .svc-page__content--collapsed { + &::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border: 2px $border dashed; + margin: -2px; + border-radius: calcSize(1.25); + box-sizing: content-box; + pointer-events: none; + } +} + .svc-creator .svc-page .svc-page__content--selected, .svc-creator .svc-page .svc-page__content--selected:focus, -.svc-hovered { +.svc-hovered.svc-page__content { + &::after { + display: none; + } &.svc-page__content--selected { - box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-selected, $secondary); - background: var(--ctr-survey-page-background-color-selected, $secondary-backcolor-semi-light); + box-shadow: 0 0 0 2px $secondary; + background: $secondary-backcolor-semi-light; + } + .svc-page__content-actions { + visibility: visible; + } +} +.svc-creator--mobile { + .svc-page .svc-page__content--collapsed { + &::after { + margin: 0; + border-radius: calcSize(1); + } + } - .svc-page__content-actions { - display: block; + &.svc-creator .svc-page .svc-page__content--selected, + &.svc-creator .svc-page .svc-page__content--selected:focus, + .svc-hovered.svc-page__content { + &.svc-page__content--selected { + box-shadow: 0 0 0 2px inset $secondary; + + box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-selected, $secondary); + background: var(--ctr-survey-page-background-color-selected, $secondary-backcolor-semi-light); + + .svc-page__content-actions { + display: block; + } } } + .svc-page__content:not(.svc-page__content--new):focus, + .svc-hovered.svc-page__content:not(.svc-page__content--new) { + box-shadow: 0 0 0 2px inset $secondary-light; + } } .svc-page__footer { @@ -222,3 +271,52 @@ svc-page { } } } +.svc-page__content--collapsed { + & > * { + display: none; + } + .svc-page__content-actions { + display: block; + } + .sd-page { + display: flex; + & > * { + display: none; + } + .sd-title { + display: block; + } + } +} +.svc-page__content.svc-page__content--collapsed { + .sd-page { + padding-bottom: 0; + } +} +.svc-creator .svc-page { + .svc-page__content--collapse-always { + .svc-page__content-actions { + visibility: visible; + .sv-action { + visibility: hidden; + } + .sv-action.sv-action-bar-item--collapse { + visibility: visible; + .sv-action-bar-separator { + visibility: hidden; + } + } + } + &.svc-page__content--selected, + &.svc-hovered { + .svc-page__content-actions { + .sv-action { + visibility: visible; + .sv-action-bar-separator { + visibility: visible; + } + } + } + } + } +} diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts index 4e1b5a31f5..f4776decad 100644 --- a/packages/survey-creator-core/src/components/page.ts +++ b/packages/survey-creator-core/src/components/page.ts @@ -1,4 +1,4 @@ -import { ActionContainer, ComputedUpdater, DragTypeOverMeEnum, IAction, IElement, PageModel, property } from "survey-core"; +import { ActionContainer, ComputedUpdater, CssClassBuilder, DragTypeOverMeEnum, IAction, IElement, PageModel, property } from "survey-core"; import { SurveyCreatorModel } from "../creator-base"; import { IPortableMouseEvent } from "../utils/events"; import { SurveyElementAdornerBase } from "./action-container-view-model"; @@ -28,6 +28,9 @@ export class PageAdorner extends SurveyElementAdornerBase { constructor(creator: SurveyCreatorModel, page: PageModel) { super(creator, page); this.actionContainer.sizeMode = "small"; + this.expandCollapseAction.visible = !this.isGhost; + this.expandCollapseAction.needSeparator = true; + if (this.creator.expandCollapseButtonVisibility != "never") this.actionContainer.addAction(this.expandCollapseAction); this.questionTypeSelectorModel = this.creator.getQuestionTypeSelectorModel( (type) => { this.currentAddQuestionType = type; @@ -187,7 +190,10 @@ export class PageAdorner extends SurveyElementAdornerBase { if (this.creator.isElementSelected(this.page)) { result += " svc-page__content--selected"; } - return result; + + result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility); + if (this.renderedCollapsed) result += (" svc-page__content--collapsed"); + return result.trim(); } public hover(event: MouseEvent, element: HTMLElement | any) { toggleHovered(event, element, this.creator.pageHoverDelay); diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 5d75bfbed9..0884230534 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -141,8 +141,8 @@ svc-question { } } -.svc-question__content>div, -.svc-question__placeholders>div { +.svc-question__content > div, +.svc-question__placeholders > div { overflow: visible; } @@ -160,7 +160,6 @@ svc-question { } } - .svc-panel__placeholder { color: $foreground-light; text-wrap: wrap; @@ -256,13 +255,12 @@ svc-question { use { fill: $secondary; - } } } .svc-question__content:focus, -.svc-hovered>.svc-question__content { +.svc-hovered > .svc-question__content { box-shadow: 0 0 0 2px $secondary-light; } @@ -271,10 +269,12 @@ svc-question { } .svc-question__content--selected:not(.svc-question__content--dragged), -.svc-creator:not(.svc-creator--mobile) .svc-page .svc-hovered>.svc-question__content:not(.svc-question__content--dragged) { - &>.svc-question__content-actions { +.svc-creator:not(.svc-creator--mobile) + .svc-page + .svc-hovered + > .svc-question__content:not(.svc-question__content--dragged) { + & > .svc-question__content-actions { opacity: 1; - } } @@ -348,13 +348,13 @@ svc-question { } .svc-question__content--drag-over-inside, -.svc-hovered>.svc-question__content--drag-over-inside { +.svc-hovered > .svc-question__content--drag-over-inside { .svc-panel__placeholder_frame { box-shadow: 0 0 0 1px $primary; border: 1px solid $primary; background: $primary-light; - &>.svc-question__content-actions { + & > .svc-question__content-actions { opacity: 1; } } @@ -390,7 +390,6 @@ svc-question { } } - .svc-question__content--drag-over-top:before { content: " "; position: absolute; @@ -413,14 +412,14 @@ svc-question { .svc-question__content--panel, .sd-panel__content { - .sd-row>div:first-child { + .sd-row > div:first-child { .svc-question__content--drag-over-left { margin-left: 8px; width: calc(100% - 8px); } } - .sd-row>div:last-child { + .sd-row > div:last-child { .svc-question__content--drag-over-right { margin-right: 8px; width: calc(100% - 8px); @@ -446,7 +445,6 @@ svc-question { svc-question, .svc-question { - sv-action-bar, .sv-action-bar { padding: 0; @@ -502,34 +500,34 @@ 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-question__drag-element { +.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__drag-element { +.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__adorner { + .svc-question__content--collapsed { + & > * { + display: none; } .svc-question__drag-area { - display: flex, + display: flex; } .sd-element { display: block; - &>*:not(.sd-element__header) { - display: none + & > *:not(.sd-element__header) { + display: none; } .sd-element__header { - &>*:not(.sd-element__title) { + & > *:not(.sd-element__title) { display: none; } @@ -542,13 +540,13 @@ svc-question, } } -.svc-question__adorner--collapsed { - .svc-question__content { +.svc-question__adorner { + .svc-question__content--collapsed { flex-grow: 0; padding-bottom: calcSize(4); .sd-element__header, - .sd-element--complex>.sd-element__header { + .sd-element--complex > .sd-element__header { padding-top: 0; padding-bottom: 0; } @@ -559,19 +557,16 @@ svc-question, .svc-question__top-actions { padding: 0; } - - .svc-question__adorner--collapsed { - .svc-question__content { + .svc-question__adorner { + .svc-question__content--collapsed { padding-bottom: calcSize(2); - } - - .svc-question__content--selected { - padding-bottom: calcSize(3); + &.svc-question__content--selected { + padding-bottom: calcSize(3); + } } } } - .svc-question__drag-area { position: absolute; cursor: move; @@ -629,7 +624,6 @@ svc-question, } .sd-page__row.sd-row--multiple .svc-question__content--empty { - .sd-row__question, .sd-row__panel { height: 0; @@ -649,7 +643,6 @@ svc-question, } .svc-question__content { - .sd-paneldynamic__footer, .sd-paneldynamic__separator { display: none; @@ -672,7 +665,6 @@ svc-question, } .svc-question__content--empty-template { - .sd-question--paneldynamic, .sd-question__content, sv-ng-paneldynamic-question, @@ -680,7 +672,7 @@ svc-question, .sd-paneldynamic__panels-container, .sd-paneldynamic__panel-wrapper, .svc-question__adorner, - .svc-question__adorner>div { + .svc-question__adorner > div { display: flex; flex-direction: column; flex-grow: 1; @@ -753,7 +745,7 @@ svc-question, display: none; use { - fill: $primary + fill: $primary; } } @@ -794,7 +786,6 @@ svc-question, } } } - } .svc-panel__question-type-selector-popup { @@ -862,7 +853,7 @@ svc-question, margin-top: 0; } - .sd-element--complex>.sd-element__header--location-top { + .sd-element--complex > .sd-element__header--location-top { padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); padding-top: 0; @@ -895,7 +886,7 @@ svc-question, } } - .sd-table__row-disabled>.sd-table__cell { + .sd-table__row-disabled > .sd-table__cell { opacity: 1; } } @@ -939,7 +930,6 @@ svc-question, } } - .svc-question__adorner { .sv-ranking:not(.sv-ranking--select-to-rank) { .svc-question__content--ranking { @@ -987,16 +977,16 @@ svc-question, &:focus { opacity: initial; } - - use { + .sv-action-bar-item__icon use { fill: $foreground-dim-light; } } } -.svc-question__adorner--collapse-onhover.svc-hovered, -.svc-question__adorner--collapse-always { - .svc-question__top-actions { +.svc-question__adorner--collapse-onhover.svc-hovered > .svc-question__content, +.svc-question__adorner--collapse-onhover > .svc-question__content--selected, +.svc-question__adorner--collapse-always > .svc-question__content { + & > .svc-question__drag-area > .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 a6aa6de34f..688024f946 100644 --- a/packages/survey-creator-core/src/components/question.ts +++ b/packages/survey-creator-core/src/components/question.ts @@ -18,7 +18,8 @@ import { CssClassBuilder, QuestionPanelDynamicModel, ListModel, - QuestionTextModel + QuestionTextModel, + ActionContainer } from "survey-core"; import { SurveyCreatorModel } from "../creator-base"; import { editorLocalization, getLocString } from "../editorLocalization"; @@ -50,7 +51,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { placeholderComponentData: any; private dragOrClickHelper: DragOrClickHelper; - + public topActionContainer: ActionContainer; constructor( creator: SurveyCreatorModel, surveyElement: SurveyElement, @@ -58,6 +59,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { ) { super(creator, surveyElement); this.actionContainer.sizeMode = "small"; + this.topActionContainer = new ActionContainer(); + this.topActionContainer.sizeMode = "small"; + this.topActionContainer.setItems([this.expandCollapseAction]); if ( surveyElement.isQuestion && !!surveyElement["setCanShowOptionItemCallback"] @@ -102,8 +106,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { 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(); + .append("svc-question__adorner--collapse-" + this.creator.expandCollapseButtonVisibility, true).toString(); } css() { @@ -121,6 +124,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { if (this.isEmptyTemplate) { result += " svc-question__content--empty-template"; } + if (this.renderedCollapsed) { + result += " svc-question__content--collapsed"; + } if (this.isDragMe) { result += " svc-question__content--dragged"; diff --git a/packages/survey-creator-core/src/creator-options.ts b/packages/survey-creator-core/src/creator-options.ts index 76fd5fb21d..cbd411c985 100644 --- a/packages/survey-creator-core/src/creator-options.ts +++ b/packages/survey-creator-core/src/creator-options.ts @@ -271,4 +271,6 @@ export interface ICreatorOptions { */ pageEditMode?: "standard" | "single" | "bypage"; enableLinkFileEditor?: boolean; + + expandCollapseButtonVisibility?: "never" | "onhover" | "always"; } diff --git a/packages/survey-creator-core/tests/page-adorner.tests.ts b/packages/survey-creator-core/tests/page-adorner.tests.ts index 3f419b5dfa..7d6c350cb0 100644 --- a/packages/survey-creator-core/tests/page-adorner.tests.ts +++ b/packages/survey-creator-core/tests/page-adorner.tests.ts @@ -13,12 +13,12 @@ test("Check page adorner css on drag over", (): any => { creator, creator.survey.pages[0] ); - expect(pageAdorner.css).toBe(""); + expect(pageAdorner.css).toBe("svc-page__content--collapse-never"); pageAdorner.dragTypeOverMe = true as any; - expect(pageAdorner.css).toBe("svc-question__content--drag-over-inside"); + expect(pageAdorner.css).toBe("svc-question__content--drag-over-inside svc-page__content--collapse-never"); pageAdorner.showPlaceholder = false; - expect(pageAdorner.css).toBe("svc-page--drag-over-empty"); + expect(pageAdorner.css).toBe("svc-page--drag-over-empty svc-page__content--collapse-never"); settings.designer.showAddQuestionButton = false; - expect(pageAdorner.css).toBe("svc-page--drag-over-empty svc-page--drag-over-empty-no-add-button"); + expect(pageAdorner.css).toBe("svc-page--drag-over-empty svc-page--drag-over-empty-no-add-button svc-page__content--collapse-never"); settings.designer.showAddQuestionButton = true; }); diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html index 0ba773622d..93b4ed78bb 100644 --- a/packages/survey-creator-knockout/src/adorners/panel.html +++ b/packages/survey-creator-knockout/src/adorners/panel.html @@ -1,5 +1,5 @@
+ data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html index 1b042e2989..9dd92e3ca4 100644 --- a/packages/survey-creator-knockout/src/adorners/question.html +++ b/packages/survey-creator-knockout/src/adorners/question.html @@ -1,5 +1,5 @@
+ data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
+ data-bind="click: select, key2click, clickBubble: false, css: css, attr: { id: page.id }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
diff --git a/packages/survey-creator-knockout/src/page.ts b/packages/survey-creator-knockout/src/page.ts index d879c83261..c3f944beaf 100644 --- a/packages/survey-creator-knockout/src/page.ts +++ b/packages/survey-creator-knockout/src/page.ts @@ -27,7 +27,7 @@ export class CreatorSurveyPageComponent extends PageAdorner { } protected getPage(): PageModel { - return ko.unwrap(this._page); + return ko.unwrap(this._page) || super.getPage(); } fixedDispose(): void { diff --git a/packages/survey-creator-react/src/adorners/Page.tsx b/packages/survey-creator-react/src/adorners/Page.tsx index 0d4c48e5f6..ac85aea0c8 100644 --- a/packages/survey-creator-react/src/adorners/Page.tsx +++ b/packages/survey-creator-react/src/adorners/Page.tsx @@ -79,6 +79,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement< onClick={(e) => { return this.model.select(this.model, new ReactMouseEvent(e)); }} + onDoubleClick={e => this.model.dblclick(e.nativeEvent)} onMouseLeave={(e) => this.model.hover(e.nativeEvent, e.currentTarget)} onMouseOver={(e) => this.model.hover(e.nativeEvent, e.currentTarget)} > diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx index f12703defd..ab9b88307b 100644 --- a/packages/survey-creator-react/src/adorners/Question.tsx +++ b/packages/survey-creator-react/src/adorners/Question.tsx @@ -60,6 +60,7 @@ export class QuestionAdornerComponent extends CreatorModelElement< ref={this.rootRef} data-sv-drop-target-survey-element={this.model.element.name || null} className={"svc-question__adorner " + this.model.rootCss()} + onDoubleClick={e => { allowInteractions && this.model.dblclick(e.nativeEvent); e.stopPropagation(); }} onMouseOut={e => allowInteractions && this.model.hover(e.nativeEvent, e.currentTarget)} onMouseOver={e => allowInteractions && this.model.hover(e.nativeEvent, e.currentTarget)} > diff --git a/packages/survey-creator-vue/example/src/components/Example.vue b/packages/survey-creator-vue/example/src/components/Example.vue index 591a82f576..028e847117 100644 --- a/packages/survey-creator-vue/example/src/components/Example.vue +++ b/packages/survey-creator-vue/example/src/components/Example.vue @@ -1,6 +1,6 @@