Disable zoom in icon until a user zooms out.

functionalTests/helper.ts

@@ -210,6 +210,11 @@ export async function setExpandCollapseButtonVisibility(newVal: string) {
     window["creator"].expandCollapseButtonVisibility = newVal;
   })(newVal);
 }
+export async function setAllowZoom(newVal: boolean) {
+  await ClientFunction((newVal) => {
+    window["creator"].allowZoom = newVal;
+  })(newVal);
+}
 
 export const explicitErrorHandler = ClientFunction(() => {
   window.addEventListener("error", e => {

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

@@ -54,6 +54,16 @@ svc-page-navigator,
   }
 }
 
+.svc-page-navigator__button:disabled {
+  opacity: var(--ctr-page-navigator-button-icon-opacity-disabled, 0.25);
+  background-color: transparent;
+  cursor: default;
+
+  use {
+    fill: var(--ctr-page-navigator-button-icon-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
+  }
+}
+
 .svc-page-navigator__button--pressed,
 .svc-page-navigator__button:active {
   .svc-page-navigator__button-icon {

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

@@ -17,7 +17,6 @@ export class TabDesignerViewModel extends Base {
   private stepSurfaceScaling = 10;
   private cssUpdater: ComputedUpdater;
   private pagesControllerValue: PagesController;
-  public surfaceScale = 100;
 
   unitDictionary: { [index: string]: number } = {
     "--ctr-surface-base-unit": 8,
@@ -38,6 +37,7 @@ export class TabDesignerViewModel extends Base {
       objectInstance.updateSurveyScaleStartDimensions();
     },
   }) showPlaceholder: boolean;
+  @property() surfaceScale = 100;
   public scaleCssVariables: { [index: string]: string } = {};
   public creator: SurveyCreatorModel;
 
@@ -135,6 +135,7 @@ export class TabDesignerViewModel extends Base {
       locTooltipName: "ed.zoomInTooltip",
       iconName: "icon-zoomin-24x24",
       iconSize: "auto",
+      enabled: new ComputedUpdater<boolean>(() => this.surfaceScale < this.maxSurfaceScaling),
       visible: new ComputedUpdater<boolean>(() => this.creator.allowZoom),
       action: () => { this.scaleSurface(this.surfaceScale + this.stepSurfaceScaling); }
     });
@@ -151,6 +152,7 @@ export class TabDesignerViewModel extends Base {
       locTooltipName: "ed.zoomOutTooltip",
       iconName: "icon-zoomout-24x24",
       iconSize: "auto",
+      enabled: new ComputedUpdater<boolean>(() => this.surfaceScale > this.minSurfaceScaling),
       visible: new ComputedUpdater<boolean>(() => this.creator.allowZoom),
       action: () => {
         this.scaleSurface(this.surfaceScale - this.stepSurfaceScaling);

visualRegressionTests/tests/designer/surface.ts

@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setAllowEditSurveyTitle, setShowAddQuestionButton, setExpandCollapseButtonVisibility, setShowToolbox, setShowSidebar, getSurveyListItemByText, upArrowImageLink } from "../../helper";
+import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setAllowEditSurveyTitle, setShowAddQuestionButton, setExpandCollapseButtonVisibility, setShowToolbox, setShowSidebar, getSurveyListItemByText, upArrowImageLink, setAllowZoom } from "../../helper";
 
 const title = "Designer surface";
 
@@ -2476,6 +2476,10 @@ test("Collapse all and expand all toolbar", async (t) => {
     await t.click("#lockQuestions");
     await t.hover("#collapseAll");
     await takeElementScreenshot("design-surface-toolbar.png", Selector(".svc-tab-designer"), t, comparer);
+
+    await setAllowZoom(true);
+    await t.hover("#zoom100");
+    await takeElementScreenshot("design-surface-toolbar-with-zoom.png", Selector(".svc-tab-designer__surface-toolbar"), t, comparer);
   });
 });