Feature: Move breadcrumb to the header

.vscode/settings.json

@@ -23,5 +23,8 @@
   "tslint.jsEnable": true,
   "tslint.autoFixOnSave": true,
   "vsicons.presets.angular": true,
-  "tslint.alwaysShowRuleFailuresAsWarnings": true
+  "tslint.alwaysShowRuleFailuresAsWarnings": true,
+  "stylelint.enable": true,
+  "css.validate": false,
+  "scss.validate": false
 }

app/app.component.ts

@@ -1,4 +1,3 @@
-import { Location } from "@angular/common";
 import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
 import { MatIconRegistry, MatSidenav } from "@angular/material";
 import { DomSanitizer } from "@angular/platform-browser";
@@ -33,7 +32,6 @@ export class AppComponent implements AfterViewInit, OnInit {
     private sidebarContent: SidebarContentComponent;
 
     constructor(
-        private location: Location,
         matIconRegistry: MatIconRegistry,
         sanitizer: DomSanitizer,
         private sidebarManager: SidebarManager,
@@ -100,14 +98,6 @@ export class AppComponent implements AfterViewInit, OnInit {
         this.adalService.logout();
     }
 
-    public goBack() {
-        this.location.back();
-    }
-
-    public goForward() {
-        this.location.forward();
-    }
-
     /**
      * Preload some data needed.
      */

app/app.layout.html

@@ -1,22 +1,7 @@
 <div id="container" [hidden]="!isAppReady">
     <!--[class.no-userinteract]="!(hasAccount | async)" -->
-    <header id="header" class="noselect">
-        <div class="back-nav">
-            <div class="back" (click)="goBack()" title="Back">
-                <i class="fa fa-angle-left"></i>
-            </div>
-            <div class="forward" (click)="goForward()" title="Forward">
-                <i class="fa fa-angle-right"></i>
-            </div>
-        </div>
-        <div class="logo-banner-bar">
-            <a class="logo" href="#" [routerLink]="['']" title="Batch labs - Home">
-                <img src="./assets/images/header/batchlabs.png" height="19" alt="Batch labs logo">
-            </a>
-        </div>
-        <div class="flex-separator"></div>
-        <bl-pinned-dropdown></bl-pinned-dropdown>
-        <bl-sidebar-bookmarks></bl-sidebar-bookmarks>
+    <header>
+        <bl-header></bl-header>
     </header>
     <nav [class.no-userinteract]="!(hasAccount | async)" class="noselect">
         <bl-app-nav></bl-app-nav>

app/components/base/breadcrumbs/breadcrumb-group.component.ts

@@ -4,52 +4,35 @@ import { Subscription } from "rxjs";
 import { Breadcrumb } from "./breadcrumb-models";
 import { BreadcrumbService } from "./breadcrumb.service";
 
-// Max number of breadcrumb to display without expanding
-const expandableCount = 4;
+import "./breadcrumb-group.scss";
+
 @Component({
     selector: "bl-breadcrumb-group",
     templateUrl: "breadcrumb-group.html",
 })
 export class BreadcrumbGroupComponent implements OnDestroy {
     public crumbs: Breadcrumb[] = [];
-    public displayCrumbs: Breadcrumb[] = [];
-    public expandable = false;
-    public expanded = false;
 
     private _subscription: Subscription;
+    private _lastCrumbCount = 0;
 
     constructor(breadcrumbService: BreadcrumbService, private elementRef: ElementRef) {
         this._subscription = breadcrumbService.crumbs.subscribe((crumbs) => {
             this.crumbs = crumbs;
-            this.expandable = crumbs.length > expandableCount;
-            this._updateDisplayedCrumbs();
+            if (crumbs.length > this._lastCrumbCount) {
+                setTimeout(() => {
+                    this.elementRef.nativeElement.scrollLeft = this.elementRef.nativeElement.scrollWidth;
+                });
+            }
         });
     }
 
     public ngOnDestroy() {
         this._subscription.unsubscribe();
     }
 
-    @HostListener("document:click", ["$event"])
-    public onClick(event: Event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.expanded = false;
-            this._updateDisplayedCrumbs();
-        }
-    }
-
-    public expand(event: Event) {
-        this.expanded = true;
-        this._updateDisplayedCrumbs();
-        event.stopImmediatePropagation();
-    }
-
-    private _updateDisplayedCrumbs() {
-        const crumbs = this.crumbs;
-        if (this.expandable && !this.expanded) {
-            this.displayCrumbs = crumbs.slice(crumbs.length - 3, crumbs.length);
-        } else {
-            this.displayCrumbs = crumbs;
-        }
+    @HostListener("mousewheel", ["$event"])
+    public mouseWheelMoves(event: WheelEvent) {
+        this.elementRef.nativeElement.scrollLeft -= (event.wheelDelta > 0 ? 10 : -10);
     }
 }

app/components/base/breadcrumbs/breadcrumb-group.html

@@ -1,9 +1,4 @@
 <ul [class.expanded]="expanded">
-    <bl-breadcrumb *ngIf="expandable && !expanded" [index]="0" [crumb]="crumbs[0]">
-    </bl-breadcrumb>
-    <div class="expand" *ngIf="expandable && !expanded" (click)="expand($event)">
-        ...
-    </div>
-    <bl-breadcrumb *ngFor="let crumb of displayCrumbs; let i = index" [index]="i" [crumb]="crumb">
+    <bl-breadcrumb *ngFor="let crumb of crumbs; let i = index" [index]="i" [crumb]="crumb">
     </bl-breadcrumb>
 </ul>

app/styles/base/breadcrumbs.scss → app/components/base/breadcrumbs/breadcrumb-group.scss

@@ -1,12 +1,15 @@
+@import "app/styles/variables";
 
 bl-breadcrumb-group {
+    $header-margin: 4px;
     $separation: 3px;
-    $height: 28px;
+    $height: $header-height - 2 * $header-margin;
     $half-height: $height / 2;
     $color: map-get($primary, 500);
     $hover-color: map-get($primary, 600);
     display: block;
     height: $height;
+    margin-top: $header-margin;
 
     ul {
         display: flex;
@@ -19,16 +22,18 @@ bl-breadcrumb-group {
     }
 
     ul > bl-breadcrumb {
-        display: block;
+        display: flex;
+        align-items: center;
         height: $height;
         background: $color;
         padding: 0 2px;
         position: relative;
         margin: 0 ($half-height + $separation) 0 0;
         text-decoration: none;
         min-width: 40px;
-        max-width: 100px;
+        max-width: 140px;
         cursor: pointer;
+        color: $whitesmoke;
 
         &:after {
             content: "";
@@ -40,7 +45,7 @@ bl-breadcrumb-group {
             top: 0;
         }
 
-        &:before {
+        &:not(:first-child):before {
             content: "";
             position: absolute;
             border-width: $half-height 0 $half-height $half-height;
@@ -61,42 +66,28 @@ bl-breadcrumb-group {
             }
         }
 
-        > div.crumb-content, > div.crumb-label {
+        > .crumb-icon {
+            margin-left: 3px;
+        }
+
+        > .crumb-content {
             overflow: hidden;
             text-overflow: ellipsis;
             word-break: break-all;
             white-space: nowrap;
-        }
-
-        > div.crumb-content {
             text-align: left;
-            color: $whiteSmoke;
             font-size: 12px;
             line-height: 16px;
-
-            &.no-label {
-                height: 100%;
-                display: flex;
-                align-items: center;
-                margin-left: 3px;
-            }
+            height: 100%;
+            display: flex;
+            align-items: center;
+            margin-left: 3px;
 
             &.invert-ellipsis {
-                // width:170px;
-                // border:1px solid #999;
                 direction:rtl;
                 text-align:left;
             }
         }
-
-        > div.crumb-label {
-            color: $whiteSmoke-darker;
-            font-style: italic;
-            text-align: right;
-            line-height: 9px;
-            font-size: 9px;
-            margin-top: 2px;
-        }
     }
 
     ul > .expand {

app/components/base/breadcrumbs/breadcrumb-models.ts

@@ -3,6 +3,7 @@ import { Params } from "@angular/router";
 
 export interface BreadcrumbData {
     name: string;
+    icon?: string;
     label: string;
     invertName?: boolean;
 }

app/components/base/breadcrumbs/breadcrumb.component.ts

@@ -20,6 +20,10 @@ export class BreadcrumbComponent {
         return this.crumb && this.crumb.data.name;
     }
 
+    public get icon() {
+        return this.crumb && this.crumb.data.icon;
+    }
+
     @HostBinding("class")
     public classes = "noselect";
 

app/components/base/breadcrumbs/breadcrumb.html

@@ -1,4 +1,2 @@
-<div class="crumb-content" [class.no-label]="!crumb.data.label" [class.invert-ellipsis]="crumb.data.invertName">{{crumb.data.name}}</div>
-<div class="crumb-label" *ngIf="crumb.data.label">
-    {{crumb.data.label}}
-</div>
+<span class="crumb-icon" *ngIf="icon"><i class="fa fa-{{icon}}"></i></span>
+<span class="crumb-content" [class.invert-ellipsis]="crumb.data.invertName">{{crumb.data.name}}</span>

app/components/base/breadcrumbs/breadcrumb.service.ts

@@ -12,7 +12,7 @@ function breadcrumbMethodMissingMessage(componentName) {
     class ${componentName} {
         // Add this method
         public static breadcrumb(params, queryParams) {
-            return {name: "Some name", label: "Some label"};
+            return {name: "Some name", label: "Some label", icon: "fontawesome-icon"};
         }
     }
 `;

app/components/base/editor/editor.component.ts

@@ -99,7 +99,9 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC
     }
 
     public ngOnDestroy() {
-        this._editor.dispose();
+        if (this._editor) {
+            this._editor.dispose();
+        }
         this._resizeDetector.uninstall(this.elementRef.nativeElement);
     }
 

app/components/base/list-and-show-layout/list-and-show-layout.html

@@ -1,10 +1,6 @@
 <div class="layout-container" [class.filtering]="showAdvancedFilter | async">
     <section class="list-view">
         <div class="left-pane">
-            <div class="bl-breadcrumbs">
-                <bl-breadcrumb-group>
-                </bl-breadcrumb-group>
-            </div>
             <div class="bl-quick-filter-content">
                 <div class="quicksearch">
                     <div class="pre-quicksearch">

app/components/job/details/job-details.component.ts

@@ -32,6 +32,7 @@ export class JobDetailsComponent implements OnInit, OnDestroy {
         return {
             name: id,
             label,
+            icon: "tasks",
         };
     }
 

app/components/layout/header/header.component.ts

@@ -0,0 +1,21 @@
+import { Location } from "@angular/common";
+import { Component } from "@angular/core";
+
+import "./header.scss";
+
+@Component({
+    selector: "bl-header",
+    templateUrl: "header.html",
+})
+export class HeaderComponent {
+    constructor(
+        private location: Location) { }
+
+    public goBack() {
+        this.location.back();
+    }
+
+    public goForward() {
+        this.location.forward();
+    }
+}

app/components/layout/header/header.html

@@ -0,0 +1,19 @@
+<div class="back-nav">
+    <div class="back" (click)="goBack()" title="Back">
+        <i class="fa fa-angle-left"></i>
+    </div>
+    <div class="forward" (click)="goForward()" title="Forward">
+        <i class="fa fa-angle-right"></i>
+    </div>
+</div>
+<a class="logo" href="#" [routerLink]="['']" title="Batch labs - Home">
+    <i class="fa fa-flask"></i>Batch Labs
+</a>
+<bl-breadcrumb-group>
+</bl-breadcrumb-group>
+<div class="menu-item">
+    <bl-pinned-dropdown></bl-pinned-dropdown>
+</div>
+<div class="menu-item">
+    <bl-sidebar-bookmarks></bl-sidebar-bookmarks>
+</div>