inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve breadcrumb component structure and remove unused imports

Browse Source 
- Enhanced the breadcrumb.component.html for better readability by restructuring the template and using structural directives.
- Streamlined the rendering logic for previous and last nodes in the breadcrumb.
- Removed the unused CommonModule import from breadcrumb.component.ts to simplify dependencies.
This commit is contained in:
Denys Vuika
2026-02-26 09:55:44 +00:00
parent 6ce65aeb4e
commit 40862091bd
2 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/breadcrumb/breadcrumb.component.html
+76 -69
View File
@@ -1,75 +1,82 @@
<nav
*ngIf="folderNode"
data-automation-id="breadcrumb"
class="adf-breadcrumb-container"
role="navigation"
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
>
@if (hasPreviousNodes()) {
<button
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
class="adf-breadcrumb-dropdown-path"
tabindex="-1"
role="button"
>
@for (node of previousNodes; track node.id) {
<mat-option
(click)="onRoutePathClick(node, $event)"
(onSelectionChange)="onRouteClick(node)"
class="adf-breadcrumb-path-option"
[disabled]="readOnly"
@if (folderNode) {
<nav
data-automation-id="breadcrumb"
class="adf-breadcrumb-container"
role="navigation"
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
>
@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>
}
@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)"
<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"
title="{{ item.name ?? '' | translate }}"
class="adf-breadcrumb-item">
@switch (breadcrumbItemIsAnchor(last)) {
@case (true) {
<a
href="#"
[attr.data-automation-id]="'breadcrumb_' + item.name"
class="adf-breadcrumb-item-anchor"
(click)="onRoutePathClick(item, $event)"
>
{{ item.name ?? '' | translate }}
</a>
}
@default {
<div class="adf-breadcrumb-item-current" aria-current="location">
{{ (selectedRowItemsCount < 1 ? item.name ?? '' : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</div>
}
}
@if (!last) {
<mat-icon class="adf-breadcrumb-item-chevron" adf-icon="chevron_right" />
}
</div>
}
</nav>
<mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
</div>
@if (!folderNode && hasRoot) {
<nav
data-automation-id="breadcrumb"
role="navigation"
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
>
<div class="adf-breadcrumb-item adf-active" role="group">
<div class="adf-breadcrumb-item-current">
{{ root ?? '' | translate }}
</div>
</div>
</nav>
}
</nav>
<nav
*ngIf="!folderNode && hasRoot"
data-automation-id="breadcrumb"
role="navigation"
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
>
<div class="adf-breadcrumb-item adf-active" role="group">
<div class="adf-breadcrumb-item-current">
{{ root ?? '' | translate }}
</div>
</div>
</nav>
}
lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts
+1 -2
View File
@@ -31,7 +31,6 @@ import {
import { MatSelect, MatSelectModule } from '@angular/material/select';
import { Node, PathElement } from '@alfresco/js-api';
import { DocumentListComponent } from '../document-list/components/document-list.component';
import { CommonModule } from '@angular/common';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { IconModule } from '@alfresco/adf-core';
@@ -39,7 +38,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
@Component({
selector: 'adf-breadcrumb',
imports: [CommonModule, IconModule, TranslatePipe, MatSelectModule],
imports: [IconModule, TranslatePipe, MatSelectModule],
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.scss'],
encapsulation: ViewEncapsulation.None,