Add scrollable folderbar to mediafile

- Cleansup the horrizontal scroller code
- make the folder bar scrollable
- Cleanup the way folder permissions are shown

client/src/app/shared/components/icon-container/icon-container.component.html

@@ -2,12 +2,16 @@
     *ngIf="!swap && showIcon"
     [matTooltip]="iconTooltip"
     [class]="iconAction ? 'pointer' : ''"
-    (click)="iconClick()">{{ icon }}</mat-icon>
+    (click)="iconClick()"
-<span class="content-node">
+    >{{ icon }}</mat-icon
+>
+<span class="content-node" [ngClass]="noWrap ? 'single-line' : 'break-lines'">
     <ng-content></ng-content>
 </span>
 <mat-icon
     *ngIf="swap && showIcon"
     [matTooltip]="iconTooltip"
     [class]="iconAction ? 'pointer' : ''"
-    (click)="iconClick()">{{ icon }}</mat-icon>
+    (click)="iconClick()"
+    >{{ icon }}</mat-icon
+>

client/src/app/shared/components/icon-container/icon-container.component.scss

@@ -37,6 +37,13 @@ os-icon-container {
         margin: auto 5px;
         text-overflow: ellipsis;
         overflow: hidden;
+    }
+
+    .break-lines {
         white-space: pre-line;
     }
+
+    .single-line {
+        white-space: nowrap;
+    }
 }

client/src/app/shared/components/icon-container/icon-container.component.ts

@@ -50,6 +50,12 @@ export class IconContainerComponent {
     @Input()
     public iconTooltip: string;
 
+    /**
+     * Uses a css class for nowrap
+     */
+    @Input()
+    public noWrap = false;
+
     /**
      * Optional action for clicking on the icon.
      */

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html

@@ -7,7 +7,7 @@
     </div>
 
     <!-- Current filters -->
-    <div class="current-filters" *ngIf="filterService">
+    <div class="current-filters h-scroller" *ngIf="filterService">
         <div *ngFor="let filter of filterService.filterStack">
             <button mat-stroked-button (click)="removeFilterFromStack(filter)">
                 <os-icon-container icon="close" class="active-filter">

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss

@@ -52,28 +52,4 @@ span.right-with-margin {
         height: $size;
         width: $size;
     }
-
-    overflow-x: auto;
-
-    // firefox scrollbar
-    scrollbar-width: 5px;
-    scrollbar-color: #666666;
-}
-
-// custom scrollbar. If required on more components, move to style.scss
-.current-filters::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-}
-
-.current-filters::-webkit-scrollbar-thumb {
-    background: #666666;
-    height: 5px;
-    border-radius: 5px;
-}
-
-.current-filters::-webkit-scrollbar-corner {
-    display: none;
-    height: 0px;
-    width: 0px;
 }

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -23,62 +23,59 @@
 
 <!-- Folder navigation bar -->
 <div>
-    <div class="custom-table-header folder-nav-bar">
+    <div class="custom-table-header">
-        <button class="folder" mat-button (click)="changeDirectory(null)" [disabled]="isMultiSelect">
+        <!-- Scrollable folder bar -->
-            <mat-icon class="file-icon">home</mat-icon>
+        <span class="folder-nav-bar h-scroller">
-        </button>
+            <button class="folder" mat-button (click)="changeDirectory(null)" [disabled]="isMultiSelect">
-        <span *ngFor="let directory of directoryChain; let last = last">
+                <mat-icon class="file-icon">home</mat-icon>
-            <div class="arrow">
+            </button>
-                <mat-icon>chevron_right</mat-icon>
+            <span class="folder-section" *ngFor="let directory of directoryChain; let last = last">
-            </div>
+                <span class="arrow">
-            <button
+                    <mat-icon>chevron_right</mat-icon>
-                class="folder"
+                </span>
-                mat-button
+                <button
-                (click)="changeDirectory(directory.id)"
+                    class="folder"
-                [disabled]="isMultiSelect"
+                    mat-button
-                *ngIf="!last"
+                    (click)="changeDirectory(directory.id)"
-            >
+                    [disabled]="isMultiSelect"
-                <span class="folder-text">
+                    *ngIf="!last"
+                >
+                    <span class="folder-text">
+                        {{ directory.filename }}
+                    </span>
+                </button>
+                <button
+                    class="folder"
+                    mat-button
+                    [matMenuTriggerFor]="singleMediafileMenu"
+                    [matMenuTriggerData]="{ mediafile: directory }"
+                    [disabled]="isMultiSelect"
+                    *ngIf="last && showFileMenu(directory)"
+                >
+                    <os-icon-container icon="arrow_drop_down" swap="true" size="large" [noWrap]="true">
+                        {{ directory.filename }}
+                    </os-icon-container>
+                </button>
+                <span class="folder fake-folder folder-text" *ngIf="last && !showFileMenu(directory)">
                     {{ directory.filename }}
                 </span>
-            </button>
-            <button
-                class="folder"
-                mat-button
-                [matMenuTriggerFor]="singleMediafileMenu"
-                [matMenuTriggerData]="{ mediafile: directory }"
-                [disabled]="isMultiSelect"
-                *ngIf="last && showFileMenu(directory)"
-            >
-                <os-icon-container icon="arrow_drop_down" swap="true" size="large">
-                    {{ directory.filename }}
-                </os-icon-container>
-            </button>
-            <span class="folder fake-folder folder-text" *ngIf="last && !showFileMenu(directory)">
-                {{ directory.filename }}
             </span>
         </span>
+
+        <!-- Visibility as button -->
         <span class="visibility" *ngIf="canEdit && directory && directory.has_inherited_access_groups">
-            <span class="visible-for" translate>
+            <button class="visible-for" mat-button (click)="onEditFile(directory)">
                 <os-icon-container
-                    icon="visibility"
+                    icon="group"
                     matTooltip="{{ 'Allowed access groups for this directory' | translate }}"
                 >
-                    <span *ngFor="let group of directory.inherited_access_groups; let last = last">
+                    <span *ngFor="let group of directory.inherited_access_groups | slice: 0:3; let last = last">
-                        {{ translateSync(group.getTitle()) }}<span *ngIf="!last">,</span>
+                        <span>{{ group.getTitle() | translate }}</span>
+                        <span *ngIf="!last">, </span>
+                        <span *ngIf="last && directory.inherited_access_groups.length > 3">...</span>
                     </span>
                 </os-icon-container>
-            </span>
+            </button>
-        </span>
-        <span class="visibility" *ngIf="canEdit && directory && directory.inherited_access_groups_id === false">
-            <span class="visible-for">
-                <os-icon-container
-                    icon="visibility"
-                    matTooltip="{{ 'Allowed access groups for this directory' | translate }}"
-                >
-                    <span translate>No one</span>
-                </os-icon-container>
-            </span>
         </span>
     </div>
 </div>
@@ -122,8 +119,10 @@
     <!-- Info column -->
     <div *pblNgridCellDef="'info'; row as mediafile" class="fill clickable" (click)="onEditFile(mediafile)">
         <os-icon-container *ngIf="mediafile.access_groups.length" icon="group">
-            <span *ngFor="let group of mediafile.access_groups; let last = last">
+            <span *ngFor="let group of mediafile.access_groups | slice: 0:3; let last = last">
-                {{ translateSync(group.getTitle()) }}<span *ngIf="!last">,</span>
+                <span>{{ group.getTitle() | translate }}</span>
+                <span *ngIf="!last">, </span>
+                <span *ngIf="last && mediafile.access_groups.length > 3">...</span>
             </span>
         </os-icon-container>
     </div>

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

@@ -1,52 +1,57 @@
 @import '~assets/styles/tables.scss';
 
+$navbar-size: 64px;
+
 // multi line tooltip
 ::ng-deep .mat-tooltip {
     white-space: pre-line !important;
 }
 
 .folder-nav-bar {
-    $size: 64px;
+    width: 100%;
-    position: relative;
+    display: flex;
+}
+
+.folder-section {
+    white-space: nowrap;
     display: flex;
 
-    .arrow {
+    .mat-button {
-        height: $size;
+        padding: 0;
-        float: left;
-        .mat-icon {
-            line-height: $size;
-            height: $size;
-        }
     }
+}
 
-    .folder {
+.arrow {
-        height: $size;
+    height: $navbar-size;
+    .mat-icon {
+        line-height: $navbar-size;
+        height: $navbar-size;
     }
+}
 
-    .fake-folder {
+.folder {
-        padding: 0 16px;
+    // float: left;
+    height: $navbar-size;
+    > .content-node {
+        white-space: nowrap;
     }
+}
 
-    .folder-text {
+.fake-folder {
-        font-size: 16px;
+    padding: 0 16px;
-        font-weight: 500;
+}
-        margin: auto 5px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
 
-    .visibility {
+.folder-text {
-        display: flex;
+    font-size: 16px;
-        position: absolute;
+    font-weight: 500;
-        right: 10px;
+    margin: auto 5px;
-        top: 12px;
+    overflow: hidden;
-        .visible-for {
+}
-            margin-left: 10px;
+
-            display: inherit;
+.visibility {
-        }
+    display: flex;
-        mat-icon {
+    .visible-for {
-            cursor: auto;
+        width: min-content;
-        }
     }
 }
 

client/src/styles.scss

@@ -846,3 +846,28 @@ button.mat-menu-item.selected {
         padding: 0 !important;
     }
 }
+
+// custom horrizontal scroll-bar
+
+.h-scroller {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: 5px;
+    scrollbar-color: #666666;
+}
+.h-scroller::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+.h-scroller::-webkit-scrollbar-thumb {
+    background: #666666;
+    height: 5px;
+    border-radius: 5px;
+}
+
+.h-scroller::-webkit-scrollbar-corner {
+    display: none;
+    height: 0px;
+    width: 0px;
+}