Breadcrumbs

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -3,7 +3,7 @@
 <div class="top-bar">
     <div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
 
-    <div *ngIf="currentUser.isUser" class="menu flex-2 visible-lg breadcrumbs-container">
+    <div *ngIf="currentUser.isUser" class="flex-2 visible-lg breadcrumbs-container">
         <redaction-breadcrumbs></redaction-breadcrumbs>
     </div>
 
@@ -14,7 +14,7 @@
         <div class="app-name">{{ titleService.getTitle() }}</div>
     </div>
 
-    <div class="menu right flex-2">
+    <div class="actions flex-2">
         <div class="buttons">
             <redaction-spotlight-search
                 *ngIf="(isSearchScreen$ | async) === false && (currentUser.isUser || currentUser.isManager)"

apps/red-ui/src/app/components/base-screen/base-screen.component.scss

@@ -1,3 +1,9 @@
 redaction-spotlight-search {
     margin-right: 16px !important;
 }
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html

@@ -22,9 +22,10 @@
             </a>
 
             <ng-container *ngIf="is(breadcrumb, 'dropdown')">
-                <a [class.active]="breadcrumbs.length === 1" [matMenuTriggerFor]="dropdownMenu" class="breadcrumb">
-                    {{ breadcrumb.name$ | async }}
-                </a>
+                <button [matMenuTriggerFor]="dropdownMenu" class="dropdown-breadcrumb" mat-button>
+                    <span>{{ breadcrumb.name$ | async }}</span>
+                    <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
+                </button>
 
                 <mat-menu #dropdownMenu="matMenu" class="padding-bottom-8">
                     <a
@@ -34,6 +35,7 @@
                         routerLinkActive="active"
                     >
                         {{ option.name$ | async }}
+                        <mat-icon class="checkmark" svgIcon="iqser:check"></mat-icon>
                     </a>
                 </mat-menu>
             </ng-container>

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss

@@ -1,10 +1,14 @@
 :host {
     display: flex;
     align-items: center;
-    overflow: hidden;
+    overflow: visible;
     height: 100%;
 
     > .breadcrumbs > *:not(:last-child) {
         margin-right: 6px;
     }
+
+    .dropdown-breadcrumb {
+        margin-left: -16px;
+    }
 }

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,11 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 import { Breadcrumb, BreadcrumbDisplayType, BreadcrumbsService } from '@services/breadcrumbs.service';
 
+/** Removed on push change detection because [aria-expanded] doesn't seem to work correctly on the dropdown button */
+
 @Component({
     selector: 'redaction-breadcrumbs',
     templateUrl: './breadcrumbs.component.html',
     styleUrls: ['./breadcrumbs.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BreadcrumbsComponent {
     constructor(readonly breadcrumbsService: BreadcrumbsService) {}

apps/red-ui/src/app/modules/admin/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component.html

@@ -1,4 +1,4 @@
-<div class="menu flex-2 visible-lg breadcrumbs-container">
+<div class="flex-2 visible-lg breadcrumbs-container">
     <ng-container *ngIf="dossierTemplate$ | async as dossierTemplate">
         <a
             *ngIf="root || dossierTemplate"

apps/red-ui/src/app/services/breadcrumbs.service.ts

@@ -52,6 +52,28 @@ export class BreadcrumbsService {
         return this._store$.value;
     }
 
+    private get _mainBreadcrumb(): Breadcrumb {
+        return {
+            name$: of(this._translateService.instant('top-bar.navigation-items.dossiers')),
+            type: 'text' as BreadcrumbDisplayType,
+            options: {
+                routerLink: ['/main', 'dossiers'],
+                routerLinkActiveOptions: { exact: true },
+            },
+        };
+    }
+
+    private get _archiveBreadcrumb(): Breadcrumb {
+        return {
+            name$: of(this._translateService.instant('top-bar.navigation-items.archived-dossiers')),
+            type: 'text' as BreadcrumbDisplayType,
+            options: {
+                routerLink: ['/main', 'archive'],
+                routerLinkActiveOptions: { exact: true },
+            },
+        };
+    }
+
     private _append(breadcrumb: Breadcrumb) {
         this._store$.next([...this._store$.value, breadcrumb]);
     }
@@ -66,11 +88,26 @@ export class BreadcrumbsService {
             return;
         }
 
-        for (const breadcrumb of route.data.breadcrumbs || []) {
+        const breadcrumbs = route.data.breadcrumbs || [];
+
+        if (breadcrumbs.length === 1) {
+            if (breadcrumbs[0] === BreadcrumbTypes.main) {
+                this._addMainDropdownBreadcrumb('active');
+                return;
+            }
+            if (breadcrumbs[0] === BreadcrumbTypes.archive) {
+                this._addMainDropdownBreadcrumb('archived');
+                return;
+            }
+        }
+
+        for (const breadcrumb of breadcrumbs) {
             switch (breadcrumb) {
                 case BreadcrumbTypes.main:
+                    this._append(this._mainBreadcrumb);
+                    break;
                 case BreadcrumbTypes.archive:
-                    this._addMainBreadcrumb(breadcrumb as 'main' | 'archive');
+                    this._append(this._archiveBreadcrumb);
                     break;
                 case BreadcrumbTypes.dossier:
                     this._addDossierBreadcrumb(route);
@@ -82,26 +119,10 @@ export class BreadcrumbsService {
         }
     }
 
-    private _addMainBreadcrumb(type: 'main' | 'archive'): void {
-        const activeDossiers: Breadcrumb = {
-            name$: of(this._translateService.instant('top-bar.navigation-items.dossiers')),
-            type: 'text' as BreadcrumbDisplayType,
-            options: {
-                routerLink: ['/main', 'dossiers'],
-                routerLinkActiveOptions: { exact: true },
-            },
-        };
-
-        const archivedDossiers: Breadcrumb = {
-            name$: of(this._translateService.instant('top-bar.navigation-items.archived-dossiers')),
-            type: 'text' as BreadcrumbDisplayType,
-            options: {
-                routerLink: ['/main', 'archive'],
-                routerLinkActiveOptions: { exact: true },
-            },
-        };
-
-        const activeOption = type === 'main' ? activeDossiers : archivedDossiers;
+    private _addMainDropdownBreadcrumb(type: 'active' | 'archived'): void {
+        const activeDossiers: Breadcrumb = this._mainBreadcrumb;
+        const archivedDossiers: Breadcrumb = this._archiveBreadcrumb;
+        const activeOption = type === 'active' ? activeDossiers : archivedDossiers;
 
         this._append({
             name$: activeOption.name$,

libs/common-ui

@@ -1 +1 @@
-Subproject commit 9b6a1b79db607bf4cb679fb1139414985c2f0b6d
+Subproject commit e2f85365512c68b927465ee5fe4c0d8e3d5dfe1a