[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
2025-07-24 17:32:15 +00:00 · 2018-05-14 12:18:49 +01:00
parent 2dff636fb1
commit e94ce4602b
6 changed files with 168 additions and 50 deletions
--- a/lib/content-services/breadcrumb/breadcrumb.component.html
+++ b/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"
-        [class.active]="last"
-        [ngSwitch]="last"
-        title="{{ item.name | translate }}"
-        class="adf-breadcrumb-item">
+        <button
+            *ngIf="hasPreviousNodes()"
+            tabindex="0"
+            class="adf-breadcrumb-dropdown-trigger"
+            (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"
-           class="adf-breadcrumb-item-anchor"
-           (click)="onRoutePathClick(item, $event)">
-            {{ item.name | translate }}
-        </a>
+        <mat-select
+            #select
+            *ngIf="hasPreviousNodes()"
+            class="adf-breadcrumb-dropdown-path"
+            tabindex="0">
    
-        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
-            {{ item.name | translate }}
-        </div>
+            <mat-option
+                *ngFor="let node of previousNodes;"
+                (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">
-            chevron_right
-        </mat-icon>
-    </li>
-</div>
-<div *ngIf="!folderNode && hasRoot">
-    <li class="adf-breadcrumb-item">
-        <div class="adf-breadcrumb-item-current">
-            {{ root | translate }}
-        </div>
-    </li>
-</div>
+        <li *ngFor="let item of lastNodes; let last = last"
+            [class.active]="last"
+            [ngSwitch]="last"
+            title="{{ item.name | translate }}"
+            class="adf-breadcrumb-item">
+    
+            <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
+               class="adf-breadcrumb-item-anchor"
+               (click)="onRoutePathClick(item, $event)">
+                {{ item.name | translate }}
+            </a>
+    
+            <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>
--- a/lib/content-services/breadcrumb/breadcrumb.component.scss
+++ b/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);
+            }
        }
    }
 }
--- a/lib/content-services/breadcrumb/breadcrumb.component.ts
+++ b/lib/content-services/breadcrumb/breadcrumb.component.ts
@@ -15,16 +15,8 @@
 * limitations under the License.
 */

-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    Output,
-    SimpleChanges,
-    ViewEncapsulation,
-    OnInit
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatSelect } from '@angular/material';
 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[] {
--- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
+++ b/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;
--- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts
+++ b/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();
    }
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/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;