[ACS-5675] replace breadcrumbs with H1 tags (#3358)

* rename tabs css class to match the ACA app * fix incorrect tooltip for close button * fix close button layout and a11y * lazy loading for details component * replace breadcrumbs with H1 tag * replace breadcrumbs with H1 tag * cleanup unused playwright pages * remove breadcrumbs from e2e * remove line height
2025-07-24 17:31:52 +00:00 · 2023-07-21 10:42:23 +01:00
parent e2257bad23
commit 9204194e53
42 changed files with 99 additions and 206 deletions
--- a/projects/aca-content/src/lib/components/details/details.component.html
+++ b/projects/aca-content/src/lib/components/details/details.component.html
@@ -17,22 +17,31 @@
          -
          <span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
        </div>
-        <div class="acs-close-members-container">
-          <button mat-icon-button data-automation-id="close-library" title="{{ 'APP.INFO_DRAWER.CLOSE_LIBRARY' | translate }}" (click)="goBack()">
-            <mat-icon>close</mat-icon>
-          </button>
-        </div>
+        <button
+          class="aca-close-details-button"
+          mat-icon-button
+          data-automation-id="close-library"
+          title="{{ 'APP.INFO_DRAWER.CLOSE' | translate }}"
+          (click)="goBack()">
+          <mat-icon>close</mat-icon>
+        </button>
      </div>

-      <mat-tab-group [selectedIndex]="activeTab" class="adw-details-tabs">
+      <mat-tab-group [selectedIndex]="activeTab" class="aca-details-tabs" animationDuration="0">
        <mat-tab label="{{ 'APP.INFO_DRAWER.TABS.PROPERTIES' | translate }}">
-          <app-metadata-tab *ngIf="node && !isLoading; else loading" [node]="node"> </app-metadata-tab>
+          <ng-template matTabContent>
+            <app-metadata-tab *ngIf="node && !isLoading; else loading" [node]="node"></app-metadata-tab>
+          </ng-template>
        </mat-tab>
        <mat-tab label="{{ 'APP.INFO_DRAWER.TABS.COMMENTS' | translate }}">
-          <app-comments-tab *ngIf="node && !isLoading; else loading" [node]="node"> </app-comments-tab>
+          <ng-template matTabContent>
+            <app-comments-tab *ngIf="node && !isLoading; else loading" [node]="node"></app-comments-tab>
+          </ng-template>
        </mat-tab>
        <mat-tab label="{{ 'APP.INFO_DRAWER.TABS.PERMISSIONS' | translate }}">
-          <adf-permission-list *ngIf="node && !isLoading; else loading" [nodeId]="node.id"></adf-permission-list>
+          <ng-template matTabContent>
+            <adf-permission-list *ngIf="node && !isLoading; else loading" [nodeId]="node.id"></adf-permission-list>
+          </ng-template>
        </mat-tab>
      </mat-tab-group>
    </div>
@@ -40,5 +49,5 @@
 </aca-page-layout>

 <ng-template #loading>
-  <mat-progress-bar color="primary" mode="indeterminate"> </mat-progress-bar>
+  <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
 </ng-template>
--- a/projects/aca-content/src/lib/components/details/details.component.scss
+++ b/projects/aca-content/src/lib/components/details/details.component.scss
@@ -1,9 +1,23 @@
+app-details-manager {
+  .aca-close-details-button {
+    margin-right: 15px;
+    margin-top: 2px;
+    outline: none;
+    border-radius: 4px;
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-blue-button-color);
+      border-radius: 4px;
+    }
+  }
+}
+
 .acs-details-container {
  background-color: var(--theme-card-background-color);
  width: 100%;
 }

-.adw-details-tabs {
+.aca-details-tabs {
  margin-top: 40px;
  height: calc(100% - 80px);

@@ -21,10 +35,6 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-
-  .acs-close-members-container {
-    margin-right: 15px;
-  }
 }

 .acs-details-breadcrumb {
--- a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
+++ b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
@@ -1,6 +1,6 @@
 <aca-page-layout>
  <div class="aca-page-layout-header">
-    <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE"> </adf-breadcrumb>
+    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' | translate }}</h1>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
--- a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts
+++ b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts
@@ -37,14 +37,14 @@ import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
 import { DataTableModule, PaginationModule, TemplateModule, ToolbarModule, UserPreferencesService } from '@alfresco/adf-core';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { CommonModule } from '@angular/common';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { DocumentListModule } from '@alfresco/adf-content-services';
 import { DocumentListDirective } from '../../directives/document-list.directive';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
  standalone: true,
  imports: [
    CommonModule,
-    BreadcrumbModule,
    ToolbarModule,
    DocumentListModule,
    DocumentListDirective,
@@ -55,7 +55,8 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
    PaginationModule,
    InfoDrawerComponent,
    ToolbarActionComponent,
-    PageLayoutComponent
+    PageLayoutComponent,
+    TranslateModule
  ],
  templateUrl: './favorite-libraries.component.html',
  encapsulation: ViewEncapsulation.None
--- a/projects/aca-content/src/lib/components/favorites/favorites.component.html
+++ b/projects/aca-content/src/lib/components/favorites/favorites.component.html
@@ -1,6 +1,6 @@
 <aca-page-layout>
  <div class="aca-page-layout-header">
-    <adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE"> </adf-breadcrumb>
+    <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
--- a/projects/aca-content/src/lib/components/favorites/favorites.component.ts
+++ b/projects/aca-content/src/lib/components/favorites/favorites.component.ts
@@ -36,15 +36,15 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { debounceTime, map } from 'rxjs/operators';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { CommonModule } from '@angular/common';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { DocumentListModule } from '@alfresco/adf-content-services';
 import { DataTableModule, PaginationModule, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { DocumentListDirective } from '../../directives/document-list.directive';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
  standalone: true,
  imports: [
    CommonModule,
-    BreadcrumbModule,
    ToolbarModule,
    DocumentListModule,
    DocumentListDirective,
@@ -56,7 +56,8 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
    PaginationDirective,
    InfoDrawerComponent,
    ToolbarActionComponent,
-    PageLayoutComponent
+    PageLayoutComponent,
+    TranslateModule
  ],
  templateUrl: './favorites.component.html',
  encapsulation: ViewEncapsulation.None
--- a/projects/aca-content/src/lib/components/libraries/libraries.component.html
+++ b/projects/aca-content/src/lib/components/libraries/libraries.component.html
@@ -1,6 +1,6 @@
 <aca-page-layout>
  <div class="aca-page-layout-header">
-    <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE"> </adf-breadcrumb>
+    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | translate }}</h1>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
--- a/projects/aca-content/src/lib/components/libraries/libraries.component.ts
+++ b/projects/aca-content/src/lib/components/libraries/libraries.component.ts
@@ -36,15 +36,15 @@ import {
 } from '@alfresco/aca-shared';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { CommonModule } from '@angular/common';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { DocumentListModule } from '@alfresco/adf-content-services';
 import { DataTableModule, PaginationModule, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { DocumentListDirective } from '../../directives/document-list.directive';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
  standalone: true,
  imports: [
    CommonModule,
-    BreadcrumbModule,
    ToolbarModule,
    DocumentListModule,
    DocumentListDirective,
@@ -56,7 +56,8 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
    PaginationDirective,
    InfoDrawerComponent,
    ToolbarActionComponent,
-    PageLayoutComponent
+    PageLayoutComponent,
+    TranslateModule
  ],
  templateUrl: './libraries.component.html',
  encapsulation: ViewEncapsulation.None
--- a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
+++ b/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
@@ -1,6 +1,6 @@
 <aca-page-layout>
  <div class="aca-page-layout-header">
-    <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE"> </adf-breadcrumb>
+    <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
--- a/projects/aca-content/src/lib/components/recent-files/recent-files.component.ts
+++ b/projects/aca-content/src/lib/components/recent-files/recent-files.component.ts
@@ -35,15 +35,15 @@ import {
 } from '@alfresco/aca-shared';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { CommonModule } from '@angular/common';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { DocumentListModule } from '@alfresco/adf-content-services';
 import { DataTableModule, PaginationModule, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { DocumentListDirective } from '../../directives/document-list.directive';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
  standalone: true,
  imports: [
    CommonModule,
-    BreadcrumbModule,
    ToolbarModule,
    DocumentListModule,
    DocumentListDirective,
@@ -55,7 +55,8 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
    PaginationDirective,
    InfoDrawerComponent,
    ToolbarActionComponent,
-    PageLayoutComponent
+    PageLayoutComponent,
+    TranslateModule
  ],
  templateUrl: './recent-files.component.html',
  encapsulation: ViewEncapsulation.None
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
+++ b/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
@@ -1,6 +1,6 @@
 <aca-page-layout>
  <div class="aca-page-layout-header">
-    <adf-breadcrumb root="APP.BROWSE.SHARED.TITLE"></adf-breadcrumb>
+    <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.ts
+++ b/projects/aca-content/src/lib/components/shared-files/shared-files.component.ts
@@ -36,15 +36,15 @@ import {
 } from '@alfresco/aca-shared';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { CommonModule } from '@angular/common';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { DocumentListModule } from '@alfresco/adf-content-services';
 import { DataTableModule, PaginationModule, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { DocumentListDirective } from '../../directives/document-list.directive';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
  standalone: true,
  imports: [
    CommonModule,
-    BreadcrumbModule,
    ToolbarModule,
    DocumentListModule,
    DocumentListDirective,
@@ -56,7 +56,8 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
    InfoDrawerComponent,
    PaginationDirective,
    ToolbarActionComponent,
-    PageLayoutComponent
+    PageLayoutComponent,
+    TranslateModule
  ],
  templateUrl: './shared-files.component.html',
  encapsulation: ViewEncapsulation.None
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
+++ b/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
@@ -1,6 +1,6 @@
 <aca-page-layout>
  <div class="aca-page-layout-header">
-    <adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE"> </adf-breadcrumb>
+    <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.ts
+++ b/projects/aca-content/src/lib/components/trashcan/trashcan.component.ts
@@ -28,7 +28,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContextActionsDirective, PageComponent, PageLayoutComponent, PaginationDirective, ToolbarActionComponent } from '@alfresco/aca-shared';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { DocumentListModule } from '@alfresco/adf-content-services';
 import { DataTableModule, PaginationModule, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { DocumentListDirective } from '../../directives/document-list.directive';

@@ -37,7 +37,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
  imports: [
    CommonModule,
    TranslateModule,
-    BreadcrumbModule,
    ToolbarModule,
    DocumentListModule,
    TemplateModule,
--- a/projects/aca-content/src/lib/ui/application.scss
+++ b/projects/aca-content/src/lib/ui/application.scss
@@ -59,3 +59,14 @@ ng-component {
  max-width: 350px;
  width: 350px;
 }
+
+.aca-page-title {
+  cursor: default;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: 0.15px;
+  line-height: 33px;
+  margin: 0;
+  color: var(--adf-theme-foreground-text-color-087);
+  width: 100%;
+}
--- a/projects/aca-content/src/lib/ui/overrides/ay11.scss
+++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss
@@ -45,19 +45,6 @@
    }
  }

-  .acs-close-members-container {
-    .mat-icon-button {
-      outline: none;
-      line-height: 36px !important;
-
-      @include rounded-border(transparent);
-
-      &:focus-visible {
-        @include rounded-border;
-      }
-    }
-  }
-
  .adf-search-user-button,
  .app-search-button {
    line-height: 36px !important;