purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some works on toolbar

Browse Source
This commit is contained in:
mustafahlvc 2017-07-31 16:32:58 +03:00
parent fb2dcc0653
commit 3c4cc44045
3 changed files with 170 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/app/core/components/layout/toolbar/toolbar.component.html
View File

@ -1,13 +1,87 @@
<md-toolbar>
<md-toolbar class="p-0 mat-elevation-z1 md-white-bg">
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
<md-icon>menu</md-icon>
</button>
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
<span>Toolbar</span>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<button md-button class="toggle-button-navbar mat-icon-button" fuseMdSidenavToggler="quick-panel">
<md-icon>menu</md-icon>
</button>
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
<md-icon>menu</md-icon>
</button>
<div class="toolbar-separator" fxHide.gt-xs></div>
<div class="px-16">Shortcuts</div>
</div>
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
<md-spinner *ngIf="showSpinner" class="loading-spinner mx-8"></md-spinner>
<button md-button [mdMenuTriggerFor]="userMenu"
class="user-button">
<div fxLayout="row" fxLayoutAlign="center center">
<img class="avatar" src="assets/images/avatars/profile.jpg">
<span class="username mr-12" fxShow.gt-sm>John Doe</span>
<md-icon class="s-16" fxHide.xs>keyboard_arrow_down</md-icon>
</div>
</button>
<md-menu #userMenu="mdMenu">
<button md-menu-item>
<md-icon>account_circle</md-icon>
<span>My Profile</span>
</button>
<button md-menu-item class="">
<md-icon>mail</md-icon>
<span>Inbox</span>
</button>
<button md-menu-item class="">
<md-icon>exit_to_app</md-icon>
<span>Logout</span>
</button>
</md-menu>
<div class="toolbar-separator"></div>
<button md-icon-button
class="search-button"
aria-label="Search">
<md-icon class="icon">search</md-icon>
</button>
<div class="toolbar-separator"></div>
<button md-button
class="language-button"
[mdMenuTriggerFor]="languageMenu">
<div fxLayout="row" fxLayoutAlign="center center">
<img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
<span class="iso text-uppercase">{{selectedLanguage.id}}</span>
</div>
</button>
<md-menu #languageMenu="mdMenu">
<button md-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
<div fxLayout="row" fxLayoutAlign="start center">
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
<span class="iso">{{lang.title}}</span>
</div>
</button>
</md-menu>
<div class="toolbar-separator"></div>
<button md-icon-button
class="mat-icon-button quick-panel-toggle-button"
fuseMdSidenavToggler="quick-panel"
aria-label="Toggle quick panel">
<md-icon class="icon">format_list_bulleted</md-icon>
</button>
</div>
</div>
</md-toolbar>

21
src/app/core/components/layout/toolbar/toolbar.component.scss
View File

@ -0,0 +1,21 @@
:host {
.loading-spinner {
width: 32px;
height: 32px;
}
.user-button,
.search-button,
.language-button,
.quick-panel-toggle-button {
min-width: 64px;
height: 64px;
}
.toolbar-separator {
height: 64px;
width: 1px;
background: rgba(0, 0, 0, .12);
}
}

68
src/app/core/components/layout/toolbar/toolbar.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
@Component({
selector : 'fuse-toolbar',
@ -8,7 +9,72 @@ import { Component } from '@angular/core';
export class FuseToolbarComponent
{
constructor()
userStatusOptions: any[];
languages: any;
selectedLanguage: any;
showSpinner: boolean;
constructor(private router: Router)
{
this.userStatusOptions = [
{
'title': 'Online',
'icon' : 'icon-checkbox-marked-circle',
'color': '#4CAF50'
},
{
'title': 'Away',
'icon' : 'icon-clock',
'color': '#FFC107'
},
{
'title': 'Do not Disturb',
'icon' : 'icon-minus-circle',
'color': '#F44336'
},
{
'title': 'Invisible',
'icon' : 'icon-checkbox-blank-circle-outline',
'color': '#BDBDBD'
},
{
'title': 'Offline',
'icon' : 'icon-checkbox-blank-circle-outline',
'color': '#616161'
}
];
this.languages = [
{
'id' : 'en',
'title': 'English',
'flag' : 'us'
},
{
'id' : 'es',
'title': 'Spanish',
'flag' : 'es'
},
{
'id' : 'tr',
'title': 'Turkish',
'flag' : 'tr'
}
];
this.selectedLanguage = this.languages[0];
router.events.subscribe(
(event) => {
if ( event instanceof NavigationStart )
{
this.showSpinner = true;
}
if ( event instanceof NavigationEnd )
{
this.showSpinner = false;
}
});
}
}