fuse shortcuts mobile behavior

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

@@ -1,4 +1,15 @@
-<div id="fuse-shortcuts">
+<div id="fuse-shortcuts" class="md-white-bg" #shortcuts>
+
+    <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
+         fxHide fxShow.lt-md>
+        <button md-icon-button (click)="showMobileShortcutsPanel()">
+            <md-icon class="amber-600-fg">star</md-icon>
+        </button>
+    </div>
+
+    <div class="shortcuts" fxHide fxShow.gt-sm>
+
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
 
             <div fxLayout="row" fxLayoutAlign="start center">
 
@@ -14,12 +25,21 @@
 
                 </div>
 
-        <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" (onMenuOpen)="onMenuOpen()">
+                <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
+                        (onMenuOpen)="onMenuOpen()">
                     <md-icon class="amber-600-fg">star</md-icon>
                 </button>
 
             </div>
 
+            <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
+                <button md-icon-button (click)="hideMobileShortcutsPanel()">
+                    <md-icon>close</md-icon>
+                </button>
+            </div>
+
+        </div>
+
         <md-menu #addMenu="mdMenu" class="w-240">
 
             <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
@@ -64,4 +84,6 @@
             </md-nav-list>
         </md-menu>
 
+    </div>
+
 </div>

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

@@ -1,3 +1,26 @@
+@import 'src/app/core/scss/fuse';
+
 :host {
 
+    @include media-breakpoint-down('sm') {
+
+        #fuse-shortcuts {
+
+            &.show-mobile-panel {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: 99;
+                padding: 0 8px;
+
+                .shortcuts {
+                    display: flex !important;
+                    flex: 1;
+                    height: 100%;
+                }
+            }
+        }
+    }
 }

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

@@ -1,20 +1,32 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { FuseNavigationService } from '../navigation/navigation.service';
+import { Subscription } from 'rxjs/Subscription';
+import { ObservableMedia } from '@angular/flex-layout';
+import { FuseMatchMedia } from '../../services/match-media.service';
 
 @Component({
     selector   : 'fuse-shortcuts',
     templateUrl: './shortcuts.component.html',
     styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsComponent implements OnInit
+export class FuseShortcutsComponent implements OnInit, OnDestroy
 {
     shortcutItems: any[] = [];
     navigationItems: any[];
     filteredNavigationItems: any[];
     searching = false;
-    @ViewChild('searchInput') searchInputField;
+    mobileShortcutsPanelActive = false;
+    matchMediaSubscription: Subscription;
 
-    constructor(private fuseNavigationService: FuseNavigationService)
+    @ViewChild('searchInput') searchInputField;
+    @ViewChild('shortcuts') shortcutsEl: ElementRef;
+
+    constructor(
+        private renderer: Renderer2,
+        private observableMedia: ObservableMedia,
+        private fuseMatchMedia: FuseMatchMedia,
+        private fuseNavigationService: FuseNavigationService
+    )
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
     }
@@ -48,6 +60,19 @@ export class FuseShortcutsComponent implements OnInit
                 'url'  : '/apps/todo'
             }
         ];
+
+        this.matchMediaSubscription =
+            this.fuseMatchMedia.onMediaChange.subscribe(() => {
+                if ( this.observableMedia.isActive('gt-sm') )
+                {
+                    this.hideMobileShortcutsPanel();
+                }
+            });
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaSubscription.unsubscribe();
     }
 
     search(event)
@@ -97,4 +122,16 @@ export class FuseShortcutsComponent implements OnInit
     {
         this.searchInputField.nativeElement.focus();
     }
+
+    showMobileShortcutsPanel()
+    {
+        this.mobileShortcutsPanelActive = true;
+        this.renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
+    }
+
+    hideMobileShortcutsPanel()
+    {
+        this.mobileShortcutsPanelActive = false;
+        this.renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
+    }
 }

src/app/core/services/match-media.service.ts

@@ -5,7 +5,6 @@ import { EventEmitter, Injectable } from '@angular/core';
 export class FuseMatchMedia
 {
     activeMediaQuery: string;
-    // onMediaChange: Observable<string>;
     onMediaChange: EventEmitter<string> = new EventEmitter<string>();
 
     constructor(private observableMedia: ObservableMedia)

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

@@ -10,11 +10,11 @@
 
             <div class="toolbar-separator" fxHide.gt-md></div>
 
-            <div class="px-16" fxHide.lt-md>
+            <div class="px-8 px-md-16">
                 <fuse-shortcuts></fuse-shortcuts>
             </div>
 
-            <div class="toolbar-separator" fxHide.lt-md></div>
+            <div class="toolbar-separator"></div>
         </div>
 
         <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">