fuse shortcuts mobile behavior

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

@@ -1,67 +1,89 @@
-<div id="fuse-shortcuts">
+<div id="fuse-shortcuts" class="md-white-bg" #shortcuts>
 
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <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="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
+    <div class="shortcuts" fxHide fxShow.gt-sm>
-             *ngFor="let shortcutItem of shortcutItems">
 
-            <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
-                <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+
-                <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
+            <div fxLayout="row" fxLayoutAlign="start center">
-                    {{shortcutItem.title.substr(0, 1).toUpperCase()}}
+
-                </span>
+                <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
-            </a>
+                     *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.title.substr(0, 1).toUpperCase()}}
+                        </span>
+                    </a>
+
+                </div>
+
+                <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>
 
-        <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" (onMenuOpen)="onMenuOpen()">
+        <md-menu #addMenu="mdMenu" class="w-240">
-            <md-icon class="amber-600-fg">star</md-icon>
+
-        </button>
+            <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+                <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-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.title.substr(0, 1).toUpperCase()}}
+                        </span>
+                        <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">
+                    <p>
+                        <small>No shortcuts yet!</small>
+                    </p>
+                </md-list-item>
+            </md-nav-list>
+
+            <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.title.substr(0, 1).toUpperCase()}}
+                        </span>
+                        <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>
 
-    <md-menu #addMenu="mdMenu" class="w-240">
-
-        <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
-            <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-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.title.substr(0, 1).toUpperCase()}}
-                    </span>
-                    <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">
-                <p>
-                    <small>No shortcuts yet!</small>
-                </p>
-            </md-list-item>
-        </md-nav-list>
-
-        <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.title.substr(0, 1).toUpperCase()}}
-                    </span>
-                    <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.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">