mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
fuse shortcuts mobile behavior
This commit is contained in:
Sercan Yemen
parent
d70ad0d3c7
commit
e83e0ff07b
|
|
@ -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"
|
||||
*ngFor="let shortcutItem of shortcutItems">
|
||||
<div class="shortcuts" fxHide fxShow.gt-sm>
|
||||
|
||||
<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 fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
|
||||
|
||||
<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.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-icon class="amber-600-fg">star</md-icon>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user