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

Added an ability to control the folded status of the vertical navigation via FuseConfig

Browse Source
This commit is contained in:
Sercan Yemen 2017-10-30 13:31:23 +03:00
parent 7b10b2ad86
commit ee29f20304
4 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/components/theme-options/theme-options.component.html
View File

@ -21,6 +21,12 @@
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3>Navigation Fold (for vertical navigation):</h3>
<mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
(change)="onSettingsChange()">
Folded
</mat-slide-toggle>
<h3 class="mt-24">Toolbar:</h3> <h3 class="mt-24">Toolbar:</h3>
<mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>

9
src/app/core/services/config.service.ts
View File

@ -22,10 +22,11 @@ export class FuseConfigService
// Set the default settings // Set the default settings
this.defaultSettings = { this.defaultSettings = {
layout : { layout : {
navigation: 'left', // 'right', 'left', 'top', 'none' navigation : 'left', // 'right', 'left', 'top', 'none'
toolbar : 'below', // 'above', 'below', 'none' navigationFolded: false, // true, false
footer : 'below', // 'above', 'below', 'none' toolbar : 'below', // 'above', 'below', 'none'
mode : 'fullwidth' // 'boxed', 'fullwidth' footer : 'below', // 'above', 'below', 'none'
mode : 'fullwidth' // 'boxed', 'fullwidth'
}, },
colorClasses : { colorClasses : {
toolbar: 'mat-white-500-bg', toolbar: 'mat-white-500-bg',

4
src/app/main/main.component.html
View File

@ -18,7 +18,7 @@
<div id="wrapper"> <div id="wrapper">
<!-- NAVBAR: Left --> <!-- NAVBAR: Left -->
<fuse-navbar-vertical [folded]="false" <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
class="left-navbar" class="left-navbar"
[class]="fuseSettings.colorClasses.navbar" [class]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'"> *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
@ -44,7 +44,7 @@
</div> </div>
<!-- NAVBAR: Right --> <!-- NAVBAR: Right -->
<fuse-navbar-vertical [folded]="false" <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
class="right-navbar" class="right-navbar"
[class]="fuseSettings.colorClasses.navbar" [class]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'right'"> *ngIf="fuseSettings.layout.navigation === 'right'">

27
src/app/main/navbar/vertical/navbar-vertical.component.ts
View File

@ -18,13 +18,34 @@ import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/anim
export class FuseNavbarVerticalComponent implements OnInit, OnDestroy export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
{ {
private _backdropElement: HTMLElement | null = null; private _backdropElement: HTMLElement | null = null;
private _folded = false;
@HostBinding('class.close') isClosed: boolean; @HostBinding('class.close') isClosed: boolean;
@HostBinding('class.folded') isFoldedActive: boolean; @HostBinding('class.folded') isFoldedActive: boolean;
@HostBinding('class.folded-open') isFoldedOpen: boolean; @HostBinding('class.folded-open') isFoldedOpen: boolean;
@HostBinding('class.initialized') initialized: boolean; @HostBinding('class.initialized') initialized: boolean;
@Input('folded') foldedByDefault = false;
@ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective; @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
@Input()
set folded(value: boolean)
{
this._folded = value;
if ( this._folded )
{
this.activateFolded();
}
else
{
this.deActivateFolded();
}
}
get folded(): boolean
{
return this._folded;
}
matchMediaWatcher: Subscription; matchMediaWatcher: Subscription;
navigationServiceWatcher: Subscription; navigationServiceWatcher: Subscription;
fusePerfectScrollbarUpdateTimeout; fusePerfectScrollbarUpdateTimeout;
@ -88,7 +109,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
ngOnInit() ngOnInit()
{ {
this.isClosed = false; this.isClosed = false;
this.isFoldedActive = this.foldedByDefault; this.isFoldedActive = this._folded;
this.isFoldedOpen = false; this.isFoldedOpen = false;
this.initialized = false; this.initialized = false;
this.updateCssClasses(); this.updateCssClasses();
@ -104,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
} }
else else
{ {
if ( !this.foldedByDefault ) if ( !this._folded )
{ {
this.deActivateFolded(); this.deActivateFolded();
} }