From 0c92cee131253f900731e683b596f76707cf084c Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Fri, 31 Jan 2025 16:31:28 +0300 Subject: [PATCH] resolved #6486 Disable zoom in icon until a user zooms out. --- functionalTests/helper.ts | 5 +++++ .../page-navigator/page-navigator.scss | 10 ++++++++++ .../src/components/tabs/designer.ts | 4 +++- .../etalons/design-surface-toolbar-with-zoom.png | Bin 0 -> 5161 bytes .../etalons/design-surface-toolbar-with-zoom.png | Bin 0 -> 4620 bytes visualRegressionTests/tests/designer/surface.ts | 6 +++++- 6 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 visualRegressionTests-V2/tests/designer/etalons/design-surface-toolbar-with-zoom.png create mode 100644 visualRegressionTests/tests/designer/etalons/design-surface-toolbar-with-zoom.png diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts index 78a2f5d2d3..83898b68d8 100644 --- a/functionalTests/helper.ts +++ b/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 => { 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 index c7131f4f02..56d3448bd7 100644 --- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss +++ b/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 { diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts index 769cf83030..09072ab63d 100644 --- a/packages/survey-creator-core/src/components/tabs/designer.ts +++ b/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(() => this.surfaceScale < this.maxSurfaceScaling), visible: new ComputedUpdater(() => 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(() => this.surfaceScale > this.minSurfaceScaling), visible: new ComputedUpdater(() => this.creator.allowZoom), action: () => { this.scaleSurface(this.surfaceScale - this.stepSurfaceScaling); diff --git a/visualRegressionTests-V2/tests/designer/etalons/design-surface-toolbar-with-zoom.png b/visualRegressionTests-V2/tests/designer/etalons/design-surface-toolbar-with-zoom.png new file mode 100644 index 0000000000000000000000000000000000000000..e842953ae87210fc4df8fd329d8c9ce0d5a1af84 GIT binary patch literal 5161 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 literal 0 HcmV?d00001 diff --git a/visualRegressionTests/tests/designer/etalons/design-surface-toolbar-with-zoom.png b/visualRegressionTests/tests/designer/etalons/design-surface-toolbar-with-zoom.png new file mode 100644 index 0000000000000000000000000000000000000000..47f596255fd9687ea99aee7522d04e0ebfd4c7e8 GIT binary patch literal 4620 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 Ugvch~_YQ%EiVpmPl1 { 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); }); });