Create a Toggle for Creator Settings

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();
+      }
     }
   }
 

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) {

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,13 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   private setupPropertyGridTabActions() {
     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;
+      });
+    };
     this.propertyGridTab.deactivateCallback = () => {
       pgTabs.forEach(tab => tab.active = false);
     };

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");
 });