From 4adf3b1ebee30f885fe395d5708706f70b56e154 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Wed, 5 Feb 2025 15:21:13 +0300 Subject: [PATCH 1/2] resolve #6514 Create a Toggle for Creator Settings --- .../src/components/side-bar/side-bar-model.ts | 3 +++ .../side-bar/side-bar-page-model.ts | 1 + .../src/components/tabs/designer-plugin.ts | 17 ++++++++++++-- .../tests/side-bar.test.ts | 23 +++++++++++++++++++ 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts index 7a2cb56d6e..9e9030c79a 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts +++ b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts @@ -198,6 +198,9 @@ export class SidebarModel extends Base { if (this._activePage) { this.header.title = this._activePage.caption; this._activePage.visible = true; + if(!!this._activePage.activateCallback) { + this._activePage.activateCallback(); + } } } diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts index 103cf2d615..fe7734bd67 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts +++ b/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts @@ -11,6 +11,7 @@ export class SidebarPageModel extends Base { @property() componentData: any; @property() componentName: string; + activateCallback: () => void; deactivateCallback: () => void; constructor(public id: string, public sidePanel: SidebarModel, componentName?: string, componentData?: any) { diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts index a77bf5e7e9..20610c0f51 100644 --- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts @@ -158,6 +158,9 @@ export class TabDesignerPlugin implements ICreatorPlugin { themePropertyGridViewModel.searchEnabled = false; this.themePropertyGridTab = this.creator.sidebar.addPage("creatorTheme", "svc-property-grid", themePropertyGridViewModel); this.themePropertyGridTab.caption = editorLocalization.getString("ed.creatorSettingTitle"); + this.themePropertyGridTab.activateCallback = () => { + settingsAction.active = true; + }; this.themePropertyGridTab.deactivateCallback = () => { settingsAction.active = false; }; @@ -172,6 +175,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { this.creator.onCreatorThemePropertyChanged.fire(this.creator, options); }); + let prevActivePage; const settingsAction = new MenuButton({ id: "theme-settings", locTooltipName: "ed.creatorSettingTitle", @@ -180,8 +184,12 @@ export class TabDesignerPlugin implements ICreatorPlugin { pressed: false, action: () => { this.creator.sidebar.expandSidebar(); - this.setActivePage(this.themePropertyGridTab.id); - settingsAction.active = true; + if (settingsAction.active) { + this.setActivePage(prevActivePage || this.propertyGridTab.id); + } else { + prevActivePage = this.creator.sidebar.activePage; + this.setActivePage(this.themePropertyGridTab.id); + } } }); this.tabControlModel.bottomToolbar.setItems([settingsAction]); @@ -284,6 +292,11 @@ export class TabDesignerPlugin implements ICreatorPlugin { private setupPropertyGridTabActions() { const pgTabs = this.getPropertyGridTabActions(); this.tabControlModel.topToolbar.setItems(pgTabs); + this.propertyGridTab.activateCallback = () => { + pgTabs.forEach(action => { + action.active = action.id === this.propertyGrid.survey.currentPage.name; + }); + }; this.propertyGridTab.deactivateCallback = () => { pgTabs.forEach(tab => tab.active = false); }; diff --git a/packages/survey-creator-core/tests/side-bar.test.ts b/packages/survey-creator-core/tests/side-bar.test.ts index 31d0925ea5..2cd4427f7f 100644 --- a/packages/survey-creator-core/tests/side-bar.test.ts +++ b/packages/survey-creator-core/tests/side-bar.test.ts @@ -206,4 +206,27 @@ test("showOneCategoryInPropertyGrid: switch designer tab and update subTitle", ( expect(creator.sidebar.header.title).toEqual("Survey Settings"); expect(creator.sidebar.header.subTitle).toEqual(""); creatorSetting.defaultNewSurveyJSON = savedNewJSON; +}); + +test("Toggle for Creator Settings", () => { + const creator = new CreatorTester(); + creator.JSON = { pages: [{ name: "page1" }] }; + const designerPlugin = creator.getPlugin("designer") as TabDesignerPlugin; + expect(creator.sidebar.activePage).toEqual("propertyGrid"); + + const tabs = designerPlugin["tabControlModel"].topToolbar.actions; + const creatorSettingAction = designerPlugin["tabControlModel"].bottomToolbar.actions[0]; + expect(tabs[0].active).toBe(true); + expect(!!creatorSettingAction.active).toBe(false); + expect(creator.sidebar.activePage).toEqual("propertyGrid"); + + creatorSettingAction.action(); + expect(tabs[0].active).toBe(false); + expect(creatorSettingAction.active).toBe(true); + expect(creator.sidebar.activePage).toEqual("creatorTheme"); + + creatorSettingAction.action(); + expect(tabs[0].active).toBe(true); + expect(creatorSettingAction.active).toBe(false); + expect(creator.sidebar.activePage).toEqual("propertyGrid"); }); \ No newline at end of file From efd11aa89af5a95fbbb7c163629bfdd567103592 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Wed, 5 Feb 2025 18:11:25 +0300 Subject: [PATCH 2/2] work for #6514 Create a Toggle for Creator Settings --- .../survey-creator-core/src/components/tabs/designer-plugin.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts index 20610c0f51..f753c992ff 100644 --- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts @@ -293,6 +293,8 @@ export class TabDesignerPlugin implements ICreatorPlugin { const pgTabs = this.getPropertyGridTabActions(); this.tabControlModel.topToolbar.setItems(pgTabs); this.propertyGridTab.activateCallback = () => { + if (!this.propertyGrid.survey.currentPage) return; + pgTabs.forEach(action => { action.active = action.id === this.propertyGrid.survey.currentPage.name; });