IBX-7356: [Sub-items] - disable Columns settings in Grid view (#1055)

* IBX-7356: [Sub-items] - disable Columns settings in Grid view * cr remark * disabled "columns" button instead of hiding it * fix simple dropdown component disabled state * remove subitems simple dropdown CSS overwrite * prettify * restore origincal view.switcher.js --------- Co-authored-by: tischsoic <symfiz@gmail.com>
ibexa · Dec 18, 2023 · 3603253 · 3603253
1 parent 9f2866f
commit 3603253
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
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
@@ -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
@@ -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/...ndle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js b/...ndle/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 (
             <div className="c-view-columns-toggler">
-                <div className="c-simple-dropdown c-simple-dropdown--switcher">
+                <div className={simpleDropdownClassName}>
                     {this.renderToggler()}
                     {this.renderPanel()}
                 </div>
@@ -142,4 +155,5 @@ export default class ViewColumnsTogglerComponent extends Component {
 ViewColumnsTogglerComponent.propTypes = {
     columnsVisibility: PropTypes.object.isRequired,
     toggleColumnVisibility: PropTypes.func.isRequired,
+    isDisabled: PropTypes.bool.isRequired,
 };
diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js
@@ -1327,6 +1327,7 @@ export default class SubItemsModule extends Component {
         const isTableViewActive = activeView === VIEW_MODE_TABLE;
         const pageLoaded = !!activePageItems;
         const bulkBtnDisabled = nothingSelected || !isTableViewActive || !pageLoaded;
+
         let bulkHideBtnDisabled = true;
         let bulkUnhideBtnDisabled = true;
         let listClassName = 'm-sub-items__list';
@@ -1359,6 +1360,7 @@ export default class SubItemsModule extends Component {
                             <ViewColumnsTogglerComponent
                                 columnsVisibility={this.filterSmartModeColumns(columnsVisibility)}
                                 toggleColumnVisibility={this.toggleColumnVisibility}
+                                isDisabled={activeView === VIEW_MODE_GRID}
                             />
                             <ViewSwitcherComponent onViewChange={this.switchView} activeView={activeView} isDisabled={!totalCount} />
                         </div>