davidcanonieto e94ce4602b [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
2018-05-14 12:18:49 +01:00

46 lines
1.7 KiB
HTML

<div *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container">
<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>
<mat-select
#select
*ngIf="hasPreviousNodes()"
class="adf-breadcrumb-dropdown-path"
tabindex="0">
<mat-option
*ngFor="let node of previousNodes;"
(click)="onRoutePathClick(node, $event)"
class="adf-breadcrumb-path-option"
tabindex="0">
{{ node.name }}
</mat-option>
</mat-select>
<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>