mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
refactor: enhance breadcrumb component templates for improved readability and functionality
- Updated breadcrumb.component.html and dropdown-breadcrumb.component.html to use structural directives for better readability and maintainability. - Simplified the rendering of previous nodes and last nodes in the breadcrumb, ensuring proper handling of optional values. - Removed unnecessary imports in dropdown-breadcrumb.component.ts to streamline the component's dependencies.
This commit is contained in:
Denys Vuika
@@ -5,59 +5,60 @@
|
||||
role="navigation"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
|
||||
>
|
||||
<button
|
||||
*ngIf="hasPreviousNodes()"
|
||||
tabindex="0"
|
||||
class="adf-breadcrumb-dropdown-trigger"
|
||||
(click)="open()"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
|
||||
>
|
||||
<div class="adf-breadcrumb-dropdown-trigger-icon">
|
||||
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
|
||||
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<mat-select
|
||||
#dropdown
|
||||
*ngIf="hasPreviousNodes()"
|
||||
class="adf-breadcrumb-dropdown-path"
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let node of previousNodes"
|
||||
(click)="onRoutePathClick(node, $event)"
|
||||
(onSelectionChange)="onRouteClick(node)"
|
||||
class="adf-breadcrumb-path-option"
|
||||
[disabled]="readOnly"
|
||||
@if (hasPreviousNodes()) {
|
||||
<button
|
||||
tabindex="0"
|
||||
class="adf-breadcrumb-dropdown-trigger"
|
||||
(click)="open()"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
|
||||
>
|
||||
{{ node.name | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
||||
<div
|
||||
*ngFor="let item of lastNodes; let last = last"
|
||||
[class.adf-active]="last"
|
||||
[ngSwitch]="breadcrumbItemIsAnchor(last)"
|
||||
title="{{ item.name | translate }}"
|
||||
class="adf-breadcrumb-item">
|
||||
<a
|
||||
*ngSwitchCase="true"
|
||||
href="#"
|
||||
[attr.data-automation-id]="'breadcrumb_' + item.name"
|
||||
class="adf-breadcrumb-item-anchor"
|
||||
(click)="onRoutePathClick(item, $event)"
|
||||
<div class="adf-breadcrumb-dropdown-trigger-icon">
|
||||
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
|
||||
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
|
||||
</div>
|
||||
</button>
|
||||
<mat-select
|
||||
#dropdown
|
||||
class="adf-breadcrumb-dropdown-path"
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
>
|
||||
{{ item.name | translate }}
|
||||
</a>
|
||||
@for (node of previousNodes; track node.id) {
|
||||
<mat-option
|
||||
(click)="onRoutePathClick(node, $event)"
|
||||
(onSelectionChange)="onRouteClick(node)"
|
||||
class="adf-breadcrumb-path-option"
|
||||
[disabled]="readOnly"
|
||||
>
|
||||
{{ node.name ?? '' | translate }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
}
|
||||
|
||||
<div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
|
||||
{{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
|
||||
@for (item of lastNodes; track item.id; let last = $last) {
|
||||
<div
|
||||
[class.adf-active]="last"
|
||||
[ngSwitch]="breadcrumbItemIsAnchor(last)"
|
||||
title="{{ item.name ?? '' | translate }}"
|
||||
class="adf-breadcrumb-item">
|
||||
<a
|
||||
*ngSwitchCase="true"
|
||||
href="#"
|
||||
[attr.data-automation-id]="'breadcrumb_' + item.name"
|
||||
class="adf-breadcrumb-item-anchor"
|
||||
(click)="onRoutePathClick(item, $event)"
|
||||
>
|
||||
{{ item.name ?? '' | translate }}
|
||||
</a>
|
||||
|
||||
<div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
|
||||
{{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
|
||||
</div>
|
||||
|
||||
<mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
|
||||
</div>
|
||||
|
||||
<mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
|
||||
</div>
|
||||
}
|
||||
</nav>
|
||||
|
||||
<nav
|
||||
@@ -68,7 +69,7 @@
|
||||
>
|
||||
<div class="adf-breadcrumb-item adf-active" role="group">
|
||||
<div class="adf-breadcrumb-item-current">
|
||||
{{ root | translate }}
|
||||
{{ root ?? '' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,48 +1,47 @@
|
||||
<nav *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container"
|
||||
role="navigation"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate">
|
||||
|
||||
@if (route.length > 0) {
|
||||
<nav class="adf-dropdown-breadcrumb-container"
|
||||
role="navigation"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate">
|
||||
<button
|
||||
id="dropdown-breadcrumb-button"
|
||||
[tabindex]="hasPreviousNodes() ? 0 : -1"
|
||||
class="adf-dropdown-breadcrumb-trigger"
|
||||
(click)="open()"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate:{ folderName: currentNode?.name }"
|
||||
[attr.aria-haspopup]="hasPreviousNodes() ? 'true' : null"
|
||||
[attr.aria-expanded]="dropdown?.panelOpen || false"
|
||||
data-automation-id="dropdown-breadcrumb-trigger">
|
||||
<mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
|
||||
id="dropdown-breadcrumb-button"
|
||||
[tabindex]="hasPreviousNodes() ? 0 : -1"
|
||||
class="adf-dropdown-breadcrumb-trigger"
|
||||
(click)="open()"
|
||||
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate:{ folderName: currentNode?.name }"
|
||||
[attr.aria-haspopup]="hasPreviousNodes() ? 'true' : null"
|
||||
[attr.aria-expanded]="dropdown?.panelOpen || false"
|
||||
data-automation-id="dropdown-breadcrumb-trigger">
|
||||
<mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
|
||||
</button>
|
||||
|
||||
<mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron" adf-icon="chevron_right" />
|
||||
|
||||
<div class="adf-dropdown-breadcrumb-path">
|
||||
@if (hasPreviousNodes()) {
|
||||
<mat-select
|
||||
#dropdown
|
||||
*ngIf="hasPreviousNodes()"
|
||||
panelClass="adf-breadcrumb-dropdown-panel"
|
||||
class="adf-dropdown-breadcrumb-path-select"
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
data-automation-id="dropdown-breadcrumb-path"
|
||||
aria-labelledby="dropdown-breadcrumb-button">
|
||||
|
||||
#dropdown
|
||||
panelClass="adf-breadcrumb-dropdown-panel"
|
||||
class="adf-dropdown-breadcrumb-path-select"
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
data-automation-id="dropdown-breadcrumb-path"
|
||||
aria-labelledby="dropdown-breadcrumb-button">
|
||||
@for (node of previousNodes; track node) {
|
||||
<mat-option
|
||||
*ngFor="let node of previousNodes;"
|
||||
(click)="onRoutePathClick(node, $event)"
|
||||
(onSelectionChange)="onRouteClick(node)"
|
||||
class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
|
||||
data-automation-class="dropdown-breadcrumb-path-option"
|
||||
[disabled]="readOnly">
|
||||
{{ node.name | translate }}
|
||||
(click)="onRoutePathClick(node, $event)"
|
||||
(onSelectionChange)="onRouteClick(node)"
|
||||
class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
|
||||
data-automation-class="dropdown-breadcrumb-path-option"
|
||||
[disabled]="readOnly">
|
||||
{{ node.name ?? '' | translate }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
}
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="adf-current-folder"
|
||||
[class.adf-isRoot]="!hasPreviousNodes()"
|
||||
data-automation-id="current-folder"
|
||||
aria-current="location">{{ currentNode.name }}
|
||||
class="adf-current-folder"
|
||||
[class.adf-isRoot]="!hasPreviousNodes()"
|
||||
data-automation-id="current-folder"
|
||||
aria-current="location">{{ currentNode.name }}
|
||||
</span>
|
||||
</nav>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -19,13 +19,13 @@ import { Component, OnChanges, ViewChild, ViewEncapsulation } from '@angular/cor
|
||||
import { MatSelect, MatSelectModule } from '@angular/material/select';
|
||||
import { PathElement, Node } from '@alfresco/js-api';
|
||||
import { BreadcrumbComponent } from './breadcrumb.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
import { IconModule } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-dropdown-breadcrumb',
|
||||
imports: [CommonModule, IconModule, MatSelectModule, TranslatePipe],
|
||||
imports: [IconModule, MatSelectModule, TranslatePipe],
|
||||
templateUrl: './dropdown-breadcrumb.component.html',
|
||||
styleUrls: ['./dropdown-breadcrumb.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
|
||||
Reference in New Issue
Block a user