IBX-7484: unified display of hidden locations in UDW (#1428)

Co-authored-by: Mateusz Dębiński <[email protected]>
ibexa · Jan 24, 2025 · b367a66 · b367a66
1 parent c513b2c
commit b367a66
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 1 deletion.
diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss
@@ -188,4 +188,17 @@
             }
         }
     }
+
+    &--hidden {
+        .ibexa-grid-view-item {
+            &__title {
+                color: $ibexa-color-light-700;
+            }
+
+            &__hidden-icon {
+                margin-left: calculateRem(8px);
+                fill: $ibexa-color-light-700;
+            }
+        }
+    }
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/content-tree/_list.item.scss b/src/bundle/Resources/public/scss/ui/modules/content-tree/_list.item.scss
@@ -252,6 +252,23 @@
                 );
             }
         }
+
+        .c-list-item {
+            &__hidden-icon {
+                margin-left: calculateRem(8px);
+                fill: $ibexa-color-light-700;
+            }
+
+            &__label {
+                color: $ibexa-color-light-700;
+            }
+
+            &__icon {
+                .ibexa-icon {
+                    fill: $ibexa-color-light-700;
+                }
+            }
+        }
     }
 
     &--is-selected {

diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_finder.leaf.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_finder.leaf.scss
@@ -98,4 +98,23 @@
     .c-udw-toggle-selection {
         margin-right: calculateRem(15px);
     }
+
+    &--hidden {
+        .c-finder-leaf {
+            &__hidden-icon {
+                margin-left: calculateRem(8px);
+                fill: $ibexa-color-light-700;
+            }
+
+            &__name {
+                color: $ibexa-color-light-700;
+            }
+
+            &__icon-wrapper {
+                .ibexa-icon {
+                    fill: $ibexa-color-light-700;
+                }
+            }
+        }
+    }
 }
diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js b/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js
@@ -186,7 +186,7 @@ class ListItem extends Component {
     }
 
     renderItemLabel() {
-        const { href, name, locationId, indent, onClick } = this.props;
+        const { href, name, locationId, indent, onClick, isInvisible } = this.props;
 
         if (locationId === SYSTEM_ROOT_LOCATION_ID) {
             return null;
@@ -217,6 +217,7 @@ class ListItem extends Component {
                     {this.renderIcon()}
                     <span className="c-list-item__label-content" title={name}>
                         {name}
+                        {isInvisible && <Icon name="view-hide" extraClasses="ibexa-icon--small c-list-item__hidden-icon" />}
                     </span>
                 </a>
                 <div className="c-list-item__actions">

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.leaf.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.leaf.js
@@ -57,6 +57,7 @@ const FinderLeaf = ({ location }) => {
         'c-finder-leaf--has-children': !!location.childCount,
         'c-finder-leaf--not-selectable': isNotSelectable,
         'c-finder-leaf--selected': isSelected && !multiple,
+        'c-finder-leaf--hidden': location.hidden,
     });
 
     useEffect(() => {
@@ -76,6 +77,7 @@ const FinderLeaf = ({ location }) => {
                 <span title={location.ContentInfo.Content.TranslatedName} data-tooltip-container-selector=".c-udw-tab">
                     {location.ContentInfo.Content.TranslatedName}
                 </span>
+                {location.hidden && <Icon name="view-hide" extraClasses="ibexa-icon--small c-finder-leaf__hidden-icon" />}
             </span>
         </div>
     );

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import ToggleSelection from '../toggle-selection/toggle.selection';
 import Thumbnail from '../../../common/thumbnail/thumbnail';
+import Icon from '../../../common/icon/icon';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import { useSelectedLocationsHelpers } from '../../hooks/useSelectedLocationsHelpers';
@@ -39,6 +40,7 @@ const GridViewItem = ({ location, version }) => {
         'ibexa-grid-view-item--marked': markedLocationId === location.id,
         'ibexa-grid-view-item--not-selectable': isNotSelectable,
         'ibexa-grid-view-item--selected': isSelected && !multiple,
+        'ibexa-grid-view-item--hidden': location.hidden,
     });
     const markLocation = ({ nativeEvent }) => {
         if (isSelectionButtonClicked(nativeEvent)) {
@@ -85,6 +87,7 @@ const GridViewItem = ({ location, version }) => {
             <div className="ibexa-grid-view-item__footer">
                 <div className="ibexa-grid-view-item__title" title={location.ContentInfo.Content.TranslatedName}>
                     {location.ContentInfo.Content.TranslatedName}
+                    {location.hidden && <Icon name="view-hide" extraClasses="ibexa-icon--small ibexa-grid-view-item__hidden-icon" />}
                 </div>
             </div>
             {renderToggleSelection()}