From 8323f849aa610de66b534dad936ae0c6f4c0bf05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 18 Feb 2022 23:53:28 +0200
Subject: [PATCH] RED-3448: Improve long breadcrumbs

---
 .../src/app/components/breadcrumbs/breadcrumbs.component.html | 4 +++-
 .../src/app/components/breadcrumbs/breadcrumbs.component.scss | 2 +-
 apps/red-ui/src/app/services/breadcrumbs.service.ts           | 3 +++
 libs/common-ui                                                | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html
index 0399c8f59..9d0d70f19 100644
--- a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html
+++ b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html
@@ -9,11 +9,13 @@
             <mat-icon *ngIf="!first" svgIcon="iqser:arrow-right"></mat-icon>
 
             <a
+                [class.clamp]="breadcrumb.clamp"
+                [id]="first ? 'navigateToActiveDossiers' : ''"
+                [matTooltip]="breadcrumb.clamp && (breadcrumb.name$ | async)"
                 [routerLinkActiveOptions]="breadcrumb.routerLinkActiveOptions || { exact: false }"
                 [routerLink]="breadcrumb.routerLink"
                 class="breadcrumb"
                 routerLinkActive="active"
-                [id]="first ? 'navigateToActiveDossiers' : ''"
             >
                 {{ breadcrumb.name$ | async }}
             </a>
diff --git a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss
index e04aa5995..59d14c092 100644
--- a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss
+++ b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss
@@ -4,7 +4,7 @@
     overflow: hidden;
     height: 100%;
 
-    > *:not(:last-child) {
+    > .breadcrumbs > *:not(:last-child) {
         margin-right: 6px;
     }
 }
diff --git a/apps/red-ui/src/app/services/breadcrumbs.service.ts b/apps/red-ui/src/app/services/breadcrumbs.service.ts
index aa3ad5b50..a6a082738 100644
--- a/apps/red-ui/src/app/services/breadcrumbs.service.ts
+++ b/apps/red-ui/src/app/services/breadcrumbs.service.ts
@@ -15,6 +15,7 @@ export interface Breadcrumb {
     readonly name$: Observable<string>;
     readonly routerLink?: string[];
     readonly routerLinkActiveOptions?: RouterLinkActiveOptions | undefined;
+    readonly clamp?: boolean;
 }
 
 export type Breadcrumbs = List<Breadcrumb>;
@@ -88,6 +89,7 @@ export class BreadcrumbsService {
             name$: this._dossiersService.getEntityChanged$(dossierId).pipe(pluck('dossierName')),
             routerLink: ['/main', 'dossiers', dossierId],
             routerLinkActiveOptions: { exact: true },
+            clamp: true,
         });
     }
 
@@ -97,6 +99,7 @@ export class BreadcrumbsService {
         this._append({
             name$: this._filesMapService.watch$(dossierId, fileId).pipe(pluck('filename')),
             routerLink: ['/main', 'dossiers', dossierId, 'file', fileId],
+            clamp: true,
         });
     }
 }
diff --git a/libs/common-ui b/libs/common-ui
index ab4568eb9..9b6a1b79d 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit ab4568eb9d6a099b23ce4df07702e3f834fd8a5b
+Subproject commit 9b6a1b79db607bf4cb679fb1139414985c2f0b6d