diff --git a/functionalTests/property-grid/survey.ts b/functionalTests/property-grid/survey.ts index 31af6ac1de..f7db06b68b 100644 --- a/functionalTests/property-grid/survey.ts +++ b/functionalTests/property-grid/survey.ts @@ -235,4 +235,46 @@ test("tabbed mode", async (t) => { await setJSON(json); await t.hover(Selector(".svc-side-bar .svc-scroll__wrapper").filterVisible()); await t.expect(Selector(".svc-side-bar .svc-scroll__scrollbar").visible).notOk(); -}); \ No newline at end of file +}); + +test("Search correctly scrolls to element", async (t) => { + const json = { + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "checkbox", + "name": "question1", + "title": "question1", + "choices": [ + "Item 1", + "Item 2", + "Item 3" + ] + } + ] + } + ] + }; + await ClientFunction(() => { + window["creator"].animationEnabled = true; + })(); + await setJSON(json); + await t.resizeWindow(1600, 600); + + const isElementInViewport = ClientFunction(() => { + const getBoundValues = document.querySelector("[data-name=logo] input").getBoundingClientRect(); + + const windowHeight = window.innerHeight; + const windowWidth = window.innerWidth; + + return getBoundValues.bottom > 0 && getBoundValues.right > 0 && getBoundValues.left < (windowWidth || document.documentElement.clientWidth) && getBoundValues.top < (windowHeight || document.documentElement.clientHeight); + }); + + await t + .click(".spg-container_search .svc-search input") + .typeText(".spg-container_search .svc-search input", "log", { paste: true }) + .wait(500) + .expect(isElementInViewport()).ok(); +}); diff --git a/packages/survey-creator-core/src/components/link-value.scss b/packages/survey-creator-core/src/components/link-value.scss index 584c2f5751..597462e970 100644 --- a/packages/survey-creator-core/src/components/link-value.scss +++ b/packages/survey-creator-core/src/components/link-value.scss @@ -2,6 +2,7 @@ .svc-link__button { @include ctrDefaultBoldFont; + border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5)); } .svc-question-link__set-button { @@ -10,7 +11,6 @@ .svc-link-value-button { --thm-margin-inline-start: calc(-1 * var(--ctr-actionbar-button-padding-left-medium-text)); margin-inline-start: var(--thm-margin-inline-start, calcSize(-2)); - border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5)); } .svc-question-link__clear-button { color: $red; diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss index 6fa2b1436e..d38f05c26a 100644 --- a/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss +++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss @@ -60,7 +60,6 @@ svc-page-navigator-item, } .svc-page-navigator-item__banner { - display: flex; @include textEllipsis; padding: var(--ctr-page-navigator-item-padding-top, calcSize(1)) var(--ctr-page-navigator-item-padding-right, calcSize(1.5)) var(--ctr-page-navigator-item-padding-bottom, calcSize(1)) var(--ctr-page-navigator-item-padding-left-hovered, calcSize(2)); justify-content: flex-end; @@ -78,6 +77,8 @@ svc-page-navigator-item, position: absolute; top: 0; right: 0; + z-index: 1; + display: none; .svc-page-navigator-item__dot-content { width: var(--ctr-page-navigator-item-dot-radius-large, calcSize(1)); @@ -109,6 +110,7 @@ svc-page-navigator-item, .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus { .svc-page-navigator-item__banner { + display: flex; opacity: 1; } } diff --git a/packages/survey-creator-core/src/components/scroll.ts b/packages/survey-creator-core/src/components/scroll.ts index a3af245ad6..20b603352a 100644 --- a/packages/survey-creator-core/src/components/scroll.ts +++ b/packages/survey-creator-core/src/components/scroll.ts @@ -17,6 +17,8 @@ export class ScrollViewModel { private _scrollbarSizerElement: HTMLElement; private _containerBodyResizeObserver: ResizeObserver; + private _lockScroll = false; + constructor() { //this.dragTypeOverMe = this.row.dragTypeOverMe; } @@ -40,10 +42,15 @@ export class ScrollViewModel { } public onScrollContainer() { + this._lockScroll = true; this._scrollbarElement.scrollTop = this._containerElementValue.scrollTop; } public onScrollScrollbar() { + if (this._lockScroll) { + this._lockScroll = false; + return; + } this._containerElementValue.scrollTop = this._scrollbarElement.scrollTop; } diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts index 477a50923a..e3798a9a40 100644 --- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts @@ -361,7 +361,6 @@ export class TabDesignerPlugin implements ICreatorPlugin { } }, active: this.isSettingsActive, - pressed: this.isSettingsActive, visible: this.createVisibleUpdater(), locTitleName: "ed.surveySettings", locTooltipName: "ed.surveySettingsTooltip", @@ -411,11 +410,9 @@ export class TabDesignerPlugin implements ICreatorPlugin { items.push(this.surveySettingsAction); this.creator.onSelectedElementChanged.add((sender, options) => { this.surveySettingsAction.active = this.isSettingsActive; - this.surveySettingsAction.pressed = this.isSettingsActive; }); this.creator.onShowSidebarVisibilityChanged.add((sender, options) => { this.surveySettingsAction.active = this.isSettingsActive; - this.surveySettingsAction.pressed = this.isSettingsActive; }); return items; } diff --git a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss index d753687b22..83824a057d 100644 --- a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss +++ b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss @@ -52,6 +52,10 @@ background: var(--ctr-toggle-button-thumb-background-color-checked, #ffffff); } + &:hover { + background: var(--ctr-toggle-button-background-color-checked, #19b394); + } + &:focus { background: var(--ctr-toggle-button-background-color-checked-focused, #ffffff); diff --git a/packages/survey-creator-core/src/property-grid/search-manager.ts b/packages/survey-creator-core/src/property-grid/search-manager.ts index 0b01716c83..7601d6242d 100644 --- a/packages/survey-creator-core/src/property-grid/search-manager.ts +++ b/packages/survey-creator-core/src/property-grid/search-manager.ts @@ -14,12 +14,14 @@ export class SearchManagerPropertyGrid extends SearchManager { @property() isVisible: boolean; @property({ defaultValue: [] }) allMatches: Array; + private lastCollapsedElement: IElement; private expandAllParents(element: IElement) { if (!element) return; if ((element).page && (element).survey) { (element).survey.currentPage = (element).page; } if (element.isCollapsed) { + this.lastCollapsedElement = element; (element as any).expand(false); } this.expandAllParents((element).parent); @@ -32,11 +34,13 @@ export class SearchManagerPropertyGrid extends SearchManager { prevMatch?.updateElementCss(true); if (!!this.currentMatch && prevMatch !== this.currentMatch) { this.currentMatch.updateElementCss(true); + const lastCollapsedElement = this.lastCollapsedElement; this.expandAllParents(this.currentMatch); + const newPanelExpanded = this.lastCollapsedElement != lastCollapsedElement; setTimeout(() => { const elementId = this.currentMatch?.id; scrollElementIntoView(elementId); - }, 10); + }, newPanelExpanded ? 400 : 10); } this.updatedMatchCounterText(index); } diff --git a/packages/survey-creator-core/src/question-editor/definition.ts b/packages/survey-creator-core/src/question-editor/definition.ts index 5472249aa6..62d35617a1 100644 --- a/packages/survey-creator-core/src/question-editor/definition.ts +++ b/packages/survey-creator-core/src/question-editor/definition.ts @@ -689,6 +689,7 @@ const defaultProperties: ISurveyPropertiesDefinition = { { name: "questionTitleWidth", tab: "questionSettings" }, { name: "questionErrorLocation", tab: "questionSettings" }, { name: "layoutColumns", tab: "questionSettings" }, + { name: "gridLayoutColumns", tab: "questionSettings" }, ], tabs: [ { name: "questionSettings", index: 100 }, diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss index fb08992248..5cebf4054a 100644 --- a/packages/survey-creator-core/src/utils/layout.scss +++ b/packages/survey-creator-core/src/utils/layout.scss @@ -122,6 +122,37 @@ color: var(--ctr-menu-toolbar-button-text-color, $foreground); transition: background-color $creator-transition-duration; height: auto; + + //hovered and focused state + &:hover, + &:focus { + background-color: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim); + } + + //pressed state + &:active, + &.sv-action-bar-item--pressed { + opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5); + background-color: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim); + use { + fill: black; + opacity: 0.45; + } + } + + //checked state + &.sv-action-bar-item--active { + background-color: var(--ctr-menu-toolbar-button-background-color-selected, $background); + use { + fill: var(--ctr-menu-toolbar-button-text-color-selected, $primary); + } + } + + //disabled state + &:disabled { + background-color: transparent; + opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25); + } } .sv-action-bar-item--icon { @@ -141,39 +172,10 @@ } } - //hovered state - .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled, - .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled { - background-color: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim); - } - - //pressed state - .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled { - opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5); - background-color: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim); - } - - //disabled state - .sv-action-bar-item:disabled { - opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25); - } - - - .sv-action-bar-item--active { - .sv-action-bar-item__icon use { - fill: var(--ctr-menu-toolbar-button-text-color-selected, $primary); - } - } - .sv-action-bar-item-dropdown { border-radius: calcCornerRadius(0.5); background-color: transparent; } - - .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) { - background-color: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim); - opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 50%); - } } .svc-footer-bar { diff --git a/packages/survey-creator/src/questionEditors/questionEditorDefinition.ts b/packages/survey-creator/src/questionEditors/questionEditorDefinition.ts index 592bdba443..de073f48d6 100644 --- a/packages/survey-creator/src/questionEditors/questionEditorDefinition.ts +++ b/packages/survey-creator/src/questionEditors/questionEditorDefinition.ts @@ -529,6 +529,7 @@ export class SurveyQuestionEditorDefinition { { name: "questionTitleWidth", tab: "layout" }, { name: "questionErrorLocation", tab: "layout" }, { name: "layoutColumns", tab: "layout" }, + { name: "gridLayoutColumns", tab: "layout" }, ], tabs: [ { name: "logic", index: 100 }, diff --git a/visualRegressionTests-V2/tests/designer/etalons/action-clear-button-hovered.png b/visualRegressionTests-V2/tests/designer/etalons/action-clear-button-hovered.png new file mode 100644 index 0000000000..8d52744899 Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/action-clear-button-hovered.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked-hover.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked-hover.png new file mode 100644 index 0000000000..fc7538ce8d Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked-hover.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked.png new file mode 100644 index 0000000000..fc7538ce8d Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-default.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-default.png new file mode 100644 index 0000000000..61d74acd8d Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-default.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-focus.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-focus.png new file mode 100644 index 0000000000..594bc7cfa7 Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-focus.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-hover.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-hover.png new file mode 100644 index 0000000000..145a5427df Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-hover.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/default-value-clear-button-focus.png b/visualRegressionTests-V2/tests/designer/etalons/default-value-clear-button-focus.png index 0c398a04b6..6a5dfd4b4f 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/default-value-clear-button-focus.png and b/visualRegressionTests-V2/tests/designer/etalons/default-value-clear-button-focus.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/page-navigator-left.png b/visualRegressionTests-V2/tests/designer/etalons/page-navigator-left.png index 97a566cef4..10c7d19cd5 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/page-navigator-left.png and b/visualRegressionTests-V2/tests/designer/etalons/page-navigator-left.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/top-menu-pressed-buttons.png b/visualRegressionTests-V2/tests/designer/etalons/top-menu-pressed-buttons.png new file mode 100644 index 0000000000..bb95cf593c Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/top-menu-pressed-buttons.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/top-menu-settings-checked-hovered.png b/visualRegressionTests-V2/tests/designer/etalons/top-menu-settings-checked-hovered.png new file mode 100644 index 0000000000..df519e1bd1 Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/top-menu-settings-checked-hovered.png differ diff --git a/visualRegressionTests/tests/designer/etalons/action-clear-button-hovered.png b/visualRegressionTests/tests/designer/etalons/action-clear-button-hovered.png new file mode 100644 index 0000000000..d8eac08bbb Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/action-clear-button-hovered.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-checked-hover.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked-hover.png new file mode 100644 index 0000000000..ed6f753667 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked-hover.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-checked.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked.png new file mode 100644 index 0000000000..ed6f753667 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-default.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-default.png new file mode 100644 index 0000000000..bc69029b17 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-default.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-focus.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-focus.png new file mode 100644 index 0000000000..ae3b814eaf Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-focus.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-hover.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-hover.png new file mode 100644 index 0000000000..76afb66cb0 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-hover.png differ diff --git a/visualRegressionTests/tests/designer/etalons/page-navigator-left.png b/visualRegressionTests/tests/designer/etalons/page-navigator-left.png index 53e9d07cd4..d7397cb531 100644 Binary files a/visualRegressionTests/tests/designer/etalons/page-navigator-left.png and b/visualRegressionTests/tests/designer/etalons/page-navigator-left.png differ diff --git a/visualRegressionTests/tests/designer/etalons/top-menu-pressed-buttons.png b/visualRegressionTests/tests/designer/etalons/top-menu-pressed-buttons.png new file mode 100644 index 0000000000..f271d7d21e Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/top-menu-pressed-buttons.png differ diff --git a/visualRegressionTests/tests/designer/etalons/top-menu-settings-checked-hovered.png b/visualRegressionTests/tests/designer/etalons/top-menu-settings-checked-hovered.png new file mode 100644 index 0000000000..a36a3fd114 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/top-menu-settings-checked-hovered.png differ diff --git a/visualRegressionTests/tests/designer/pg-data-action-button.ts b/visualRegressionTests/tests/designer/pg-data-action-button.ts index 44a607acdc..b5cb3e9ed6 100644 --- a/visualRegressionTests/tests/designer/pg-data-action-button.ts +++ b/visualRegressionTests/tests/designer/pg-data-action-button.ts @@ -1,4 +1,4 @@ -import { Selector } from "testcafe"; +import { ClientFunction, Selector } from "testcafe"; import { url, setJSON, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "ValueLink Actions in Data section Screenshot"; @@ -39,5 +39,12 @@ test("Check states", async (t) => { await t.hover(buttonElement); await takeElementScreenshot("action-button-hovered.png", buttonElement, t, comparer); + + await ClientFunction(() => { + window["creator"].survey.getAllQuestions()[0].defaultValue = "val"; + })(); + const clearButtonElement = Selector(".svc-link__button.svc-question-link__clear-button.svc-action-button"); + await t.hover(clearButtonElement); + await takeElementScreenshot("action-clear-button-hovered.png", clearButtonElement, t, comparer); }); }); diff --git a/visualRegressionTests/tests/designer/side-bar.ts b/visualRegressionTests/tests/designer/side-bar.ts index c58b071995..d1c4ae4cf2 100644 --- a/visualRegressionTests/tests/designer/side-bar.ts +++ b/visualRegressionTests/tests/designer/side-bar.ts @@ -143,6 +143,28 @@ test.page(themeTabUrl)("tabbed mode", async (t) => { }); }); +test.page(themeTabUrl)("boolean switch", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1920, 1200); + await ClientFunction(() => { + window["creator"].showOneCategoryInPropertyGrid = true; + })(); + + await t.click(getTabbedMenuItemByText("Themes")); + + await t.click(Selector(".svc-menu-action__button").filterVisible().nth(4)); + await takeElementScreenshot("boolean-switch-default.png", ".spg-boolean-switch", t, comparer); + await t.hover(Selector(".spg-boolean-switch__button").filterVisible()); + await takeElementScreenshot("boolean-switch-hover.png", ".spg-boolean-switch", t, comparer); + await t.click(Selector(".spg-boolean-switch__button").filterVisible()); + await takeElementScreenshot("boolean-switch-focus.png", ".spg-boolean-switch", t, comparer); + await t.pressKey("tab"); + await takeElementScreenshot("boolean-switch-checked.png", ".spg-boolean-switch", t, comparer); + await t.hover(Selector(".spg-boolean-switch__button").filterVisible()); + await takeElementScreenshot("boolean-switch-checked-hover.png", ".spg-boolean-switch", t, comparer); + }); +}); + test("translation tab tabbed property grid", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1200); diff --git a/visualRegressionTests/tests/designer/top-menu.ts b/visualRegressionTests/tests/designer/top-menu.ts index 03a423bd23..9e75762b16 100644 --- a/visualRegressionTests/tests/designer/top-menu.ts +++ b/visualRegressionTests/tests/designer/top-menu.ts @@ -40,6 +40,15 @@ test("Top menu on designer tab", async (t) => { .click(Selector("#action-undo .sv-action-bar-item")) .click(Selector(".svc-side-bar .spg-row").nth(1)); await takeElementScreenshot("top-menu-redo-active.png", topBarElement, t, comparer); + + await t + .hover(Selector("[title='Survey settings']")); + await takeElementScreenshot("top-menu-settings-checked-hovered.png", topBarElement, t, comparer); + + await ClientFunction(() => { + window["creator"].toolbar.actions.map(a => a.pressed = true); + })(); + await takeElementScreenshot("top-menu-pressed-buttons.png", topBarElement, t, comparer); }); }); test("Top menu with single item", async (t) => {