(shortcuts) some refinements (perfect scrollbar, star, width, autofocus)

+ removed !important on some classes of colors

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

@@ -44,8 +44,8 @@ export class FuseNavigationService
             if ( navItem.type === 'nav-item' )
             {
                 this.flatNavigation.push({
-                    title    : navItem.title,
+                    title: navItem.title,
-                    titleAbbr: navItem.title.substr(0, 1).toUpperCase(),
+                    type : navItem.type,
                     icon : navItem.icon || false,
                     url  : navItem.url
                 });

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

@@ -7,36 +7,38 @@
 
             <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>
+                <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
+                    {{shortcutItem.title.substr(0, 1).toUpperCase()}}
+                </span>
             </a>
 
         </div>
 
-        <button md-icon-button [mdMenuTriggerFor]="addMenu">
+        <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" (onMenuOpen)="onMenuOpen()">
-            <md-icon>add</md-icon>
+            <md-icon class="amber-600-fg">star</md-icon>
         </button>
 
     </div>
 
-    <md-menu #addMenu="mdMenu">
+    <md-menu #addMenu="mdMenu" class="w-240">
 
-        <md-input-container class="px-16" (click)="$event.stopPropagation()">
+        <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
-            <input mdInput placeholder="Search for an app or a page" (input)="search($event)">
+            <input #searchInput 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" perfect-scrollbar>
 
-        <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}}
+                        {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                     </span>
-                    <p md-line>{{shortcutItem.title}}</p>
+                    <p md-line fxFlex>{{shortcutItem.title}}</p>
+                    <md-icon class="ml-8">star</md-icon>
                 </div>
             </md-list-item>
             <md-list-item *ngIf="shortcutItems.length === 0">
@@ -46,20 +48,20 @@
             </md-list-item>
         </md-nav-list>
 
-        <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto">
+        <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
             <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}}
+                        {{navigationItem.title.substr(0, 1).toUpperCase()}}
                     </span>
-                    <p md-line>{{navigationItem.title}}</p>
+                    <p md-line fxFlex>{{navigationItem.title}}</p>
+                    <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
                 </div>
             </md-list-item>
         </md-nav-list>
-
     </md-menu>
 
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
 import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
@@ -12,6 +12,7 @@ export class FuseShortcutsComponent implements OnInit
     navigationItems: any[];
     filteredNavigationItems: any[];
     searching = false;
+    @ViewChild('searchInput') searchInputField;
 
     constructor(private fuseNavigationService: FuseNavigationService)
     {
@@ -84,4 +85,16 @@ export class FuseShortcutsComponent implements OnInit
 
         this.shortcutItems.push(itemToToggle);
     }
+
+    isInShortcuts(navigationItem)
+    {
+        return this.shortcutItems.find(item => {
+            return item.url === navigationItem.url;
+        });
+    }
+
+    onMenuOpen()
+    {
+        this.searchInputField.nativeElement.focus();
+    }
 }

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

@@ -1,16 +1,16 @@
 .secondary-text,
 .mat-icon,
 .icon {
-    color: rgba(0, 0, 0, 0.54) !important;
+    color: rgba(0, 0, 0, 0.54);
 }
 
 .hint-text,
 .disabled-text {
-    color: rgba(0, 0, 0, 0.38) !important;
+    color: rgba(0, 0, 0, 0.38);
 }
 
 .divider {
-    color: rgba(0, 0, 0, 0.12) !important;
+    color: rgba(0, 0, 0, 0.12);
 }
 
 // Material colors map
@@ -54,7 +54,7 @@ $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;
+            color: rgba(0, 0, 0, 0.54);
         }
 
         &.hint-text,
@@ -79,7 +79,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
         .mat-icon,
         .icon {
-            color: rgba(255, 255, 255, 1) !important;
+            color: rgba(255, 255, 255, 1);
         }
 
         &.secondary-text,