[ADF-845] breadcrumb root option added and style review (#1999)

* breadcrumb root option added and style review

* new breadcrumbs

* split onchange in a method

* update readme with a note for old pefix tag

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css

@@ -1,42 +0,0 @@
-/* breadcrumb */
-
-:host .breadcrumb {
-    text-align: left;
-    padding: 8px 15px;
-    list-style: none;
-    background-color: #fafafa;
-    margin: 0;
-}
-
-:host .breadcrumb > li {
-    display: inline-block;
-    box-sizing: border-box;
-}
-
-:host .breadcrumb > li+li:before {
-    content: ">\00a0";
-    padding: 0 0 0 5px;
-    opacity: 0.54;
-    color: #000000;
-}
-
-:host .breadcrumb > li > a {
-    text-decoration: none;
-    opacity: 0.54;
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.43;
-    letter-spacing: -0.2px;
-    color: #000000;
-}
-
-:host .breadcrumb > li:hover > a,
-:host .breadcrumb > .active {
-    opacity: 0.87;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.43;
-    letter-spacing: -0.2px;
-    color: #000000;
-}

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html

@@ -1,10 +1,18 @@
-<div>
-    <ol *ngIf="folderNode" data-automation-id="breadcrumb" class="breadcrumb">
-        <li *ngFor="let r of route; let last = last" [class.active]="last" [ngSwitch]="last">
-            <span *ngSwitchCase="true">{{r.name}}</span>
-            <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + r.name" (click)="onRoutePathClick(r, $event)">
-                {{r.name}}
-            </a>
-        </li>
-    </ol>
+<div *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container">
+    <li *ngFor="let item of route; let last = last" [class.active]="last" [ngSwitch]="last" title="{{ item.name }}" class="adf-breadcrumb-item">
+
+        <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
+           class="adf-breadcrumb-item-anchor"
+           (click)="onRoutePathClick(item, $event)">
+            {{item.name}}
+        </a>
+
+        <strong *ngSwitchCase="true">
+            {{item.name}}
+        </strong>
+
+        <i class="material-icons adf-breadcrumb-item-chevron" *ngIf="!last">
+            chevron_right
+        </i>
+    </li>
 </div>

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.scss

@@ -0,0 +1,56 @@
+@import 'theming';
+
+$breadcrumb-chevron-spacer: 10px;
+
+.adf-breadcrumb {
+    display: flex;
+    flex: 1;
+    width: 0;
+
+    &-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: default;
+        display: flex;
+        overflow: hidden;
+    }
+
+    &-item {
+        position: relative;
+        padding-right: 24px + $breadcrumb-chevron-spacer;
+        color: $alfresco-secondary-text-color;
+        flex: 0 1 auto;
+        overflow: hidden;
+
+        &-anchor {
+            color: inherit;
+            text-decoration: none;
+            display: block;
+            width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        &-anchor:hover, &-last {
+            color: $alfresco-primary-text-color;
+        }
+
+        &-chevron {
+            position: absolute;
+            right: $breadcrumb-chevron-spacer / 2;
+            top: 50%;
+            margin-top: -12px;
+        }
+
+        &-last {
+            font-weight: bold;
+            flex: 1 0 auto;
+
+            &-chevron {
+                display: none;
+            }
+        }
+    }
+}

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts

@@ -16,21 +16,37 @@
  */
 
 import { PathElementEntity } from 'alfresco-js-api';
-import { DocumentListBreadcrumbComponent } from './breadcrumb.component';
+import { BreadcrumbComponent } from './breadcrumb.component';
 import { DocumentListComponent } from '../document-list.component';
+import { CoreModule } from 'ng2-alfresco-core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { fakeNodeWithCreatePermission } from '../../assets/document-list.component.mock';
+import { SimpleChange } from '@angular/core';
 
-describe('DocumentListBreadcrumb', () => {
+declare let jasmine: any;
 
-    let component;
+describe('Breadcrumb', () => {
+
+    let component: BreadcrumbComponent;
+    let fixture: ComponentFixture<BreadcrumbComponent>;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            declarations: [
+                BreadcrumbComponent
+            ]
+        }).compileComponents();
+    }));
 
     beforeEach(() => {
-        component = new DocumentListBreadcrumbComponent();
-    });
+        fixture = TestBed.createComponent(BreadcrumbComponent);
 
-    it('should set current path', () => {
-        let path = '/some/path';
-        component.currentFolderPath = path;
-        expect(component.currentFolderPath).toBe(path);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
     });
 
     it('should prevent default click behavior', () => {
@@ -39,10 +55,20 @@ describe('DocumentListBreadcrumb', () => {
         expect(event.preventDefault).toHaveBeenCalled();
     });
 
+    it('should root be present as default node if the path is null', () => {
+        let change = new SimpleChange(null, fakeNodeWithCreatePermission, true);
+
+        component.root = 'default';
+        component.ngOnChanges({'folderNode': change});
+
+        console.log(component.route);
+        expect(component.route[0].name).toBe('default');
+    });
+
     it('should emit navigation event', (done) => {
-        let node = <PathElementEntity> { id: '-id-', name: 'name' };
+        let node = <PathElementEntity> {id: '-id-', name: 'name'};
         component.navigate.subscribe(val => {
-            expect(val.value).toBe(node);
+            expect(val).toBe(node);
             done();
         });
 
@@ -53,7 +79,7 @@ describe('DocumentListBreadcrumb', () => {
         let documentList = new DocumentListComponent(null, null, null, null);
         spyOn(documentList, 'loadFolderByNodeId').and.stub();
 
-        let node = <PathElementEntity> { id: '-id-', name: 'name' };
+        let node = <PathElementEntity> {id: '-id-', name: 'name'};
         component.target = documentList;
 
         component.onRoutePathClick(node, null);

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts

@@ -15,53 +15,80 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api';
 import { DocumentListComponent } from '../document-list.component';
 
 @Component({
-    selector: 'alfresco-document-list-breadcrumb',
+    selector: 'adf-breadcrumb, alfresco-document-list-breadcrumb',
     templateUrl: './breadcrumb.component.html',
-    styleUrls: ['./breadcrumb.component.css']
+    styleUrls: ['./breadcrumb.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class DocumentListBreadcrumbComponent implements OnChanges {
+export class BreadcrumbComponent implements OnChanges {
 
     @Input()
     folderNode: MinimalNodeEntryEntity;
 
+    @Input()
+    root: string;
+
     @Input()
     target: DocumentListComponent;
 
     route: PathElementEntity[] = [];
 
     @Output()
-    navigate: EventEmitter<any> = new EventEmitter();
+    navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
 
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes['folderNode']) {
+    public ngOnChanges(changes: SimpleChanges): void {
+        if (changes.folderNode) {
+
+            let node: MinimalNodeEntryEntity = changes.folderNode.currentValue;
 
-            let node: MinimalNodeEntryEntity = changes['folderNode'].currentValue;
             if (node) {
-                // see https://github.com/Alfresco/alfresco-js-api/issues/139
                 let route = <PathElementEntity[]> (node.path.elements || []);
+
                 route.push(<PathElementEntity> {
                     id: node.id,
                     name: node.name
                 });
+
+                this.checkRoot(route);
+
                 this.route = route;
             }
         }
     }
 
-    onRoutePathClick(route: PathElementEntity, e?: Event) {
-        if (e) {
-            e.preventDefault();
+    private checkRoot(route) {
+        if (this.root) {
+            
+            let isRoot = false;
+            route = route.filter((currentElement) => {
+                if (currentElement.name === this.root) {
+                    isRoot = true;
+                }
+                return isRoot;
+            });
+
+            if (route.length === 0) {
+                route.push(<PathElementEntity> {
+                    id: undefined,
+                    name: this.root
+                });
+            }
+        }
+        return route;
+    };
+
+    public onRoutePathClick(route: PathElementEntity, event?: Event): void {
+        if (event) {
+            event.preventDefault();
         }
 
         if (route) {
-            this.navigate.emit({
-                value: route
-            });
+            this.navigate.emit(route);
 
             if (this.target) {
                 this.target.loadFolderByNodeId(route.id);