Hide surface toolbar for small screen

functionalTests/designer/page-navigator.ts

@@ -61,8 +61,8 @@ 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 .svc-scroll__scroller"), "bottomRight")
-    .scroll(Selector(".svc-tab-designer--with-page-navigator .svc-scroll__scroller"), "bottomRight")
+    .scroll(Selector(".svc-tab-designer--with-surface-tools .svc-scroll__scroller"), "bottomRight")
+    .scroll(Selector(".svc-tab-designer--with-surface-tools .svc-scroll__scroller"), "bottomRight")
     .expect(Selector(firstPageNavigatorItem).exists).notOk()
     .expect(Selector(lastPageNavigatorItem).exists).ok();
 });

functionalTests/designer/surface.ts

@@ -369,8 +369,10 @@ test("Collapse all and expand all toolbar visibility", async (t) => {
     window["creator"].expandCollapseButtonVisibility = "never";
   })();
   await setJSON(json);
-  await t.expect(Selector("#collapseAll").exists).notOk();
-  await t.expect(Selector("#expandAll").exists).notOk();
+  await t.expect(Selector("#collapseAll").exists).ok();
+  await t.expect(Selector("#collapseAll").visible).notOk();
+  await t.expect(Selector("#expandAll").exists).ok();
+  await t.expect(Selector("#expandAll").visible).notOk();
 });
 test("Check page adorner state is restored after shrink and stretch", async (t) => {
   await t.resizeWindow(1920, 1080);

functionalTests/designer/survey-width.ts

@@ -1,6 +1,6 @@
 import { url, setJSON, getJSON, getToolboxItemByText } from "../helper";
 import { Selector } from "testcafe";
-const title = "Property Grid";
+const title = "Width of survey on the designer surface";
 
 fixture`${title}`.page`${url}`.beforeEach(async (t) => {
   await t.resizeWindow(1920, 1080);

packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html

@@ -19,12 +19,12 @@
 
   </div>
 
-  <div *ngIf="!creator.isMobileView" class="svc-tab-designer__tools">
+  <div *ngIf="model.showSurfaceTools" 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">
+    <div *ngIf="model.showSurfaceToolbar" class="svc-tab-designer__toolbar">
       <sv-action-bar [model]="model.surfaceToolbar"></sv-action-bar>
     </div>
   </div>

packages/survey-creator-core/src/components/page-navigator/page-navigator.ts

@@ -105,7 +105,7 @@ export class PageNavigatorViewModel extends Base {
   }
   private patchContainerOffset(el: HTMLElement) {
     while (!!el) {
-      if (el.className.indexOf("svc-tab-designer--with-page-navigator") !== -1) {
+      if (el.className.indexOf("svc-tab-designer--with-surface-tools") !== -1) {
         el.offsetParent.scrollTop = 0;
         return;
       }

packages/survey-creator-core/src/components/tabs/designer.scss

@@ -16,7 +16,7 @@ svc-tab-designer {
   width: 0;
 }
 
-.svc-tab-designer--with-place-holder .svc-designer-header {
+.svc-tab-designer--with-placeholder .svc-designer-header {
   min-width: calcSize(84);
 }
 
@@ -87,7 +87,7 @@ svc-tab-designer {
   padding-inline-end: var(--ctr-survey-page-margin-left, calcSize(2));
 }
 
-.svc-tab-designer--with-place-holder {
+.svc-tab-designer--with-placeholder {
   .svc-tab-designer_content {
     display: flex;
     justify-content: center;
@@ -96,7 +96,7 @@ svc-tab-designer {
   }
 }
 
-.svc-tab-designer--with-page-navigator {
+.svc-tab-designer--with-surface-tools {
   .svc-tab-designer_content {
     padding-inline-start: var(--ctr-survey-page-margin-right-with-toolbar, calcSize(9));
     padding-inline-end: var(--ctr-survey-page-margin-left-with-toolbar, calcSize(9));

packages/survey-creator-core/src/components/tabs/designer.ts

@@ -231,9 +231,13 @@ export class TabDesignerViewModel extends Base {
       return getLocString("ed.surveyPlaceholderDescriptionMobile");
     return getLocString("ed.surveyPlaceholderDescription");
   }
-  public get hasToolbar() {
-    return this.creator.expandCollapseButtonVisibility != "never" || this.creator.showCreatorThemeSettings;
+  public get showSurfaceToolbar(): boolean {
+    return this.creator.allowShowSurfaceToolbar;
   }
+  public get showSurfaceTools(): boolean {
+    return !this.creator.isMobileView && (this.showSurfaceToolbar || this.creator.showPageNavigator);
+  }
+
   private isUpdatingNewPage: boolean;
   public onDesignerSurveyPropertyChanged(obj: Base, propName: string): void {
     if (!obj || this.isUpdatingNewPage) return;
@@ -380,11 +384,11 @@ export class TabDesignerViewModel extends Base {
   }
   public getRootCss(): string {
     let rootCss = this.survey.css.root;
-    if (!this.creator.isMobileView && (this.creator.showPageNavigator && this.survey.pageCount > 1 || this.creator.pageEditMode === "bypage" || this.hasToolbar)) {
-      rootCss += " svc-tab-designer--with-page-navigator";
+    if (this.creator.showPageNavigator || (this.showSurfaceToolbar && !this.surfaceToolbar.isEmpty)) {
+      rootCss += " svc-tab-designer--with-surface-tools";
     }
     if (this.showPlaceholder) {
-      rootCss += " svc-tab-designer--with-place-holder";
+      rootCss += " svc-tab-designer--with-placeholder";
     }
     rootCss += " svc-tab-designer--" + this.creator.pageEditMode + "-mode";
     return rootCss;

packages/survey-creator-core/src/creator-base.ts

@@ -3871,6 +3871,7 @@ export class SurveyCreatorModel extends Base
   }
   @property({ defaultValue: false }) showHeaderInEmptySurvey;
   @property({ defaultValue: true }) public allowShowPageNavigator;
+  @property({ defaultValue: true }) public allowShowSurfaceToolbar;
   @property({ defaultValue: true }) private showPageNavigatorValue;
 
   public get showPageNavigator() {

packages/survey-creator-core/src/creator-responsivity-manager.ts

@@ -36,6 +36,9 @@ export class CreatorResponsivityManager {
   private procesShowPageNavigator(pageNavigatorVisibility: boolean) {
     this.creator.allowShowPageNavigator = this.creator.pageEditMode === "bypage" || pageNavigatorVisibility;
   }
+  private procesShowSurfaceToolbar(toolboxVisible: boolean) {
+    this.creator.allowShowSurfaceToolbar = toolboxVisible;
+  }
 
   private findCorrectParent(container: HTMLElement) {
     if (!!window?.getComputedStyle) {
@@ -61,6 +64,7 @@ export class CreatorResponsivityManager {
     this.creator.updateToolboxIsCompact(toolboxIsCompact);
     this.procesShowToolbox(toolboxVisible);
     this.procesShowPageNavigator(toolboxVisible);
+    this.procesShowSurfaceToolbar(toolboxVisible);
 
     if (this.creator.sidebar.visible && !flyoutSidebar) {
       this.creator.sidebar.collapsedManually = false;

packages/survey-creator-knockout/src/tabs/designer.html

@@ -62,15 +62,15 @@
       <!-- /ko -->
     </div>
 
-    <!-- ko ifnot: creator.isMobileView -->
+    <!-- ko if: showSurfaceTools -->
     <div class="svc-tab-designer__tools">
       <!-- ko if: creator.showPageNavigator -->
       <div class="svc-tab-designer__page-navigator">
         <svc-page-navigator params="controller: pagesController, pageEditMode: creator.pageEditMode">
         </svc-page-navigator>
       </div>
       <!-- /ko -->
-      <!-- ko if: hasToolbar -->
+      <!-- ko if: showSurfaceToolbar -->
       <div class="svc-tab-designer__toolbar">
         <!-- ko component: { name: 'sv-action-bar', params: { model: surfaceToolbar, handleClick: false } } -->
         <!-- /ko -->

packages/survey-creator-react/src/tabs/Designer.tsx

@@ -148,6 +148,8 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
     const style: any = { ...this.model.surveyThemeVariables };
     style.maxWidth = survey.renderedWidth;
 
+    const tabTools = this.renderTabTools();
+
     return (<React.Fragment>
       <div className={this.model.designerCss} style={style} >
         {surveyHeader}
@@ -159,23 +161,28 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
           css={survey.css}
         /> */}
       </div>
-      {
-        !this.creator.isMobileView ? <div className="svc-tab-designer__tools">
-          {[
-            this.creator.showPageNavigator ?
-              <div key={1} className="svc-tab-designer__page-navigator"><SurveyPageNavigator
-                pagesController={this.model.pagesController} pageEditMode={this.model.creator.pageEditMode}
-              ></SurveyPageNavigator></div>
-              : null,
-            this.model.hasToolbar ?
-              <div key={2} className="svc-tab-designer__toolbar">
-                <SurveyActionBar model={this.model.surfaceToolbar} handleClick={false}></SurveyActionBar></div>
-              : null
-          ]}
-        </div> : null
-      }
+      {tabTools}
     </React.Fragment>);
   }
+
+  renderTabTools(): React.JSX.Element {
+    if (!this.model.showSurfaceTools) return null;
+
+    const pageNavigator = this.creator.showPageNavigator ?
+      <div className="svc-tab-designer__page-navigator"><SurveyPageNavigator
+        pagesController={this.model.pagesController} pageEditMode={this.model.creator.pageEditMode}
+      ></SurveyPageNavigator></div>
+      : null;
+
+    const surfaceToolbar = this.model.showSurfaceToolbar ?
+      <SurveyActionBar model={this.model.surfaceToolbar} handleClick={false}></SurveyActionBar>
+      : null;
+
+    return <div className="svc-tab-designer__tools">
+      {pageNavigator}
+      {surfaceToolbar}
+    </div>;
+  }
 }
 
 ReactElementFactory.Instance.registerElement("svc-tab-designer", (props) => {

packages/survey-creator-vue/src/tabs/designer/Designer.vue

@@ -100,7 +100,7 @@
               />
             </div>
           </div>
-          <div v-if="!model.creator.isMobileView" class="svc-tab-designer__tools">
+          <div v-if="model.showSurfaceTools" class="svc-tab-designer__tools">
             <div
               v-if="model.creator.showPageNavigator"
               class="svc-tab-designer__page-navigator"
@@ -111,7 +111,7 @@
                 :pageEditMode="model.creator.pageEditMode"
               />
               </div>
-              <div v-if="model.hasToolbar" class="svc-tab-designer__toolbar">
+              <div v-if="model.showSurfaceToolbar" class="svc-tab-designer__toolbar">
                 <SvComponent :is="'sv-action-bar'" :model="model.surfaceToolbar" />
               </div>
             </div>

visualRegressionTests/tests/designer/page-navigator.ts

@@ -500,7 +500,7 @@ test("Page navigator has enough space to be shown", async (t) => {
     });
     await ClientFunction(() => { document.body.focus(); })();
     await t.hover(Selector(".svc-designer-header"), { offsetX: 1, offsetY: 1 }).wait(500);
-    const designSurface = Selector(".svc-tab-designer--with-page-navigator");
+    const designSurface = Selector(".svc-tab-designer--with-surface-tools");
     await t.expect(designSurface.visible).ok();
     await takeElementScreenshot("page-navigator-not-overlaped.png", designSurface, t, comparer);
   });
@@ -591,7 +591,7 @@ test("Page navigator in by-page mode has enough space to be shown", async (t) =>
     });
     await ClientFunction(() => { document.body.focus(); })();
     await t.hover(Selector(".svc-designer-header"), { offsetX: 1, offsetY: 1 }).wait(500);
-    const designSurface = Selector(".svc-tab-designer--with-page-navigator");
+    const designSurface = Selector(".svc-tab-designer--with-surface-tools");
     await t.expect(designSurface.visible).ok();
     await takeElementScreenshot("page-navigator-by-page-not-overlaped.png", designSurface, t, comparer);
   });