mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-10 02:16:13 +00:00
New layout system (wip)
This commit is contained in:
Sercan Yemen
104
src/app/layout/components/toolbar/toolbar.component.html
Normal file
104
src/app/layout/components/toolbar/toolbar.component.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<mat-toolbar class="p-0 mat-elevation-z1">
|
||||
|
||||
<mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button mat-icon-button class="toggle-button-navbar"
|
||||
*ngIf="!noNav"
|
||||
(click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-separator" fxHide.gt-md></div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
|
||||
<div class="logo ml-16">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-8 px-mat-16">
|
||||
<fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button mat-button [matMenuTriggerFor]="userMenu"
|
||||
class="user-button">
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<img class="avatar" src="assets/images/avatars/profile.jpg">
|
||||
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
|
||||
<mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<mat-menu #userMenu="matMenu" [overlapTrigger]="false">
|
||||
|
||||
<button mat-menu-item>
|
||||
<mat-icon>account_circle</mat-icon>
|
||||
<span>My Profile</span>
|
||||
</button>
|
||||
|
||||
<button mat-menu-item class="">
|
||||
<mat-icon>mail</mat-icon>
|
||||
<span>Inbox</span>
|
||||
</button>
|
||||
|
||||
<button mat-menu-item class="">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
<div class="toolbar-separator"></div>
|
||||
|
||||
<fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
|
||||
|
||||
<div class="toolbar-separator"></div>
|
||||
|
||||
<button mat-button fxHide fxShow.gt-xs
|
||||
class="language-button"
|
||||
[matMenuTriggerFor]="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>
|
||||
|
||||
<mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
|
||||
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang.id)">
|
||||
<span fxLayout="row" fxLayoutAlign="start center">
|
||||
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
|
||||
<span class="iso">{{lang.title}}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button mat-menu-item [routerLink]="'/components/multi-language'">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<span>Learn more</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
||||
|
||||
<button mat-icon-button
|
||||
class="quick-panel-toggle-button"
|
||||
(click)="toggleSidebarOpen('quickPanel')"
|
||||
aria-label="Toggle quick panel">
|
||||
<mat-icon class="icon">format_list_bulleted</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-toolbar>
|
||||
62
src/app/layout/components/toolbar/toolbar.component.scss
Normal file
62
src/app/layout/components/toolbar/toolbar.component.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
z-index: 4;
|
||||
|
||||
&.below {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mat-toolbar {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
|
||||
.loading-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button,
|
||||
fuse-search-bar,
|
||||
.language-button,
|
||||
.quick-panel-toggle-button {
|
||||
min-width: 64px;
|
||||
height: 64px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button-navbar {
|
||||
min-width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.toolbar-separator {
|
||||
height: 64px;
|
||||
width: 1px;
|
||||
background: rgba(0, 0, 0, .12);
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
182
src/app/layout/components/toolbar/toolbar.component.ts
Normal file
182
src/app/layout/components/toolbar/toolbar.component.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
import { navigation } from 'app/navigation/navigation';
|
||||
|
||||
@Component({
|
||||
selector : 'toolbar',
|
||||
templateUrl: './toolbar.component.html',
|
||||
styleUrls : ['./toolbar.component.scss']
|
||||
})
|
||||
|
||||
export class ToolbarComponent implements OnInit, OnDestroy
|
||||
{
|
||||
horizontalNav: boolean;
|
||||
languages: any;
|
||||
noNav: boolean;
|
||||
navigation: any;
|
||||
selectedLanguage: any;
|
||||
showLoadingBar: boolean;
|
||||
userStatusOptions: any[];
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseConfigService} _fuseConfigService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
* @param {TranslateService} _translateService
|
||||
*/
|
||||
constructor(
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router,
|
||||
private _translateService: TranslateService
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
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 : 'tr',
|
||||
title: 'Turkish',
|
||||
flag : 'tr'
|
||||
}
|
||||
];
|
||||
|
||||
this.navigation = navigation;
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the router events to show/hide the loading bar
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationStart),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe((event) => {
|
||||
this.showLoadingBar = true;
|
||||
});
|
||||
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd)
|
||||
)
|
||||
.subscribe((event) => {
|
||||
this.showLoadingBar = false;
|
||||
});
|
||||
|
||||
// Subscribe to the config changes
|
||||
this._fuseConfigService.config
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((settings) => {
|
||||
this.horizontalNav = settings.layout.navigation.position === 'top';
|
||||
this.noNav = settings.layout.navigation.position === 'none';
|
||||
});
|
||||
|
||||
// Set the selected language from default languages
|
||||
this.selectedLanguage = _.find(this.languages, {'id': this._translateService.currentLang});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar open
|
||||
*
|
||||
* @param key
|
||||
*/
|
||||
toggleSidebarOpen(key): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Search
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
search(value): void
|
||||
{
|
||||
// Do your search here...
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the language
|
||||
*
|
||||
* @param langId
|
||||
*/
|
||||
setLanguage(langId): void
|
||||
{
|
||||
// Set the selected language for toolbar
|
||||
this.selectedLanguage = _.find(this.languages, {'id': langId});
|
||||
|
||||
// Use the selected language for translations
|
||||
this._translateService.use(langId);
|
||||
}
|
||||
}
|
||||
32
src/app/layout/components/toolbar/toolbar.module.ts
Normal file
32
src/app/layout/components/toolbar/toolbar.module.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, MatToolbarModule } from '@angular/material';
|
||||
|
||||
import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { ToolbarComponent } from 'app/layout/components/toolbar/toolbar.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ToolbarComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatProgressBarModule,
|
||||
MatToolbarModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseSearchBarModule,
|
||||
FuseShortcutsModule
|
||||
],
|
||||
exports : [
|
||||
ToolbarComponent
|
||||
]
|
||||
})
|
||||
export class ToolbarModule
|
||||
{
|
||||
}
|
||||
Reference in New Issue
Block a user