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

New layout system & new layouts (wip)

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-06 21:20:04 +03:00
parent 420d8d1a1b
commit 5c1f2ad1e3
92 changed files with 1793 additions and 1099 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/@fuse/components/sidebar/sidebar.component.ts
View File

@ -263,7 +263,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Read the folded setting from the config // Read the folded setting from the config
// and fold the sidebar if it's true // and fold the sidebar if it's true
if ( this._fuseConfig.layout.navigation.folded ) if ( this._fuseConfig.layout.navbar.folded )
{ {
this.fold(); this.fold();
} }

358
src/@fuse/components/theme-options/theme-options.component.html
View File

@ -1,124 +1,282 @@
<div class="theme-options-panel mat-white-bg mat-elevation-z8" fusePerfectScrollbar> <div class="theme-options-panel" fusePerfectScrollbar>
<div class="header">
<span class="title">Theme Options</span>
<button mat-icon-button class="close-button" (click)="_toggleSidebarOpen('themeOptionsPanel')"> <button mat-icon-button class="close-button" (click)="_toggleSidebarOpen('themeOptionsPanel')">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start"> </div>
<form [formGroup]="fuseConfigForm"> <form [formGroup]="form">
<!-- NAVIGATION STYLES --> <!-- LAYOUT STYLES -->
<!--<h3>Navigation Style:</h3> <div class="group" formGroupName="layout">
<mat-radio-group [(ngModel)]="fuseConfig.layout.navigation.style"
(ngModelChange)="onConfigChange(true)" <h2>Layout Styles</h2>
fxLayout="column" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="vertical">Vertical</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="horizontal">Horizontal</mat-radio-button>
</mat-radio-group>
-->
<div formGroupName="layout">
<!-- VERTICAL LAYOUT STYLES -->
<h3>Scrollable Area:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style"> <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Content</mat-radio-button> <mat-radio-button class="mb-12" value="vertical-layout-1-content-scroll">
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Wrapper</mat-radio-button> Vertical Layout #1 - Content Scroll
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Body</mat-radio-button> </mat-radio-button>
<mat-radio-button class="mb-12" value="vertical-layout-1-body-scroll">
Vertical Layout #1 - Body Scroll
</mat-radio-button>
<mat-radio-button class="mb-12" value="vertical-layout-2">
Vertical Layout #2
</mat-radio-button>
<mat-radio-button class="mb-12" value="horizontal-layout-1">Horizontal Layout #1</mat-radio-button>
<mat-radio-button value="horizontal-layout-2">Horizontal Layout #2</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<!-- HORIZONTAL LAYOUT STYLES --> <!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
<h3 class="mt-24">Horizontal Layout Styles:</h3> <ng-container [ngSwitch]="fuseConfig.layout.style">
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
<mat-radio-button class="mr-8 mb-8" value="horizontal-layout-1">Layout 1</mat-radio-button> <!-- VERTICAL LAYOUT #1 - CONTENT SCROLL -->
<mat-radio-button class="mr-8 mb-8" value="horizontal-layout-2">Layout 2</mat-radio-button> <ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'">
<!-- LAYOUT WIDTH -->
<div class="group mt-48">
<h2>Layout Width</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
<mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
<mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div>
<div formGroupName="navigation"> <!-- NAVBAR -->
<div class="group" formGroupName="navbar">
<!-- NAVIGATION POSITIONS --> <h2>Navbar</h2>
<h3 class="mt-32">Navigation Position:</h3>
<!-- VERTICAL NAVIGATION POSITIONS --> <mat-slide-toggle formControlName="hidden">
<mat-radio-group formControlName="position" Hide
fxLayout="column" fxLayoutAlign="start start" </mat-slide-toggle>
*ngIf="fuseConfig.layout.style.startsWith('vertical')">
<mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<!-- HORIZONTAL NAVIGATION POSITIONS --> <mat-slide-toggle class="mt-24" formControlName="folded">
<mat-radio-group formControlName="position"
fxLayout="column" fxLayoutAlign="start start"
*ngIf="fuseConfig.layout.style.startsWith('horizontal')">
<mat-radio-button class="mr-8 mb-8" value="left">Top</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<!-- VERTICAL NAVIGATION FOLD -->
<ng-container *ngIf="fuseConfig.layout.style.startsWith('vertical')">
<h3 class="mt-24">Navigation Fold:</h3>
<mat-slide-toggle formControlName="folded">
Folded Folded
</mat-slide-toggle> </mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
<!-- TOOLBAR -->
<div class="group" formGroupName="toolbar">
<h2>Toolbar</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
<mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
<mat-radio-button class="mb-12" value="below-sticky">Below Sticky</mat-radio-button>
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</mat-radio-group>
</div>
<!-- FOOTER -->
<div class="group" formGroupName="footer">
<h2>Footer</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
<mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
<mat-radio-button class="mb-12" value="below-sticky">Below Sticky</mat-radio-button>
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</mat-radio-group>
</div>
</ng-container>
<!-- VERTICAL LAYOUT #1 - BODY SCROLL -->
<ng-container *ngSwitchCase="'vertical-layout-1-body-scroll'">
<!-- LAYOUT WIDTH -->
<div class="group mt-48">
<h2>Layout Width</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
<mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
<mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
</mat-radio-group>
</div>
<!-- NAVBAR -->
<div class="group" formGroupName="navbar">
<h2>Navbar</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<mat-slide-toggle class="mt-24" formControlName="folded">
Folded
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
<!-- TOOLBAR -->
<div class="group" formGroupName="toolbar">
<h2>Toolbar</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
<mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group>
</div>
<!-- FOOTER -->
<div class="group" formGroupName="footer">
<h2>Footer</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
<mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group>
</div>
</ng-container>
<!-- VERTICAL LAYOUT #2 -->
<ng-container *ngSwitchCase="'vertical-layout-2'">
<!-- LAYOUT WIDTH -->
<div class="group mt-48">
<h2>Layout Width</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
<mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
<mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
</mat-radio-group>
</div>
<!-- NAVBAR -->
<div class="group" formGroupName="navbar">
<h2>Navbar</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<mat-slide-toggle class="mt-24" formControlName="folded">
Folded
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
<!-- TOOLBAR -->
<div class="group" formGroupName="toolbar">
<h2>Toolbar</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
<mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
</mat-radio-group>
</div>
<!-- FOOTER -->
<div class="group" formGroupName="footer">
<h2>Footer</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
<mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
</mat-radio-group>
</div>
</ng-container>
</ng-container> </ng-container>
</div> </div>
<div formGroupName="toolbar"> <!-- CUSTOM SCROLLBARS -->
<div class="group">
<!-- TOOLBAR --> <h2>Custom scrollbars</h2>
<h3 class="mt-24">Toolbar:</h3>
<mat-radio-group formControlName="position" fxLayout="column" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="above-sticky"
[disabled]="fuseConfig.layout.style === 'vertical-layout-1' || fuseConfig.layout.style === 'vertical-layout-2'">
Above Sticky
</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below-sticky"
[disabled]="fuseConfig.layout.style === 'vertical-layout-3'">
Below Sticky
</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
</div> <mat-slide-toggle class="mb-12" formControlName="customScrollbars">
<div formGroupName="footer">
<!-- FOOTER -->
<h3 class="mt-24">Footer:</h3>
<mat-radio-group formControlName="position" fxLayout="column" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below-sticky">Below Sticky</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
</div>
<!-- LAYOUT MODE -->
<h3 class="mt-24">Layout Mode:</h3>
<mat-radio-group formControlName="mode" fxLayout="column" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
</mat-radio-group>
</div>
<mat-divider></mat-divider>
<h3>Custom scrollbars:</h3>
<mat-slide-toggle formControlName="customScrollbars">
Enable custom scrollbars Enable custom scrollbars
</mat-slide-toggle> </mat-slide-toggle>
<mat-divider></mat-divider> </div>
<!-- COLORS -->
<div class="group">
<h2>Colors</h2>
<h3>Colors:</h3>
<div class="colors"> <div class="colors">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -128,9 +286,9 @@
</div> </div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Navigation Bar Color</h4> <h4 class="mr-8">Navbar Color</h4>
<fuse-material-color-picker <fuse-material-color-picker
[(selectedClass)]="fuseConfig.layout.navigation.background"></fuse-material-color-picker> [(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
</div> </div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -141,9 +299,13 @@
</div> </div>
<mat-divider></mat-divider> </div>
<!-- ROUTER ANIMATION -->
<div class="group">
<h2>Router Animation</h2>
<h3>Router Animation:</h3>
<mat-form-field class="w-100-p"> <mat-form-field class="w-100-p">
<mat-select class="p-0" formControlName="routerAnimation"> <mat-select class="p-0" formControlName="routerAnimation">
<mat-option value="none"> <mat-option value="none">
@ -167,8 +329,8 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</form>
</div> </div>
</form>
</div> </div>

62
src/@fuse/components/theme-options/theme-options.component.scss
View File

@ -14,26 +14,63 @@
.theme-options-panel { .theme-options-panel {
display: flex; display: flex;
flex-direction: column;
flex: 1 0 auto; flex: 1 0 auto;
padding: 24px; padding: 40px 24px 24px 24px;
overflow: auto; overflow: auto;
.close-button { .header {
display: flex;
flex: 0 1 auto;
margin-bottom: 32px;
align-items: center;
justify-content: space-between;
.title {
font-size: 20px;
font-weight: 500;
padding-left: 4px;
}
}
form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
.group {
display: flex;
flex: 1 0 auto;
flex-direction: column;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 2px;
padding: 28px 16px 8px 16px;
margin: 16px 0;
h2 {
position: absolute; position: absolute;
top: 8px; top: -11px;
right: 8px; left: 8px;
margin: 0;
padding: 0 8px;
font-size: 16px;
font-weight: 500;
background: white;
color: rgba(0, 0, 0, 0.54);
} }
h3 { h3 {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
}
.mat-divider {
display: block !important;
width: 100%;
margin: 24px 0 16px 0; margin: 24px 0 16px 0;
padding: 0;
&:first-of-type {
margin-top: 0;
}
}
} }
.colors { .colors {
@ -41,12 +78,5 @@
width: 100%; width: 100%;
} }
} }
.mat-list .mat-list-item {
font-size: 15px;
}
.mat-divider {
margin: 16px;
} }
} }

260
src/@fuse/components/theme-options/theme-options.component.ts
View File

@ -1,5 +1,5 @@
import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -17,7 +17,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
export class FuseThemeOptionsComponent implements OnInit, OnDestroy export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{ {
fuseConfig: any; fuseConfig: any;
fuseConfigForm: FormGroup; form: FormGroup;
@HostBinding('class.bar-closed') @HostBinding('class.bar-closed')
barClosed: boolean; barClosed: boolean;
@ -58,40 +58,59 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
*/ */
ngOnInit(): void ngOnInit(): void
{ {
// Build the config form
// noinspection TypeScriptValidateTypes
this.form = this._formBuilder.group({
layout : this._formBuilder.group({
style : new FormControl(),
width : new FormControl(),
navbar : this._formBuilder.group({
hidden : new FormControl(),
position : new FormControl(),
folded : new FormControl(),
background: new FormControl()
}),
toolbar: this._formBuilder.group({
hidden : new FormControl(),
position : new FormControl(),
background: new FormControl()
}),
footer : this._formBuilder.group({
hidden : new FormControl(),
position : new FormControl(),
background: new FormControl()
})
}),
customScrollbars: new FormControl(),
routerAnimation : new FormControl()
});
// Subscribe to the config changes // Subscribe to the config changes
this._fuseConfigService.config this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => { .subscribe((config) => {
this.fuseConfig = config;
}
);
// Build the config form // Update the stored config
// noinspection TypeScriptValidateTypes this.fuseConfig = config;
this.fuseConfigForm = this._formBuilder.group({
layout : this._formBuilder.group({ // Set the config form values without emitting an event
style : this.fuseConfig.layout.style, // so that we don't end up with an infinite loop
navigation: this._formBuilder.group({ this.form.setValue(config, {emitEvent: false});
position : this.fuseConfig.layout.navigation.position, });
folded : this.fuseConfig.layout.navigation.folded,
background: this.fuseConfig.layout.navigation.background // Subscribe to the specific form value changes (layout.style)
}), this.form.get('layout.style').valueChanges
toolbar : this._formBuilder.group({ .pipe(takeUntil(this._unsubscribeAll))
position : this.fuseConfig.layout.toolbar.position, .subscribe((value) => {
background: this.fuseConfig.layout.toolbar.background
}), // Reset the form values based on the
footer : this._formBuilder.group({ // selected layout style
position : this.fuseConfig.layout.footer.position, this._resetFormValues(value);
background: this.fuseConfig.layout.footer.background
}),
mode : this.fuseConfig.layout.mode
}),
customScrollbars: this.fuseConfig.customScrollbars,
routerAnimation : this.fuseConfig.routerAnimation
}); });
// Subscribe to the form value changes // Subscribe to the form value changes
this.fuseConfigForm.valueChanges this.form.valueChanges
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => { .subscribe((config) => {
@ -99,16 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
this._fuseConfigService.config = config; this._fuseConfigService.config = config;
}); });
// Subscribe to the layout style value changes
const layoutControls: any = this.fuseConfigForm.controls.layout;
layoutControls.controls.style.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((layout) => {
// Reset the config
this.resetConfig(layout);
});
// Add customize nav item that opens the bar programmatically // Add customize nav item that opens the bar programmatically
const customFunctionNavItem = { const customFunctionNavItem = {
'id' : 'custom-function', 'id' : 'custom-function',
@ -147,6 +156,103 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// @ Private methods // @ Private methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/**
* Reset the form values based on the
* selected layout style
*
* @param value
* @private
*/
private _resetFormValues(value): void
{
switch ( value )
{
// Vertical Layout #1 - Content scroll
case 'vertical-layout-1-content-scroll':
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
toolbar: {
hidden : false,
position : 'below-static',
background: 'mat-white-500-bg'
},
footer : {
hidden : false,
position : 'below-static',
background: 'mat-fuse-dark-900-bg'
}
}
});
break;
}
// Vertical Layout #1 - Body scroll
case 'vertical-layout-1-body-scroll':
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
toolbar: {
hidden : false,
position : 'below',
background: 'mat-white-500-bg'
},
footer : {
hidden : false,
position : 'below',
background: 'mat-fuse-dark-900-bg'
}
}
});
break;
}
// Vertical Layout #2
case 'vertical-layout-2':
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
toolbar: {
hidden : false,
position : 'above-static',
background: 'mat-white-500-bg'
},
footer : {
hidden : false,
position : 'above-static',
background: 'mat-fuse-dark-900-bg'
}
}
});
break;
}
}
}
/** /**
* Toggle sidebar open * Toggle sidebar open
* *
@ -158,86 +264,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
this._fuseSidebarService.getSidebar(key).toggleOpen(); this._fuseSidebarService.getSidebar(key).toggleOpen();
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/**
* Reset the config correctly
*/
resetConfig(layout): void
{
console.log(layout);
// Check the layout style and reset the
// configuration properly so we don't end
// up with options that don't work with
// selected layout style
switch ( layout )
{
// Vertical
// Layout 1
case 'vertical-layout-1':
{
// Reset the config form
this.fuseConfigForm.patchValue({
layout: {
navigation: {
folder: false
},
toolbar : {
position: 'below'
}
}
});
break;
}
// Layout 2
case 'vertical-layout-2':
{
console.log('resetting the options for vertical-layout-2...');
// Reset the config form
this.fuseConfigForm.patchValue({
layout: {
navigation: {
folder: false
},
toolbar : {
position: 'below'
}
}
});
break;
}
// Layout 3
case 'vertical-layout-3':
{
// Reset the config form
this.fuseConfigForm.patchValue({
layout: {
navigation: {
folder: false
},
toolbar : {
position: 'below'
}
}
});
break;
}
default :
{
break;
}
}
}
} }

3
src/@fuse/directives/directives.ts
View File

@ -1,12 +1,14 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive'; import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseInnerScrollDirective } from '@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive'; import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
@NgModule({ @NgModule({
declarations: [ declarations: [
FuseIfOnDomDirective, FuseIfOnDomDirective,
FuseInnerScrollDirective,
FuseMatSidenavHelperDirective, FuseMatSidenavHelperDirective,
FuseMatSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FusePerfectScrollbarDirective FusePerfectScrollbarDirective
@ -14,6 +16,7 @@ import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@
imports : [], imports : [],
exports : [ exports : [
FuseIfOnDomDirective, FuseIfOnDomDirective,
FuseInnerScrollDirective,
FuseMatSidenavHelperDirective, FuseMatSidenavHelperDirective,
FuseMatSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FusePerfectScrollbarDirective FusePerfectScrollbarDirective

61
src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts Normal file
View File

@ -0,0 +1,61 @@
import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
@Directive({
selector: '.inner-scroll'
})
export class FuseInnerScrollDirective implements OnInit, OnDestroy
{
// Private
private _parent: any;
private _grandParent: any;
/**
* Constructor
*/
constructor(
private _elementRef: ElementRef,
private _renderer: Renderer2
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the parent
this._parent = this._renderer.parentNode(this._elementRef.nativeElement);
// Return, if there is no parent
if ( !this._parent )
{
return;
}
// Get the grand parent
this._grandParent = this._renderer.parentNode(this._parent);
// Add the inner-scroll class
this._renderer.addClass(this._grandParent, 'inner-scroll');
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Return, if there is no parent
if ( !this._parent )
{
return;
}
// Remove the inner-scroll class
this._renderer.removeClass(this._grandParent, 'inner-scroll');
}
}

45
src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
View File

@ -1,8 +1,8 @@
import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core'; import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Platform } from '@angular/cdk/platform'; import { Platform } from '@angular/cdk/platform';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { filter, takeUntil } from 'rxjs/operators';
import PerfectScrollbar from 'perfect-scrollbar'; import PerfectScrollbar from 'perfect-scrollbar';
import { FuseConfigService } from '@fuse/services/config.service'; import { FuseConfigService } from '@fuse/services/config.service';
@ -18,6 +18,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
// Private // Private
private _enabled: boolean | ''; private _enabled: boolean | '';
private _updateOnNavigationEnd: boolean | '';
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
/** /**
@ -26,11 +27,13 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
* @param {ElementRef} elementRef * @param {ElementRef} elementRef
* @param {FuseConfigService} _fuseConfigService * @param {FuseConfigService} _fuseConfigService
* @param {Platform} _platform * @param {Platform} _platform
* @param {Router} _router
*/ */
constructor( constructor(
public elementRef: ElementRef, public elementRef: ElementRef,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _platform: Platform private _platform: Platform,
private _router: Router
) )
{ {
// Set the defaults // Set the defaults
@ -39,6 +42,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
// Set the private defaults // Set the private defaults
this._enabled = false; this._enabled = false;
this._updateOnNavigationEnd = false;
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }
@ -88,6 +92,27 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
return this._enabled; return this._enabled;
} }
/**
* Update on navigation end
*
* @param value
*/
@Input()
set updateOnNavigationEnd(value)
{
if ( value === '' )
{
value = true;
}
this._updateOnNavigationEnd = value;
}
get updateOnNavigationEnd(): boolean | ''
{
return this._updateOnNavigationEnd;
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -106,7 +131,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
} }
); );
// this._init(); // If updateOnNavigationEnd attribute is provided,
// scroll to the top on every NavigationEnd
if ( this.updateOnNavigationEnd )
{
this._router.events
.pipe(
takeUntil(this._unsubscribeAll),
filter(event => event instanceof NavigationEnd)
)
.subscribe(() => {
this.scrollToTop();
});
}
} }
/** /**

141
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -10,9 +10,6 @@ $header-height-sm: 100px !default;
$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height; $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height; $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
// Top bg image
$top-bg-image: url('assets/images/backgrounds/header-bg.png');
.page-layout { .page-layout {
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
@ -34,8 +31,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
right: 0; right: 0;
left: 0; left: 0;
height: $carded-header-height; height: $carded-header-height;
background-image: $top-bg-image;
background-size: cover;
@include media-breakpoint-down('sm') { @include media-breakpoint-down('sm') {
height: $carded-header-height-sm; height: $carded-header-height-sm;
@ -45,12 +40,20 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Fullwidth // Fullwidth
&.fullwidth { &.fullwidth {
// Single scroll // Inner scroll
&.single-scroll { &.inner-scroll {
flex: 1 1 auto;
> .center { > .center {
flex: 1 0 auto; flex: 1 1 auto;
max-height: none;
.content-card {
flex: 1 1 auto;
> .content {
flex: 1 1 auto;
}
}
} }
} }
@ -58,7 +61,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .center { > .center {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 0 auto;
position: relative; position: relative;
z-index: 2; z-index: 2;
padding: 0 32px; padding: 0 32px;
@ -82,7 +85,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.content-card { .content-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 0 auto;
overflow: hidden; overflow: hidden;
@include mat-elevation(7); @include mat-elevation(7);
@ -98,28 +101,65 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .content { > .content {
display: flex; display: flex;
flex: 1; flex: 1 0 auto;
overflow: auto; overflow: auto;
} }
} }
} }
// Tabbed
&.tabbed {
.center {
width: 100%;
min-width: 0;
.header {
flex: 1 1 auto;
}
.content-card {
.content {
.mat-tab-group {
overflow: hidden;
.mat-tab-header {
.mat-tab-label {
height: 64px;
}
}
.mat-tab-body {
overflow: hidden;
.mat-tab-body-content {
overflow: hidden;
.tab-content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
}
}
}
}
}
}
} }
// Left sidenav - Right sidenav // Left sidenav - Right sidenav
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
// Single scroll
&.single-scroll {
> mat-sidenav-container {
flex: 1 0 auto;
}
}
> mat-sidenav-container { > mat-sidenav-container {
display: flex; display: flex;
flex: 1; flex: 1 1 auto;
background: none; background: none;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
@ -127,7 +167,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.sidenav { .sidenav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
width: 240px; width: 240px;
min-width: 240px; min-width: 240px;
max-width: 240px; max-width: 240px;
@ -162,7 +202,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .mat-sidenav-content, > .mat-sidenav-content,
> .mat-drawer-content { > .mat-drawer-content {
display: flex; display: flex;
flex: 1; flex: 1 1 auto;
height: auto; height: auto;
overflow: visible; overflow: visible;
@ -170,7 +210,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.center { .center {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
position: relative; position: relative;
z-index: 3; z-index: 3;
margin-left: 32px; margin-left: 32px;
@ -192,7 +232,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.content-card { .content-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
@include mat-elevation(7); @include mat-elevation(7);
@ -200,7 +240,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex: 1; flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: $carded-toolbar-height; height: $carded-toolbar-height;
min-height: $carded-toolbar-height; min-height: $carded-toolbar-height;
@ -215,7 +255,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.content { .content {
display: flex; display: flex;
flex: 1; flex: 1 1 auto;
overflow: auto; overflow: auto;
} }
} }
@ -223,6 +263,30 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
} }
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> mat-sidenav-container {
> .mat-sidenav-content,
> .mat-drawer-content {
> .center {
flex: 1 1 auto;
.content-card {
flex: 1 1 auto;
> .content {
flex: 1 1 auto;
}
}
}
}
}
}
// Tabbed // Tabbed
&.tabbed { &.tabbed {
@ -242,7 +306,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
.header { .header {
flex: 1; flex: 1 1 auto;
} }
.content-card { .content-card {
@ -336,12 +400,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
// Top bg
> .header {
background-image: $top-bg-image;
background-size: cover;
}
// Fullwidth // Fullwidth
&.fullwidth { &.fullwidth {
overflow: auto; overflow: auto;
@ -363,7 +421,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.right-sidenav { &.right-sidenav {
// Single scroll // Single scroll
&.single-scroll { /*&.single-scroll {
> mat-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
@ -374,13 +432,13 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
max-height: none; max-height: none;
} }
} }
} }*/
// Inner Sidenav // Inner Sidenav
&.inner-sidenav { &.inner-sidenav {
> mat-sidenav-container { > mat-sidenav-container {
flex: 1; flex: 1 1 auto;
.sidenav { .sidenav {
@ -395,7 +453,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: auto; height: auto;
.center { .center {
flex: 1; flex: 1 1 auto;
min-height: 100%; min-height: 100%;
@include mat-elevation(0); @include mat-elevation(0);
@ -411,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> mat-sidenav-container { > mat-sidenav-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
background: none; background: none;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
@ -439,7 +497,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .mat-sidenav-content, > .mat-sidenav-content,
> .mat-drawer-content { > .mat-drawer-content {
display: flex; display: flex;
flex: 1; flex: 1 1 auto;
height: auto; height: auto;
overflow: visible; overflow: visible;
max-height: 100%; max-height: 100%;
@ -448,13 +506,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $header-height; height: $header-height;
min-height: $header-height; min-height: $header-height;
max-height: $header-height; max-height: $header-height;
background-image: $top-bg-image;
} }
.center { .center {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
overflow: auto; overflow: auto;
@include mat-elevation(7); @include mat-elevation(7);

32
src/@fuse/services/config.service.ts
View File

@ -107,6 +107,38 @@ export class FuseConfigService
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/**
* Set config
*
* @param value
* @param {{emitEvent: boolean}} opts
*/
setConfig(value, opts = {emitEvent: true}): void
{
// Get the value from the behavior subject
let config = this._configSubject.getValue();
// Merge the new config
config = _.merge({}, config, value);
// If emitEvent option is true...
if ( opts.emitEvent === true )
{
// Notify the observers
this._configSubject.next(config);
}
}
/**
* Get config
*
* @returns {Observable<any>}
*/
getConfig(): Observable<any>
{
return this._configSubject.asObservable();
}
/** /**
* Reset to the default config * Reset to the default config
*/ */

15
src/@fuse/types/fuse-config.ts
View File

@ -2,20 +2,23 @@ export interface FuseConfig
{ {
layout: { layout: {
style: string, style: string,
navigation: { width: 'fullwidth' | 'boxed',
position: 'left' | 'right' | 'top' | 'none', navbar: {
hidden: boolean,
folded: boolean, folded: boolean,
position: 'left' | 'right' | 'top',
background: string background: string
}, },
toolbar: { toolbar: {
position: 'above' | 'above-sticky' | 'below' | 'below-sticky' | 'none', hidden: boolean,
position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed',
background: string background: string
} }
footer: { footer: {
position: 'above' | 'below' | 'below-sticky' | 'none', hidden: boolean,
position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed',
background: string background: string
}, }
mode: 'fullwidth' | 'boxed'
}; };
customScrollbars: boolean; customScrollbars: boolean;
routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none'; routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none';

19
src/app/app.component.html
View File

@ -1,6 +1,11 @@
<!-- VERTICAL LAYOUT 1 --> <!-- VERTICAL LAYOUT 1 - BODY SCROLL -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'"> <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'">
<vertical-layout-1></vertical-layout-1> <vertical-layout-1-body-scroll></vertical-layout-1-body-scroll>
</ng-container>
<!-- VERTICAL LAYOUT 1 - CONTENT SCROLL -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-content-scroll'">
<vertical-layout-1-content-scroll></vertical-layout-1-content-scroll>
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT 2 --> <!-- VERTICAL LAYOUT 2 -->
@ -8,9 +13,9 @@
<vertical-layout-2></vertical-layout-2> <vertical-layout-2></vertical-layout-2>
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT 3 --> <!-- HORIZONTAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'"> <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
<vertical-layout-3></vertical-layout-3>
</ng-container> </ng-container>
<!-- THEME OPTIONS PANEL --> <!-- THEME OPTIONS PANEL -->
@ -19,6 +24,6 @@
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>
<fuse-sidebar name="themeOptionsPanel" position="right" [invisibleOverlay]="true"> <fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
<fuse-theme-options></fuse-theme-options> <fuse-theme-options></fuse-theme-options>
</fuse-sidebar> </fuse-sidebar>

7
src/app/app.component.scss
View File

@ -3,6 +3,7 @@
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
height: 100%;
min-width: 0; min-width: 0;
.theme-options-button { .theme-options-button {
@ -28,4 +29,10 @@
opacity: 1; opacity: 1;
} }
} }
.theme-options-sidebar {
width: 360px;
min-width: 360px;
max-width: 360px;
}
} }

15
src/app/fuse-config/index.ts
View File

@ -10,21 +10,24 @@ import { FuseConfig } from '@fuse/types';
export const fuseConfig: FuseConfig = { export const fuseConfig: FuseConfig = {
layout : { layout : {
style : 'vertical-layout-1', style : 'vertical-layout-1-content-scroll',
navigation: { width : 'fullwidth',
navbar : {
hidden : false,
position : 'left', position : 'left',
folded : false, folded : false,
background: 'mat-fuse-dark-700-bg' background: 'mat-fuse-dark-700-bg'
}, },
toolbar : { toolbar : {
position : 'below', hidden : false,
position : 'below-static',
background: 'mat-white-500-bg' background: 'mat-white-500-bg'
}, },
footer : { footer : {
position : 'below', hidden : false,
position : 'below-static',
background: 'mat-fuse-dark-900-bg' background: 'mat-fuse-dark-900-bg'
}, }
mode : 'fullwidth'
}, },
customScrollbars: true, customScrollbars: true,
routerAnimation : 'fadeIn' routerAnimation : 'fadeIn'

9
src/app/layout/components/content/content.component.scss
View File

@ -1,11 +1,12 @@
content { content {
display: flex; display:flex;
flex-direction: column;
flex: 1 1 auto;
z-index: 1; z-index: 1;
flex: 1 0 auto;
> *:not(router-outlet) { > *:not(router-outlet) {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 0 auto;
width: 100%;
min-width: 100%;
} }
} }

4
src/app/layout/components/toolbar/toolbar.component.ts
View File

@ -123,8 +123,8 @@ export class ToolbarComponent implements OnInit, OnDestroy
this._fuseConfigService.config this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((settings) => { .subscribe((settings) => {
this.horizontalNav = settings.layout.navigation.position === 'top'; this.horizontalNav = settings.layout.navbar.position === 'top';
this.noNav = settings.layout.navigation.position === 'none'; this.noNav = settings.layout.navbar.position === 'none';
}); });
// Set the selected language from default languages // Set the selected language from default languages

19
src/app/layout/layout.module.ts
View File

@ -1,19 +1,22 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module'; import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module';
import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module';
import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module'; import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module';
@NgModule({ @NgModule({
imports: [ imports: [
VerticalLayout1Module, VerticalLayout1BodyScrollModule,
VerticalLayout2Module, VerticalLayout1ContentScrollModule,
VerticalLayout3Module
VerticalLayout2Module
], ],
exports: [ exports: [
VerticalLayout1Module, VerticalLayout1BodyScrollModule,
VerticalLayout2Module, VerticalLayout1ContentScrollModule,
VerticalLayout3Module
VerticalLayout2Module
] ]
}) })
export class LayoutModule export class LayoutModule

115
src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html Normal file
View File

@ -0,0 +1,115 @@
<div id="main">
<!-- TOOLBAR: Above fixed -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Above fixed -->
<div id="container-1" class="container" fusePerfectScrollbar updateOnNavigationEnd>
<!-- TOOLBAR: Above static -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Above static -->
<div id="container-2" class="container">
<!-- NAVBAR: Left -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
<ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
</ng-container>
<!-- / NAVBAR: Left -->
<div id="container-3" class="container">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- NAVBAR: Right -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
</ng-container>
<!-- / NAVBAR: Right -->
</div>
<!-- FOOTER: Above static -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- FOOTER: Above static -->
</div>
<!-- FOOTER: Above fixed -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- FOOTER: Above fixed -->
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- @ PARTIALS
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
</ng-template>
<!-- / FOOTER -->
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

4
src/app/layout/vertical/layout-3/layout-3.component.scss → src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss
View File

@ -1,9 +1,10 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
vertical-layout-3 { vertical-layout-1-body-scroll {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
height: 100%;
#main { #main {
position: relative; position: relative;
@ -11,6 +12,7 @@ vertical-layout-3 {
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%;
z-index: 1; z-index: 1;
// Container 1 (Scrollable) // Container 1 (Scrollable)

8
src/app/layout/vertical/layout-1/layout-1.component.ts → src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts
View File

@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
import { navigation } from 'app/navigation/navigation'; import { navigation } from 'app/navigation/navigation';
@Component({ @Component({
selector : 'vertical-layout-1', selector : 'vertical-layout-1-body-scroll',
templateUrl : './layout-1.component.html', templateUrl : './body-scroll.component.html',
styleUrls : ['./layout-1.component.scss'], styleUrls : ['./body-scroll.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class VerticalLayout1Component implements OnInit, OnDestroy export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy
{ {
fuseConfig: any; fuseConfig: any;
navigation: any; navigation: any;

11
src/app/layout/vertical/layout-3/layout-3.module.ts → src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts
View File

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components'; import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -9,13 +10,15 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component'; import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
VerticalLayout3Component VerticalLayout1BodyScrollComponent
], ],
imports : [ imports : [
RouterModule,
FuseSharedModule, FuseSharedModule,
FuseSidebarModule, FuseSidebarModule,
@ -26,9 +29,9 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
ToolbarModule ToolbarModule
], ],
exports : [ exports : [
VerticalLayout3Component VerticalLayout1BodyScrollComponent
] ]
}) })
export class VerticalLayout3Module export class VerticalLayout1BodyScrollModule
{ {
} }

115
src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html Normal file
View File

@ -0,0 +1,115 @@
<div id="main">
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Above -->
<div id="container-1" class="container">
<!-- NAVBAR: Left -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
<ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
</ng-container>
<!-- / NAVBAR: Left -->
<div id="container-2" class="container">
<!-- TOOLBAR: Below fixed -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-fixed'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Below fixed -->
<div id="container-3" class="container" fusePerfectScrollbar updateOnNavigationEnd>
<!-- TOOLBAR: Below static -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-static'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Below static -->
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- FOOTER: Below static -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below-static'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- / FOOTER: Below static -->
</div>
<!-- FOOTER: Below fixed -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below-fixed'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- / FOOTER: Below fixed -->
</div>
<!-- NAVBAR: Right -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
</ng-container>
<!-- / NAVBAR: Right -->
</div>
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- FOOTER: Above -->
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- @ PARTIALS
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
</ng-template>
<!-- / FOOTER -->
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

61
src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss Normal file
View File

@ -0,0 +1,61 @@
@import "src/@fuse/scss/fuse";
vertical-layout-1-content-scroll {
display: flex;
flex: 1 1 auto;
width: 100%;
height: 100%;
#main {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
height: 100%;
z-index: 1;
// Container 1
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
width: 100%;
min-height: 0;
min-width: 0;
// Container 2
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
// Container 3 (Scrollable)
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
transform: translateZ(0);
overflow-x: hidden;
overflow-y: auto;
// Content component
content {
&.inner-scroll {
flex: 1 1 auto;
min-height: 0;
> *:not(router-outlet) {
flex: 1 1 auto;
}
}
}
}
}
}
}
}

8
src/app/layout/vertical/layout-3/layout-3.component.ts → src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts
View File

@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
import { navigation } from 'app/navigation/navigation'; import { navigation } from 'app/navigation/navigation';
@Component({ @Component({
selector : 'vertical-layout-3', selector : 'vertical-layout-1-content-scroll',
templateUrl : './layout-3.component.html', templateUrl : './content-scroll.component.html',
styleUrls : ['./layout-3.component.scss'], styleUrls : ['./content-scroll.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class VerticalLayout3Component implements OnInit, OnDestroy export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy
{ {
fuseConfig: any; fuseConfig: any;
navigation: any; navigation: any;

11
src/app/layout/vertical/layout-1/layout-1.module.ts → src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts
View File

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components'; import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -9,13 +10,15 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component'; import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
VerticalLayout1Component VerticalLayout1ContentScrollComponent
], ],
imports : [ imports : [
RouterModule,
FuseSharedModule, FuseSharedModule,
FuseSidebarModule, FuseSidebarModule,
@ -26,9 +29,9 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
ToolbarModule ToolbarModule
], ],
exports : [ exports : [
VerticalLayout1Component VerticalLayout1ContentScrollComponent
] ]
}) })
export class VerticalLayout1Module export class VerticalLayout1ContentScrollModule
{ {
} }

81
src/app/layout/vertical/layout-1/layout-1.component.html
View File

@ -1,81 +0,0 @@
<div id="main">
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
<toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<div id="container-1" class="container">
<!-- NAVBAR: Left -->
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navigation.background"
*ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Left -->
<div id="container-2" class="container">
<!-- TOOLBAR: Below sticky -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-sticky'">
<toolbar class="below-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below sticky -->
<div id="container-3" class="container">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
<footer class="below" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- FOOTER: Below sticky -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below-sticky'">
<footer class="below-sticky" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- / FOOTER: Below sticky -->
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
*ngIf="fuseConfig.layout.navigation.position === 'right'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Right -->
</div>
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
<footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- FOOTER: Above -->
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->

117
src/app/layout/vertical/layout-1/layout-1.component.scss
View File

@ -1,117 +0,0 @@
@import "src/@fuse/scss/fuse";
vertical-layout-1 {
display: flex;
flex: 1 1 auto;
width: 100%;
#main {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
z-index: 1;
// Container 1
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
width: 100%;
// Container 2
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
// Container 3 (Scrollable)
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
transform: translateZ(0);
}
}
}
}
}
vertical-layout-111 {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
/* > .mat-sidenav-container {
display: flex;
flex: 1;
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
overflow: hidden;
height: 100vh;*/
@include media-breakpoint-down('sm') {
height: auto !important;
}
#main-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
background: #FAFAFA;
#wrapper {
display: flex;
position: relative;
flex: 1;
overflow: hidden;
.content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
content {
position: relative;
display: flex;
flex: 1;
flex-direction: row;
width: 100%;
overflow: hidden;
> *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
display: flex;
flex: 1;
width: 100%;
min-width: 100%;
}
> *.ng-animating {
.mat-tab-body {
height: 100vh;
}
}
}
}
//}
//}
}
}
&[fuse-layout-mode="boxed"] {
max-width: 1200px;
margin: 0 auto;
@include mat-elevation(8);
}
}

128
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -1,76 +1,54 @@
<div id="main"> <div id="main">
<!-- TOOLBAR: Above --> <!-- TOOLBAR: Above fixed -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'"> <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
<toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar> <ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container> </ng-container>
<!-- / TOOLBAR: Above --> <!-- / TOOLBAR: Above fixed -->
<div id="container-1" class="container"> <div id="container-1" class="container" fusePerfectScrollbar>
<!-- NAVBAR: Left --> <!-- TOOLBAR: Above static -->
<fuse-sidebar [name]="'navbar'" <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">
[folded]="fuseConfig.layout.navigation.folded" <ng-container *ngTemplateOutlet="toolbar"></ng-container>
[lockedOpen]="'gt-md'" </ng-container>
class="left-navbar" [ngClass]="fuseConfig.layout.navigation.background" <!-- / TOOLBAR: Above static -->
*ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Left -->
<div id="container-2" class="container"> <div id="container-2" class="container">
<!-- TOOLBAR: Below sticky --> <!-- NAVBAR: Left -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-sticky'"> <ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
<toolbar class="below-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar> <ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
</ng-container> </ng-container>
<!-- / TOOLBAR: Below sticky --> <!-- / NAVBAR: Left -->
<div id="container-3" class="container" fusePerfectScrollbar>
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT --> <!-- CONTENT -->
<content></content> <content
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}"
></content>
<!-- / CONTENT --> <!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
<footer class="below" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- FOOTER: Below sticky -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below-sticky'">
<footer class="below-sticky" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- / FOOTER: Below sticky -->
</div>
<!-- NAVBAR: Right --> <!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" position="right" <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
[folded]="fuseConfig.layout.navigation.folded" <ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
[lockedOpen]="'gt-md'" </ng-container>
class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
*ngIf="fuseConfig.layout.navigation.position === 'right'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Right --> <!-- / NAVBAR: Right -->
</div> </div>
<!-- FOOTER: Above --> <!-- FOOTER: Above static -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above'"> <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
<footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer> <ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container> </ng-container>
<!-- FOOTER: Above --> <!-- FOOTER: Above static -->
</div>
<!-- FOOTER: Above fixed -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- FOOTER: Above fixed -->
</div> </div>
@ -79,3 +57,45 @@
<quick-panel></quick-panel> <quick-panel></quick-panel>
</fuse-sidebar> </fuse-sidebar>
<!-- / QUICK PANEL --> <!-- / QUICK PANEL -->
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- @ PARTIALS
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
</ng-template>
<!-- / FOOTER -->
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

33
src/app/layout/vertical/layout-2/layout-2.component.scss
View File

@ -4,6 +4,7 @@ vertical-layout-2 {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
height: 100%;
#main { #main {
position: relative; position: relative;
@ -11,41 +12,35 @@ vertical-layout-2 {
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%;
z-index: 1; z-index: 1;
// Container 1 // Container 1 (Scrollable)
> .container { > .container {
position: relative; position: relative;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column;
width: 100%; width: 100%;
overflow-x: hidden;
overflow-y: auto;
transform: translateZ(0);
// Container 2 // Container 2
> .container { > .container {
position: relative; position: relative;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 0 auto;
flex-direction: column; width: 100%;
min-width: 0; min-width: 0;
padding: 32px;
// Container 3 (Scrollable)
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
transform: translateZ(0);
overflow-x: hidden;
overflow-y: auto;
// Content component // Content component
content { > content {
flex: 1 0 auto; flex: 1 1 auto;
min-width: 0;
> *:not(router-outlet) { @include mat-elevation(3);
flex: 1 0 auto;
}
}
} }
} }
} }

3
src/app/layout/vertical/layout-2/layout-2.module.ts
View File

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components'; import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -16,6 +17,8 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
VerticalLayout2Component VerticalLayout2Component
], ],
imports : [ imports : [
RouterModule,
FuseSharedModule, FuseSharedModule,
FuseSidebarModule, FuseSidebarModule,

81
src/app/layout/vertical/layout-3/layout-3.component.html
View File

@ -1,81 +0,0 @@
<div id="main">
<!-- TOOLBAR: Above sticky -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-sticky'">
<toolbar class="above-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Above sticky -->
<div id="container-1" class="container" fusePerfectScrollbar>
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
<toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<div id="container-2" class="container">
<!-- NAVBAR: Left -->
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navigation.background"
*ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Left -->
<div id="container-3" class="container">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
<footer class="below" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
*ngIf="fuseConfig.layout.navigation.position === 'right'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Right -->
</div>
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
<footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- FOOTER: Above -->
</div>
<!-- FOOTER: Above sticky -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-sticky'">
<footer class="above-sticky" [ngClass]="fuseConfig.layout.footer.background"></footer>
</ng-container>
<!-- FOOTER: Above sticky -->
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->

2
src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html → src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html
View File

@ -9,7 +9,7 @@
<!-- CONTENT HEADER --> <!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Fullwidth with container scroll</h2> <h2>Full width with content scroll</h2>
</div> </div>
<!-- / CONTENT HEADER --> <!-- / CONTENT HEADER -->

0
src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss → src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.scss
View File

16
src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-fullwidth-1',
templateUrl: './full-width-1.component.html',
styleUrls : ['./full-width-1.component.scss']
})
export class CardedFullWidth1Component
{
/**
* Constructor
*/
constructor()
{
}
}

4
src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html → src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded fullwidth" fusePerfectScrollbar> <div class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -9,7 +9,7 @@
<!-- CONTENT HEADER --> <!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Fullwidth with content scroll</h2> <h2>Full width with inner scroll</h2>
</div> </div>
<!-- / CONTENT HEADER --> <!-- / CONTENT HEADER -->

0
src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss → src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.scss
View File

4
src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts → src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts
View File

@ -2,8 +2,8 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector : 'carded-fullwidth-2', selector : 'carded-fullwidth-2',
templateUrl: './fullwidth-2.component.html', templateUrl: './full-width-2.component.html',
styleUrls : ['./fullwidth-2.component.scss'] styleUrls : ['./full-width-2.component.scss']
}) })
export class CardedFullWidth2Component export class CardedFullWidth2Component
{ {

115
src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html Normal file
View File

@ -0,0 +1,115 @@
<div class="page-layout carded fullwidth tabbed">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with tabs and content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss → src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.scss
View File

16
src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-fullwidth-tabbed-1',
templateUrl: './full-width-tabbed-1.component.html',
styleUrls : ['./full-width-tabbed-1.component.scss']
})
export class CardedFullWidthTabbed1Component
{
/**
* Constructor
*/
constructor()
{
}
}

115
src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html Normal file
View File

@ -0,0 +1,115 @@
<div class="page-layout carded fullwidth tabbed inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with tabs and inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss → src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.scss
View File

16
src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-fullwidth-tabbed-2',
templateUrl: './full-width-tabbed-2.component.html',
styleUrls : ['./full-width-tabbed-2.component.scss']
})
export class CardedFullWidthTabbed2Component
{
/**
* Constructor
*/
constructor()
{
}
}

86
src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts
View File

@ -1,86 +0,0 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@Component({
selector : 'carded-fullwidth',
templateUrl: './fullwidth.component.html',
styleUrls : ['./fullwidth.component.scss']
})
export class CardedFullWidthComponent implements OnInit, OnDestroy
{
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseMatchMediaService} _fuseMatchMediaService
*/
constructor(
private _fuseConfigService: FuseConfigService,
private _fuseMatchMediaService: FuseMatchMediaService
)
{
// Configure the layout
this._fuseConfigService.config = {
layout: {
containerScroll: false
}
};
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Enable the containerScroll on small screen
// devices to get more screen real estate
this._fuseMatchMediaService.onMediaChange
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((alias) => {
// If 'xs'
if ( alias === 'xs' )
{
// Set the containerScroll to true
this._fuseConfigService.config = {
layout: {
containerScroll: true
}
};
}
else
{
// Set the containerScroll to false (route default)
this._fuseConfigService.config = {
layout: {
containerScroll: false
}
};
}
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}

6
src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html → src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded left-sidenav" fusePerfectScrollbar> <div class="page-layout carded left-sidenav">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -17,7 +17,7 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar> <div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>
@ -52,7 +52,7 @@
<!-- / CONTENT TOOLBAR --> <!-- / CONTENT TOOLBAR -->
<!-- CONTENT --> <!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar> <div class="content p-24">
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>

0
src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss → src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.scss
View File

17
src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-1',
templateUrl: './left-sidenav-1.component.html',
styleUrls : ['./left-sidenav-1.component.scss']
})
export class CardedLeftSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-2-tabbed',
templateUrl: './left-sidenav-2-tabbed.component.html',
styleUrls : ['./left-sidenav-2-tabbed.component.scss']
})
export class CardedLeftSidenav2TabbedComponent
{
/**
* Constructor
*/
constructor()
{
}
}

4
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded left-sidenav single-scroll" fusePerfectScrollbar> <div class="page-layout carded left-sidenav inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -32,7 +32,7 @@
<!-- CONTENT HEADER --> <!-- CONTENT HEADER -->
<div class="header white-fg p-24"> <div class="header white-fg p-24">
<h2>Left sidenav with container scroll</h2> <h2>Left sidenav with inner scroll</h2>
</div> </div>
<!-- / CONTENT HEADER --> <!-- / CONTENT HEADER -->

26
src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html → src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded left-sidenav tabbed single-scroll" fusePerfectScrollbar> <div class="page-layout carded left-sidenav tabbed">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -17,7 +17,7 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar> <div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>
@ -40,7 +40,7 @@
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<h2>Left sidenav with tabs and container scroll</h2> <h2>Left sidenav with tabs and content scroll</h2>
</div> </div>
@ -56,7 +56,7 @@
<mat-tab-group> <mat-tab-group>
<mat-tab label="Tab 1"> <mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -64,7 +64,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 2"> <mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -72,7 +72,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 3"> <mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -80,7 +80,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 4"> <mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -88,7 +88,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 5"> <mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -96,7 +96,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 6"> <mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -104,7 +104,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 7"> <mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -112,7 +112,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 8"> <mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -120,7 +120,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 9"> <mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -128,7 +128,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 10"> <mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->

0
src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss → src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss
View File

17
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-tabbed-1',
templateUrl: './left-sidenav-tabbed-1.component.html',
styleUrls : ['./left-sidenav-tabbed-1.component.scss']
})
export class CardedLeftSidenavTabbed1Component
{
/**
* Constructor
*/
constructor()
{
}
}

4
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html → src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded left-sidenav tabbed" fusePerfectScrollbar> <div class="page-layout carded left-sidenav tabbed inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -40,7 +40,7 @@
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<h2>Left sidenav with tabs and content scroll</h2> <h2>Left sidenav with tabs and inner scroll</h2>
</div> </div>

0
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss → src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss
View File

17
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-tabbed-2',
templateUrl: './left-sidenav-tabbed-2.component.html',
styleUrls : ['./left-sidenav-tabbed-2.component.scss']
})
export class CardedLeftSidenavTabbed2Component
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-tabbed',
templateUrl: './left-sidenav-tabbed.component.html',
styleUrls : ['./left-sidenav-tabbed.component.scss']
})
export class CardedLeftSidenavTabbedComponent
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav',
templateUrl: './left-sidenav.component.html',
styleUrls : ['./left-sidenav.component.scss']
})
export class CardedLeftSidenavComponent
{
/**
* Constructor
*/
constructor()
{
}
}

6
src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html → src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded right-sidenav" fusePerfectScrollbar> <div class="page-layout carded right-sidenav">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -31,7 +31,7 @@
<!-- / CONTENT TOOLBAR --> <!-- / CONTENT TOOLBAR -->
<!-- CONTENT --> <!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar> <div class="content p-24">
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
@ -55,7 +55,7 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar> <div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>

0
src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss → src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.scss
View File

17
src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-1',
templateUrl: './right-sidenav-1.component.html',
styleUrls : ['./right-sidenav-1.component.scss']
})
export class CardedRightSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-2-tabbed',
templateUrl: './right-sidenav-2-tabbed.component.html',
styleUrls : ['./right-sidenav-2-tabbed.component.scss']
})
export class CardedRightSidenav2TabbedComponent
{
/**
* Constructor
*/
constructor()
{
}
}

4
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded right-sidenav single-scroll" fusePerfectScrollbar> <div class="page-layout carded right-sidenav inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -11,7 +11,7 @@
<!-- CONTENT HEADER --> <!-- CONTENT HEADER -->
<div class="header white-fg p-24"> <div class="header white-fg p-24">
<h2>Right sidenav with container scroll</h2> <h2>Right sidenav with inner scroll</h2>
</div> </div>
<!-- / CONTENT HEADER --> <!-- / CONTENT HEADER -->

26
src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html → src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded right-sidenav tabbed single-scroll" fusePerfectScrollbar> <div class="page-layout carded right-sidenav tabbed">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -19,7 +19,7 @@
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<h2>Right sidenav with tabs and container scroll</h2> <h2>Right sidenav with tabs and content scroll</h2>
</div> </div>
@ -35,7 +35,7 @@
<mat-tab-group> <mat-tab-group>
<mat-tab label="Tab 1"> <mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -43,7 +43,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 2"> <mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -51,7 +51,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 3"> <mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -59,7 +59,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 4"> <mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -67,7 +67,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 5"> <mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -75,7 +75,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 6"> <mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -83,7 +83,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 7"> <mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -91,7 +91,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 8"> <mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -99,7 +99,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 9"> <mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -107,7 +107,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Tab 10"> <mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE --> <!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE --> <!-- / PUT YOUR TAB CONTENT HERE -->
@ -136,7 +136,7 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar> <div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>

0
src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss → src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss
View File

17
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-tabbed-1',
templateUrl: './right-sidenav-tabbed-1.component.html',
styleUrls : ['./right-sidenav-tabbed-1.component.scss']
})
export class CardedRightSidenavTabbed1Component
{
/**
* Constructor
*/
constructor()
{
}
}

4
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html → src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded right-sidenav tabbed" fusePerfectScrollbar> <div class="page-layout carded right-sidenav tabbed inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -19,7 +19,7 @@
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<h2>Right sidenav with tabs and content scroll</h2> <h2>Right sidenav with tabs and inner scroll</h2>
</div> </div>

0
src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss → src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss
View File

17
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-tabbed-2',
templateUrl: './right-sidenav-tabbed-2.component.html',
styleUrls : ['./right-sidenav-tabbed-2.component.scss']
})
export class CardedRightSidenavTabbed2Component
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-tabbed',
templateUrl: './right-sidenav-tabbed.component.html',
styleUrls : ['./right-sidenav-tabbed.component.scss']
})
export class CardedRightSidenavTabbedComponent
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav',
templateUrl: './right-sidenav.component.html',
styleUrls : ['./right-sidenav.component.scss']
})
export class CardedRightSidenavComponent
{
/**
* Constructor
*/
constructor()
{
}
}

102
src/app/main/ui/page-layouts/page-layouts.module.ts
View File

@ -5,74 +5,84 @@ import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseDemoModule } from '@fuse/components/demo/demo.module'; import { FuseDemoModule } from '@fuse/components/demo/demo.module';
import { CardedFullWidthComponent } from 'app/main/ui/page-layouts/carded/fullwidth/fullwidth.component'; import { CardedFullWidth1Component } from 'app/main/ui/page-layouts/carded/full-width-1/full-width-1.component';
import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component'; import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/full-width-2/full-width-2.component';
import { CardedLeftSidenavComponent } from 'app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component'; import { CardedFullWidthTabbed1Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component';
import { CardedLeftSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component'; import { CardedFullWidthTabbed2Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component';
import { CardedLeftSidenav1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component';
import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component'; import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component';
import { CardedLeftSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component'; import { CardedLeftSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component';
import { CardedRightSidenavComponent } from 'app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component'; import { CardedLeftSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component';
import { CardedRightSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component'; import { CardedRightSidenav1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component';
import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component'; import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component';
import { CardedRightSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component'; import { CardedRightSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component';
import { SimpleFullWidthComponent } from 'app/main/ui/page-layouts/simple/fullwidth/fullwidth.component'; import { CardedRightSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component';
import { SimpleLeftSidenavComponent } from 'app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component'; import { SimpleFullWidth1Component } from 'app/main/ui/page-layouts/simple/full-width-1/full-width-1.component';
import { SimpleLeftSidenav1Component } from 'app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component';
import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component'; import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component';
import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component'; import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component';
import { SimpleRightSidenavComponent } from 'app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component'; import { SimpleRightSidenav1Component } from 'app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component';
import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component'; import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component';
import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component'; import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component';
import { TabbedComponent } from 'app/main/ui/page-layouts/simple/tabbed/tabbed.component'; import { Tabbed1Component } from 'app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component';
import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component'; import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component';
const routes: Routes = [ const routes: Routes = [
{ {
path : 'page-layouts/carded/full-width', path : 'page-layouts/carded/full-width-1',
component: CardedFullWidthComponent component: CardedFullWidth1Component
}, },
{ {
path : 'page-layouts/carded/full-width-2', path : 'page-layouts/carded/full-width-2',
component: CardedFullWidth2Component component: CardedFullWidth2Component
}, },
{ {
path : 'page-layouts/carded/left-sidenav', path : 'page-layouts/carded/full-width-tabbed-1',
component: CardedLeftSidenavComponent component: CardedFullWidthTabbed1Component
}, },
{ {
path : 'page-layouts/carded/left-sidenav-tabbed', path : 'page-layouts/carded/full-width-tabbed-2',
component: CardedLeftSidenavTabbedComponent component: CardedFullWidthTabbed2Component
},
{
path : 'page-layouts/carded/left-sidenav-1',
component: CardedLeftSidenav1Component
},
{
path : 'page-layouts/carded/left-sidenav-tabbed-1',
component: CardedLeftSidenavTabbed1Component
}, },
{ {
path : 'page-layouts/carded/left-sidenav-2', path : 'page-layouts/carded/left-sidenav-2',
component: CardedLeftSidenav2Component component: CardedLeftSidenav2Component
}, },
{ {
path : 'page-layouts/carded/left-sidenav-2-tabbed', path : 'page-layouts/carded/left-sidenav-tabbed-2',
component: CardedLeftSidenav2TabbedComponent component: CardedLeftSidenavTabbed2Component
}, },
{ {
path : 'page-layouts/carded/right-sidenav', path : 'page-layouts/carded/right-sidenav-1',
component: CardedRightSidenavComponent component: CardedRightSidenav1Component
}, },
{ {
path : 'page-layouts/carded/right-sidenav-tabbed', path : 'page-layouts/carded/right-sidenav-tabbed-1',
component: CardedRightSidenavTabbedComponent component: CardedRightSidenavTabbed1Component
}, },
{ {
path : 'page-layouts/carded/right-sidenav-2', path : 'page-layouts/carded/right-sidenav-2',
component: CardedRightSidenav2Component component: CardedRightSidenav2Component
}, },
{ {
path : 'page-layouts/carded/right-sidenav-2-tabbed', path : 'page-layouts/carded/right-sidenav-tabbed-2',
component: CardedRightSidenav2TabbedComponent component: CardedRightSidenavTabbed2Component
}, },
{ {
path : 'page-layouts/simple/full-width', path : 'page-layouts/simple/full-width-1',
component: SimpleFullWidthComponent component: SimpleFullWidth1Component
}, },
{ {
path : 'page-layouts/simple/left-sidenav', path : 'page-layouts/simple/left-sidenav-1',
component: SimpleLeftSidenavComponent component: SimpleLeftSidenav1Component
}, },
{ {
path : 'page-layouts/simple/left-sidenav-2', path : 'page-layouts/simple/left-sidenav-2',
@ -83,8 +93,8 @@ const routes: Routes = [
component: SimpleLeftSidenav3Component component: SimpleLeftSidenav3Component
}, },
{ {
path : 'page-layouts/simple/right-sidenav', path : 'page-layouts/simple/right-sidenav-1',
component: SimpleRightSidenavComponent component: SimpleRightSidenav1Component
}, },
{ {
path : 'page-layouts/simple/right-sidenav-2', path : 'page-layouts/simple/right-sidenav-2',
@ -95,8 +105,8 @@ const routes: Routes = [
component: SimpleRightSidenav3Component component: SimpleRightSidenav3Component
}, },
{ {
path : 'page-layouts/simple/tabbed', path : 'page-layouts/simple/tabbed-1',
component: TabbedComponent component: Tabbed1Component
}, },
{ {
path : 'page-layouts/blank', path : 'page-layouts/blank',
@ -106,24 +116,26 @@ const routes: Routes = [
@NgModule({ @NgModule({
declarations: [ declarations: [
CardedFullWidthComponent, CardedFullWidth1Component,
CardedFullWidth2Component, CardedFullWidth2Component,
CardedLeftSidenavComponent, CardedFullWidthTabbed1Component,
CardedLeftSidenavTabbedComponent, CardedFullWidthTabbed2Component,
CardedLeftSidenav1Component,
CardedLeftSidenav2Component, CardedLeftSidenav2Component,
CardedLeftSidenav2TabbedComponent, CardedLeftSidenavTabbed1Component,
CardedRightSidenavComponent, CardedLeftSidenavTabbed2Component,
CardedRightSidenavTabbedComponent, CardedRightSidenav1Component,
CardedRightSidenav2Component, CardedRightSidenav2Component,
CardedRightSidenav2TabbedComponent, CardedRightSidenavTabbed1Component,
SimpleFullWidthComponent, CardedRightSidenavTabbed2Component,
SimpleLeftSidenavComponent, SimpleFullWidth1Component,
SimpleLeftSidenav1Component,
SimpleLeftSidenav2Component, SimpleLeftSidenav2Component,
SimpleLeftSidenav3Component, SimpleLeftSidenav3Component,
SimpleRightSidenavComponent, SimpleRightSidenav1Component,
SimpleRightSidenav2Component, SimpleRightSidenav2Component,
SimpleRightSidenav3Component, SimpleRightSidenav3Component,
TabbedComponent, Tabbed1Component,
BlankComponent BlankComponent
], ],
imports : [ imports : [

2
src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html → src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html
View File

@ -2,7 +2,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Fullwidth</h2> <h2>Full width</h2>
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->

0
src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss → src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.scss
View File

16
src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-fullwidth-1',
templateUrl: './full-width-1.component.html',
styleUrls : ['./full-width-1.component.scss']
})
export class SimpleFullWidth1Component
{
/**
* Constructor
*/
constructor()
{
}
}

16
src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts
View File

@ -1,16 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-fullwidth',
templateUrl: './fullwidth.component.html',
styleUrls : ['./fullwidth.component.scss']
})
export class SimpleFullWidthComponent
{
/**
* Constructor
*/
constructor()
{
}
}

6
src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html → src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple left-sidenav" fusePerfectScrollbar> <div class="page-layout simple left-sidenav">
<mat-sidenav-container> <mat-sidenav-container>
@ -6,7 +6,7 @@
<mat-sidenav class="sidenav" position="start" opened="true" mode="side" <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md"> fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24" fusePerfectScrollbar> <div class="sidenav-content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>
@ -16,7 +16,7 @@
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center" fusePerfectScrollbar> <div class="center">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

0
src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss → src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.scss
View File

17
src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-left-sidenav-1',
templateUrl: './left-sidenav-1.component.html',
styleUrls : ['./left-sidenav-1.component.scss']
})
export class SimpleLeftSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

10
src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
View File

@ -1,13 +1,17 @@
<div class="page-layout simple left-sidenav single-scroll" fusePerfectScrollbar> <div class="page-layout simple left-sidenav inner-scroll">
<mat-sidenav-container> <mat-sidenav-container>
<!-- SIDENAV --> <!-- SIDENAV -->
<mat-sidenav class="sidenav p-24" position="start" opened="true" mode="side" <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md"> fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
@ -24,7 +28,7 @@
</button> </button>
<div> <div>
<h2>Left sidenav with container scroll</h2> <h2>Left sidenav with inner scroll</h2>
</div> </div>
</div> </div>

4
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar> <div class="page-layout simple left-sidenav inner-sidenav inner-scroll">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@ -10,7 +10,7 @@
</button> </button>
<div> <div>
<h2>Left inner sidenav with content scroll</h2> <h2>Left inner sidenav with inner scroll</h2>
</div> </div>
</div> </div>

17
src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-left-sidenav',
templateUrl: './left-sidenav.component.html',
styleUrls : ['./left-sidenav.component.scss']
})
export class SimpleLeftSidenavComponent
{
/**
* Constructor
*/
constructor()
{
}
}

0
src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html → src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.html
View File

0
src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss Normal file
View File

17
src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-right-sidenav-1',
templateUrl: './right-sidenav-1.component.html',
styleUrls : ['./right-sidenav-1.component.scss']
})
export class SimpleRightSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

10
src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple right-sidenav single-scroll" fusePerfectScrollbar> <div class="page-layout simple right-sidenav inner-scroll">
<mat-sidenav-container> <mat-sidenav-container>
@ -15,7 +15,7 @@
</button> </button>
<div> <div>
<h2>Right sidenav with container scroll</h2> <h2>Right sidenav with inner scroll</h2>
</div> </div>
</div> </div>
@ -33,11 +33,15 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<mat-sidenav class="sidenav p-24" position="end" opened="true" mode="side" <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md"> fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav> <fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->

2
src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple right-sidenav inner-sidenav" fusePerfectScrollbar> <div class="page-layout simple right-sidenav inner-sidenav inner-scroll">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

17
src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-right-sidenav',
templateUrl: './right-sidenav.component.html',
styleUrls : ['./right-sidenav.component.scss']
})
export class SimpleRightSidenavComponent
{
/**
* Constructor
*/
constructor()
{
}
}

0
src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html → src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.html
View File

0
src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss Normal file
View File

17
src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector : 'tabbed-1',
templateUrl: './tabbed-1.component.html',
styleUrls : ['./tabbed-1.component.scss']
})
export class Tabbed1Component
{
/**
* Constructor
*/
constructor()
{
}
}

17
src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'tabbed',
templateUrl: './tabbed.component.html',
styleUrls : ['./tabbed.component.scss']
})
export class TabbedComponent
{
/**
* Constructor
*/
constructor()
{
}
}

94
src/app/navigation/navigation.ts
View File

@ -402,70 +402,82 @@ export const navigation: FuseNavigation[] = [
title : 'Carded', title : 'Carded',
type : 'collapse', type : 'collapse',
badge : { badge : {
title: '10', title: '12',
bg : '#525e8a', bg : '#525e8a',
fg : '#FFFFFF' fg : '#FFFFFF'
}, },
children: [ children: [
{ {
id : 'full-width', id : 'full-width-1',
title: 'Full Width', title: 'Full Width #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/full-width' url : '/ui/page-layouts/carded/full-width-1'
}, },
{ {
id : 'full-width-2', id : 'full-width-2',
title: 'Full Width 2', title: 'Full Width #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/full-width-2' url : '/ui/page-layouts/carded/full-width-2'
}, },
{ {
id : 'left-sidenav', id : 'full-width-tabbed-1',
title: 'Left Sidenav', title: 'Full Width Tabbed #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/left-sidenav' url : '/ui/page-layouts/carded/full-width-tabbed-1'
}, },
{ {
id : 'left-sidenav-tabbed', id : 'full-width-tabbed-2',
title: 'Left Sidenav Tabbed', title: 'Full Width Tabbed #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-tabbed' url : '/ui/page-layouts/carded/full-width-tabbed-2'
},
{
id : 'left-sidenav-1',
title: 'Left Sidenav #1',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-1'
}, },
{ {
id : 'left-sidenav-2', id : 'left-sidenav-2',
title: 'Left Sidenav 2', title: 'Left Sidenav #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-2' url : '/ui/page-layouts/carded/left-sidenav-2'
}, },
{ {
id : 'left-sidenav-2-tabbed', id : 'left-sidenav-tabbed-1',
title: 'Left Sidenav 2 Tabbed', title: 'Left Sidenav Tabbed #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-2-tabbed' url : '/ui/page-layouts/carded/left-sidenav-tabbed-1'
}, },
{ {
id : 'right-sidenav', id : 'left-sidenav-tabbed-2',
title: 'Right Sidenav', title: 'Left Sidenav Tabbed #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/right-sidenav' url : '/ui/page-layouts/carded/left-sidenav-tabbed-2'
}, },
{ {
id : 'right-sidenav-tabbed', id : 'right-sidenav-1',
title: 'Right Sidenav Tabbed', title: 'Right Sidenav #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-tabbed' url : '/ui/page-layouts/carded/right-sidenav-1'
}, },
{ {
id : 'right-sidenav-2', id : 'right-sidenav-2',
title: 'Right Sidenav 2', title: 'Right Sidenav #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-2' url : '/ui/page-layouts/carded/right-sidenav-2'
}, },
{ {
id : 'right-sidenav-2-tabbed', id : 'right-sidenav-tabbed-1',
title: 'Right Sidenav 2 Tabbed', title: 'Right Sidenav Tabbed #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-2-tabbed' url : '/ui/page-layouts/carded/right-sidenav-tabbed-1'
},
{
id : 'right-sidenav-tabbed-2',
title: 'Right Sidenav Tabbed #2',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-tabbed-2'
} }
] ]
}, },
@ -480,52 +492,52 @@ export const navigation: FuseNavigation[] = [
}, },
children: [ children: [
{ {
id : 'full-width', id : 'full-width-1',
title: 'Full Width', title: 'Full Width #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/full-width' url : '/ui/page-layouts/simple/full-width-1'
}, },
{ {
id : 'left-sidenav', id : 'left-sidenav-1',
title: 'Left Sidenav', title: 'Left Sidenav #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/left-sidenav' url : '/ui/page-layouts/simple/left-sidenav-1'
}, },
{ {
id : 'left-sidenav-2', id : 'left-sidenav-2',
title: 'Left Sidenav 2', title: 'Left Sidenav #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-2' url : '/ui/page-layouts/simple/left-sidenav-2'
}, },
{ {
id : 'left-sidenav-3', id : 'left-sidenav-3',
title: 'Left Sidenav 3', title: 'Left Sidenav #3',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-3' url : '/ui/page-layouts/simple/left-sidenav-3'
}, },
{ {
id : 'right-sidenav', id : 'right-sidenav-1',
title: 'Right Sidenav', title: 'Right Sidenav #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/right-sidenav' url : '/ui/page-layouts/simple/right-sidenav-1'
}, },
{ {
id : 'right-sidenav-2', id : 'right-sidenav-2',
title: 'Right Sidenav 2', title: 'Right Sidenav #2',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-2' url : '/ui/page-layouts/simple/right-sidenav-2'
}, },
{ {
id : 'right-sidenav-3', id : 'right-sidenav-3',
title: 'Right Sidenav 3', title: 'Right Sidenav #3',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-3' url : '/ui/page-layouts/simple/right-sidenav-3'
}, },
{ {
id : 'tabbed', id : 'tabbed-1',
title: 'Tabbed', title: 'Tabbed #1',
type : 'item', type : 'item',
url : '/ui/page-layouts/simple/tabbed' url : '/ui/page-layouts/simple/tabbed-1'
} }
] ]
}, },

2
src/index.html
View File

@ -181,7 +181,7 @@
<!-- / FUSE Splash Screen CSS --> <!-- / FUSE Splash Screen CSS -->
</head> </head>
<body> <body class="mat-grey-100-bg">
<!-- FUSE Splash Screen --> <!-- FUSE Splash Screen -->
<fuse-splash-screen id="fuse-splash-screen"> <fuse-splash-screen id="fuse-splash-screen">