resolve #4362 Theme Builder: Hide irrelevant settings (#4629)

Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Sep 20, 2023 · 27f905e · 27f905e
1 parent 3bbf77b
commit 27f905e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/theme-builder.ts b/packages/survey-creator-core/src/components/tabs/theme-builder.ts
@@ -254,6 +254,7 @@ export class ThemeBuilder extends Base {
     try {
       this.setJSON(json, this.startThemeClasses);
       this.updatePageList();
+      this.updatePropertyGridEditorsAvailability();
 
       if (options.showPagesInTestSurveyTab !== undefined) {
         this.showPagesInTestSurveyTab = options.showPagesInTestSurveyTab;
@@ -516,29 +517,35 @@ export class ThemeBuilder extends Base {
       this.themeEditorSurvey.setValue("themeMode", this.themeMode);
       this.themeEditorSurvey.setValue("themePalette", this.themePalette);
       this.updatePropertyGridEditors(this.themeEditorSurvey);
-      this.updatePropertyGridEditorsAvailability(this.themeEditorSurvey);
+      this.updatePropertyGridEditorsAvailability();
     }
     finally {
       this.blockChanges = false;
     }
   }
 
-  private updatePropertyGridEditorsAvailability(themeEditorSurvey: SurveyModel) {
+  private updatePropertyGridEditorsAvailability() {
     const isCustomTheme = PredefinedThemes.indexOf(this.themeName) === -1;
-    themeEditorSurvey.getQuestionByName("themeMode").readOnly = isCustomTheme;
-    themeEditorSurvey.getQuestionByName("themePalette").readOnly = isCustomTheme;
+    this.themeEditorSurvey.getQuestionByName("themeMode").readOnly = isCustomTheme;
+    this.themeEditorSurvey.getQuestionByName("themePalette").readOnly = isCustomTheme;
 
     let canModify = !this.surveyProvider.readOnly;
     const options = {
       theme: this.currentTheme,
       canModify
     };
     this.onCanModifyTheme.fire(this, options);
-    themeEditorSurvey.getAllQuestions().forEach(q => {
+    this.themeEditorSurvey.getAllQuestions().forEach(q => {
       if (["themeName", "themePalette", "themeMode"].indexOf(q.name) === -1) {
         q.readOnly = !options.canModify;
       }
     });
+
+    if(!!this.survey) {
+      this.themeEditorSurvey.getQuestionByName("surveyTitle").readOnly = !this.survey.hasTitle;
+      this.themeEditorSurvey.getQuestionByName("pageTitle").readOnly = !this.survey.pages.some(p => !!p.title);
+      this.themeEditorSurvey.getQuestionByName("pageDescription").readOnly = !this.survey.pages.some(p => !!p.description);
+    }
   }
 
   private updatePropertyGridEditors(themeEditorSurvey: SurveyModel) {

diff --git a/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts b/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts
@@ -1365,4 +1365,21 @@ test("themeMode is switching to panelless and back", (): any => {
   themeBuilder.loadTheme({ isPanelless: false });
   expect(themeChooser.value).toBe("default");
   expect(themeMode.value).toBe("panels");
+});
+
+test("disable irrelevant settings", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+
+  themePlugin.activate();
+  const themeBuilder = themePlugin.model as ThemeBuilder;
+  const themeEditorSurvey = themeBuilder.themeEditorSurvey;
+  const surveyTitle = themeEditorSurvey.getQuestionByName("surveyTitle");
+  const pageTitle = themeEditorSurvey.getQuestionByName("pageTitle");
+  const pageDescription = themeEditorSurvey.getQuestionByName("pageDescription");
+
+  expect(surveyTitle.isReadOnly).toBeTruthy();
+  expect(pageTitle.isReadOnly).toBeTruthy();
+  expect(pageDescription.isReadOnly).toBeTruthy();
 });