diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index 2c892f1be6..38f4eab99e 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -95,7 +95,23 @@ export interface IKeyboardShortcut { export class CreatorAction extends Action { } -export class ToolbarActionContainer extends ActionContainer { +export class FooterToolbarActionContainer extends ActionContainer { + protected getDefaultCssClasses() { + const defaultCss = super.getDefaultCssClasses(); + return { + root: defaultCss.root + " svc-toolbar sv-action-bar sv-action-bar--default-size-mode", + item: defaultCss.item + " svc-toolbar__item", + itemWithTitle: defaultCss.itemWithTitle + " svc-toolbar__item--with-text", + itemAsIcon: defaultCss.itemAsIcon + " svc-toolbar__item--icon", + itemActive: defaultCss.itemActive + " svc-toolbar__item--active", + itemPressed: defaultCss.itemPressed + " svc-toolbar__item--pressed", + itemIcon: defaultCss.itemIcon + " svc-toolbar-item__icon", + itemTitle: defaultCss.itemTitle + " svc-toolbar-item__title", + itemTitleWithIcon: defaultCss.itemTitleWithIcon + " svc-toolbar-item__title--with-icon", + }; + } +} +export class ToolbarActionContainer extends FooterToolbarActionContainer { constructor(private creator: SurveyCreatorModel) { super(); } @@ -1817,7 +1833,7 @@ export class SurveyCreatorModel extends Base } private initFooterToolbar(): void { if (!this.footerToolbar) { - this.footerToolbar = new ActionContainer(); + this.footerToolbar = new FooterToolbarActionContainer(); ["designer", "undoredo", "preview", "theme"].forEach((pluginKey: string) => { const plugin = this.getPlugin(pluginKey); if (!!plugin && !!plugin["addFooterActions"]) { diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss index 66a570bb35..2fca032afe 100644 --- a/packages/survey-creator-core/src/utils/layout.scss +++ b/packages/survey-creator-core/src/utils/layout.scss @@ -104,7 +104,7 @@ } } .sv-action:not(.sv-action--hidden) ~ .sv-action:not(.sv-action--hidden) { - .sv-action-bar-item { + .svc-toolbar__item { margin-inline-start: var(--ctr-menu-toolbar-gap, calcSize(2)) } } @@ -115,69 +115,72 @@ background-color: var(--ctr-separator-color, $border); } - .sv-action-bar-item { - @include ctrDefaultFont; - border-radius: var(--ctr-menu-toolbar-button-corner-radius, 2px); + .sv-action-bar-item-dropdown { + border-radius: calcCornerRadius(0.5); background-color: transparent; - 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; - } - } +.svc-toolbar__item { + @include ctrDefaultFont; + border-radius: var(--ctr-menu-toolbar-button-corner-radius, 2px); + background-color: transparent; + color: var(--ctr-menu-toolbar-button-text-color, $foreground); + transition: background-color $creator-transition-duration; + height: auto; + appearance: none; + display: flex; + border: none; + //hovered and focused state + &:hover, + &:focus { + background-color: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim); + } - //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); - } + //pressed state + &:active, + &.svc-toolbar__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; } + } - //disabled state - &:disabled { - background-color: transparent; - opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25); + //checked state + &.svc-toolbar__item--active { + background-color: var(--ctr-menu-toolbar-button-background-color-selected, $background); + use { + fill: var(--ctr-menu-toolbar-button-text-color-selected, $primary); } } - .sv-action-bar-item--icon { - padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1)) - var(--ctr-menu-toolbar-button-padding-right, calcSize(1)) - var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1)) - var(--ctr-menu-toolbar-button-padding-left, calcSize(1)); - border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0); + //disabled state + &:disabled { + background-color: transparent; + opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25); } +} - .sv-action-bar-item__icon { - width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3)); - height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3)); +.svc-toolbar__item--icon { + padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-right, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-left, calcSize(1)); + border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0); +} - use { - fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light); - } - } +.svc-toolbar-item__icon { + width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3)); + height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3)); - .sv-action-bar-item-dropdown { - border-radius: calcCornerRadius(0.5); - background-color: transparent; + use { + fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light); } } + .svc-footer-bar { .svc-toolbar-wrapper { height: calcSize(6); @@ -193,36 +196,8 @@ box-sizing: border-box; } - .sv-action-bar-item { - border-radius: var(--ctr-menu-toolbar-button-corner-radius, calcSize(0.25)); - padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1)) var(--ctr-menu-toolbar-button-padding-right, calcSize(1)) var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1)) var(--ctr-menu-toolbar-button-padding-left, calcSize(1)); - } - - .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); - } - - .sv-action-bar-item--active { - background-color: var(--ctr-menu-toolbar-button-background-color-selected, $primary-light); - - &.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-selected, $primary-light); - } - - .sv-action-bar-item__icon use { - fill: var(--ctr-menu-toolbar-button-icon-color-selected, $primary); - } - } - - .sv-action-bar-item__icon { - width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3)); - height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3)); - - use { - fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light); - } + .svc-toolbar__item { + margin: 0 calcSize(1); } } } \ No newline at end of file diff --git a/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-paddings.png b/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-paddings.png index 901ef7cf1d..20afa438cd 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-paddings.png and b/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-paddings.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-page-selected-paddings.png b/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-page-selected-paddings.png index da14357ae5..d9e1273603 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-page-selected-paddings.png and b/visualRegressionTests-V2/tests/designer/etalons/creator-mobile-page-selected-paddings.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/creator-smartphone.png b/visualRegressionTests-V2/tests/designer/etalons/creator-smartphone.png index 2640f22fcf..2333af358b 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/creator-smartphone.png and b/visualRegressionTests-V2/tests/designer/etalons/creator-smartphone.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/no-license-mobile.png b/visualRegressionTests-V2/tests/designer/etalons/no-license-mobile.png index e4a4bcc561..6033e088e7 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/no-license-mobile.png and b/visualRegressionTests-V2/tests/designer/etalons/no-license-mobile.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/test-tab-toolbar_responsive.png b/visualRegressionTests-V2/tests/designer/etalons/test-tab-toolbar_responsive.png index a72ae6e571..0076b97ed0 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/test-tab-toolbar_responsive.png and b/visualRegressionTests-V2/tests/designer/etalons/test-tab-toolbar_responsive.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/theme-tab-toolbar_responsive.png b/visualRegressionTests-V2/tests/designer/etalons/theme-tab-toolbar_responsive.png index f766bfbfbd..45c3a17fa8 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/theme-tab-toolbar_responsive.png and b/visualRegressionTests-V2/tests/designer/etalons/theme-tab-toolbar_responsive.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/translation-auto-translate-popup-small-screen.png b/visualRegressionTests-V2/tests/designer/etalons/translation-auto-translate-popup-small-screen.png index a56081bfa7..50606a62c6 100644 Binary files a/visualRegressionTests-V2/tests/designer/etalons/translation-auto-translate-popup-small-screen.png and b/visualRegressionTests-V2/tests/designer/etalons/translation-auto-translate-popup-small-screen.png differ diff --git a/visualRegressionTests/tests/designer/etalons/creator-mobile-paddings.png b/visualRegressionTests/tests/designer/etalons/creator-mobile-paddings.png index 0d399d252c..a89bfdef9b 100644 Binary files a/visualRegressionTests/tests/designer/etalons/creator-mobile-paddings.png and b/visualRegressionTests/tests/designer/etalons/creator-mobile-paddings.png differ diff --git a/visualRegressionTests/tests/designer/etalons/creator-mobile-page-selected-paddings.png b/visualRegressionTests/tests/designer/etalons/creator-mobile-page-selected-paddings.png index cb0743525b..916f58cf5b 100644 Binary files a/visualRegressionTests/tests/designer/etalons/creator-mobile-page-selected-paddings.png and b/visualRegressionTests/tests/designer/etalons/creator-mobile-page-selected-paddings.png differ diff --git a/visualRegressionTests/tests/designer/etalons/creator-smartphone.png b/visualRegressionTests/tests/designer/etalons/creator-smartphone.png index b35d6192db..56c0836795 100644 Binary files a/visualRegressionTests/tests/designer/etalons/creator-smartphone.png and b/visualRegressionTests/tests/designer/etalons/creator-smartphone.png differ diff --git a/visualRegressionTests/tests/designer/etalons/no-license-mobile.png b/visualRegressionTests/tests/designer/etalons/no-license-mobile.png index e4a4bcc561..6033e088e7 100644 Binary files a/visualRegressionTests/tests/designer/etalons/no-license-mobile.png and b/visualRegressionTests/tests/designer/etalons/no-license-mobile.png differ diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-toolbar_responsive.png b/visualRegressionTests/tests/designer/etalons/test-tab-toolbar_responsive.png index 277b70aa63..d6e0ff2f28 100644 Binary files a/visualRegressionTests/tests/designer/etalons/test-tab-toolbar_responsive.png and b/visualRegressionTests/tests/designer/etalons/test-tab-toolbar_responsive.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-tab-toolbar_responsive.png b/visualRegressionTests/tests/designer/etalons/theme-tab-toolbar_responsive.png index 082c74b028..50925b159f 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-tab-toolbar_responsive.png and b/visualRegressionTests/tests/designer/etalons/theme-tab-toolbar_responsive.png differ