Work for https://github.com/surveyjs/private-tasks/issues/453 - urvey…

…js.io - Wrong icon version - Passed icon name to addTab method
surveyjs · Feb 12, 2025 · 29f798d · 29f798d
1 parent 1735789
commit 29f798d
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 23 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -201,7 +201,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("designer", this);
+    creator.addPluginTab("designer", this, undefined, "icon-config");
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.propertyGrid = new PropertyGridModel(undefined, creator, creator.getPropertyGridDefinition());
     this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid;
@@ -287,7 +287,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       });
       this.propertyGrid.survey.onPageVisibleChanged.add((sender: SurveyModel, options: PageVisibleChangedEvent) => {
         const action = this.tabControlModel.topToolbar.getActionById(options.page.name);
-        if(!!action) {
+        if (!!action) {
           action.visible = options.page.isVisible;
         }
       });

diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts b/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts
@@ -113,7 +113,7 @@ export class TabJsonEditorAcePlugin
   implements ICreatorPlugin {
   constructor(creator: SurveyCreatorModel) {
     super(creator);
-    creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-ace");
+    creator.addPluginTab("json", this, undefined, "icon-codeeditor-24x24", "svc-tab-json-editor-ace");
   }
   protected createModel(
     creator: SurveyCreatorModel

diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts
@@ -89,7 +89,7 @@ export class TabJsonEditorTextareaPlugin
   implements ICreatorPlugin {
   constructor(creator: SurveyCreatorModel) {
     super(creator);
-    creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-textarea");
+    creator.addPluginTab("json", this, undefined, "icon-codeeditor-24x24", "svc-tab-json-editor-textarea");
   }
   protected createModel(
     creator: SurveyCreatorModel

diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
@@ -13,7 +13,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
   private fastEntryAction: Action;
   public model: SurveyLogicUI;
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("logic", this);
+    creator.addPluginTab("logic", this, undefined, "icon-logic-24x24");
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }
   public activate(): void {

diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -89,7 +89,7 @@ export class TabTestPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("preview", this);
+    creator.addPluginTab("preview", this, undefined, "icon-preview");
     this.setPreviewTheme(this.creator.previewTheme);
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }

diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -244,7 +244,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("theme", this);
+    creator.addPluginTab("theme", this, undefined, "icon-theme");
     this.simulatorCssClasses = surveyCss[defaultThemeName];
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.createActions().forEach(action => creator.toolbar.actions.push(action));

diff --git a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts
@@ -40,7 +40,7 @@ export class TabTranslationPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("translation", this);
+    creator.addPluginTab("translation", this, undefined, "icon-language");
     this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid;
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.sidebarTab = this.creator.sidebar.addPage("translation");

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -467,17 +467,19 @@ export class SurveyCreatorModel extends Base
    * @param name A unique tab ID. 
    * @param plugin An object that allows you to handle user interactions with the tab.
    * @param title A tab caption. If `title` is undefined, the `name` argument value is displayed instead. To localize the caption, add its translations to the `ed` object within [localization dictionaries](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization) and pass `ed.propertyName` as the `title` argument.
+   * @param iconName A tab icon. If `iconName` is undefined, the default icon is displayed.
    * @param componentName The name of the component that renders tab markup. Default value: `"svc-tab-" + name`.
    * @param index A zero-based index that specifies the tab's position relative to other tabs.
    */
   public addPluginTab(
     name: string,
     plugin: ICreatorPlugin,
     title?: string,
+    iconName?: string,
     componentName?: string,
     index?: number
   ) {
-    this.tabbedMenu.addTab(name, plugin, title, componentName, index);
+    this.tabbedMenu.addTab(name, plugin, title, iconName, componentName, index);
     this.addPlugin(name, plugin);
   }
   public addPlugin(name: string, plugin: ICreatorPlugin): void {

diff --git a/packages/survey-creator-core/src/creator-settings.ts b/packages/survey-creator-core/src/creator-settings.ts
@@ -1,4 +1,5 @@
-import { Base, IAction, ItemValue,
+import {
+  Base, IAction, ItemValue,
   JsonObjectProperty, MatrixDropdownColumn, Question,
   SurveyModel, ILocalizableString, PopupBaseViewModel, SurveyElement
 } from "survey-core";
@@ -202,7 +203,6 @@ export interface ICreatorPlugin {
   dispose?: () => void;
   onDesignerSurveyPropertyChanged?: (obj: Base, propName: string) => void;
   model: Base;
-  showOneCategoryInPropertyGrid?: boolean;
 }
 
 export interface ISurveyCreatorOptions {

diff --git a/packages/survey-creator-core/src/tabbed-menu.ts b/packages/survey-creator-core/src/tabbed-menu.ts
@@ -8,17 +8,6 @@ export interface ITabbedMenuItem extends IAction {
   renderTab?: () => any;
 }
 
-const tabsIcons = {
-  designer: "icon-config",
-  theme: "icon-theme",
-  json: "icon-codeeditor-24x24",
-  translation: "icon-language",
-  preview: "icon-preview",
-  logic: "icon-logic-24x24",
-  customembeded: "icon-embedsurvey-24x24",
-  default: "icon-undefined-24x24"
-};
-
 export class TabbedMenuItem extends Action implements ITabbedMenuItem {
   constructor(item: ITabbedMenuItem) {
     super(item);
@@ -59,6 +48,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
   public addTab(name: string,
     plugin: ICreatorPlugin,
     title?: string,
+    iconName?: string,
     componentName?: string,
     index?: number) {
     const tabName = name === "test" ? "preview" : name;
@@ -69,7 +59,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
       title: title,
       componentContent: componentName ? componentName : "svc-tab-" + name,
       data: plugin,
-      iconName: tabsIcons[tabName] || tabsIcons["default"],
+      iconName: iconName || "icon-undefined-24x24",
       action: () => { this.creator.switchTab(name); },
       active: this.creator.viewType === name,
       disableHide: this.creator.viewType === name