From 94fc2347298b797ca8a159d3497eb7227839c2b3 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Mon, 9 Oct 2023 12:58:18 +0300 Subject: [PATCH] resolve #4666 Theme builder: reorganization Property Grid --- .../src/components/tabs/theme-builder.ts | 346 ++++++++++-------- .../src/localization/english.ts | 3 + .../tests/tabs/theme-builder.tests.ts | 8 +- 3 files changed, 199 insertions(+), 158 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 index e6e30c75ef..25e53b6beb 100644 --- a/packages/survey-creator-core/src/components/tabs/theme-builder.ts +++ b/packages/survey-creator-core/src/components/tabs/theme-builder.ts @@ -1,5 +1,5 @@ import { SurveySimulatorModel } from "../simulator"; -import { surveyLocalization, Base, propertyArray, property, PageModel, SurveyModel, Action, IAction, ActionContainer, ComputedUpdater, defaultV2Css, createDropdownActionModel, ComponentCollection, ITheme, ItemValue, ImageFit, ImageAttachment, QuestionDropdownModel, ValueChangingEvent, ValueChangedEvent, EventBase, Cover, Serializer } from "survey-core"; +import { surveyLocalization, Base, propertyArray, property, PageModel, SurveyModel, Action, IAction, ActionContainer, ComputedUpdater, defaultV2Css, createDropdownActionModel, ComponentCollection, ITheme, ItemValue, ImageFit, ImageAttachment, QuestionDropdownModel, ValueChangingEvent, ValueChangedEvent, EventBase, Cover, Serializer, Question } from "survey-core"; import { CreatorBase } from "../../creator-base"; import { editorLocalization, getLocString } from "../../editorLocalization"; import { setSurveyJSONForPropertyGrid } from "../../property-grid"; @@ -624,6 +624,9 @@ export class ThemeBuilder extends Base { if (!!headerSettings["titleForecolor"]) { this.themeCssVariablesChanges["--sjs-cover-title-forecolor"] = headerSettings.titleForecolor; } + if (!!headerSettings["descriptionForecolor"]) { + this.themeCssVariablesChanges["--sjs-cover-description-forecolor"] = headerSettings.descriptionForecolor; + } } private loadThemeIntoPropertyGrid() { @@ -652,6 +655,25 @@ export class ThemeBuilder extends Base { page.getElementByName("groupHeader").visible = this.surveyProvider.isMobileView ? false : settings.theme.allowEditHeaderSettings; page.getElementByName("groupAdvanced").visible = !this.surveyProvider.isMobileView; } + private setCoverPropertiesFromSurvey(panel) { + panel.getQuestionByName("headerView").value = this.survey.headerView; + panel.getQuestionByName("logoPosition").value = this.survey.logoPosition; + + panel.getQuestionByName("logoPositionX").readOnly = !this.survey.logo; + panel.getQuestionByName("logoPositionY").readOnly = !this.survey.logo; + panel.getQuestionByName("logoPosition").readOnly = !this.survey.logo; + + panel.getQuestionByName("titlePositionX").readOnly = !this.survey.title; + panel.getQuestionByName("titlePositionY").readOnly = !this.survey.title; + + panel.getQuestionByName("descriptionPositionX").readOnly = !this.survey.description; + panel.getQuestionByName("descriptionPositionY").readOnly = !this.survey.description; + } + private setCoverColorsFromThemeVariables(question: Question, cssVariable: string) { + if (!!question && !!cssVariable) { + question.value = cssVariable; + } + } private updateHeaderViewContainerEditors(themeCssVariables: { [index: string]: string }) { this.updateVisibilityOfPropertyGridGroups(); @@ -660,18 +682,7 @@ export class ThemeBuilder extends Base { panel.getQuestionByName("backgroundColor").choices = this.getPredefinedColorsItemValues(); if (!!this.survey) { - panel.getQuestionByName("headerView").value = this.survey.headerView; - panel.getQuestionByName("logoPosition").value = this.survey.logoPosition; - - panel.getQuestionByName("logoPositionX").readOnly = !this.survey.logo; - panel.getQuestionByName("logoPositionY").readOnly = !this.survey.logo; - panel.getQuestionByName("logoPosition").readOnly = !this.survey.logo; - - panel.getQuestionByName("titlePositionX").readOnly = !this.survey.title; - panel.getQuestionByName("titlePositionY").readOnly = !this.survey.title; - - panel.getQuestionByName("descriptionPositionX").readOnly = !this.survey.description; - panel.getQuestionByName("descriptionPositionY").readOnly = !this.survey.description; + this.setCoverPropertiesFromSurvey(panel); } if (!!this.currentTheme.cover) { @@ -683,15 +694,12 @@ export class ThemeBuilder extends Base { question.value = this.currentTheme.cover[key]; } }); - const titleForecolorQuestion = panel.getQuestionByName("titleForecolor"); - const titleForecolorValue = themeCssVariables["--sjs-cover-title-forecolor"] || themeCssVariables["--sjs-general-dim-forecolor"]; - if (!!titleForecolorQuestion && !!titleForecolorValue) { - titleForecolorQuestion.value = titleForecolorValue; - } - const backgroundColorQuestion = panel.getQuestionByName("backgroundColor"); + this.setCoverColorsFromThemeVariables(panel.getQuestionByName("titleForecolor"), themeCssVariables["--sjs-cover-title-forecolor"] || themeCssVariables["--sjs-general-dim-forecolor"]); + this.setCoverColorsFromThemeVariables(panel.getQuestionByName("descriptionForecolor"), themeCssVariables["--sjs-cover-description-forecolor"] || themeCssVariables["--sjs-general-dim-forecolor-light"]); + this.setCoverColorsFromThemeVariables(panel.getQuestionByName("backgroundColor"), themeCssVariables["--sjs-cover-backcolor"]); + const backgroundColorValue = themeCssVariables["--sjs-cover-backcolor"]; - if (!!backgroundColorQuestion && !!backgroundColorValue) { - backgroundColorQuestion.value = backgroundColorValue; + if (!!backgroundColorValue) { panel.getQuestionByName("backgroundColorSwitch").value = this.getBackgroundColorSwitchByValue(backgroundColorValue); } } @@ -816,141 +824,6 @@ export class ThemeBuilder extends Base { defaultValue: "panels" } ] - }, { - type: "panel", - elements: [ - { - type: "color", - name: "generalPrimaryColor", - title: getLocString("theme.primaryColor"), - descriptionLocation: "hidden", - }, - { - type: "color", - name: "generalBackcolorDimColor", - title: getLocString("theme.backgroundDimColor"), - descriptionLocation: "hidden", - }, - { - type: "panel", - name: "background", - title: getLocString("theme.backgroundImage"), - elements: [ - { - type: "fileedit", - storeDataAsText: false, - name: "backgroundImage", - titleLocation: "hidden", - acceptedTypes: "image/*", - placeholder: "Browse..." - }, - { - type: "buttongroup", - name: "backgroundImageFit", - enableIf: "{backgroundImage} notempty", - titleLocation: "hidden", - choices: [ - { value: "auto", text: getLocString("theme.backgroundImageFitAuto") }, - { value: "contain", text: getLocString("theme.backgroundImageFitContain") }, - { value: "cover", text: getLocString("theme.backgroundImageFitCover") } - ], - defaultValue: "cover" - }, - { - type: "buttongroup", - name: "backgroundImageAttachment", - enableIf: "{backgroundImage} notempty", - titleLocation: "hidden", - choices: [ - { value: "fixed", text: getLocString("theme.backgroundImageAttachmentFixed") }, - { value: "scroll", text: getLocString("theme.backgroundImageAttachmentScroll") } - ], - defaultValue: "scroll" - }, - { - type: "spinedit", - name: "backgroundOpacity", - enableIf: "{backgroundImage} notempty", - titleLocation: "left", - title: getLocString("theme.backgroundOpacity"), - descriptionLocation: "hidden", - unit: "%", - defaultValue: 100, - min: 0, - max: 100, - step: 5 - }, - ] - }, - { - type: "spinedit", - name: "panelBackgroundTransparency", - title: getLocString("theme.panelBackgroundTransparency"), - descriptionLocation: "hidden", - unit: "%", - defaultValue: 100, - min: 0, - max: 100, - step: 5 - }, - { - type: "spinedit", - name: "questionBackgroundTransparency", - title: getLocString("theme.questionBackgroundTransparency"), - descriptionLocation: "hidden", - unit: "%", - defaultValue: 100, - min: 0, - max: 100, - step: 5 - } - ] - }, { - type: "panel", - elements: [ - { - type: "dropdown", - name: "--font-family", - title: getLocString("theme.fontFamily"), - descriptionLocation: "hidden", - choices: [].concat(DefaultFonts), - defaultValue: "Open Sans", - allowClear: false - }, - { - type: "spinedit", - name: "commonFontSize", - title: getLocString("theme.fontSize"), - descriptionLocation: "hidden", - unit: "%", - defaultValue: 100, - min: 0, - step: 5 - }, - ] - }, { - type: "panel", - elements: [ - { - type: "spinedit", - name: "commonScale", - title: getLocString("theme.scale"), - descriptionLocation: "hidden", - unit: "%", - defaultValue: 100, - min: 0, - step: 5 - }, - { - type: "spinedit", - name: "cornerRadius", - title: getLocString("theme.cornerRadius"), - descriptionLocation: "hidden", - unit: "px", - defaultValue: 4, - min: 0 - }, - ] } ] }, { @@ -1107,6 +980,12 @@ export class ThemeBuilder extends Base { title: getLocString("theme.coverTitleForecolor"), descriptionLocation: "hidden", }, + { + type: "colorsettings", + name: "descriptionForecolor", + title: getLocString("theme.coverDescriptionForecolor"), + descriptionLocation: "hidden", + }, { type: "boolean", name: "overlapEnabled", @@ -1134,6 +1013,161 @@ export class ThemeBuilder extends Base { ] } ] + }, { + type: "panel", + name: "groupBackground", + state: "expanded", + title: getLocString("theme.groupBackground"), + elements: [ + { + type: "panel", + elements: [ + { + type: "color", + name: "generalBackcolorDimColor", + title: getLocString("theme.backgroundDimColor"), + descriptionLocation: "hidden", + }, + { + type: "panel", + name: "background", + title: getLocString("theme.backgroundImage"), + elements: [ + { + type: "fileedit", + storeDataAsText: false, + name: "backgroundImage", + titleLocation: "hidden", + acceptedTypes: "image/*", + placeholder: "Browse..." + }, + { + type: "buttongroup", + name: "backgroundImageFit", + enableIf: "{backgroundImage} notempty", + titleLocation: "hidden", + choices: [ + { value: "auto", text: getLocString("theme.backgroundImageFitAuto") }, + { value: "contain", text: getLocString("theme.backgroundImageFitContain") }, + { value: "cover", text: getLocString("theme.backgroundImageFitCover") } + ], + defaultValue: "cover" + }, + { + type: "buttongroup", + name: "backgroundImageAttachment", + enableIf: "{backgroundImage} notempty", + titleLocation: "hidden", + choices: [ + { value: "fixed", text: getLocString("theme.backgroundImageAttachmentFixed") }, + { value: "scroll", text: getLocString("theme.backgroundImageAttachmentScroll") } + ], + defaultValue: "scroll" + }, + { + type: "spinedit", + name: "backgroundOpacity", + enableIf: "{backgroundImage} notempty", + titleLocation: "left", + title: getLocString("theme.backgroundOpacity"), + descriptionLocation: "hidden", + unit: "%", + defaultValue: 100, + min: 0, + max: 100, + step: 5 + }, + ] + } + ] + } + ] + }, { + type: "panel", + name: "groupAppearance", + state: "expanded", + title: getLocString("theme.groupAppearance"), + elements: [ + { + type: "panel", + elements: [ + { + type: "color", + name: "generalPrimaryColor", + title: getLocString("theme.primaryColor"), + descriptionLocation: "hidden", + }, + { + type: "spinedit", + name: "panelBackgroundTransparency", + title: getLocString("theme.panelBackgroundTransparency"), + descriptionLocation: "hidden", + unit: "%", + defaultValue: 100, + min: 0, + max: 100, + step: 5 + }, + { + type: "spinedit", + name: "questionBackgroundTransparency", + title: getLocString("theme.questionBackgroundTransparency"), + descriptionLocation: "hidden", + unit: "%", + defaultValue: 100, + min: 0, + max: 100, + step: 5 + } + ] + }, { + type: "panel", + elements: [ + { + type: "dropdown", + name: "--font-family", + title: getLocString("theme.fontFamily"), + descriptionLocation: "hidden", + choices: [].concat(DefaultFonts), + defaultValue: "Open Sans", + allowClear: false + }, + { + type: "spinedit", + name: "commonFontSize", + title: getLocString("theme.fontSize"), + descriptionLocation: "hidden", + unit: "%", + defaultValue: 100, + min: 0, + step: 5 + }, + ] + }, { + type: "panel", + elements: [ + { + type: "spinedit", + name: "commonScale", + title: getLocString("theme.scale"), + descriptionLocation: "hidden", + unit: "%", + defaultValue: 100, + min: 0, + step: 5 + }, + { + type: "spinedit", + name: "cornerRadius", + title: getLocString("theme.cornerRadius"), + descriptionLocation: "hidden", + unit: "px", + defaultValue: 4, + min: 0 + }, + ] + } + ] }, { type: "panel", name: "groupAdvanced", diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts index 805efe1a98..4be4dd13e0 100644 --- a/packages/survey-creator-core/src/localization/english.ts +++ b/packages/survey-creator-core/src/localization/english.ts @@ -1005,6 +1005,8 @@ export var enStrings = { groupGeneral: "General", groupAdvanced: "Advanced", groupHeader: "Header", + groupBackground: "Background", + groupAppearance: "Appearance", themeName: "Theme", themeMode: "Question appearance", themeModePanels: "Default", @@ -1016,6 +1018,7 @@ export var enStrings = { primaryDarkColor: "Hover", primaryLightColor: "Selected", coverTitleForecolor: "Title forecolor", + coverDescriptionForecolor: "Description forecolor", coverOverlapEnabled: "Overlap", backgroundDimColor: "Background color", backgroundImage: "Background image", // Auto-generated string 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 8703554d84..6aad638737 100644 --- a/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts +++ b/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts @@ -1472,6 +1472,7 @@ test("restore headerViewContainer values", (): any => { "--sjs-font-size": "17.6px", "--sjs-cover-backcolor": "#5094ed", "--sjs-cover-title-forecolor": "#FBFF24", + "--sjs-cover-description-forecolor": "#88b9e3", }, "cover": { "height": 300, @@ -1500,6 +1501,7 @@ test("restore headerViewContainer values", (): any => { "logoPosition": "left", "inheritWidthFrom": "page", "titleForecolor": "#FBFF24", + "descriptionForecolor": "rgba(136, 185, 227, 1)", "backgroundColor": "#5094ed", "backgroundColorSwitch": "custom", "backgroundImage": "https://t4.ftcdn.net/jpg/02/83/13/61/360_F_283136113_b3VRHNiOPFMOluzYJPpfuoH8Czh9c743.jpg", @@ -1653,9 +1655,11 @@ test("Mobile mode: hide advanced settings in property grid ", (): any => { const themeBuilder = themePlugin.model as ThemeBuilder; const themeEditorSurvey = themeBuilder.themeEditorSurvey; const propertyGridGroups = themeEditorSurvey.pages[0].elements; - expect(propertyGridGroups.length).toBe(3); + expect(propertyGridGroups.length).toBe(5); expect(propertyGridGroups[0].visible).toBeTruthy(); expect(propertyGridGroups[1].visible).toBeFalsy(); - expect(propertyGridGroups[2].visible).toBeFalsy(); + expect(propertyGridGroups[2].visible).toBeTruthy(); + expect(propertyGridGroups[3].visible).toBeTruthy(); + expect(propertyGridGroups[4].visible).toBeFalsy(); });