Refactored design surface layout - corrected surface paddings (#6190)

* Refactored design surface layout - for correct paddings * Fixed build * Fixed placeholder vertical alignment * Fixed surface paddings * Fixed last page bottom padding * Fixed renderedWidth property usage for design surface in React * Updated creator themes * Fixed design surface scaling * Partially update etalons * Try to fix merge * Updated etalons * Fixed f-tests * Fixed Vue package build after merge * Updated etalons * Updated etalons * Updated etalons * Updated etalons * Fixed vr-tests * Updated etalons * Fixed vue designer template * Fixed scroll component in angular * Fixed design surface overflows parent container width * Updated etalons * Try to fix f-test * Try to fix f-test, skipped scale test for a while * remove test.only --------- Co-authored-by: tsv2013 <[email protected]> Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Dec 13, 2024 · ffca57e · ffca57e
1 parent 0d38b1d
commit ffca57e
Show file tree

Hide file tree

Showing 282 changed files with 7,208 additions and 7,261 deletions.
diff --git a/functionalTests/designer/page-navigator.ts b/functionalTests/designer/page-navigator.ts
@@ -7,10 +7,10 @@ export function getAddNewQuestionButton(n = 0) {
 }
 
 fixture`${title}`.page`${url}`.beforeEach(async (t) => {
-  await t.resizeWindow(1920, 900);
 });
 
 test("Check page navigator track scrolling", async (t) => {
+  await t.resizeWindow(1600, 700);
   await ClientFunction(() => {
     window["creator"].JSON = {
       "logoPosition": "right",
@@ -61,14 +61,14 @@ test("Check page navigator track scrolling", async (t) => {
   await t
     .expect(Selector(firstPageNavigatorItem).exists).ok()
     .expect(Selector(lastPageNavigatorItem).exists).notOk()
-    .scroll(Selector(".svc-tab-designer--with-page-navigator"), "bottomRight")
-    .scroll(Selector(".svc-tab-designer--with-page-navigator"), "bottomRight")
+    .scroll(Selector(".svc-tab-designer--with-page-navigator .svc-scroll__scroller"), "bottomRight")
+    .scroll(Selector(".svc-tab-designer--with-page-navigator .svc-scroll__scroller"), "bottomRight")
     .expect(Selector(firstPageNavigatorItem).exists).notOk()
     .expect(Selector(lastPageNavigatorItem).exists).ok();
 });
 
 test("PageNavigator shown if scrolling exists", async t => {
-  await t.resizeWindow(1600, 1300);
+  await t.resizeWindow(1600, 1400);
   await t
     .expect(getAddNewQuestionButton().visible).ok()
     .click(getAddNewQuestionButton())
@@ -81,9 +81,9 @@ test("PageNavigator shown if scrolling exists", async t => {
     .click(getAddNewQuestionButton(2))
     .expect(Selector("span").withText("question3").visible).ok()
     .expect(Selector(".svc-page-navigator").visible).ok()
-    .resizeWindow(1600, 1700)
+    .resizeWindow(1600, 1750)
     .expect(Selector(".svc-page-navigator").visible).notOk()
-    .resizeWindow(1600, 1300)
+    .resizeWindow(1600, 1400)
     .expect(Selector(".svc-page-navigator").visible).ok()
     .click(Selector(".svc-question__content--selected span").withText("Delete"))
     .expect(Selector("span").withText("question3").visible).notOk()

diff --git a/functionalTests/designer/survey-width.ts b/functionalTests/designer/survey-width.ts
@@ -6,7 +6,7 @@ fixture`${title}`.page`${url}`.beforeEach(async (t) => {
   await t.resizeWindow(1920, 1080);
 });
 
-test("Change survey width", async (t) => {
+test("Change survey width 1", async (t) => {
   const json = {
     "widthMode": "static",
     "pages": [
@@ -42,11 +42,11 @@ test("Change survey width", async (t) => {
     .pressKey("tab");
 
   await t
-    .expect(Selector(".sd-container-modern").clientWidth).gte(1218)
-    .expect(Selector(".sd-container-modern").clientWidth).lte(1230);
+    .expect(Selector(".sd-container-modern").clientWidth).gte(1200)
+    .expect(Selector(".sd-container-modern").clientWidth).lte(1220);
 });
 
-test("Change survey width", async (t) => {
+test("Change survey width 2", async (t) => {
   await t
     .hover(getToolboxItemByText("Single-Line Input"))
     .click(getToolboxItemByText("Single-Line Input"));

diff --git a/functionalTests/designer/toolbox.ts b/functionalTests/designer/toolbox.ts
@@ -368,8 +368,7 @@ test("toolbox subTypes: add items by drag-n-drop", async (t) => {
     .expect(Selector(".svc-question__content").filterVisible().count).eql(1)
 
     .hover(getToolboxItemByText("Rating Scale"))
-    .wait(400)
-    .dragToElement(getToolboxItemByText("Rating Scale"), newGhostPagePage, { speed: 0.5, destinationOffsetX: 50, destinationOffsetY: 50 })
+    .dragToElement(getToolboxItemByText("Rating Scale"), newGhostPagePage, { speed: 0.5 })
     .expect(Selector(".svc-question__content").filterVisible().count).eql(2)
     .expect(toolboxSubTypesPopup.visible).notOk();
 

diff --git a/packages/survey-creator-angular/src/components/scroll.component.html b/packages/survey-creator-angular/src/components/scroll.component.html
@@ -1,11 +1,11 @@
 <ng-template #template>
     <div class="svc-scroll__wrapper" #container>
-        <div class="svc-scroll__scroller sv-drag-target-skipped" (scroll)="model.onScrollContainer">
+        <div class="svc-scroll__scroller sv-drag-target-skipped" (scroll)="model.onScrollContainer()">
             <div class="svc-scroll__container">
                 <ng-content></ng-content>
             </div>
         </div>
-        <div class="svc-scroll__scrollbar" (scroll)="model.onScrollScrollbar">
+        <div class="svc-scroll__scrollbar" (scroll)="model.onScrollScrollbar()">
             <div class="svc-scroll__scrollbar-sizer">
             </div>
         </div>

diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.ts b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.ts
@@ -27,24 +27,13 @@ export class PageNavigatorComponent extends CreatorModelComponent<PageNavigatorV
   public ngAfterViewInit(): void {
     if (this.pageEditMode !== "bypage") {
       const el = this.container.nativeElement;
-      if (!!el && !!el.parentElement?.parentElement?.parentElement) {
-        const self = this;
-        const scrollableViewPort = el.parentElement.parentElement.parentElement;
-        scrollableViewPort.onscroll = function (this: GlobalEventHandlers, ev: Event) {
-          return self.model.onContainerScroll(ev.currentTarget as HTMLDivElement);
-        };
-        self.model.setScrollableContainer(scrollableViewPort);
-        self.model.setItemsContainer(el.parentElement);
-      }
+      this.model.attachToUI(el);
     }
   }
   public override ngOnDestroy(): void {
     super.ngOnDestroy();
-    const el = this.container.nativeElement;
-    if (!!el && !!el.parentElement?.parentElement?.parentElement) {
-      el.parentElement.parentElement.parentElement.onscroll = <any>undefined;
-    }
     this.model.stopItemsContainerHeightObserver();
+    this.model.setScrollableContainer(undefined as any);
     this.model.dispose();
   }
 }
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
@@ -19,12 +19,14 @@
 
   </div>
 
-  <div *ngIf="creator.showPageNavigator" class="svc-tab-designer__page-navigator">
-    <svc-page-navigator [pagesController]="model.pagesController" [pageEditMode]="creator.pageEditMode">
-    </svc-page-navigator>
-  </div>
-  <div *ngIf="model.hasToolbar" class="svc-tab-designer__toolbar">
-    <sv-action-bar [model]="model.surfaceToolbar"></sv-action-bar>
+  <div *ngIf="!creator.isMobileView" class="svc-tab-designer__tools">
+    <div *ngIf="creator.showPageNavigator" class="svc-tab-designer__page-navigator">
+      <svc-page-navigator [pagesController]="model.pagesController" [pageEditMode]="creator.pageEditMode">
+      </svc-page-navigator>
+    </div>
+    <div *ngIf="model.hasToolbar" class="svc-tab-designer__toolbar">
+      <sv-action-bar [model]="model.surfaceToolbar"></sv-action-bar>
+    </div>
   </div>
 </ng-template>
 

diff --git a/packages/survey-creator-angular/src/tabs/designer/designer.component.html b/packages/survey-creator-angular/src/tabs/designer/designer.component.html
@@ -3,24 +3,26 @@
     <svc-toolbox *ngIf="model.isToolboxVisible" [model]="creator"></svc-toolbox>
   </div>
   <div class="svc-tab-designer" [class]="model.getRootCss()" (click)="model.clickDesigner()">
-    <div class="svc-tab-designer_content">
-      <ng-container *ngIf="model.showPlaceholder">
-        <div *ngIf="creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle" class="svc-designer-header">
-          <div *ngIf="survey.renderedHasHeader" [class]="survey.css.header" [survey]="survey" sv-ng-survey-header></div>
-        </div>
-        <div class="svc-designer__placeholder-container" [attr.data-sv-drop-target-survey-element]="'newGhostPage'">
-          <svc-surface-placeholder [name]="'designer'" [placeholderTitleText]="model.placeholderTitleText"
-            [placeholderDescriptionText]="model.placeholderDescriptionText">
-          </svc-surface-placeholder>
-          <div class="svc-designer-placeholder-page">
-            <svc-page [model]="model.newPage" [survey]="survey" [creator]="creator" [isGhost]="true"></svc-page>
+    <svc-scroll>
+      <div class="svc-tab-designer_content">
+        <ng-container *ngIf="model.showPlaceholder">
+          <div *ngIf="creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle" class="svc-designer-header">
+            <div *ngIf="survey.renderedHasHeader" [class]="survey.css.header" [survey]="survey" sv-ng-survey-header>
+            </div>
           </div>
-        </div>
-      </ng-container>
-
-      <ng-container *ngIf="!model.showPlaceholder">
-        <svc-designer-survey [model]="model"></svc-designer-survey>
-      </ng-container>
-    </div>
+          <div class="svc-designer__placeholder-container" [attr.data-sv-drop-target-survey-element]="'newGhostPage'">
+            <svc-surface-placeholder [name]="'designer'" [placeholderTitleText]="model.placeholderTitleText"
+              [placeholderDescriptionText]="model.placeholderDescriptionText">
+            </svc-surface-placeholder>
+            <div class="svc-designer-placeholder-page">
+              <svc-page [model]="model.newPage" [survey]="survey" [creator]="creator" [isGhost]="true"></svc-page>
+            </div>
+          </div>
+        </ng-container>
+        <ng-container *ngIf="!model.showPlaceholder">
+          <svc-designer-survey [model]="model"></svc-designer-survey>
+        </ng-container>
+      </div>
+    </svc-scroll>
   </div>
 </ng-template>
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss
@@ -125,11 +125,6 @@ svc-page-navigator-item,
 
     .svc-page-navigator-item__dot {}
   }
-
-  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover,
-  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus {
-    .svc-page-navigator-item__banner {}
-  }
 }
 
 .svc-page-navigator-item--disabled {

diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
@@ -10,7 +10,7 @@ svc-page-navigator,
   display: block;
   width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
   height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
-  padding: var(--ctr-page-navigator-button-padding, calcSize(1.25));
+  padding: var(--ctr-page-navigator-button-padding, calcSize(1));
   border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
   overflow: visible;
   cursor: pointer;
@@ -29,19 +29,16 @@ svc-page-navigator,
 
 .svc-page-navigator__button {
   --ctr-page-navigator-button-double-padding: calc(2 * var(--ctr-page-navigator-button-padding));
-  --ctr-page-navigator-button-width: calc(
-    var(--ctr-page-navigator-button-icon-width) + var(--ctr-page-navigator-button-double-padding)
-  );
-  --ctr-page-navigator-button-height: calc(
-    var(--ctr-page-navigator-button-icon-height) + var(--ctr-page-navigator-button-double-padding)
-  );
-  width: var(--ctr-page-navigator-button-width, calcSize(5.5));
-  height: var(--ctr-page-navigator-button-height, calcSize(5.5));
+  --ctr-page-navigator-button-width: calc(var(--ctr-page-navigator-button-icon-width) + var(--ctr-page-navigator-button-double-padding));
+  --ctr-page-navigator-button-height: calc(var(--ctr-page-navigator-button-icon-height) + var(--ctr-page-navigator-button-double-padding));
+  width: var(--ctr-page-navigator-button-width, calcSize(5));
+  height: var(--ctr-page-navigator-button-height, calcSize(5));
 
   padding: 0;
   cursor: pointer;
   border: none;
   background-color: transparent;
+
   &:hover,
   &:focus-visible {
     outline: none;
@@ -56,7 +53,8 @@ svc-page-navigator,
   }
 }
 
-.svc-page-navigator__button--pressed, .svc-page-navigator__button:active {
+.svc-page-navigator__button--pressed,
+.svc-page-navigator__button:active {
   .svc-page-navigator__button-icon {
     background: var(--ctr-page-navigator-button-background-color-pressed, $primary-light);
     opacity: var(--ctr-page-navigator-button-opacity-pressed, 0.5);
@@ -67,9 +65,11 @@ svc-page-navigator,
   }
 }
 
-.svc-page-navigator__button--active, .svc-page-navigator__button--active:hover  {
+.svc-page-navigator__button--active,
+.svc-page-navigator__button--active:hover {
   .svc-page-navigator__button-icon {
     background: var(--ctr-page-navigator-button-background-color-checked, transparent);
+
     use {
       fill: var(--ctr-page-navigator-button-icon-color-checked, $primary);
     }
@@ -80,58 +80,7 @@ svc-page-navigator,
   min-width: calcSize(12.5);
 }
 
-.svc-tab-designer--with-page-navigator {
-  .svc-tab-designer_content {
-    margin-left: calcSize(6.5);
-    margin-right: calcSize(6.5);
-    width: calc(100% - calcSize(13));
-  }
-}
-
 .svc-tab-designer__page-navigator {
-  position: absolute;
-  padding: calcSize(16.5) 0;
-  top: 0;
-  bottom: 0;
-  right: var(--ctr-page-navigator-padding-right, calcSize(1.5));
-}
-
-.svc-page-navigator {
-  padding: var(--ctr-page-navigator-padding-top, calcSize(1.5)) 0
-    var(--ctr-page-navigator-padding-bottom, calcSize(1.5)) var(--ctr-page-navigator-padding-left, calcSize(1.5));
-}
-
-.svc-creator__toolbox--right,
-[dir="rtl"],
-[style*="direction:rtl"],
-[style*="direction: rtl"] {
-  .svc-tab-designer__page-navigator {
-    right: unset;
-    left: var(--ctr-page-navigator-padding-left, calcSize(1.5));
-  }
-
-  .svc-page-navigator {
-    padding: var(--ctr-page-navigator-padding-top, calcSize(1.5)) var(--ctr-page-navigator-padding-right, calcSize(1.5))
-      var(--ctr-page-navigator-padding-bottom, calcSize(1.5)) 0;
-  }
-}
-
-.svc-tab-designer--bypage-mode {
-  .svc-tab-designer_content {
-    display: flex;
-    flex-direction: row;
-    margin-right: 0;
-    margin-left: 0;
-    width: 100%;
-  }
-
-  .svc-tab-designer__page-navigator {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    .svc-page-navigator {
-      padding-right: 0;
-    }
-  }
+  display: flex;
+  flex-grow: 1;
 }
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts b/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts
@@ -256,6 +256,9 @@ export class PageNavigatorViewModel extends Base {
   @property({ defaultValue: Number.MAX_VALUE }) visibleItemsCount: number;
   private _scrollableContainer: HTMLDivElement;
   public setScrollableContainer(scrollableContainer: HTMLDivElement | any) {
+    if (!!this._scrollableContainer) {
+      this._scrollableContainer.onscroll = undefined;
+    }
     this._scrollableContainer = scrollableContainer;
   }
   private _itemsContainer: HTMLDivElement;
@@ -302,4 +305,15 @@ export class PageNavigatorViewModel extends Base {
     }
     return this.items.slice(this.visibleItemsStartIndex, this.visibleItemsStartIndex + this.visibleItemsCount);
   }
+  public attachToUI(el: HTMLDivElement) {
+    if (!!el) {
+      const scrollableContainer = el.parentElement.parentElement.parentElement.parentElement.parentElement as HTMLDivElement;
+      const self = this;
+      scrollableContainer.onscroll = function (this: GlobalEventHandlers, ev: Event) {
+        return self.onContainerScroll(ev.currentTarget as HTMLDivElement);
+      };
+      this.setItemsContainer(el.parentElement as HTMLDivElement);
+      this.setScrollableContainer(scrollableContainer);
+    }
+  }
 }