Merge branch 'master' of github.com:surveyjs/survey-creator into hide…

…-surface-toolbar-for-small-screen

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();
-});
+});
+
+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();
+});

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;

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;
   }
 }

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;
   }
 

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;
   }

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);

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<Question>;
 
+  private lastCollapsedElement: IElement;
   private expandAllParents(element: IElement) {
     if (!element) return;
     if ((<any>element).page && (<any>element).survey) {
       (<any>element).survey.currentPage = (<any>element).page;
     }
     if (element.isCollapsed) {
+      this.lastCollapsedElement = element;
       (element as any).expand(false);
     }
     this.expandAllParents((<any>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);
   }

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 },

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 {

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 },

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);
   });
 });

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);

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) => {