shortcuts component done

+ couple fixes in colors.scss
+ added getFlatNavigation() to the navigation service
+ tweaks in navigation files

src/app/core/components/navigation/navigation.model.ts

@@ -59,7 +59,7 @@ export class FuseNavigation
             {
                 'title': 'To-Do',
                 'type' : 'nav-item',
-                'icon' : 'checkbox_cricle',
+                'icon' : 'check_box',
                 'url'  : '/apps/todo'
             },
             {

src/app/core/components/navigation/navigation.module.ts

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {SharedModule} from '../../modules/shared.module';
-import {RouterModule, Routes} from '@angular/router';
+import {RouterModule} from '@angular/router';
 import {FuseNavSubheaderComponent} from './nav-subheader/nav-subheader.component';
 import {FuseNavigationComponent} from './navigation.component';
 import {FuseNavItemComponent} from './nav-item/nav-item.component';

src/app/core/components/navigation/navigation.service.ts

@@ -1,19 +1,64 @@
-import {EventEmitter, Injectable} from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
-import {FuseNavigation} from './navigation.model';
+import { FuseNavigation } from './navigation.model';
 
 @Injectable()
 export class FuseNavigationService
 {
     onNavCollapseToggled = new EventEmitter<any>();
-    navigation: object[];
+    navigation: any[];
+    flatNavigation: any[] = [];
 
     constructor()
     {
         this.navigation = new FuseNavigation().items;
     }
 
+    /**
+     * Get navigation array
+     * @returns {any[]}
+     */
     getNavigation()
     {
         return this.navigation;
     }
+
+    /**
+     * Get flattened navigation array
+     * @param navigationItems
+     * @returns {any[]}
+     */
+    getFlatNavigation(navigationItems?)
+    {
+        if ( !navigationItems )
+        {
+            navigationItems = this.navigation;
+        }
+
+        for ( const navItem of navigationItems )
+        {
+            if ( navItem.type === 'subheader' )
+            {
+                continue;
+            }
+
+            if ( navItem.type === 'nav-item' )
+            {
+                this.flatNavigation.push({
+                    title    : navItem.title,
+                    titleAbbr: navItem.title.substr(0, 1).toUpperCase(),
+                    icon     : navItem.icon || false,
+                    url      : navItem.url
+                });
+
+                continue;
+            }
+
+            if ( navItem.type === 'nav-collapse' )
+            {
+                this.getFlatNavigation(navItem.children);
+            }
+        }
+
+        return this.flatNavigation;
+    }
 }

src/app/core/components/shortcuts/shortcuts.component.html

@@ -0,0 +1,65 @@
+<div id="fuse-shortcuts">
+
+    <div fxLayout="row" fxLayoutAlign="start center">
+
+        <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
+             *ngFor="let shortcutItem of shortcutItems">
+
+            <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+                <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">{{shortcutItem.titleAbbr}}</span>
+            </a>
+
+        </div>
+
+        <button md-icon-button [mdMenuTriggerFor]="addMenu">
+            <md-icon>add</md-icon>
+        </button>
+
+    </div>
+
+    <md-menu #addMenu="mdMenu">
+
+        <md-input-container class="px-16" (click)="$event.stopPropagation()">
+            <input mdInput placeholder="Search for an app or a page" (input)="search($event)">
+        </md-input-container>
+
+        <md-divider></md-divider>
+
+        <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto">
+            <h3 md-subheader>Current Shortcuts</h3>
+            <md-list-item *ngFor="let shortcutItem of shortcutItems"
+                          (click)="toggleShortcut($event, shortcutItem)">
+                <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
+                    <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                    <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
+                          fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
+                        {{shortcutItem.titleAbbr}}
+                    </span>
+                    <p md-line>{{shortcutItem.title}}</p>
+                </div>
+            </md-list-item>
+            <md-list-item *ngIf="shortcutItems.length === 0">
+                <p>
+                    <small>No shortcuts yet!</small>
+                </p>
+            </md-list-item>
+        </md-nav-list>
+
+        <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto">
+            <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
+                          (click)="toggleShortcut($event, navigationItem)">
+                <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
+                    <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
+                    <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
+                          fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
+                        {{navigationItem.titleAbbr}}
+                    </span>
+                    <p md-line>{{navigationItem.title}}</p>
+                </div>
+            </md-list-item>
+        </md-nav-list>
+
+    </md-menu>
+
+</div>

src/app/core/components/shortcuts/shortcuts.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/core/components/shortcuts/shortcuts.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit } from '@angular/core';
+import { FuseNavigationService } from '../navigation/navigation.service';
+
+@Component({
+    selector   : 'fuse-shortcuts',
+    templateUrl: './shortcuts.component.html',
+    styleUrls  : ['./shortcuts.component.scss']
+})
+export class FuseShortcutsComponent implements OnInit
+{
+    shortcutItems: any[] = [];
+    navigationItems: any[];
+    filteredNavigationItems: any[];
+    searching = false;
+
+    constructor(private fuseNavigationService: FuseNavigationService)
+    {
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
+    }
+
+    ngOnInit()
+    {
+        // User's shortcut items
+        this.shortcutItems = [
+            {
+                'title': 'Calendar',
+                'type' : 'nav-item',
+                'icon' : 'today',
+                'url'  : '/apps/calendar'
+            },
+            {
+                'title': 'Mail',
+                'type' : 'nav-item',
+                'icon' : 'email',
+                'url'  : '/apps/mail'
+            },
+            {
+                'title': 'Contacts',
+                'type' : 'nav-item',
+                'icon' : 'account_box',
+                'url'  : '/apps/contacts'
+            },
+            {
+                'title': 'To-Do',
+                'type' : 'nav-item',
+                'icon' : 'check_box',
+                'url'  : '/apps/todo'
+            }
+        ];
+    }
+
+    search(event)
+    {
+        const value = event.target.value.toLowerCase();
+
+        if ( value === '' )
+        {
+            this.searching = false;
+            this.filteredNavigationItems = this.navigationItems;
+
+            return;
+        }
+
+        this.searching = true;
+
+        this.filteredNavigationItems = this.navigationItems.filter((navigationItem) => {
+            return navigationItem.title.toLowerCase().includes(value);
+        });
+    }
+
+    toggleShortcut(event, itemToToggle)
+    {
+        event.stopPropagation();
+
+        for ( let i = 0; i < this.shortcutItems.length; i++ )
+        {
+            if ( this.shortcutItems[i].url === itemToToggle.url )
+            {
+                this.shortcutItems.splice(i, 1);
+                return;
+            }
+
+        }
+
+        this.shortcutItems.push(itemToToggle);
+    }
+}

src/app/core/components/shortcuts/shortcuts.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { FuseShortcutsComponent } from './shortcuts.component';
+import { SharedModule } from '../../modules/shared.module';
+
+@NgModule({
+    declarations: [
+        FuseShortcutsComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule
+    ],
+    exports     : [
+        FuseShortcutsComponent
+    ]
+})
+export class FuseShortcutsModule
+{
+}

src/app/core/modules/shared.module.ts

@@ -48,12 +48,12 @@ import { FuseHljsComponent } from '../components/hljs/hljs.component';
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
         FusePipesModule,
+        FuseCountdownComponent,
+        FuseHljsComponent,
         PerfectScrollbarModule,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        FuseCountdownComponent,
-        FuseHljsComponent,
         NgxDatatableModule
     ],
     entryComponents: [

src/app/core/scss/partials/_colors.scss

@@ -1,3 +1,18 @@
+.secondary-text,
+.mat-icon,
+.icon {
+    color: rgba(0, 0, 0, 0.54) !important;
+}
+
+.hint-text,
+.disabled-text {
+    color: rgba(0, 0, 0, 0.38) !important;
+}
+
+.divider {
+    color: rgba(0, 0, 0, 0.12) !important;
+}
+
 // Material colors map
 $matColorsMap: (
     primary: $primary,
@@ -37,9 +52,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
         &.secondary-text,
         .secondary-text,
-        &.mat-icon,
         .mat-icon,
-        &.icon,
         .icon {
             color: rgba(0, 0, 0, 0.54) !important;
         }
@@ -64,9 +77,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         // If the base text color is white...
     @else {
 
-        &.mat-icon,
         .mat-icon,
-        &.icon,
         .icon {
             color: rgba(255, 255, 255, 1) !important;
         }
@@ -114,7 +125,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         color: $color !important;
 
         // Generate text color levels
-        // based on current color
+        // based on current contrast color
         @include generateTextColorLevels($color);
     }
 
@@ -158,18 +169,3 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         }
     }
 }
-
-.secondary-text,
-.mat-icon,
-.icon {
-    color: rgba(0, 0, 0, 0.54) !important;
-}
-
-.hint-text,
-.disabled-text {
-    color: rgba(0, 0, 0, 0.38) !important;
-}
-
-.divider {
-    color: rgba(0, 0, 0, 0.12) !important;
-}

src/app/main/main.module.ts

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '../core/components/navigation/navigation.m
 import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
 import { QuickPanelComponent } from './quick-panel/quick-panel.component';
 import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
+import { FuseShortcutsModule } from '../core/components/shortcuts/shortcuts.module';
 
 @NgModule({
     declarations: [
@@ -25,7 +26,8 @@ import { FuseThemeOptionsComponent } from '../core/components/theme-options/them
     imports     : [
         SharedModule,
         RouterModule,
-        FuseNavigationModule
+        FuseNavigationModule,
+        FuseShortcutsModule
     ],
     exports     : [
         FuseMainComponent

src/app/main/toolbar/toolbar.component.html

@@ -10,7 +10,9 @@
 
             <div class="toolbar-separator" fxHide.gt-xs></div>
 
-            <div class="px-16">Shortcuts</div>
+            <div class="px-16">
+                <fuse-shortcuts></fuse-shortcuts>
+            </div>
         </div>
 
         <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">