#6298 Top bar styles (#6299)

Fixes #6298

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/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 {

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