From 9f70eb5e09d2d9d2ec6b6a44a40270ea95c2163a Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Mon, 2 Oct 2023 11:59:50 +0200
Subject: [PATCH] feat(workflows): ui review III

---
 .../story-detail/story-detail.component.html  |  8 +---
 .../comment-single.component.css              |  2 +-
 .../lib/breadcrumb/breadcrumb.component.css   | 26 ++++++++++++-
 .../lib/breadcrumb/breadcrumb.component.html  | 38 +++++++++----------
 .../lib/breadcrumb/breadcrumb.component.ts    | 17 ++++++---
 5 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html
index 7e54bd243..6040b12d7 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html
@@ -125,15 +125,11 @@
                     <ng-container *ngIf="vm.project.workflows.length > 1">
                       <tg-ui-breadcrumb
                         class="story-breadcrumb story-breadcrumb-modal"
+                        [collapsable]="true"
                         [crumbs]="[
                           t('kanban.workflows'),
                           vm.story.workflow.name
-                        ]"
-                        [type]="
-                          vm.selectedStoryView === 'side-view'
-                            ? 'collapsed'
-                            : 'expanded'
-                        ">
+                        ]">
                       </tg-ui-breadcrumb>
                     </ng-container>
                     <tg-story-detail-status
diff --git a/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css b/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css
index f830a4495..1ebfcd72b 100644
--- a/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css
+++ b/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css
@@ -9,7 +9,7 @@ Copyright (c) 2023-present Kaleidos INC
 @import url("tools/typography.css");
 @import url("../../styles/delete-comment-confirm.css");
 
-:host() {
+:host {
   container-type: inline-size;
   display: block;
 }
diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
index 876f0b064..e1b40d484 100644
--- a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
+++ b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
@@ -15,8 +15,18 @@ Copyright (c) 2023-present Kaleidos INC
   display: block;
 }
 
+:host(.collapsable) {
+  container-type: inline-size;
+}
+
+.breadcrumb-wrapper {
+  align-items: center;
+  display: flex;
+}
+
 .crumb {
   padding: var(--spacing-4);
+  white-space: nowrap;
 }
 
 .crumb-divider {
@@ -29,8 +39,22 @@ Copyright (c) 2023-present Kaleidos INC
   font-weight: 500;
 }
 
-.collapsed-crumb-icon {
+.crumb-icon {
   block-size: var(--spacing-16);
   color: var(--color-gray40);
   inline-size: var(--spacing-16);
 }
+
+.collapsed {
+  display: none;
+}
+
+@container (inline-size < 200px) {
+  .expanded {
+    display: none;
+  }
+
+  .collapsed {
+    display: block;
+  }
+}
diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
index ae7565606..011cbb3e5 100644
--- a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
+++ b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
@@ -7,7 +7,17 @@
 -->
 
 <ng-container *transloco="let t">
-  <ng-container *ngIf="type === 'expanded'">
+  <div class="breadcrumb-wrapper">
+    <tui-svg
+      [tgUiTooltip]="
+        t('kanban.workflow').charAt(0).toUpperCase() +
+        t('kanban.workflow').slice(1)
+      "
+      tgUiTooltipPosition="bottom"
+      class="crumb-icon collapsed"
+      role="image"
+      [attr.aria-label]="t('kanban.workflow')"
+      [src]="icon"></tui-svg>
     <ng-container
       *ngFor="
         let crumb of crumbs;
@@ -15,32 +25,22 @@
         last as isLast;
         index as i
       ">
-      <span
+      <div
         *ngIf="hideLastCrumb && !isLast"
-        class="crumb"
-        [class.accent]="isLast && accent">
+        class="crumb">
         {{ crumb }}
-      </span>
-      <span
+      </div>
+      <div
         *ngIf="!hideLastCrumb"
         class="crumb"
+        [class.expanded]="!isLast"
         [class.accent]="isLast && accent">
         {{ crumb }}
-      </span>
+      </div>
       <tui-svg
-        class="crumb-divider"
+        class="crumb-divider expanded"
         *ngIf="!(hideLastCrumb && i === crumbs.length - 2) && !isLast"
         src="chevron-right"></tui-svg>
     </ng-container>
-  </ng-container>
-  <ng-container *ngIf="type === 'collapsed'">
-    <tui-svg
-      class="collapsed-crumb-icon"
-      role="image"
-      [attr.aria-label]="t('kanban.workflow')"
-      [src]="icon"></tui-svg>
-    <span class="crumb">
-      {{ crumbs.at(-1) }}
-    </span>
-  </ng-container>
+  </div>
 </ng-container>
diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.ts b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.ts
index 329e1385b..e1f0ff82c 100644
--- a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.ts
+++ b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.ts
@@ -7,11 +7,15 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+} from '@angular/core';
 import { TranslocoDirective } from '@ngneat/transloco';
 import { TuiSvgModule } from '@taiga-ui/core';
-
-type BreadCrumbType = 'expanded' | 'collapsed';
+import { TooltipDirective } from '../tooltip';
 
 @Component({
   selector: 'tg-ui-breadcrumb',
@@ -19,15 +23,18 @@ type BreadCrumbType = 'expanded' | 'collapsed';
   styleUrls: ['./breadcrumb.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, TuiSvgModule],
+  imports: [CommonModule, TranslocoDirective, TuiSvgModule, TooltipDirective],
 })
 export class BreadcrumbComponent {
   @Input({ required: true }) public crumbs: string[] = [];
   @Input() public icon = 'kanban';
   @Input() public accent = false;
-  @Input() public type: BreadCrumbType = 'expanded';
   @Input() public hideLastCrumb = false;
 
+  @Input()
+  @HostBinding('class.collapsable')
+  public collapsable = false;
+
   public trackByIndex(index: number) {
     return index;
   }