diff --git a/packages/survey-creator-core/src/components/matrix-cell.ts b/packages/survey-creator-core/src/components/matrix-cell.ts index 1d26b1df20..a4f006d142 100644 --- a/packages/survey-creator-core/src/components/matrix-cell.ts +++ b/packages/survey-creator-core/src/components/matrix-cell.ts @@ -98,7 +98,7 @@ export class MatrixCellWrapperViewModel extends Base { editSurvey.apply(); return true; }, - cssClass: "svc-matrix-cell__popup", + cssClass: "svc-matrix-cell__popup svc-creator-popup", title: model.question.name, displayMode: this.creator.isMobileView ? "overlay" : "popup" }, model.creator.rootElement diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts b/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts index 75b697060f..407ada6f63 100644 --- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts +++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts @@ -40,7 +40,7 @@ export class PageNavigatorViewModel extends Base { }, allowSelection: true }); - this.popupModel = new PopupModel("sv-list", { model: this.pageListModel }); + this.popupModel = new PopupModel("sv-list", { model: this.pageListModel }, { cssClass: "svc-creator-popup" }); !!this.pagesController && (this.popupModel.horizontalPosition = this.pagesController.creator["toolboxLocation"]); this.popupModel.onShow = () => { this.pageListModel.selectedItem = this.getActionBarByPage(this.pagesController.currentPage); diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss index aa2fd8c44e..d3a9c0320a 100644 --- a/packages/survey-creator-core/src/components/popup.scss +++ b/packages/survey-creator-core/src/components/popup.scss @@ -1,6 +1,5 @@ -survey-creator:not(.svd-simulator-content), -.svc-creator:not(.svd-simulator-content) { - .sv-popup { +.svc-creator-popup { + &.sv-popup { .sd-btn { background: var(--ctr-button-background-color, $background); color: var(--ctr-button-text-color, $primary); @@ -20,19 +19,19 @@ survey-creator:not(.svd-simulator-content), } } - .sv-popup--modal { + &.sv-popup--modal { background-color: var(--ctr-popup-haze-background-color, $background-semitransparent); } - .sv-popup--modal>.sv-popup__container { + &.sv-popup--modal > .sv-popup__container { background-color: var(--ctr-popup-background-color, $background-dim-light); - &>.sv-popup__shadow>.sv-popup__body-content { + & > .sv-popup__shadow > .sv-popup__body-content { background-color: var(--ctr-popup-background-color, $background-dim-light); } } - .sv-popup--overlay:not(.sv-popup--dropdown-overlay) { + &.sv-popup--overlay:not(.sv-popup--dropdown-overlay) { .sv-popup__container { background: var(--ctr-popup-haze-background-color, $background-semitransparent); } @@ -59,13 +58,13 @@ survey-creator:not(.svd-simulator-content), color: var(--ctr-popup-title-color, $foreground); } - .sv-popup--dropdown { + &.sv-popup--dropdown { .sv-popup__body-content { background-color: var(--ctr-contextual-menu-background-color, $background); } } - .sv-popup--dropdown.svc-toolbox-subtypes { + &.sv-popup--dropdown.svc-toolbox-subtypes { .sv-popup__body-content { background: unset; } @@ -97,7 +96,7 @@ survey-creator:not(.svd-simulator-content), fill: var(--ctr-list-item-icon-color, $foreground-light); } - .sv-list__item--hovered>.sv-list__item-body { + .sv-list__item--hovered > .sv-list__item-body { color: var(--ctr-list-item-text-color-hovered, $foreground); background: var(--ctr-list-item-background-color-hovered, $background-dark); @@ -108,7 +107,7 @@ survey-creator:not(.svd-simulator-content), .sv-list__item--selected, .sv-list__item.sv-list__item--selected:hover { - &>.sv-list__item-body { + & > .sv-list__item-body { color: var(--ctr-list-item-text-color-selected, $primary-foreground); background: var(--ctr-list-item-background-color-selected, $primary); } @@ -118,7 +117,7 @@ survey-creator:not(.svd-simulator-content), } &.sv-list__item--group { - &>.sv-list__item-body { + & > .sv-list__item-body { background: var(--ctr-list-item-background-color-selected, $primary-light); color: var(--ctr-list-item-text-color-selected, $foreground); font-weight: 400; @@ -131,7 +130,7 @@ survey-creator:not(.svd-simulator-content), } //styles for dropdown overlay - .sv-popup--dropdown-overlay { + &.sv-popup--dropdown-overlay { .sv-popup__button.sv-popup__button { color: var(--ctr-actionbar-button-text-color, $primary); } @@ -181,7 +180,7 @@ survey-creator:not(.svd-simulator-content), } &.sv-list__item--selected.sv-list__item--group { - &>.sv-list__item-body { + & > .sv-list__item-body { background: var(--ctr-list-item-background-color-selected, $primary-light); color: var(--ctr-list-item-text-color-selected, $foreground); font-weight: 400; @@ -196,10 +195,9 @@ survey-creator:not(.svd-simulator-content), .sd-btn { background: var(--ctr-button-background-color, rgba(0, 0, 0, 0)); } - } - .sv-dropdown-popup.sv-popup--dropdown-overlay { + &.sv-dropdown-popup.sv-popup--dropdown-overlay { .sv-popup__body-footer { background-color: var(--ctr-contextual-menu-footer-background-color, $background-dim); } @@ -208,4 +206,4 @@ survey-creator:not(.svd-simulator-content), .sv-popup__content { color: var(--ctr-popup-message-color, #404040); } -} \ No newline at end of file +} diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts index 6d9d8a9f50..decebf31ff 100644 --- a/packages/survey-creator-core/src/components/question.ts +++ b/packages/survey-creator-core/src/components/question.ts @@ -536,6 +536,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { items: options.items, allowSelection: true, horizontalPosition: "center", + cssClass: "svc-creator-popup", onShow: () => { const listModel = newAction.popupModel.contentComponentData.model; options.updateListModel(listModel); diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts index 1e13645e64..a05636f04b 100644 --- a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts @@ -102,7 +102,6 @@ export class TabLogicPlugin implements ICreatorPlugin { this.filterQuestionAction = createDropdownActionModelAdvanced({ id: "svc-logic-filter-question", visible: false, - component: "sv-action-bar-item-dropdown", }, { items: [{ id: null, title: this.showAllQuestionsText }], onSelectionChanged: (item: IAction) => { @@ -113,6 +112,7 @@ export class TabLogicPlugin implements ICreatorPlugin { }, { verticalPosition: "bottom", horizontalPosition: "center", + cssClass: "svc-creator-popup", onShow: onQuestionPopupShow }); items.push(this.filterQuestionAction); @@ -127,7 +127,6 @@ export class TabLogicPlugin implements ICreatorPlugin { this.filterActionTypeAction = createDropdownActionModelAdvanced({ id: "svc-logic-filter-actiontype", visible: false, - component: "sv-action-bar-item-dropdown", }, { items: [{ id: null, title: this.showAllActionTypesText }], onSelectionChanged: (item: IAction) => { @@ -138,6 +137,7 @@ export class TabLogicPlugin implements ICreatorPlugin { }, { verticalPosition: "bottom", horizontalPosition: "center", + cssClass: "svc-creator-popup", onShow: onActionTypesPopupShow }); items.push(this.filterActionTypeAction); diff --git a/packages/survey-creator-core/src/components/tabs/logic-theme.ts b/packages/survey-creator-core/src/components/tabs/logic-theme.ts index 907594550b..fbfbdfe1b9 100644 --- a/packages/survey-creator-core/src/components/tabs/logic-theme.ts +++ b/packages/survey-creator-core/src/components/tabs/logic-theme.ts @@ -171,7 +171,7 @@ export var logicCss = { }, dropdown: { root: "", - popup: "", + popup: "svc-creator-popup", small: "", control: "sl-dropdown", selectWrapper: "", diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.ts b/packages/survey-creator-core/src/components/tabs/logic-ui.ts index fc1af83a4f..e48f9e83ed 100644 --- a/packages/survey-creator-core/src/components/tabs/logic-ui.ts +++ b/packages/survey-creator-core/src/components/tabs/logic-ui.ts @@ -196,6 +196,7 @@ export class SurveyLogicUI extends SurveyLogic { onStaying(); return true; }, + cssClass: "svc-creator-popup", title: this.getLocString("ed.lg.uncompletedRule_title"), displayMode: "popup" }, this.options.rootElement); diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts index ce21aeab4d..3092b9dd3d 100644 --- a/packages/survey-creator-core/src/components/tabs/preview.ts +++ b/packages/survey-creator-core/src/components/tabs/preview.ts @@ -261,6 +261,7 @@ export class PreviewViewModel extends Base { this.survey.pages[i].passed = true; } }, + cssClass: "svc-creator-popup", verticalPosition: "top", horizontalPosition: "center" }); diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts index 778b38acf5..d4f1ef9188 100644 --- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts @@ -158,6 +158,7 @@ export class TabTestPlugin implements ICreatorPlugin { allowSelection: true, onSelectionChanged: (item: any) => { this.setDevice(item.id); }, horizontalPosition: "center", + cssClass: "svc-creator-popup", onHide: () => { this.deviceSelectorAction.enabled = true; }, onShow: () => { this.deviceSelectorAction.enabled = false; } }); @@ -221,8 +222,11 @@ export class TabTestPlugin implements ICreatorPlugin { this.changeThemePopupModel = new PopupModel( "sv-list", { model: this.changeThemeModel }, - "bottom", - "center" + { + verticalPosition: "bottom", + horizontalPosition: "center", + cssClass: "svc-creator-popup", + } ); const getStartThemeName = (): string => { const availableThemes = themeMapper.filter(item => item.theme.root === this.simulatorTheme.root); @@ -262,6 +266,7 @@ export class TabTestPlugin implements ICreatorPlugin { this.languageSelectorAction.title = editorLocalization.getLocaleName(item.id); }, horizontalPosition: "center", + cssClass: "svc-creator-popup", onHide: () => { this.languageSelectorAction.enabled = true; }, onShow: () => { this.languageSelectorAction.enabled = false; } }); diff --git a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts index 71206e0db2..9e71002597 100644 --- a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts @@ -175,7 +175,8 @@ export class TabTranslationPlugin implements ICreatorPlugin { onSelectionChanged: (item: IAction) => { this.model.filteredPage = !!item.id ? this.creator.survey.getPageByName(item.id) : null; }, - horizontalPosition: "center" + horizontalPosition: "center", + cssClass: "svc-creator-popup", }); } private createFilterStringsAction() { @@ -190,7 +191,8 @@ export class TabTranslationPlugin implements ICreatorPlugin { onSelectionChanged: (item: IAction) => { this.model.showAllStrings = item.id === "show-all-strings"; }, - horizontalPosition: "center" + horizontalPosition: "center", + cssClass: "svc-creator-popup", }); } private updateFilterStrigsAction(updateSelectedItem: boolean = false) { diff --git a/packages/survey-creator-core/src/components/tabs/translation-theme.ts b/packages/survey-creator-core/src/components/tabs/translation-theme.ts index b8cc884a3e..fcf146e8d9 100644 --- a/packages/survey-creator-core/src/components/tabs/translation-theme.ts +++ b/packages/survey-creator-core/src/components/tabs/translation-theme.ts @@ -167,6 +167,7 @@ export var translationCss = { }, dropdown: { root: "st-selectbase", + popup: "st-dropdown-popup svc-creator-popup", small: "st-row__question--small", control: "st-input st-dropdown", other: "st-comment st-question__other", diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts index 4c49cb6078..c9b5849022 100644 --- a/packages/survey-creator-core/src/components/tabs/translation.ts +++ b/packages/survey-creator-core/src/components/tabs/translation.ts @@ -1052,6 +1052,7 @@ export class Translation extends Base implements ITranslationLocales { }, { items: this.chooseLanguageActions, allowSelection: false, + cssClass: "svc-creator-popup", onSelectionChanged: (item: IAction) => { this.addLocale(item.id); } @@ -1412,6 +1413,7 @@ export class TranslationEditor { componentName: "sv-string-viewer", data: { locStr: locStr, locString: locStr, model: locStr }, onApply: (): boolean => { return true; }, + cssClass: "svc-creator-popup", title: dialogTitle, displayMode: "popup" }, this.options.rootElement); @@ -1433,7 +1435,7 @@ export class TranslationEditor { onHide: () => { this.dispose(); }, - cssClass: "sv-property-editor st-translation-dialog", + cssClass: "sv-property-editor st-translation-dialog svc-creator-popup", title: dialogTitle, displayMode: this.options.isMobileView ? "overlay" : "popup" }, this.options.rootElement); @@ -1584,6 +1586,7 @@ export class TranslationEditor { }, { verticalPosition: "bottom", horizontalPosition: "center", + cssClass: "svc-creator-popup", onShow: onActionTypesPopupShow }); diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index 16a5e28845..2dfbde7ee8 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -3629,6 +3629,7 @@ export class SurveyCreatorModel extends Base listModel.setItems(getActions()); }, allowSelection: false, + cssClass: "svc-creator-popup", verticalPosition: "bottom", horizontalPosition: "center", displayMode: this.isTouch ? "overlay" : "popup" diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts index cfdaeb5263..bc985f4425 100644 --- a/packages/survey-creator-core/src/custom-questions/question-color.ts +++ b/packages/survey-creator-core/src/custom-questions/question-color.ts @@ -133,7 +133,8 @@ export class QuestionColorModel extends QuestionTextModel { }, { showPointer: false, verticalPosition: "bottom", - horizontalPosition: "center" + horizontalPosition: "center", + cssClass: "svc-creator-popup", }); action.disableTabStop = true; const popupModel = action.popupModel; diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.ts b/packages/survey-creator-core/src/property-grid-theme/property-grid.ts index 99d28c09fc..236dd9021b 100644 --- a/packages/survey-creator-core/src/property-grid-theme/property-grid.ts +++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.ts @@ -177,7 +177,7 @@ export var propertyGridCss = { }, dropdown: { root: "", - popup: "spg-dropdown-popup", + popup: "spg-dropdown-popup svc-creator-popup", small: "spg-row__question--small sd-row__question--small", control: "spg-input spg-dropdown sd-input sd-dropdown", filterStringInput: "sd-dropdown__filter-string-input spg-dropdown__filter-string-input", diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts index 3ec40fe5df..19d834a339 100644 --- a/packages/survey-creator-core/src/property-grid/index.ts +++ b/packages/survey-creator-core/src/property-grid/index.ts @@ -1363,7 +1363,7 @@ export abstract class PropertyGridEditor implements IPropertyGridEditor { this.onModalPropertyEditorClosed(editor, property, question, options, "cancel"); onClose && onClose("cancel"); }, - cssClass: "sv-property-editor", + cssClass: "sv-property-editor svc-creator-popup", title: question.title, displayMode: options.isMobileView ? "overlay" : "popup" }, options.rootElement); diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts index 5fb4980c5a..9498eea55c 100644 --- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts +++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts @@ -131,6 +131,7 @@ export class PropertyGridViewModel extends Base { { verticalPosition: "bottom", horizontalPosition: "center", + cssClass: "svc-creator-popup", } ); this.selectorPopupModel.cssClass += " svc-object-selector"; diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png b/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png index 20c8176323..c0cedc8b4e 100644 Binary files a/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png and b/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png differ diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-tagbox-style.png b/visualRegressionTests/tests/designer/etalons/test-tab-tagbox-style.png new file mode 100644 index 0000000000..5d8077a769 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/test-tab-tagbox-style.png differ diff --git a/visualRegressionTests/tests/designer/test-tab.ts b/visualRegressionTests/tests/designer/test-tab.ts index 6b31a11327..2612fac6df 100644 --- a/visualRegressionTests/tests/designer/test-tab.ts +++ b/visualRegressionTests/tests/designer/test-tab.ts @@ -485,4 +485,31 @@ test("Page selector with invisible page", async t => { .click(pageSelectorButton); await takeElementScreenshot("test-tab-page-selector-witn-invisible-page.png", ".svc-page-selector .sv-popup__container", t, comparer); }); +}); + +test("Tagbox has wrong style on preview tab", async t => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1024, 768); + await setJSON({ + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "tagbox", + "name": "question1", + "defaultValue": ["Item 2", "Item 3"], + "choices": ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"] + } + ] + } + ] + }); + + const questionTagbox = Selector(".sd-input.sd-tagbox"); + await t + .click(getTabbedMenuItemByText(creatorTabPreviewName)) + .click(questionTagbox); + await takeElementScreenshot("test-tab-tagbox-style.png", Selector(".sv-popup__container").filterVisible(), t, comparer); + }); }); \ No newline at end of file