Merge branch 'master' of https://github.com/withinpixels/fuse2

src/app/core/components/layout/toolbar/toolbar.component.html

@@ -1,13 +1,87 @@
-<md-toolbar>
+<md-toolbar class="p-0 mat-elevation-z1 md-white-bg">
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
+    <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
-        <md-icon>menu</md-icon>
-    </button>
 
-    <span>Toolbar</span>
+        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseMdSidenavToggler="quick-panel">
+            <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
-        <md-icon>menu</md-icon>
+                <md-icon>menu</md-icon>
-    </button>
+            </button>
 
+            <div class="toolbar-separator" fxHide.gt-xs></div>
+
+            <div class="px-16">Shortcuts</div>
+        </div>
+
+        <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
+
+            <md-spinner *ngIf="showSpinner" class="loading-spinner mx-8"></md-spinner>
+
+            <button md-button [mdMenuTriggerFor]="userMenu"
+                    class="user-button">
+                <div fxLayout="row" fxLayoutAlign="center center">
+                    <img class="avatar" src="assets/images/avatars/profile.jpg">
+                    <span class="username mr-12" fxShow.gt-sm>John Doe</span>
+                    <md-icon class="s-16" fxHide.xs>keyboard_arrow_down</md-icon>
+                </div>
+            </button>
+
+            <md-menu #userMenu="mdMenu">
+
+                <button md-menu-item>
+                    <md-icon>account_circle</md-icon>
+                    <span>My Profile</span>
+                </button>
+
+                <button md-menu-item class="">
+                    <md-icon>mail</md-icon>
+                    <span>Inbox</span>
+                </button>
+
+                <button md-menu-item class="">
+                    <md-icon>exit_to_app</md-icon>
+                    <span>Logout</span>
+                </button>
+
+            </md-menu>
+
+            <div class="toolbar-separator"></div>
+
+            <button md-icon-button
+                    class="search-button"
+                    aria-label="Search">
+                <md-icon class="icon">search</md-icon>
+            </button>
+
+            <div class="toolbar-separator"></div>
+
+            <button md-button
+                    class="language-button"
+                    [mdMenuTriggerFor]="languageMenu">
+                <div fxLayout="row" fxLayoutAlign="center center">
+                    <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
+                    <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
+                </div>
+            </button>
+
+            <md-menu #languageMenu="mdMenu">
+                <button md-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
+                    <div fxLayout="row" fxLayoutAlign="start center">
+                        <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
+                        <span class="iso">{{lang.title}}</span>
+                    </div>
+                </button>
+            </md-menu>
+
+            <div class="toolbar-separator"></div>
+
+            <button md-icon-button
+                    class="mat-icon-button quick-panel-toggle-button"
+                    fuseMdSidenavToggler="quick-panel"
+                    aria-label="Toggle quick panel">
+                <md-icon class="icon">format_list_bulleted</md-icon>
+            </button>
+
+        </div>
+    </div>
 </md-toolbar>

src/app/core/components/layout/toolbar/toolbar.component.scss

@@ -0,0 +1,21 @@
+:host {
+
+    .loading-spinner {
+        width: 32px;
+        height: 32px;
+    }
+
+    .user-button,
+    .search-button,
+    .language-button,
+    .quick-panel-toggle-button {
+        min-width: 64px;
+        height: 64px;
+    }
+
+    .toolbar-separator {
+        height: 64px;
+        width: 1px;
+        background: rgba(0, 0, 0, .12);
+    }
+}

src/app/core/components/layout/toolbar/toolbar.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -8,7 +9,72 @@ import { Component } from '@angular/core';
 
 export class FuseToolbarComponent
 {
-    constructor()
+    userStatusOptions: any[];
+    languages: any;
+    selectedLanguage: any;
+    showSpinner: boolean;
+
+    constructor(private router: Router)
     {
+
+        this.userStatusOptions = [
+            {
+                'title': 'Online',
+                'icon' : 'icon-checkbox-marked-circle',
+                'color': '#4CAF50'
+            },
+            {
+                'title': 'Away',
+                'icon' : 'icon-clock',
+                'color': '#FFC107'
+            },
+            {
+                'title': 'Do not Disturb',
+                'icon' : 'icon-minus-circle',
+                'color': '#F44336'
+            },
+            {
+                'title': 'Invisible',
+                'icon' : 'icon-checkbox-blank-circle-outline',
+                'color': '#BDBDBD'
+            },
+            {
+                'title': 'Offline',
+                'icon' : 'icon-checkbox-blank-circle-outline',
+                'color': '#616161'
+            }
+        ];
+
+        this.languages = [
+            {
+                'id'   : 'en',
+                'title': 'English',
+                'flag' : 'us'
+            },
+            {
+                'id'   : 'es',
+                'title': 'Spanish',
+                'flag' : 'es'
+            },
+            {
+                'id'   : 'tr',
+                'title': 'Turkish',
+                'flag' : 'tr'
+            }
+        ];
+
+        this.selectedLanguage = this.languages[0];
+
+        router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationStart )
+                {
+                    this.showSpinner = true;
+                }
+                if ( event instanceof NavigationEnd )
+                {
+                    this.showSpinner = false;
+                }
+            });
     }
 }

src/app/core/scss/partials/_helpers.scss

@@ -13,6 +13,16 @@
             max-#{$prop}: $length !important;
         }
     }
+
+    // Percentage
+    @for $i from 0 through 20 {
+        $i-p: 5 * $i;
+        $size-p: 5% * $i;
+
+        .#{$abbrev}-#{$i-p}-p {
+            #{$prop}: $size-p !important;
+        }
+    }
 }
 
 // ######################