diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts index 4453a45bac..c5f4050888 100644 --- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts @@ -5,7 +5,7 @@ import { ThemeBuilder } from "./theme-builder"; import { SidebarTabModel } from "../side-bar/side-bar-tab-model"; import { settings } from "../../creator-settings"; import { PredefinedThemes, Themes, findSuitableTheme, getThemeFullName } from "./themes"; -import { saveToFileHandler } from "../../utils/utils"; +import { notShortCircuitAnd, saveToFileHandler } from "../../utils/utils"; function getObjectDiffs(obj1: any, obj2: any = {}): any { const result: any = {}; @@ -29,6 +29,7 @@ export class ThemeTabPlugin implements ICreatorPlugin { private prevPageAction: Action; private nextPageAction: Action; private themeSettingsAction: Action; + private saveThemeAction: Action; private resetTheme: Action; private importAction: Action; private exportAction: Action; @@ -114,9 +115,11 @@ export class ThemeTabPlugin implements ICreatorPlugin { } }); this.model.onThemeSelected.add((sender, options) => { + this.saveThemeAction.enabled = true; this.onThemeSelected.fire(this, options); }); this.model.onThemeModified.add((sender, options) => { + this.saveThemeAction.enabled = true; this.onThemeModified.fire(this, options); }); this.model.onCanModifyTheme.add((sender, options) => { @@ -225,6 +228,24 @@ export class ThemeTabPlugin implements ICreatorPlugin { items.push(this.undoAction); items.push(this.redoAction); + this.saveThemeAction = new Action({ + id: "svd-save", + iconName: "icon-save", + action: () => { + this.creator.doSaveTheme(); + this.saveThemeAction.enabled = false; + }, + active: false, + enabled: false, + visible: new ComputedUpdater(() => { + return notShortCircuitAnd(this.creator.activeTab === "theme", this.creator.showSaveButton); + }), + locTitleName: "ed.saveTheme", + locTooltipName: "ed.saveThemeTooltip", + showTitle: false + }); + items.push(this.saveThemeAction); + this.resetTheme = new Action({ id: "resetTheme", iconName: "icon-reset", diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts index 7dbe4f91bd..c7dfd672be 100644 --- a/packages/survey-creator-core/src/localization/english.ts +++ b/packages/survey-creator-core/src/localization/english.ts @@ -86,6 +86,8 @@ export var enStrings = { translation: "Translation", saveSurvey: "Save Survey", saveSurveyTooltip: "Save Survey", + saveTheme: "Save Theme", + saveThemeTooltip: "Save Theme", designer: "Designer", jsonEditor: "JSON Editor", jsonHideErrors: "Hide errors", diff --git a/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts b/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts index 98b7b72251..256d4bfa56 100644 --- a/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts +++ b/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts @@ -2392,3 +2392,32 @@ test("Check Theme builder's custom questions respect creator locale", (): any => expect(themeEditor.getQuestionByName("editorFont").contentPanel.getQuestionByName("family").title).toBe("fontFamily_test"); editorLocalization.currentLocale = "en"; }); +test("saveTheme action", (): any => { + const creator: CreatorTester = new CreatorTester({ showThemeTab: true }); + let saveCount = 0; + creator.saveSurveyFunc = () => { + saveCount++; + }; + let saveThemeCount = 0; + creator.saveThemeFunc = (saveNo, callback) => { + saveThemeCount++; + callback(saveNo, "success"); + }; + creator.JSON = { questions: [{ type: "text", name: "q1" }] }; + const themePlugin: ThemeTabPlugin = creator.getPlugin("theme"); + expect(saveCount).toBe(0); + expect(saveThemeCount).toBe(0); + expect(themePlugin["saveThemeAction"].visible).toBeFalsy(); + expect(themePlugin["saveThemeAction"].enabled).toBeFalsy(); + creator.activeTab = "theme"; + expect(themePlugin["saveThemeAction"].visible).toBeTruthy(); + expect(themePlugin["saveThemeAction"].enabled).toBeFalsy(); + const themeSurveyTab = themePlugin.model as ThemeBuilder; + const themeEditor = themeSurveyTab.themeEditorSurvey; + themeEditor.getQuestionByName("--sjs-primary-backcolor").value = "some val"; + expect(themePlugin["saveThemeAction"].enabled).toBeTruthy(); + themePlugin["saveThemeAction"].action(); + expect(themePlugin["saveThemeAction"].enabled).toBeFalsy(); + expect(saveCount).toBe(0); + expect(saveThemeCount).toBe(1); +}); \ No newline at end of file