[ADF-2739] Improved breadcrumb logic (#3287)

* [ADF-2739] Long names in breadcrumb fixed

* [ADF-2739] Updated styles

* [ADF-2739] Fixing @mixin for breadcrumb

* [ADF-2739] Waiting for changes in demo-shell

* [ADF-2739] Fixed @mixin

* [ADF-2739] Fixed issue related to breadcrumb position

* [ADF-2739] Improved ngOnChanges call for breadcrumb

* [ADF-2739] Fixed issues with lint

* [ADF-2739] Removed comment in dropdown breadcrumb component file

* [ADF-2739] Changed recalculateNodes method from public to protected

lib/content-services/breadcrumb/breadcrumb.component.html

@@ -1,29 +1,46 @@
 <div *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container">
-    <li *ngFor="let item of route; let last = last"
+        <button
-        [class.active]="last"
+            *ngIf="hasPreviousNodes()"
-        [ngSwitch]="last"
+            tabindex="0"
-        title="{{ item.name | translate }}"
+            class="adf-breadcrumb-dropdown-trigger"
-        class="adf-breadcrumb-item">
+            (click)="open()">
+            <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
+            <mat-icon [class.isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
+        </button>
     
-        <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
+        <mat-select
-           class="adf-breadcrumb-item-anchor"
+            #select
-           (click)="onRoutePathClick(item, $event)">
+            *ngIf="hasPreviousNodes()"
-            {{ item.name | translate }}
+            class="adf-breadcrumb-dropdown-path"
-        </a>
+            tabindex="0">
     
-        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
+            <mat-option
-            {{ item.name | translate }}
+                *ngFor="let node of previousNodes;"
-        </div>
+                (click)="onRoutePathClick(node, $event)"
+                class="adf-breadcrumb-path-option"
+                tabindex="0">
+                {{ node.name }}
+            </mat-option>
+        </mat-select>
     
-        <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
+        <li *ngFor="let item of lastNodes; let last = last"
-            chevron_right
+            [class.active]="last"
-        </mat-icon>
+            [ngSwitch]="last"
-    </li>
+            title="{{ item.name | translate }}"
-</div>
+            class="adf-breadcrumb-item">
-<div *ngIf="!folderNode && hasRoot">
+    
-    <li class="adf-breadcrumb-item">
+            <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
-        <div class="adf-breadcrumb-item-current">
+               class="adf-breadcrumb-item-anchor"
-            {{ root | translate }}
+               (click)="onRoutePathClick(item, $event)">
-        </div>
+                {{ item.name | translate }}
-    </li>
+            </a>
-</div>
+    
+            <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
+                {{ item.name | translate }}
+            </div>
+    
+            <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
+                chevron_right
+            </mat-icon>
+        </li>
+    </div>

lib/content-services/breadcrumb/breadcrumb.component.scss

@@ -1,10 +1,11 @@
-$breadcrumb-chevron-spacer: 2px;
-
 @mixin adf-breadcrumb-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $breadcrumb-chevron-spacer: 2px;
 
     .adf-breadcrumb {
         display: flex;
@@ -23,15 +24,62 @@ $breadcrumb-chevron-spacer: 2px;
             cursor: default;
             display: flex;
             overflow: hidden;
-            height: 25px;
+        }
+
+        &-dropdown {
+            &-path {
+                width: 0;
+                height: 0;
+                overflow: hidden;
+                margin-top: 35px;
+                
+                &.mat-select {
+                    width: 0;
+                }
+            }
+
+            &-trigger {
+                cursor: pointer;
+                padding: 0;
+                border: none;
+                background: transparent;
+                width: 30px;
+                margin-top: 2px;
+                margin-right: 5px;
+
+                &:focus {
+                    color: mat-color($primary);
+                    outline: none;
+                }
+    
+                &-arrow {
+                    font-size: 17px;
+                    position: relative;
+                    left: -28px;
+                    top: -2px;
+                    color: white;
+                    z-index: 2;
+                }
+    
+                &-arrow.isRoot {
+                    visibility: hidden;
+                }
+    
+                &-arrow.focus {
+                    border: none;
+                }
+            }
+
+            &-trigger.isRoot {
+                cursor: not-allowed;
+            }
         }
 
         &-item {
             padding-right: $breadcrumb-chevron-spacer;
             overflow: hidden;
             display: flex;
-            line-height: 24px;
+            line-height: 33px;
-
             font-size: 14px;
             font-weight: 600;
             letter-spacing: -0.2px;
@@ -50,6 +98,8 @@ $breadcrumb-chevron-spacer: 2px;
 
             &-chevron {
                 opacity: 1;
+                margin-top: 9px;
+                font-size: 17px;
             }
 
             &.mat-primary {
@@ -77,6 +127,18 @@ $breadcrumb-chevron-spacer: 2px;
             &.active {
                 display: block;
             }
+
+            &-current {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                max-width: 300px;
+            }
+        }
+
+        &-path-option {
+            &.mat-option {
+                background-color: mat-color($background, card);
+            }
         }
     }
 }

lib/content-services/breadcrumb/breadcrumb.component.ts

@@ -15,16 +15,8 @@
  * limitations under the License.
  */
 
-import {
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
-    Component,
+import { MatSelect } from '@angular/material';
-    EventEmitter,
-    Input,
-    OnChanges,
-    Output,
-    SimpleChanges,
-    ViewEncapsulation,
-    OnInit
-} from '@angular/core';
 import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api';
 import { DocumentListComponent } from '../document-list';
 
@@ -70,6 +62,16 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     @Input()
     transform: (node) => any;
 
+    @ViewChild('select') selectbox: MatSelect;
+
+    previousNodes: PathElementEntity[];
+    lastNodes: PathElementEntity[];
+
+    /** Number of successive nodes that are going to be shown inside the
+     * breadcrumb
+     */
+    SUCCESSIVE_NODES = 3;
+
     route: PathElementEntity[] = [];
 
     get hasRoot(): boolean {
@@ -95,6 +97,28 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
             let node = this.transform ? this.transform(this.folderNode) : this.folderNode;
             this.route = this.parseRoute(node);
         }
+        this.recalculateNodes();
+    }
+
+    protected recalculateNodes(): void {
+        if (this.route.length > this.SUCCESSIVE_NODES) {
+            this.lastNodes = this.route.slice(this.route.length - this.SUCCESSIVE_NODES);
+            this.previousNodes = this.route.slice(0, this.route.length - this.SUCCESSIVE_NODES);
+            this.previousNodes.reverse();
+        } else {
+            this.lastNodes = this.route;
+            this.previousNodes = null;
+        }
+    }
+
+    open(): void {
+        if (this.selectbox) {
+            this.selectbox.open();
+        }
+    }
+
+    hasPreviousNodes(): boolean {
+        return this.previousNodes ? true : false;
     }
 
     parseRoute(node: MinimalNodeEntryEntity): PathElementEntity[] {

lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss

@@ -1,4 +1,3 @@
-
 @mixin adf-breadcrumb-dropdown-theme($theme) {
     $primary: map-get($theme, primary);
     $dropdownHorizontalOffset: 30px;
@@ -15,6 +14,11 @@
             padding: 0;
             border: none;
             background: transparent;
+            
+            &:focus {
+                color: mat-color($primary);
+                outline: none;
+            }
         }
 
         &-dropdown-breadcrumb-item-chevron {
@@ -39,7 +43,7 @@
 
         &-current-folder {
             text-align: left;
-            line-height: 33px;
+            line-height: 25px;
             margin-left: $dropdownHorizontalOffset;
             white-space: nowrap;
             overflow: hidden;

lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatSelect } from '@angular/material';
-import { PathElementEntity } from 'alfresco-js-api';
+import { PathElementEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { BreadcrumbComponent } from './breadcrumb.component';
 
 @Component({
@@ -38,14 +38,23 @@ export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements
     previousNodes: PathElementEntity[];
 
     ngOnChanges(changes: SimpleChanges): void {
-        super.ngOnChanges(changes);
+        if (changes.folderNode) {
+            let node: MinimalNodeEntryEntity = null;
+            node = this.transform ? this.transform(changes.folderNode.currentValue) : changes.folderNode.currentValue;
+            this.route = this.parseRoute(node);
+        }
+
+        if (changes.transform) {
+            let node = this.transform ? this.transform(this.folderNode) : this.folderNode;
+            this.route = this.parseRoute(node);
+        }
         this.recalculateNodes();
     }
 
     /**
      * Calculate the current and previous nodes from the route array
      */
-    private recalculateNodes(): void {
+    protected recalculateNodes(): void {
         this.currentNode = this.route[this.route.length - 1];
         this.previousNodes = this.route.slice(0, this.route.length - 1).reverse();
     }

lib/core/datatable/components/datatable/datatable.component.scss

@@ -390,7 +390,9 @@
         .ellipsis-cell {
             .cell-container {
                 height: 100%;
-             }
+                display: inline-grid;
+                width: 100%;
+            }
 
             .cell-container > * {
                 display: block;