diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss index 6717e7ea25..6823cd6e89 100644 --- a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss +++ b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss @@ -143,4 +143,24 @@ } } } + + &--disabled { + &:hover { + border-color: transparent; + + .c-simple-dropdown { + &__expand-icon { + fill: $ibexa-color-dark; + } + + &__selected { + color: $ibexa-color-dark; + + .ibexa-icon { + fill: $ibexa-color-dark; + } + } + } + } + } } diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss index 9af68b3bf9..52aeb52c6a 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss @@ -13,18 +13,6 @@ padding-bottom: calculateRem(20px); border-bottom: calculateRem(1px) solid $ibexa-color-dark-200; margin-top: 0; - - .c-simple-dropdown { - &:hover { - .c-simple-dropdown__selected { - color: $ibexa-color-primary; - - .ibexa-icon { - fill: $ibexa-color-primary; - } - } - } - } } &__list { diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js index b7029c423b..e4cf9cf644 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js @@ -70,6 +70,12 @@ export default class ViewColumnsTogglerComponent extends Component { } togglePanel() { + const { isDisabled } = this.props; + + if (isDisabled) { + return; + } + this.setState( (state) => ({ isOpen: !state.isOpen, @@ -128,9 +134,16 @@ export default class ViewColumnsTogglerComponent extends Component { } render() { + const { isDisabled } = this.props; + const simpleDropdownClassName = createCssClassNames({ + 'c-simple-dropdown': true, + 'c-simple-dropdown--switcher': true, + 'c-simple-dropdown--disabled': isDisabled, + }); + return (