mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' into skeleton
This commit is contained in:
Sercan Yemen
commit
903688ab43
|
|
@ -4,6 +4,19 @@ import { sequence, trigger, stagger, animate, style, group, query, transition, k
|
|||
|
||||
export class Animations
|
||||
{
|
||||
public static fadeInOut = trigger('fadeInOut', [
|
||||
state('0', style({
|
||||
display: 'none',
|
||||
opacity: 0
|
||||
})),
|
||||
state('1', style({
|
||||
display: 'block',
|
||||
opacity: 1
|
||||
})),
|
||||
transition('1 => 0', animate('300ms ease-out')),
|
||||
transition('0 => 1', animate('300ms ease-in'))
|
||||
]);
|
||||
|
||||
public static slideInOut = trigger('slideInOut', [
|
||||
state('0', style({
|
||||
height : '0px',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<a class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span class="nav-link-title">{{item.title}}</span>
|
||||
<md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
|
||||
</a>
|
||||
|
||||
<div class="children" [ngClass]="{'open': isOpen}">
|
||||
|
||||
<div class="{{fuseSettings.colorClasses.navbar}}">
|
||||
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
|
||||
[item]="item"></fuse-nav-horizontal-collapse>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
|
||||
import { Animations } from '../../../../animations';
|
||||
import { FuseConfigService } from '../../../../services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-horizontal-collapse',
|
||||
templateUrl: './nav-horizontal-collapse.component.html',
|
||||
styleUrls : ['./nav-horizontal-collapse.component.scss'],
|
||||
animations : [Animations.slideInOut]
|
||||
})
|
||||
export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
||||
{
|
||||
onSettingsChanged: Subscription;
|
||||
fuseSettings: any;
|
||||
isOpen = false;
|
||||
|
||||
@HostBinding('class') classes = 'nav-item nav-collapse';
|
||||
@Input() item: any;
|
||||
|
||||
@HostListener('mouseenter')
|
||||
open()
|
||||
{
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
@HostListener('mouseleave')
|
||||
close()
|
||||
{
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private fuseConfig: FuseConfigService
|
||||
)
|
||||
{
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.onSettingsChanged.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<a class="nav-link" md-ripple
|
||||
[routerLink]="[item.url]" routerLinkActive="active">
|
||||
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span class="nav-link-title">{{item.title}}</span>
|
||||
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component, HostBinding, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-horizontal-item',
|
||||
templateUrl: './nav-horizontal-item.component.html',
|
||||
styleUrls : ['./nav-horizontal-item.component.scss']
|
||||
})
|
||||
export class FuseNavHorizontalItemComponent
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-item';
|
||||
@Input() item: any;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-subheader',
|
||||
templateUrl: './nav-subheader.component.html',
|
||||
styleUrls : ['./nav-subheader.component.scss']
|
||||
})
|
||||
export class FuseNavSubheaderComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-subheader';
|
||||
@Input() item: any;
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,11 +1,27 @@
|
|||
<div id="main-navigation" class="nav">
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
|
||||
|
||||
<fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>
|
||||
<ng-container *ngIf="layout === 'vertical'">
|
||||
|
||||
<fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
|
||||
<ng-container *ngFor="let item of verticalNavigation">
|
||||
|
||||
<fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
|
||||
<fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layout === 'horizontal'">
|
||||
|
||||
<ng-container *ngFor="let item of horizontalNavigation">
|
||||
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
|
||||
[item]="item"></fuse-nav-horizontal-collapse>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { FuseNavigationService } from './navigation.service';
|
||||
|
||||
@Component({
|
||||
|
|
@ -9,11 +9,15 @@ import { FuseNavigationService } from './navigation.service';
|
|||
})
|
||||
export class FuseNavigationComponent
|
||||
{
|
||||
navigation: any[];
|
||||
verticalNavigation: any[];
|
||||
horizontalNavigation: any[];
|
||||
|
||||
@Input('layout') layout = 'vertical';
|
||||
|
||||
constructor(private navigationService: FuseNavigationService)
|
||||
{
|
||||
this.navigation = navigationService.getNavigation();
|
||||
this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
|
||||
this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FuseNavSubheaderComponent } from './nav-subheader/nav-subheader.component';
|
||||
import { FuseNavigationComponent } from './navigation.component';
|
||||
import { FuseNavItemComponent } from './nav-item/nav-item.component';
|
||||
import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.component';
|
||||
import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
|
||||
import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
|
||||
import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
|
||||
import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
|
||||
import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
|
|
@ -16,9 +18,11 @@ import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.component'
|
|||
],
|
||||
declarations: [
|
||||
FuseNavigationComponent,
|
||||
FuseNavSubheaderComponent,
|
||||
FuseNavItemComponent,
|
||||
FuseNavCollapseComponent
|
||||
FuseNavVerticalSubheaderComponent,
|
||||
FuseNavVerticalItemComponent,
|
||||
FuseNavVerticalCollapseComponent,
|
||||
FuseNavHorizontalItemComponent,
|
||||
FuseNavHorizontalCollapseComponent
|
||||
]
|
||||
})
|
||||
export class FuseNavigationModule
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@ import { FuseNavigation } from '../../../navigation.model';
|
|||
export class FuseNavigationService
|
||||
{
|
||||
onNavCollapseToggled = new EventEmitter<any>();
|
||||
navigation: any[];
|
||||
navigation: FuseNavigation;
|
||||
flatNavigation: any[] = [];
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.navigation = new FuseNavigation().items;
|
||||
this.navigation = new FuseNavigation();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get navigation array
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getNavigation()
|
||||
getNavigation(item)
|
||||
{
|
||||
return this.navigation;
|
||||
return this.navigation[item];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</a>
|
||||
<div class="children" [@slideInOut]="isOpen">
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
|
||||
<fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
import { FuseNavigationService } from '../navigation.service';
|
||||
import { FuseNavigationService } from '../../navigation.service';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Animations } from '../../../animations';
|
||||
import { Animations } from '../../../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-collapse',
|
||||
templateUrl: './nav-collapse.component.html',
|
||||
styleUrls : ['./nav-collapse.component.scss'],
|
||||
selector : 'fuse-nav-vertical-collapse',
|
||||
templateUrl: './nav-vertical-collapse.component.html',
|
||||
styleUrls : ['./nav-vertical-collapse.component.scss'],
|
||||
animations : [Animations.slideInOut]
|
||||
})
|
||||
export class FuseNavCollapseComponent implements OnInit
|
||||
export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
{
|
||||
@Input() item: any;
|
||||
@HostBinding('class') classes = 'nav-collapse nav-item';
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-item',
|
||||
templateUrl: './nav-item.component.html',
|
||||
styleUrls : ['./nav-item.component.scss']
|
||||
selector : 'fuse-nav-vertical-item',
|
||||
templateUrl: './nav-vertical-item.component.html',
|
||||
styleUrls : ['./nav-vertical-item.component.scss']
|
||||
})
|
||||
export class FuseNavItemComponent implements OnInit
|
||||
export class FuseNavVerticalItemComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-item';
|
||||
@Input() item: any;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-subheader',
|
||||
templateUrl: './nav-vertical-subheader.component.html',
|
||||
styleUrls : ['./nav-vertical-subheader.component.scss']
|
||||
})
|
||||
export class FuseNavVerticalSubheaderComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-subheader';
|
||||
@Input() item: any;
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
height: 64px;
|
||||
font-size: 13px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<md-icon>settings</md-icon>
|
||||
</button>
|
||||
|
||||
<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 pb-16">
|
||||
<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
|
||||
|
||||
<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16">
|
||||
|
||||
<button md-icon-button class="close-button" (click)="closeBar()">
|
||||
<md-icon>close</md-icon>
|
||||
|
|
@ -12,6 +14,7 @@
|
|||
<h3 md-subheader>Navigation:</h3>
|
||||
<md-list-item>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
|
||||
<md-radio-button class="mr-8" value="top">Top</md-radio-button>
|
||||
<md-radio-button class="mr-8" value="left">Left</md-radio-button>
|
||||
<md-radio-button class="mr-8" value="right">Right</md-radio-button>
|
||||
<md-radio-button class="mr-8" value="none">None</md-radio-button>
|
||||
|
|
@ -36,25 +39,33 @@
|
|||
</md-radio-group>
|
||||
</md-list-item>
|
||||
|
||||
<h3 md-subheader>Layout Mode:</h3>
|
||||
<md-list-item>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
|
||||
<md-radio-button class="mr-8" value="boxed">Boxed</md-radio-button>
|
||||
<md-radio-button class="mr-8" value="fullwidth">Fullwidth</md-radio-button>
|
||||
</md-radio-group>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<h3 md-subheader>Colors:</h3>
|
||||
|
||||
<md-list-item>
|
||||
<md-list-item class="mb-8">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4>Toolbar Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-list-item class="mb-8">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4>Navigation Bar Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-list-item class="mb-8">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4>Footer Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
|
|
@ -68,7 +79,7 @@
|
|||
<md-list-item>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4>Router Animation</h4>
|
||||
<md-select [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<md-option value="none">
|
||||
None
|
||||
</md-option>
|
||||
|
|
|
|||
|
|
@ -19,14 +19,29 @@
|
|||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
width: 360px;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
z-index: 999;
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-options-panel-overlay {
|
||||
position: fixed;
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 998;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,6 +49,10 @@
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mat-divider {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.open-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,35 @@
|
|||
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
|
||||
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { Animations } from '../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-theme-options',
|
||||
templateUrl: './theme-options.component.html',
|
||||
styleUrls : ['./theme-options.component.scss']
|
||||
styleUrls : ['./theme-options.component.scss'],
|
||||
animations : [Animations.fadeInOut]
|
||||
})
|
||||
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('openButton') openButton;
|
||||
@ViewChild('panel') panel;
|
||||
@ViewChild('overlay') overlay: ElementRef;
|
||||
|
||||
public player: AnimationPlayer;
|
||||
fuseSettings: any;
|
||||
barClosed: boolean;
|
||||
|
||||
onSettingsChanged: Subscription;
|
||||
|
||||
constructor(
|
||||
private animationBuilder: AnimationBuilder,
|
||||
private fuseConfig: FuseConfigService
|
||||
private fuseConfig: FuseConfigService,
|
||||
private renderer: Renderer2
|
||||
)
|
||||
{
|
||||
this.barClosed = true;
|
||||
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
|
|
@ -34,6 +41,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
|
||||
ngOnInit()
|
||||
{
|
||||
this.renderer.listen(this.overlay.nativeElement, 'click', () => {
|
||||
this.closeBar();
|
||||
});
|
||||
}
|
||||
|
||||
onSettingsChange()
|
||||
|
|
@ -43,23 +53,29 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
|
||||
closeBar()
|
||||
{
|
||||
this.barClosed = true;
|
||||
|
||||
this.player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
style({transform: 'translate3d(0,0,0)'}),
|
||||
animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
|
||||
]).create(this.panel.nativeElement);
|
||||
|
||||
this.player.play();
|
||||
}
|
||||
|
||||
openBar()
|
||||
{
|
||||
this.barClosed = false;
|
||||
|
||||
this.player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
style({transform: 'translate3d(100%,0,0)'}),
|
||||
animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
|
||||
]).create(this.panel.nativeElement);
|
||||
|
||||
this.player.play();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
|
|||
import { FuseCountdownComponent } from '../components/countdown/countdown.component';
|
||||
import { FuseNavigationService } from '../components/navigation/navigation.service';
|
||||
import { FuseMatchMedia } from '../services/match-media.service';
|
||||
import { FuseNavbarService } from '../../main/navbar/navbar.service';
|
||||
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
|
||||
import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
|
||||
import { FuseHljsComponent } from '../components/hljs/hljs.component';
|
||||
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
|
||||
|
|
@ -69,7 +69,7 @@ import { CookieService } from 'ngx-cookie-service';
|
|||
CookieService,
|
||||
FuseNavigationService,
|
||||
FuseMatchMedia,
|
||||
FuseNavbarService,
|
||||
FuseNavbarVerticalService,
|
||||
FuseMdSidenavHelperService
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -118,4 +118,54 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.nav-item {
|
||||
|
||||
&.nav-collapse {
|
||||
position: relative;
|
||||
|
||||
.children {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
z-index: 999;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-item {
|
||||
|
||||
&.nav-collapse {
|
||||
position: relative;
|
||||
|
||||
> .nav-link {
|
||||
height: 56px;
|
||||
|
||||
.collapse-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .children {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,9 +22,10 @@ export class FuseConfigService
|
|||
// Set the default settings
|
||||
this.defaultSettings = {
|
||||
layout : {
|
||||
navigation: 'left', // 'right', 'left', 'top', none
|
||||
toolbar : 'below', // 'above', 'below', none
|
||||
footer : 'none' // 'above', 'below', none
|
||||
navigation: 'top', // 'right', 'left', 'top', 'none'
|
||||
toolbar : 'above', // 'above', 'below', 'none'
|
||||
footer : 'below', // 'above', 'below', 'none'
|
||||
mode : 'fullwidth' // 'boxed', 'fullwidth'
|
||||
},
|
||||
colorClasses : {
|
||||
toolbar: 'md-white-500-bg',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,14 @@
|
|||
<md-toolbar class="mat-elevation-z1">
|
||||
<span>Footer</span>
|
||||
<md-toolbar>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxFlex>
|
||||
|
||||
<a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
|
||||
target="_blank" md-button class="ml-8 ml-sm-24 md-accent-800-bg" fxFlex="0 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
<md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
|
||||
<span>Purchase Fuse template (Angular4+)</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</md-toolbar>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.mat-toolbar {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
box-shadow: 0px -1px 1px -1px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.14), 0px -1px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.above {
|
||||
|
|
|
|||
|
|
@ -8,13 +8,22 @@
|
|||
</ng-container>
|
||||
<!-- / TOOLBAR: Above -->
|
||||
|
||||
<!-- NAVBAR: Top -->
|
||||
<fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
|
||||
[class]="fuseSettings.colorClasses.navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'top'">
|
||||
</fuse-navbar-horizontal>
|
||||
<!-- / NAVBAR: Top -->
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<fuse-navbar [folded]="false"
|
||||
class="left-navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'left'"
|
||||
[class]="fuseSettings.colorClasses.navbar">
|
||||
</fuse-navbar>
|
||||
<!-- NAVBAR: Left -->
|
||||
<fuse-navbar-vertical [folded]="false"
|
||||
fxShow [fxHide.gt-md]="fuseSettings.layout.navigation === 'top'"
|
||||
class="left-navbar" [class]="fuseSettings.colorClasses.navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
|
||||
</fuse-navbar-vertical>
|
||||
<!-- / NAVBAR: Left -->
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
|
|
@ -34,7 +43,13 @@
|
|||
|
||||
</div>
|
||||
|
||||
<fuse-navbar [folded]="false" class="md-primary-700-bg right-navbar" *ngIf="fuseSettings.layout.navigation === 'right'"></fuse-navbar>
|
||||
<!-- NAVBAR: Right -->
|
||||
<fuse-navbar-vertical [folded]="false"
|
||||
class="right-navbar"
|
||||
[class]="fuseSettings.colorClasses.navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'right'">
|
||||
</fuse-navbar-vertical>
|
||||
<!-- / NAVBAR: Right -->
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ fuse-main {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.boxed {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
&.disable-perfect-scrollbar {
|
||||
|
||||
.ps {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
|
|||
onSettingsChanged: Subscription;
|
||||
fuseSettings: any;
|
||||
@HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars;
|
||||
@HostBinding('class.boxed') boxed;
|
||||
|
||||
constructor(
|
||||
private _renderer: Renderer2,
|
||||
|
|
@ -26,6 +27,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
|
|||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
this.disableCustomScrollbars = !this.fuseSettings.customScrollbars;
|
||||
this.boxed = this.fuseSettings.layout.mode === 'boxed';
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ import { SharedModule } from '../core/modules/shared.module';
|
|||
import { FuseMainComponent } from './main.component';
|
||||
import { FuseContentComponent } from './content/content.component';
|
||||
import { FuseFooterComponent } from './footer/footer.component';
|
||||
import { FuseNavbarComponent } from './navbar/navbar.component';
|
||||
import { FuseNavbarVerticalComponent } from './navbar/vertical/navbar-vertical.component';
|
||||
import { FuseToolbarComponent } from './toolbar/toolbar.component';
|
||||
import { FuseNavigationModule } from '../core/components/navigation/navigation.module';
|
||||
import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
|
||||
import { FuseNavbarVerticalToggleDirective } from './navbar/vertical/navbar-vertical-toggle.directive';
|
||||
import { FuseNavbarHorizontalComponent } from './navbar/horizontal/navbar-horizontal.component';
|
||||
import { FuseQuickPanelComponent } from './quick-panel/quick-panel.component';
|
||||
import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
|
||||
import { FuseShortcutsModule } from '../core/components/shortcuts/shortcuts.module';
|
||||
|
|
@ -20,9 +21,10 @@ import { FuseSearchBarModule } from '../core/components/search-bar/search-bar.mo
|
|||
FuseContentComponent,
|
||||
FuseFooterComponent,
|
||||
FuseMainComponent,
|
||||
FuseNavbarComponent,
|
||||
FuseNavbarVerticalComponent,
|
||||
FuseNavbarHorizontalComponent,
|
||||
FuseToolbarComponent,
|
||||
FuseNavbarToggleDirective,
|
||||
FuseNavbarVerticalToggleDirective,
|
||||
FuseThemeOptionsComponent,
|
||||
FuseQuickPanelComponent
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../core/scss/fuse";
|
||||
@import "../../../core/scss/fuse";
|
||||
|
||||
fuse-main {
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ fuse-main {
|
|||
}
|
||||
}
|
||||
|
||||
fuse-navbar {
|
||||
fuse-navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 256px;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navbar-horizontal',
|
||||
templateUrl : './navbar-horizontal.component.html',
|
||||
styleUrls : ['./navbar-horizontal.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseNavbarHorizontalComponent implements OnInit
|
||||
{
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { Directive, HostListener, Input } from '@angular/core';
|
||||
import { FuseNavbarService } from './navbar.service';
|
||||
import { FuseNavbarComponent } from './navbar.component';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseNavbar]'
|
||||
})
|
||||
export class FuseNavbarToggleDirective
|
||||
{
|
||||
@Input() fuseNavbar: string;
|
||||
navbar: FuseNavbarComponent;
|
||||
|
||||
constructor(private navbarService: FuseNavbarService)
|
||||
{
|
||||
}
|
||||
|
||||
@HostListener('click')
|
||||
onClick()
|
||||
{
|
||||
this.navbar = this.navbarService.getNavBar();
|
||||
|
||||
if ( !this.navbar[this.fuseNavbar] )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.navbar[this.fuseNavbar]();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Directive, HostListener, Input } from '@angular/core';
|
||||
import { FuseNavbarVerticalService } from './navbar-vertical.service';
|
||||
import { FuseNavbarVerticalComponent } from './navbar-vertical.component';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseNavbarVertical]'
|
||||
})
|
||||
export class FuseNavbarVerticalToggleDirective
|
||||
{
|
||||
@Input() fuseNavbarVertical: string;
|
||||
navbar: FuseNavbarVerticalComponent;
|
||||
|
||||
constructor(private navbarService: FuseNavbarVerticalService)
|
||||
{
|
||||
}
|
||||
|
||||
@HostListener('click')
|
||||
onClick()
|
||||
{
|
||||
this.navbar = this.navbarService.getNavBar();
|
||||
|
||||
if ( !this.navbar[this.fuseNavbarVertical] )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.navbar[this.fuseNavbarVertical]();
|
||||
}
|
||||
}
|
||||
|
|
@ -5,16 +5,16 @@
|
|||
<span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.lt-lg>
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-md>
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" perfect-scrollbar>
|
||||
<fuse-navigation></fuse-navigation>
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
137
src/app/main/navbar/vertical/navbar-vertical.component.scss
Normal file
137
src/app/main/navbar/vertical/navbar-vertical.component.scss
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
@import "../../../core/scss/fuse";
|
||||
|
||||
fuse-main {
|
||||
|
||||
&.fuse-nav-bar-folded {
|
||||
|
||||
.content-wrapper {
|
||||
|
||||
&:last-child {
|
||||
padding-left: 64px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-right: 64px !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fuse-navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
max-width: 256px;
|
||||
background-color: #FFFFFF;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 3;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
|
||||
transform: translateX(0);
|
||||
|
||||
&.folded {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.folded-open) {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.folded-open {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
&.right-navbar {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint('lt-lg') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.initialized) {
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
&.right-navbar {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
justify-content: space-between;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseMatchMedia } from '../../core/services/match-media.service';
|
||||
import { FuseNavbarService } from './navbar.service';
|
||||
import { FuseMatchMedia } from '../../../core/services/match-media.service';
|
||||
import { FuseNavbarVerticalService } from './navbar-vertical.service';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { FuseMainComponent } from '../main.component';
|
||||
import { FuseMainComponent } from '../../main.component';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { FuseNavigationService } from '../../core/components/navigation/navigation.service';
|
||||
import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navbar',
|
||||
templateUrl : './navbar.component.html',
|
||||
styleUrls : ['./navbar.component.scss'],
|
||||
selector : 'fuse-navbar-vertical',
|
||||
templateUrl : './navbar-vertical.component.html',
|
||||
styleUrls : ['./navbar-vertical.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseNavbarComponent implements OnInit, OnDestroy
|
||||
export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@HostBinding('class.close') isClosed: boolean;
|
||||
@HostBinding('class.folded') isFoldedActive: boolean;
|
||||
|
|
@ -29,7 +29,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
|
|||
private fuseMainComponentEl: FuseMainComponent,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private fuseNavigationService: FuseNavigationService,
|
||||
private navBarService: FuseNavbarService,
|
||||
private navBarService: FuseNavbarVerticalService,
|
||||
public media: ObservableMedia,
|
||||
private router: Router
|
||||
)
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class FuseNavbarService
|
||||
export class FuseNavbarVerticalService
|
||||
{
|
||||
navBarRef;
|
||||
|
||||
|
|
@ -4,24 +4,23 @@
|
|||
|
||||
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-md>
|
||||
<button md-button class="toggle-button-navbar mat-icon-button"
|
||||
fuseNavbarVertical="openBar" fxHide.gt-md>
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-separator" fxHide.gt-md></div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
|
||||
<div class="logo ml-16">
|
||||
<span class="logo-icon">F</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-8 px-md-16">
|
||||
<fuse-shortcuts></fuse-shortcuts>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-separator"></div>
|
||||
|
||||
<a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
|
||||
target="_blank" md-raised-button class="ml-8 ml-sm-24 md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center" fxHide fxShow.gt-xs>
|
||||
<md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
|
||||
<span fxHide fxShow.gt-xs>Purchase Fuse template (Angular4+)</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
@ -80,7 +79,7 @@
|
|||
</button>
|
||||
</md-menu>
|
||||
|
||||
<div class="toolbar-separator"></div>
|
||||
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
||||
|
||||
<button md-icon-button
|
||||
class="mat-icon-button quick-panel-toggle-button"
|
||||
|
|
|
|||
|
|
@ -15,6 +15,30 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
|
||||
import { FuseConfigService } from '../../core/services/config.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-toolbar',
|
||||
|
|
@ -13,8 +14,12 @@ export class FuseToolbarComponent
|
|||
languages: any;
|
||||
selectedLanguage: any;
|
||||
showSpinner: boolean;
|
||||
horizontalNav: boolean;
|
||||
|
||||
constructor(private router: Router)
|
||||
constructor(
|
||||
private router: Router,
|
||||
private fuseConfig: FuseConfigService
|
||||
)
|
||||
{
|
||||
this.userStatusOptions = [
|
||||
{
|
||||
|
|
@ -75,6 +80,11 @@ export class FuseToolbarComponent
|
|||
this.showSpinner = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.fuseConfig.onSettingsChanged.subscribe((settings) => {
|
||||
this.horizontalNav = settings.layout.navigation === 'top';
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
search(value)
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
<!-- / FUSE Splash Screen CSS -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="primary-800-bg">
|
||||
|
||||
<!-- FUSE Splash Screen -->
|
||||
<fuse-splash-screen id="fuse-splash-screen">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user