New responsivity mode for tabbed menu

e2e/creator.spec.ts

@@ -0,0 +1,38 @@
+
+import { url, test, expect } from "./helper";
+
+const title = "Creator";
+
+test.describe(title, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`${url}`);
+  });
+  test("Check tabbed menu responsiveness", async ({ page }) => {
+    await page.setViewportSize({ width: 1500, height: 1080 });
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item.svc-tabbed-menu-item--icon").filter({ visible: true }).count()).toBe(0);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item:not(.svc-tabbed-menu-item--icon)").filter({ visible: true }).count()).toBe(5);
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots").isVisible()).toBeFalsy();
+    await page.setViewportSize({ width: 1200, height: 1080 });
+    await page.waitForTimeout(1000);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item.svc-tabbed-menu-item--icon").filter({ visible: true }).count()).toBe(0);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item:not(.svc-tabbed-menu-item--icon)").filter({ visible: true }).count()).toBe(4);
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots").isVisible()).toBeTruthy();
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots .svc-list__item").count()).toBe(1);
+    await page.setViewportSize({ width: 800, height: 1080 });
+    await page.waitForTimeout(1000);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item:not(.svc-tabbed-menu-item--icon)").filter({ visible: true }).count()).toBe(0);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item.svc-tabbed-menu-item--icon").filter({ visible: true }).count()).toBe(5);
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots").isVisible()).toBeFalsy();
+    await page.setViewportSize({ width: 1200, height: 1080 });
+    await page.waitForTimeout(1000);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item.svc-tabbed-menu-item--icon").filter({ visible: true }).count()).toBe(0);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item:not(.svc-tabbed-menu-item--icon)").filter({ visible: true }).count()).toBe(4);
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots").isVisible()).toBeTruthy();
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots .svc-list__item").count()).toBe(1);
+    await page.setViewportSize({ width: 1500, height: 1080 });
+    await page.waitForTimeout(1000);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item.svc-tabbed-menu-item--icon").filter({ visible: true }).count()).toBe(0);
+    expect(await page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item:not(.svc-tabbed-menu-item--icon)").filter({ visible: true }).count()).toBe(5);
+    expect(await page.locator(".svc-tabbed-menu-item-container.sv-dots").isVisible()).toBeFalsy();
+  });
+});

functionalTests/designer/responsiveness.ts

@@ -12,23 +12,6 @@ fixture`${title}`.page`${url}`;
 
 const flyoutPropertyGrid = Selector(".svc-side-bar--flyout");
 
-test("Check base responsiveness for tabbed menu", async (t) => {
-  const tabbedMenuItemSelector = Selector(".svc-tabbed-menu .svc-tabbed-menu-item-container:nth-of-type(5)");
-  await t
-    .resizeWindow(1920, 900)
-    .expect(tabbedMenuItemSelector.hasClass("sv-action--hidden")).notOk()
-    .resizeWindow(700, 969)
-    .expect(tabbedMenuItemSelector.hasClass("sv-action--hidden")).ok()
-    .click(".svc-tabbed-menu-item-container.sv-dots");
-  const popupSelector = Selector(".sv-popup .sv-popup__container").filterVisible();
-  await t
-    .expect(getListItemByText("Translation").visible).ok()
-    .pressKey("esc")
-    .expect(popupSelector.visible).notOk()
-    .resizeWindow(1920, 900)
-    .expect(await tabbedMenuItemSelector.hasClass("sv-action--hidden")).ok();
-});
-
 test("Check base responsiveness for toolbox", async (t) => {
   await changeToolboxScrolling(false);
   const tabbedMenuItemSelector = Selector(".svc-toolbox .svc-toolbox__tool:nth-of-type(20)");

functionalTests/helper.ts

@@ -106,7 +106,7 @@ export const logicDetailButtonElement = Selector(".sl-table__detail-button").fil
 export const tableRulesSelector = Selector(".sl-table tbody .sl-table__row:not(.st-table__row--detail)").filterVisible();
 
 export function getTabbedMenuItemByText(text: "Designer" | "Preview" | "Logic" | "Translation" | "JSON Editor" | "Embed Survey" | "Miner Logik" | "Themes") {
-  return Selector(".svc-tabbed-menu-item-container .svc-tabbed-menu-item__text").withText(text).filterVisible();
+  return Selector(".svc-tabbed-menu-item-container .svc-tabbed-menu-item__text, .svc-tabbed-menu-item-container title").withText(text).filterVisible().parent();
 }
 export function getSelectOptionByText(text: string) {
   return Selector("option").withExactText(text).filterVisible();

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

@@ -1463,14 +1463,8 @@ export class SurveyCreatorModel extends Base
   get allowChangeThemeInPreview() { return this.previewAllowSelectTheme; }
   set allowChangeThemeInPreview(val) { this.previewAllowSelectTheme = val; }
 
-  private _tabResponsivenessMode: "menu" | "icons" = "icons";
-  public get tabResponsivenessMode(): "menu" | "icons" {
-    return this._tabResponsivenessMode;
-  }
-  public set tabResponsivenessMode(val: "menu" | "icons") {
-    this._tabResponsivenessMode = val;
-    this.tabbedMenu.updateResponsivenessMode();
-  }
+  public get tabResponsivenessMode(): string { return ""; }
+  public set tabResponsivenessMode(val: string) {}
   public tabbedMenu: TabbedMenuContainer;
 
   get tabs() {

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

@@ -1,6 +1,9 @@
 import { SurveyCreatorModel } from "./creator-base";
 import "./responsivity.scss";
+import { TabbedMenuMode } from "./tabbed-menu";
 import { DomWindowHelper } from "./utils/global_variables_utils";
+
+interface IProcessOptions { toolboxIsCompact: boolean, toolboxVisible: boolean, flyoutSidebar: boolean, narrowSidebar: boolean, tabbedMenuIsCompact: boolean }
 export class CreatorResponsivityManager {
   private resizeObserver: ResizeObserver = undefined;
   private currentWidth;
@@ -63,23 +66,25 @@ export class CreatorResponsivityManager {
     }
   }
 
-  private _process(toolboxIsCompact: boolean, toolboxVisible: boolean, flyoutSidebar: boolean, narrowSidebar: boolean) {
-    this.creator.updateToolboxIsCompact(toolboxIsCompact);
-    this.procesShowToolbox(toolboxVisible);
-    this.procesShowPageNavigator(toolboxVisible);
-    this.procesShowSurfaceToolbar(toolboxVisible);
+  private _process(options: IProcessOptions) {
+    this.creator.updateToolboxIsCompact(options.toolboxIsCompact);
+    this.procesShowToolbox(options.toolboxVisible);
+    this.procesShowPageNavigator(options.toolboxVisible);
+    this.procesShowSurfaceToolbar(options.toolboxVisible);
 
-    if (this.creator.sidebar.visible && !flyoutSidebar) {
+    if (this.creator.sidebar.visible && !options.flyoutSidebar) {
       this.creator.sidebar.collapsedManually = false;
     }
-    if (this.creator.sidebar.visible && !this.creator.sidebar.expandedManually && flyoutSidebar && this.creator.toolboxLocation != "right") {
+    if (this.creator.sidebar.visible && !this.creator.sidebar.expandedManually && options.flyoutSidebar && this.creator.toolboxLocation != "right") {
       this.creator.sidebar.collapseSidebar();
     }
-    if (!this.creator.sidebar.visible && !this.creator.sidebar.collapsedManually && !flyoutSidebar && this.creator.toolboxLocation != "right") {
+    if (!this.creator.sidebar.visible && !this.creator.sidebar.collapsedManually && !options.flyoutSidebar && this.creator.toolboxLocation != "right") {
       this.creator.sidebar.expandSidebar();
     }
-    this.creator.sidebar.flyoutMode = flyoutSidebar;
-    this.creator.sidebar.narrowMode = narrowSidebar;
+    this.creator.sidebar.flyoutMode = options.flyoutSidebar;
+    this.creator.sidebar.narrowMode = options.narrowSidebar;
+
+    this.creator.tabbedMenu.setMode(options.tabbedMenuIsCompact ? TabbedMenuMode.Icons : TabbedMenuMode.Titles);
   }
   public process(isFirst: boolean = false) {
     if (isFirst) {
@@ -89,13 +94,13 @@ export class CreatorResponsivityManager {
     this.updateSurveyActualWidth();
     this.currentWidth = this.getScreenWidth();
     if (this.currentWidth === "xl" || this.currentWidth === "xxl") {
-      this._process(false, true, false, false);
+      this._process({ toolboxIsCompact: false, toolboxVisible: true, flyoutSidebar: false, narrowSidebar: false, tabbedMenuIsCompact: false });
     } else if (this.currentWidth === "l") {
-      this._process(true, true, false, true);
+      this._process({ toolboxIsCompact: true, toolboxVisible: true, flyoutSidebar: false, narrowSidebar: true, tabbedMenuIsCompact: false });
     } else if (this.currentWidth === "m") {
-      this._process(true, true, true, false);
+      this._process({ toolboxIsCompact: true, toolboxVisible: true, flyoutSidebar: true, narrowSidebar: false, tabbedMenuIsCompact: false });
     } else {
-      this._process(true, false, true, false);
+      this._process({ toolboxIsCompact: true, toolboxVisible: false, flyoutSidebar: true, narrowSidebar: false, tabbedMenuIsCompact: true });
     }
 
     if (this.currentWidth == "xs") {

packages/survey-creator-core/src/tabbed-menu.ts

@@ -9,6 +9,8 @@ export interface ITabbedMenuItem extends IAction {
 }
 
 export class TabbedMenuItem extends Action implements ITabbedMenuItem {
+  @property({ defaultValue: false }) showIcon: boolean;
+  @property({ defaultValue: true }) showTitle: boolean;
   constructor(item: ITabbedMenuItem) {
     super(item);
     this.enabled = true;
@@ -31,19 +33,28 @@ export class TabbedMenuItem extends Action implements ITabbedMenuItem {
   getIconCss(): string {
     return new CssClassBuilder().append("svc-tabbed-menu-item__icon").toString();
   }
+  public get canShrink() {
+    return !!this.hasIcon;
+  }
   public get hasTitle(): boolean {
-    return !this.hasIcon;
+    return this.showTitle && !!this.title;
   }
   public get hasIcon(): boolean {
-    return !this.disableShrink && this.iconName && this.mode == "small";
+    return this.showIcon && !!this.iconName;
   }
   public doAction(): boolean {
     if (!this.enabled) return false;
     this.action();
     return true;
   }
 }
+
+export enum TabbedMenuMode {
+  Icons = 1,
+  Titles = 2
+}
 export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem> {
+  private currentMode: TabbedMenuMode = TabbedMenuMode.Titles;
   constructor(private creator: CreatorBase) {
     super();
     this.dotsItem.popupModel.horizontalPosition = "center";
@@ -76,17 +87,18 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
       active: this.creator.viewType === name,
       disableHide: this.creator.viewType === name
     });
-    tab.disableShrink = this.creator.tabResponsivenessMode == "menu";
     if (index !== undefined && index >= 0 && index < this.actions.length) {
       this.actions.splice(index, 0, tab);
     } else {
       this.actions.push(tab);
     }
   }
-  public updateResponsivenessMode() {
-    this.actions.forEach((tab) => {
-      tab.disableShrink = this.creator.tabResponsivenessMode == "menu";
-    });
-    this.raiseUpdate({ updateResponsivenessMode: UpdateResponsivenessMode.Hard });
+  public setMode(mode: TabbedMenuMode) {
+    if (mode !== this.currentMode) {
+      this.actions.forEach(a => a.showIcon = !!(mode & TabbedMenuMode.Icons));
+      this.actions.forEach(a => a.showTitle = !!(mode & TabbedMenuMode.Titles));
+      this.raiseUpdate({ updateResponsivenessMode: UpdateResponsivenessMode.Hard });
+    }
+    this.currentMode = mode;
   }
 }

packages/survey-creator-core/tests/creator-base-2.tests.ts

@@ -58,6 +58,7 @@ import { TabDesignerViewModel } from "../src/components/tabs/designer";
 import { ConfigureTablePropertyEditorEvent } from "../src/creator-events-api";
 import { IQuestionToolboxItem } from "../src/toolbox";
 import { ThemeTabPlugin } from "../src/components/tabs/theme-plugin";
+import { TabbedMenuMode } from "../src/tabbed-menu";
 
 export * from "../src/localization/french";
 
@@ -179,20 +180,14 @@ test("creator.onSurveyInstanceSetupHandlers event", () => {
 
 test("check tabResponsivenessMode property", () => {
   const creator = new CreatorTester();
-  creator.tabResponsivenessMode = "menu";
-  expect(creator.tabbedMenu.actions.every((action) => action.disableShrink)).toBeTruthy();
-
-  creator.tabResponsivenessMode = "icons";
-  expect(creator.tabbedMenu.actions.every((action) => !action.disableShrink)).toBeTruthy();
-  const firstTab = creator.tabbedMenu.actions[0];
-  expect(firstTab.hasTitle).toBeTruthy();
-  expect(firstTab.hasIcon).toBeFalsy();
-  firstTab.mode = "small";
-  expect(firstTab.hasTitle).toBeFalsy();
-  expect(firstTab.hasIcon).toBeTruthy();
-
-  creator.tabResponsivenessMode = "menu";
-  expect(creator.tabbedMenu.actions.every((action) => action.disableShrink)).toBeTruthy();
+  expect(creator.tabbedMenu.actions.every((action) => action.hasTitle)).toBeTruthy();
+  expect(creator.tabbedMenu.actions.every((action) => !action.hasIcon)).toBeTruthy();
+  creator.tabbedMenu.setMode(TabbedMenuMode.Icons);
+  expect(creator.tabbedMenu.actions.every((action) => !action.hasTitle)).toBeTruthy();
+  expect(creator.tabbedMenu.actions.every((action) => action.hasIcon)).toBeTruthy();
+  creator.tabbedMenu.setMode(TabbedMenuMode.Titles);
+  expect(creator.tabbedMenu.actions.every((action) => action.hasTitle)).toBeTruthy();
+  expect(creator.tabbedMenu.actions.every((action) => !action.hasIcon)).toBeTruthy();
 });
 
 test("onModified options, on adding page and on copying page", () => {

packages/survey-creator-react/src/TabbedMenu.tsx

@@ -61,6 +61,7 @@ class TabbedMenuItemWrapper extends SurveyElementBase<
   constructor(props) {
     super(props);
     this.ref = React.createRef();
+    this.state = { changed: 0 };
   }
 
   private get item(): TabbedMenuItem {
@@ -94,13 +95,20 @@ class TabbedMenuItemWrapper extends SurveyElementBase<
   componentDidMount(): void {
     super.componentDidMount();
     this.item.updateModeCallback = (mode, callback) => {
+      const update = () => {
+        if (this.item.mode == mode) {
+          this.setState({ changed: this.state.changed + 1 });
+        } else {
+          this.item.mode = mode;
+        }
+      };
       queueMicrotask(() => {
         if ((ReactDOM as any)["flushSync"]) {
           (ReactDOM as any)["flushSync"](() => {
-            this.item.mode = mode;
+            update();
           });
         } else {
-          this.item.mode = mode;
+          update();
         }
         queueMicrotask(() => {
           callback(mode, this.ref.current);

screenshotTests/helper.ts

@@ -120,7 +120,7 @@ export const themeSettingsButtonSelector = (page) => page.locator(".sv-action-ba
 // export const tableRulesSelector = Selector(".sl-table tbody .sl-table__row:not(.st-table__row--detail)");
 
 export function getTabbedMenuItemByText(page: Page, text: "Designer" | "Preview" | "Logic" | "Translation" | "JSON Editor" | "Embed Survey" | "Miner Logik" | "Themes"): Locator {
-  return page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item__text").getByText(text);
+  return page.locator(".svc-tabbed-menu-item-container .svc-tabbed-menu-item__text").getByText(text).or(page.locator(".svc-tabbed-menu-item-container").filter({ has: page.locator("title").getByText(text) }));
 }
 export function getSelectOptionByText(page, text: string) {
   return page.locator("option").withExactText(text);