From fd729e76c04ae37a719e119b5fb5da9f5f2bcaf0 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 25 May 2018 20:42:24 +0100 Subject: [PATCH] [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 --- demo-shell/resources/i18n/en.json | 4 +- demo-shell/resources/i18n/ru.json | 5 +- demo-shell/src/app/app.module.ts | 4 +- demo-shell/src/app/app.routes.ts | 6 ++ .../app-layout/app-layout.component.ts | 1 + .../breadcrumb-demo.component.html | 72 +++++++++++++++++++ .../breadcrumb-demo.component.scss | 20 ++++++ .../breadcrumb-demo.component.ts | 26 +++++++ .../app/components/files/files.component.html | 6 +- docs/content-services/breadcrumb.component.md | 3 +- .../breadcrumb/breadcrumb.component.html | 23 +++--- .../breadcrumb/breadcrumb.component.scss | 19 +++-- .../breadcrumb/breadcrumb.component.ts | 24 +++---- .../dropdown-breadcrumb.component.html | 2 +- .../dropdown-breadcrumb.component.spec.ts | 4 +- .../dropdown-breadcrumb.component.ts | 10 +-- .../upload-drag-area.component.html | 2 +- lib/core/toolbar/toolbar.component.html | 1 - 18 files changed, 182 insertions(+), 50 deletions(-) create mode 100644 demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html create mode 100644 demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss create mode 100644 demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index bc35a39536..670a2834b3 100644 --- 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", diff --git a/demo-shell/resources/i18n/ru.json b/demo-shell/resources/i18n/ru.json index d471bdce78..a1c2369593 100644 --- 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": "Разрешение унаследовано" } -} \ No newline at end of file +} diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index 801b7149a0..c93b229b59 100644 --- 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 }, diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index b64e02b594..11843ff456 100644 --- 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, diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index 8c322da7af..9b7a3df5e0 100644 --- 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 = [ { 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' }, diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html new file mode 100644 index 0000000000..63c5430c8e --- /dev/null +++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html @@ -0,0 +1,72 @@ +
+

Breadcrumb

+
    +
  • Try creating and navigating long paths
    • +
  • Try resizing the browser width to ensure items are trimmed as expected
    • +
+ +

1. Standalone (fixed size)

+ Component is used in the fixed-width layout + +
+ + +
+ +

2. Standalone (full width)

+ Component fits the parent container width + +
+ + +
+ +

3. Toolbar (standalone)

+ Component used as a child of the Toolbar component + + + + + + +

4. Toolbar (title)

+ Component is wrapped into the Toolbar Title component + + + + + + + + +

5. Toolbar with separators and buttons

+ + 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. + + + + + + + + +
+ + + +
+ + +
+ + +
+
diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss new file mode 100644 index 0000000000..979a2be4d1 --- /dev/null +++ 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; + } + } +} diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts new file mode 100644 index 0000000000..242933207a --- /dev/null +++ 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 { + +} diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index e73bbbca08..c5def0d38d 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -33,10 +33,6 @@ - - - -
diff --git a/docs/content-services/breadcrumb.component.md b/docs/content-services/breadcrumb.component.md index ac9134bd89..705f73359c 100644 --- a/docs/content-services/breadcrumb.component.md +++ b/docs/content-services/breadcrumb.component.md @@ -30,6 +30,7 @@ Indicates the current position within a navigation hierarchy. | rootId | `string` | null | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. | | target | [`DocumentListComponent`](../content-services/document-list.component.md) | | (optional) [Document List component](../content-services/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. | | transform | `function` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. | +| maxItems | `number` | | Maximum number of nodes to display before wrapping them with a dropdown element. Not restricted by default. | ### Events @@ -86,7 +87,7 @@ A transform function to remove the "Sites" folder from the path would look somet Below, the breadcrumb is shown before and after the transform function is applied: -![Content Node Selector breadcrumbTransfrom before/after screenshot](../docassets/images/breadcrumbTransform.png) +![Content Node Selector breadcrumbTransform before/after screenshot](../docassets/images/breadcrumbTransform.png) ## See also diff --git a/lib/content-services/breadcrumb/breadcrumb.component.html b/lib/content-services/breadcrumb/breadcrumb.component.html index 289e727344..64b587e38c 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.html +++ b/lib/content-services/breadcrumb/breadcrumb.component.html @@ -1,4 +1,4 @@ -
+
+
+ -
-
  • +
    • -
    + + diff --git a/lib/content-services/breadcrumb/breadcrumb.component.scss b/lib/content-services/breadcrumb/breadcrumb.component.scss index f474fb7cb7..393b50f220 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.scss +++ b/lib/content-services/breadcrumb/breadcrumb.component.scss @@ -15,6 +15,7 @@ font-weight: 600; letter-spacing: -0.2px; color: mat-color($foreground, text, 0.54); + overflow: hidden; &-container { margin: 0; @@ -89,14 +90,20 @@ text-align: left; opacity: 0.6; + flex: 0 10 auto; + min-width: 35px; + text-overflow: ellipsis; + &:hover, &.active { opacity: 1; } &.active { - flex: 1 0 auto; + flex: 1 1 auto; color: mat-color($foreground, text, 0.87); + min-width: initial; + width: auto; } &-chevron { @@ -118,23 +125,21 @@ } &-anchor { + box-sizing: border-box; color: inherit; text-decoration: none; - display: block; + display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - } - - &.active { - display: block; + flex: 0 1 auto; } &-current { text-overflow: ellipsis; overflow: hidden; - max-width: 300px; + white-space: nowrap; } } diff --git a/lib/content-services/breadcrumb/breadcrumb.component.ts b/lib/content-services/breadcrumb/breadcrumb.component.ts index d3e030baf8..a2064afcfc 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.ts +++ b/lib/content-services/breadcrumb/breadcrumb.component.ts @@ -62,16 +62,16 @@ export class BreadcrumbComponent implements OnInit, OnChanges { @Input() transform: (node) => any; - @ViewChild('select') selectbox: MatSelect; + @ViewChild('dropdown') + dropdown: MatSelect; + + /** Maximum number of nodes to display before wrapping them with a dropdown element. */ + @Input() + maxItems: number; previousNodes: PathElementEntity[]; lastNodes: PathElementEntity[]; - /** Number of successive nodes that are going to be shown inside the - * breadcrumb - */ - SUCCESSIVE_NODES = 3; - route: PathElementEntity[] = []; get hasRoot(): boolean { @@ -80,7 +80,7 @@ export class BreadcrumbComponent implements OnInit, OnChanges { /** Emitted when the user clicks on a breadcrumb. */ @Output() - navigate: EventEmitter = new EventEmitter(); + navigate = new EventEmitter(); ngOnInit() { this.transform = this.transform ? this.transform : null; @@ -101,9 +101,9 @@ export class BreadcrumbComponent implements OnInit, OnChanges { } protected recalculateNodes(): void { - if (this.route.length > this.SUCCESSIVE_NODES) { - this.lastNodes = this.route.slice(this.route.length - this.SUCCESSIVE_NODES); - this.previousNodes = this.route.slice(0, this.route.length - this.SUCCESSIVE_NODES); + if (this.maxItems && this.route.length > this.maxItems) { + this.lastNodes = this.route.slice(this.route.length - this.maxItems); + this.previousNodes = this.route.slice(0, this.route.length - this.maxItems); this.previousNodes.reverse(); } else { this.lastNodes = this.route; @@ -112,8 +112,8 @@ export class BreadcrumbComponent implements OnInit, OnChanges { } open(): void { - if (this.selectbox) { - this.selectbox.open(); + if (this.dropdown) { + this.dropdown.open(); } } diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html index 9fea2af697..a5e7946080 100644 --- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html +++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html @@ -10,7 +10,7 @@ chevron_right { it('should open the selectbox when clicking on the folder icon', (done) => { triggerComponentChange(fakeNodeWithCreatePermission); - spyOn(component.selectbox, 'open'); + spyOn(component.dropdown, 'open'); fixture.whenStable().then(() => { @@ -174,7 +174,7 @@ describe('DropdownBreadcrumb', () => { fixture.whenStable().then(() => { - expect(component.selectbox.open).toHaveBeenCalled(); + expect(component.dropdown.open).toHaveBeenCalled(); done(); }); }); diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts index 2b59a0174d..8234e4ec4d 100644 --- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts +++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts @@ -31,8 +31,8 @@ import { BreadcrumbComponent } from './breadcrumb.component'; }) export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements OnChanges { - @ViewChild('select') - selectbox: MatSelect; + @ViewChild('dropdown') + dropdown: MatSelect; currentNode: PathElementEntity; previousNodes: PathElementEntity[]; @@ -60,11 +60,11 @@ export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements } /** - * Opens the selectbox overlay + * Opens the node picker menu */ open(): void { - if (this.selectbox) { - this.selectbox.open(); + if (this.dropdown) { + this.dropdown.open(); } } diff --git a/lib/content-services/upload/components/upload-drag-area.component.html b/lib/content-services/upload/components/upload-drag-area.component.html index 7bb719f070..20a481ef21 100644 --- a/lib/content-services/upload/components/upload-drag-area.component.html +++ b/lib/content-services/upload/components/upload-drag-area.component.html @@ -1,4 +1,4 @@ -
    {{ title }} -