#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

packages/survey-creator-angular/src/page.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)" class="svc-page__content" [class]="adorner.css" [key2click]
-  (click)="adorner.select(adorner, $event)" (mouseover)="adorner.hover($event, $event.currentTarget)"
+  (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"  (mouseover)="adorner.hover($event, $event.currentTarget)"
   (mouseleave)="adorner.hover($event, $event.target)" [id]="adorner.page.id" data-bind="clickBubble: false">
   <div class="svc-page__content-actions">
     <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>

packages/survey-creator-angular/src/panel.component.html

@@ -1,5 +1,6 @@
 <ng-template #template>
   <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()"
+    (dblclick)="adorner.dblclick($event)"
     (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
 

packages/survey-creator-angular/src/question.component.html

@@ -1,5 +1,6 @@
 <ng-template #template>
   <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()"
+    (dblclick)="adorner.dblclick($event)"
     (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
 

packages/survey-creator-core/src/components/action-container-view-model.ts

@@ -90,7 +90,7 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer {
 
 export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> 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<T extends SurveyElement = SurveyElement> 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<T extends SurveyElement = SurveyElement> 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<string>(() => 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<string>(() => 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);

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;
+          }
+        }
+      }
+    }
+  }
+}

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<PageModel> {
   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<PageModel> {
     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);