[ADF-3053] breadcrumb fixes (#3406)

* translate breadcrumb root in demo shell * optional "max items" feature and style fixes * should not be restricted by default * style updates * toolbar and breadcrumb layout fixes * breadcrumb demo and testing page * full toolbar scenario * fix translation issue with the dropdown and custom root * a11y fixes * fix issue with duplicate id, remove unused attribute
2025-07-24 17:32:15 +00:00 · 2018-05-25 20:42:24 +01:00
parent 11bac7e796
commit fd729e76c0
18 changed files with 182 additions and 50 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -11,7 +11,8 @@
      "SHOW_COMMENTS" : "Show comments on versions",
      "ALLOW_DOWNLOAD" :"Enable version download",
      "READ_ONLY" : "Read only"
-    }
+    },
+    "PERSONAL-FILES": "Personal Files"
  },
    "title": "Welcome",
    "VERSION": {
@@ -33,6 +34,7 @@
        "APP_NAME": "ADF Demo Application",
        "HOME": "Home",
        "CONTENT_SERVICES": "Content Services",
+        "BREADCRUMB": "Breadcrumb",
        "PROCESS_SERVICES": "Process Services",
        "LOGIN": "Login",
        "CUSTOM_SOURCES": "Custom Sources",
--- a/demo-shell/resources/i18n/ru.json
+++ b/demo-shell/resources/i18n/ru.json
@@ -10,7 +10,8 @@
      "ALLOW_DELETE": "Разрешить удаление",
      "SHOW_COMMENTS": "Показать комментарии к версиям",
      "ALLOW_DOWNLOAD": "Разрешить загрузку версии"
-    }
+    },
+    "PERSONAL-FILES": "Личные файлы"
  },
  "title": "Добро пожаловать",
  "VERSION": {
@@ -171,4 +172,4 @@
    "INHERIT_PERMISSION_BUTTON": "Наследовать разрешение",
    "INHERITED_PERMISSIONS_BUTTON": "Разрешение унаследовано"
  }
-}
+}
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -51,6 +51,7 @@ import { ProcessAttachmentsComponent } from './components/process-service/proces
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { PreviewService } from './services/preview.service';
+import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';

@NgModule({
    imports: [
@@ -101,7 +102,8 @@ import { PreviewService } from './services/preview.service';
        FormLoadingComponent,
        DemoPermissionComponent,
        FormLoadingComponent,
-        BlobPreviewComponent
+        BlobPreviewComponent,
+        BreadcrumbDemoComponent
    ],
    providers: [
        { provide: AppConfigService, useClass: DebugAppConfigService },
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -47,6 +47,7 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
 import { FormLoadingComponent } from './components/form/form-loading.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
+import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';

 export const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
@@ -54,6 +55,11 @@ export const appRoutes: Routes = [
    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [AuthGuardEcm], outlet: 'overlay' },
    { path: 'preview/blob', component: BlobPreviewComponent, outlet: 'overlay', pathMatch: 'full' },
    { path: 'preview/s/:id', component: SharedLinkViewComponent },
+    {
+        path: 'breadcrumb',
+        component: BreadcrumbDemoComponent,
+        canActivate: [AuthGuardEcm]
+    },
    {
        path: '',
        component: AppLayoutComponent,
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -32,6 +32,7 @@ export class AppLayoutComponent implements OnInit {
    links: Array<any> = [
        { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
        { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
+        { href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
--- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
+++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
@@ -0,0 +1,72 @@
+<main>
+    <h1>Breadcrumb</h1>
+    <ul>
+        <li>Try creating and navigating long paths</li>
+        <li>Try resizing the browser width to ensure items are trimmed as expected</li>
+    </ul>
+
+    <h2>1. Standalone (fixed size)</h2>
+    <small>Component is used in the fixed-width layout</small>
+
+    <div class="breadcrumb-container-restricted">
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>2. Standalone (full width)</h2>
+    <small>Component fits the parent container width</small>
+
+    <div>
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>3. Toolbar (standalone)</h2>
+    <small>Component used as a child of the Toolbar component</small>
+
+    <adf-toolbar>
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </adf-toolbar>
+
+    <h2>4. Toolbar (title)</h2>
+    <small>Component is wrapped into the Toolbar Title component</small>
+
+    <adf-toolbar>
+        <adf-toolbar-title>
+            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+            </adf-breadcrumb>
+        </adf-toolbar-title>
+    </adf-toolbar>
+
+    <h2>5. Toolbar with separators and buttons</h2>
+    <small>
+        Component is wrapped into the Toolbar Title component.
+        The toolbar also has separators and buttons that might provide impact on breadcrumb layout.
+        Buttons do nothing and are present for layout purposes.
+    </small>
+
+    <adf-toolbar class="full-content-toolbar">
+        <adf-toolbar-title fxFlex="0 1 auto">
+            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+            </adf-breadcrumb>
+        </adf-toolbar-title>
+        <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+        <div fxFlex="0 0 auto">
+            <button mat-icon-button aria-label="Create a new folder button">
+                <mat-icon>create_new_folder</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Edit node button">
+                <mat-icon>create</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Delete node icon button">
+                <mat-icon>delete</mat-icon>
+            </button>
+        </div>
+    </adf-toolbar>
+
+    <div class="content">
+        <adf-document-list #documentList currentFolderId="-my-">
+        </adf-document-list>
+    </div>
+</main>
--- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
+++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
@@ -0,0 +1,20 @@
+.breadcrumb-container-restricted {
+    width: 800px;
+    max-width: 800px;
+    border: 1px solid lightgray;
+}
+
+.content {
+    margin: 10px 0;
+}
+
+.full-content-toolbar {
+    .adf-toolbar-title {
+        display: flex;
+        width: 100%;
+
+        .adf-breadcrumb {
+            width: 0;
+        }
+    }
+}
--- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts
+++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts
@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './breadcrumb-demo.component.html',
+    styleUrls: [`./breadcrumb-demo.component.scss`],
+})
+export class BreadcrumbDemoComponent {
+
+}
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -33,10 +33,6 @@
        </adf-sites-dropdown>
    </div>

-    <!-- demonstrates breadcrumb use outside of the toolbar -->
-    <adf-breadcrumb root="Personal Files" [target]="documentList" [folderNode]="documentList.folderNode">
-    </adf-breadcrumb>
-
    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
        <adf-upload-drag-area fxFlex="1 1 auto"
                              [disabled]="disableDragArea"
@@ -54,7 +50,7 @@
                <adf-toolbar-title fxFlex="0 1 auto">
                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
                                    class="files-breadcrumb"
-                                    root="Personal Files"
+                                    root="APP.PERSONAL-FILES"
                                    [target]="documentList"
                                    [folderNode]="documentList.folderNode">
                    </adf-breadcrumb>