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

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
// and fold the sidebar if it's true
if ( this._fuseConfig.layout.navigation.folded )
if ( this._fuseConfig.layout.navbar.folded )
{
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')">
<mat-icon>close</mat-icon>
</button>
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
</div>
<form [formGroup]="fuseConfigForm">
<form [formGroup]="form">
<!-- NAVIGATION STYLES -->
<!--<h3>Navigation Style:</h3>
<mat-radio-group [(ngModel)]="fuseConfig.layout.navigation.style"
(ngModelChange)="onConfigChange(true)"
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">
<!-- LAYOUT STYLES -->
<div class="group" formGroupName="layout">
<h2>Layout Styles</h2>
<!-- VERTICAL LAYOUT STYLES -->
<h3>Scrollable Area:</h3>
<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="mr-8 mb-8" value="vertical-layout-2">Wrapper</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Body</mat-radio-button>
<mat-radio-button class="mb-12" value="vertical-layout-1-content-scroll">
Vertical Layout #1 - Content Scroll
</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>
<!-- HORIZONTAL LAYOUT STYLES -->
<h3 class="mt-24">Horizontal Layout Styles:</h3>
<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>
<mat-radio-button class="mr-8 mb-8" value="horizontal-layout-2">Layout 2</mat-radio-button>
<!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
<ng-container [ngSwitch]="fuseConfig.layout.style">
<!-- VERTICAL LAYOUT #1 - CONTENT SCROLL -->
<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>
</div>
<div formGroupName="navigation">
<!-- NAVBAR -->
<div class="group" formGroupName="navbar">
<!-- NAVIGATION POSITIONS -->
<h3 class="mt-32">Navigation Position:</h3>
<h2>Navbar</h2>
<!-- VERTICAL NAVIGATION POSITIONS -->
<mat-radio-group formControlName="position"
fxLayout="column" fxLayoutAlign="start start"
*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>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<!-- HORIZONTAL NAVIGATION POSITIONS -->
<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">
<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">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>
</div>
<div formGroupName="toolbar">
<!-- CUSTOM SCROLLBARS -->
<div class="group">
<!-- TOOLBAR -->
<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>
<h2>Custom scrollbars</h2>
</div>
<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">
<mat-slide-toggle class="mb-12" formControlName="customScrollbars">
Enable custom scrollbars
</mat-slide-toggle>
<mat-divider></mat-divider>
</div>
<!-- COLORS -->
<div class="group">
<h2>Colors</h2>
<h3>Colors:</h3>
<div class="colors">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -128,9 +286,9 @@
</div>
<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
[(selectedClass)]="fuseConfig.layout.navigation.background"></fuse-material-color-picker>
[(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -141,9 +299,13 @@
</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-select class="p-0" formControlName="routerAnimation">
<mat-option value="none">
@ -167,8 +329,8 @@
</mat-select>
</mat-form-field>
</form>
</div>
</form>
</div>

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

@ -14,26 +14,63 @@
.theme-options-panel {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding: 24px;
padding: 40px 24px 24px 24px;
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;
top: 8px;
right: 8px;
top: -11px;
left: 8px;
margin: 0;
padding: 0 8px;
font-size: 16px;
font-weight: 500;
background: white;
color: rgba(0, 0, 0, 0.54);
}
h3 {
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.mat-divider {
display: block !important;
width: 100%;
margin: 24px 0 16px 0;
padding: 0;
&:first-of-type {
margin-top: 0;
}
}
}
.colors {
@ -41,12 +78,5 @@
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 { FormBuilder, FormGroup } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -17,7 +17,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
fuseConfig: any;
fuseConfigForm: FormGroup;
form: FormGroup;
@HostBinding('class.bar-closed')
barClosed: boolean;
@ -58,40 +58,59 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
*/
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
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
}
);
// Build the config form
// noinspection TypeScriptValidateTypes
this.fuseConfigForm = this._formBuilder.group({
layout : this._formBuilder.group({
style : this.fuseConfig.layout.style,
navigation: this._formBuilder.group({
position : this.fuseConfig.layout.navigation.position,
folded : this.fuseConfig.layout.navigation.folded,
background: this.fuseConfig.layout.navigation.background
}),
toolbar : this._formBuilder.group({
position : this.fuseConfig.layout.toolbar.position,
background: this.fuseConfig.layout.toolbar.background
}),
footer : this._formBuilder.group({
position : this.fuseConfig.layout.footer.position,
background: this.fuseConfig.layout.footer.background
}),
mode : this.fuseConfig.layout.mode
}),
customScrollbars: this.fuseConfig.customScrollbars,
routerAnimation : this.fuseConfig.routerAnimation
// Update the stored config
this.fuseConfig = config;
// Set the config form values without emitting an event
// so that we don't end up with an infinite loop
this.form.setValue(config, {emitEvent: false});
});
// Subscribe to the specific form value changes (layout.style)
this.form.get('layout.style').valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
// Reset the form values based on the
// selected layout style
this._resetFormValues(value);
});
// Subscribe to the form value changes
this.fuseConfigForm.valueChanges
this.form.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
@ -99,16 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
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
const customFunctionNavItem = {
'id' : 'custom-function',
@ -147,6 +156,103 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// @ 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
*
@ -158,86 +264,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
this._fuseSidebarService.getSidebar(key).toggleOpen();
}
// -----------------------------------------------------------------------------------------------------
// @ 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 { 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 { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
@NgModule({
declarations: [
FuseIfOnDomDirective,
FuseInnerScrollDirective,
FuseMatSidenavHelperDirective,
FuseMatSidenavTogglerDirective,
FusePerfectScrollbarDirective
@ -14,6 +16,7 @@ import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@
imports : [],
exports : [
FuseIfOnDomDirective,
FuseInnerScrollDirective,
FuseMatSidenavHelperDirective,
FuseMatSidenavTogglerDirective,
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 { NavigationEnd, Router } from '@angular/router';
import { Platform } from '@angular/cdk/platform';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { filter, takeUntil } from 'rxjs/operators';
import PerfectScrollbar from 'perfect-scrollbar';
import { FuseConfigService } from '@fuse/services/config.service';
@ -18,6 +18,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
// Private
private _enabled: boolean | '';
private _updateOnNavigationEnd: boolean | '';
private _unsubscribeAll: Subject<any>;
/**
@ -26,11 +27,13 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
* @param {ElementRef} elementRef
* @param {FuseConfigService} _fuseConfigService
* @param {Platform} _platform
* @param {Router} _router
*/
constructor(
public elementRef: ElementRef,
private _fuseConfigService: FuseConfigService,
private _platform: Platform
private _platform: Platform,
private _router: Router
)
{
// Set the defaults
@ -39,6 +42,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
// Set the private defaults
this._enabled = false;
this._updateOnNavigationEnd = false;
this._unsubscribeAll = new Subject();
}
@ -88,6 +92,27 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
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
// -----------------------------------------------------------------------------------------------------
@ -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-sm: $carded-header-height-sm - $carded-toolbar-height;
// Top bg image
$top-bg-image: url('assets/images/backgrounds/header-bg.png');
.page-layout {
position: relative;
overflow-x: hidden;
@ -34,8 +31,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
right: 0;
left: 0;
height: $carded-header-height;
background-image: $top-bg-image;
background-size: cover;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
@ -45,12 +40,20 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Fullwidth
&.fullwidth {
// Single scroll
&.single-scroll {
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .center {
flex: 1 0 auto;
max-height: none;
flex: 1 1 auto;
.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 {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 0 auto;
position: relative;
z-index: 2;
padding: 0 32px;
@ -82,7 +85,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.content-card {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 0 auto;
overflow: hidden;
@include mat-elevation(7);
@ -98,28 +101,65 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .content {
display: flex;
flex: 1;
flex: 1 0 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 {
// Single scroll
&.single-scroll {
> mat-sidenav-container {
flex: 1 0 auto;
}
}
> mat-sidenav-container {
display: flex;
flex: 1;
flex: 1 1 auto;
background: none;
z-index: 2;
width: 100%;
@ -127,7 +167,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.sidenav {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 1 auto;
width: 240px;
min-width: 240px;
max-width: 240px;
@ -162,7 +202,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
flex: 1 1 auto;
height: auto;
overflow: visible;
@ -170,7 +210,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.center {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 1 auto;
position: relative;
z-index: 3;
margin-left: 32px;
@ -192,7 +232,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.content-card {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 1 auto;
overflow: hidden;
@include mat-elevation(7);
@ -200,7 +240,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1;
flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
@ -215,7 +255,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
.content {
display: flex;
flex: 1;
flex: 1 1 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 {
@ -242,7 +306,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
}
.header {
flex: 1;
flex: 1 1 auto;
}
.content-card {
@ -336,12 +400,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
width: 100%;
min-width: 100%;
// Top bg
> .header {
background-image: $top-bg-image;
background-size: cover;
}
// Fullwidth
&.fullwidth {
overflow: auto;
@ -363,7 +421,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.right-sidenav {
// Single scroll
&.single-scroll {
/*&.single-scroll {
> mat-sidenav-container {
flex: 1 0 auto;
@ -374,13 +432,13 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
max-height: none;
}
}
}
}*/
// Inner Sidenav
&.inner-sidenav {
> mat-sidenav-container {
flex: 1;
flex: 1 1 auto;
.sidenav {
@ -395,7 +453,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: auto;
.center {
flex: 1;
flex: 1 1 auto;
min-height: 100%;
@include mat-elevation(0);
@ -411,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> mat-sidenav-container {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 1 auto;
background: none;
z-index: 2;
width: 100%;
@ -439,7 +497,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
flex: 1 1 auto;
height: auto;
overflow: visible;
max-height: 100%;
@ -448,13 +506,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $header-height;
min-height: $header-height;
max-height: $header-height;
background-image: $top-bg-image;
}
.center {
display: flex;
flex-direction: column;
flex: 1;
flex: 1 1 auto;
overflow: auto;
@include mat-elevation(7);

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

@ -107,6 +107,38 @@ export class FuseConfigService
// @ 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
*/

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

@ -2,20 +2,23 @@ export interface FuseConfig
{
layout: {
style: string,
navigation: {
position: 'left' | 'right' | 'top' | 'none',
width: 'fullwidth' | 'boxed',
navbar: {
hidden: boolean,
folded: boolean,
position: 'left' | 'right' | 'top',
background: string
},
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
}
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
},
mode: 'fullwidth' | 'boxed'
}
};
customScrollbars: boolean;
routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none';

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

@ -1,6 +1,11 @@
<!-- VERTICAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
<vertical-layout-1></vertical-layout-1>
<!-- VERTICAL LAYOUT 1 - BODY SCROLL -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'">
<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>
<!-- VERTICAL LAYOUT 2 -->
@ -8,9 +13,9 @@
<vertical-layout-2></vertical-layout-2>
</ng-container>
<!-- VERTICAL LAYOUT 3 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
<vertical-layout-3></vertical-layout-3>
<!-- HORIZONTAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
</ng-container>
<!-- THEME OPTIONS PANEL -->
@ -19,6 +24,6 @@
<mat-icon>settings</mat-icon>
</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-sidebar>

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

@ -3,6 +3,7 @@
display: flex;
flex: 1 1 auto;
width: 100%;
height: 100%;
min-width: 0;
.theme-options-button {
@ -28,4 +29,10 @@
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 = {
layout : {
style : 'vertical-layout-1',
navigation: {
style : 'vertical-layout-1-content-scroll',
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
toolbar : {
position : 'below',
hidden : false,
position : 'below-static',
background: 'mat-white-500-bg'
},
footer : {
position : 'below',
hidden : false,
position : 'below-static',
background: 'mat-fuse-dark-900-bg'
},
mode : 'fullwidth'
}
},
customScrollbars: true,
routerAnimation : 'fadeIn'

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

@ -1,11 +1,12 @@
content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
display:flex;
z-index: 1;
flex: 1 0 auto;
> *:not(router-outlet) {
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
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((settings) => {
this.horizontalNav = settings.layout.navigation.position === 'top';
this.noNav = settings.layout.navigation.position === 'none';
this.horizontalNav = settings.layout.navbar.position === 'top';
this.noNav = settings.layout.navbar.position === 'none';
});
// 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 { 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 { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module';
@NgModule({
imports: [
VerticalLayout1Module,
VerticalLayout2Module,
VerticalLayout3Module
VerticalLayout1BodyScrollModule,
VerticalLayout1ContentScrollModule,
VerticalLayout2Module
],
exports: [
VerticalLayout1Module,
VerticalLayout2Module,
VerticalLayout3Module
VerticalLayout1BodyScrollModule,
VerticalLayout1ContentScrollModule,
VerticalLayout2Module
]
})
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";
vertical-layout-3 {
vertical-layout-1-body-scroll {
display: flex;
flex: 1 1 auto;
width: 100%;
height: 100%;
#main {
position: relative;
@ -11,6 +12,7 @@ vertical-layout-3 {
flex: 1 1 auto;
flex-direction: column;
width: 100%;
height: 100%;
z-index: 1;
// 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';
@Component({
selector : 'vertical-layout-1',
templateUrl : './layout-1.component.html',
styleUrls : ['./layout-1.component.scss'],
selector : 'vertical-layout-1-body-scroll',
templateUrl : './body-scroll.component.html',
styleUrls : ['./body-scroll.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class VerticalLayout1Component implements OnInit, OnDestroy
export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy
{
fuseConfig: 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 { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components';
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 { 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({
declarations: [
VerticalLayout3Component
VerticalLayout1BodyScrollComponent
],
imports : [
RouterModule,
FuseSharedModule,
FuseSidebarModule,
@ -26,9 +29,9 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
ToolbarModule
],
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';
@Component({
selector : 'vertical-layout-3',
templateUrl : './layout-3.component.html',
styleUrls : ['./layout-3.component.scss'],
selector : 'vertical-layout-1-content-scroll',
templateUrl : './content-scroll.component.html',
styleUrls : ['./content-scroll.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class VerticalLayout3Component implements OnInit, OnDestroy
export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy
{
fuseConfig: 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 { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components';
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 { 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({
declarations: [
VerticalLayout1Component
VerticalLayout1ContentScrollComponent
],
imports : [
RouterModule,
FuseSharedModule,
FuseSidebarModule,
@ -26,9 +29,9 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
ToolbarModule
],
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">
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
<toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
<!-- TOOLBAR: Above fixed -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Above -->
<!-- / TOOLBAR: Above fixed -->
<div id="container-1" class="container">
<div id="container-1" class="container" fusePerfectScrollbar>
<!-- 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 -->
<!-- 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">
<!-- TOOLBAR: Below sticky -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-sticky'">
<toolbar class="below-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
<!-- NAVBAR: Left -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
<ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Below sticky -->
<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 -->
<!-- / NAVBAR: Left -->
<!-- CONTENT -->
<content></content>
<content
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}"
></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>
<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'">
<footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer>
<!-- FOOTER: Above static -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
<ng-container *ngTemplateOutlet="footer"></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>
@ -79,3 +57,45 @@
<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 -->

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

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

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

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
@ -16,6 +17,8 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
VerticalLayout2Component
],
imports : [
RouterModule,
FuseSharedModule,
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 -->
<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>
<!-- / 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 -->
<div class="top-bg mat-accent-bg"></div>
@ -9,7 +9,7 @@
<!-- CONTENT HEADER -->
<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>
<!-- / 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({
selector : 'carded-fullwidth-2',
templateUrl: './fullwidth-2.component.html',
styleUrls : ['./fullwidth-2.component.scss']
templateUrl: './full-width-2.component.html',
styleUrls : ['./full-width-2.component.scss']
})
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 -->
<div class="top-bg mat-accent-bg"></div>
@ -17,7 +17,7 @@
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
@ -52,7 +52,7 @@
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<div class="content p-24">
<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 -->
<div class="top-bg mat-accent-bg"></div>
@ -32,7 +32,7 @@
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<h2>Left sidenav with container scroll</h2>
<h2>Left sidenav with inner scroll</h2>
</div>
<!-- / 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 -->
<div class="top-bg mat-accent-bg"></div>
@ -17,7 +17,7 @@
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
@ -40,7 +40,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and container scroll</h2>
<h2>Left sidenav with tabs and content scroll</h2>
</div>
@ -56,7 +56,7 @@
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -64,7 +64,7 @@
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -72,7 +72,7 @@
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -80,7 +80,7 @@
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -88,7 +88,7 @@
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -96,7 +96,7 @@
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -104,7 +104,7 @@
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -112,7 +112,7 @@
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -120,7 +120,7 @@
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -128,7 +128,7 @@
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / 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 -->
<div class="top-bg mat-accent-bg"></div>
@ -40,7 +40,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and content scroll</h2>
<h2>Left sidenav with tabs and inner scroll</h2>
</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 -->
<div class="top-bg mat-accent-bg"></div>
@ -31,7 +31,7 @@
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>
@ -55,7 +55,7 @@
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<div class="content p-24">
<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 -->
<div class="top-bg mat-accent-bg"></div>
@ -11,7 +11,7 @@
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<h2>Right sidenav with container scroll</h2>
<h2>Right sidenav with inner scroll</h2>
</div>
<!-- / 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 -->
<div class="top-bg mat-accent-bg"></div>
@ -19,7 +19,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and container scroll</h2>
<h2>Right sidenav with tabs and content scroll</h2>
</div>
@ -35,7 +35,7 @@
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -43,7 +43,7 @@
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -51,7 +51,7 @@
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -59,7 +59,7 @@
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -67,7 +67,7 @@
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -75,7 +75,7 @@
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -83,7 +83,7 @@
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -91,7 +91,7 @@
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -99,7 +99,7 @@
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -107,7 +107,7 @@
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
@ -136,7 +136,7 @@
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<div class="content p-24">
<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 -->
<div class="top-bg mat-accent-bg"></div>
@ -19,7 +19,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and content scroll</h2>
<h2>Right sidenav with tabs and inner scroll</h2>
</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 { FuseDemoModule } from '@fuse/components/demo/demo.module';
import { CardedFullWidthComponent } from 'app/main/ui/page-layouts/carded/fullwidth/fullwidth.component';
import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component';
import { CardedLeftSidenavComponent } from 'app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component';
import { CardedLeftSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.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/full-width-2/full-width-2.component';
import { CardedFullWidthTabbed1Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.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 { CardedLeftSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component';
import { CardedRightSidenavComponent } from 'app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component';
import { CardedRightSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component';
import { CardedLeftSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component';
import { CardedLeftSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.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 { CardedRightSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component';
import { SimpleFullWidthComponent } from 'app/main/ui/page-layouts/simple/fullwidth/fullwidth.component';
import { SimpleLeftSidenavComponent } from 'app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component';
import { CardedRightSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component';
import { CardedRightSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.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 { 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 { 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';
const routes: Routes = [
{
path : 'page-layouts/carded/full-width',
component: CardedFullWidthComponent
path : 'page-layouts/carded/full-width-1',
component: CardedFullWidth1Component
},
{
path : 'page-layouts/carded/full-width-2',
component: CardedFullWidth2Component
},
{
path : 'page-layouts/carded/left-sidenav',
component: CardedLeftSidenavComponent
path : 'page-layouts/carded/full-width-tabbed-1',
component: CardedFullWidthTabbed1Component
},
{
path : 'page-layouts/carded/left-sidenav-tabbed',
component: CardedLeftSidenavTabbedComponent
path : 'page-layouts/carded/full-width-tabbed-2',
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',
component: CardedLeftSidenav2Component
},
{
path : 'page-layouts/carded/left-sidenav-2-tabbed',
component: CardedLeftSidenav2TabbedComponent
path : 'page-layouts/carded/left-sidenav-tabbed-2',
component: CardedLeftSidenavTabbed2Component
},
{
path : 'page-layouts/carded/right-sidenav',
component: CardedRightSidenavComponent
path : 'page-layouts/carded/right-sidenav-1',
component: CardedRightSidenav1Component
},
{
path : 'page-layouts/carded/right-sidenav-tabbed',
component: CardedRightSidenavTabbedComponent
path : 'page-layouts/carded/right-sidenav-tabbed-1',
component: CardedRightSidenavTabbed1Component
},
{
path : 'page-layouts/carded/right-sidenav-2',
component: CardedRightSidenav2Component
},
{
path : 'page-layouts/carded/right-sidenav-2-tabbed',
component: CardedRightSidenav2TabbedComponent
path : 'page-layouts/carded/right-sidenav-tabbed-2',
component: CardedRightSidenavTabbed2Component
},
{
path : 'page-layouts/simple/full-width',
component: SimpleFullWidthComponent
path : 'page-layouts/simple/full-width-1',
component: SimpleFullWidth1Component
},
{
path : 'page-layouts/simple/left-sidenav',
component: SimpleLeftSidenavComponent
path : 'page-layouts/simple/left-sidenav-1',
component: SimpleLeftSidenav1Component
},
{
path : 'page-layouts/simple/left-sidenav-2',
@ -83,8 +93,8 @@ const routes: Routes = [
component: SimpleLeftSidenav3Component
},
{
path : 'page-layouts/simple/right-sidenav',
component: SimpleRightSidenavComponent
path : 'page-layouts/simple/right-sidenav-1',
component: SimpleRightSidenav1Component
},
{
path : 'page-layouts/simple/right-sidenav-2',
@ -95,8 +105,8 @@ const routes: Routes = [
component: SimpleRightSidenav3Component
},
{
path : 'page-layouts/simple/tabbed',
component: TabbedComponent
path : 'page-layouts/simple/tabbed-1',
component: Tabbed1Component
},
{
path : 'page-layouts/blank',
@ -106,24 +116,26 @@ const routes: Routes = [
@NgModule({
declarations: [
CardedFullWidthComponent,
CardedFullWidth1Component,
CardedFullWidth2Component,
CardedLeftSidenavComponent,
CardedLeftSidenavTabbedComponent,
CardedFullWidthTabbed1Component,
CardedFullWidthTabbed2Component,
CardedLeftSidenav1Component,
CardedLeftSidenav2Component,
CardedLeftSidenav2TabbedComponent,
CardedRightSidenavComponent,
CardedRightSidenavTabbedComponent,
CardedLeftSidenavTabbed1Component,
CardedLeftSidenavTabbed2Component,
CardedRightSidenav1Component,
CardedRightSidenav2Component,
CardedRightSidenav2TabbedComponent,
SimpleFullWidthComponent,
SimpleLeftSidenavComponent,
CardedRightSidenavTabbed1Component,
CardedRightSidenavTabbed2Component,
SimpleFullWidth1Component,
SimpleLeftSidenav1Component,
SimpleLeftSidenav2Component,
SimpleLeftSidenav3Component,
SimpleRightSidenavComponent,
SimpleRightSidenav1Component,
SimpleRightSidenav2Component,
SimpleRightSidenav3Component,
TabbedComponent,
Tabbed1Component,
BlankComponent
],
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 -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Fullwidth</h2>
<h2>Full width</h2>
</div>
<!-- / 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>
@ -6,7 +6,7 @@
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
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>
@ -16,7 +16,7 @@
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
<div class="center">
<!-- HEADER -->
<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>
<!-- 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">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
@ -24,7 +28,7 @@
</button>
<div>
<h2>Left sidenav with container scroll</h2>
<h2>Left sidenav with inner scroll</h2>
</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 -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@ -10,7 +10,7 @@
</button>
<div>
<h2>Left inner sidenav with content scroll</h2>
<h2>Left inner sidenav with inner scroll</h2>
</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>
@ -15,7 +15,7 @@
</button>
<div>
<h2>Right sidenav with container scroll</h2>
<h2>Right sidenav with inner scroll</h2>
</div>
</div>
@ -33,11 +33,15 @@
<!-- / CENTER -->
<!-- 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">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-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 -->
<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',
type : 'collapse',
badge : {
title: '10',
title: '12',
bg : '#525e8a',
fg : '#FFFFFF'
},
children: [
{
id : 'full-width',
title: 'Full Width',
id : 'full-width-1',
title: 'Full Width #1',
type : 'item',
url : '/ui/page-layouts/carded/full-width'
url : '/ui/page-layouts/carded/full-width-1'
},
{
id : 'full-width-2',
title: 'Full Width 2',
title: 'Full Width #2',
type : 'item',
url : '/ui/page-layouts/carded/full-width-2'
},
{
id : 'left-sidenav',
title: 'Left Sidenav',
id : 'full-width-tabbed-1',
title: 'Full Width Tabbed #1',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav'
url : '/ui/page-layouts/carded/full-width-tabbed-1'
},
{
id : 'left-sidenav-tabbed',
title: 'Left Sidenav Tabbed',
id : 'full-width-tabbed-2',
title: 'Full Width Tabbed #2',
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',
title: 'Left Sidenav 2',
title: 'Left Sidenav #2',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-2'
},
{
id : 'left-sidenav-2-tabbed',
title: 'Left Sidenav 2 Tabbed',
id : 'left-sidenav-tabbed-1',
title: 'Left Sidenav Tabbed #1',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
url : '/ui/page-layouts/carded/left-sidenav-tabbed-1'
},
{
id : 'right-sidenav',
title: 'Right Sidenav',
id : 'left-sidenav-tabbed-2',
title: 'Left Sidenav Tabbed #2',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav'
url : '/ui/page-layouts/carded/left-sidenav-tabbed-2'
},
{
id : 'right-sidenav-tabbed',
title: 'Right Sidenav Tabbed',
id : 'right-sidenav-1',
title: 'Right Sidenav #1',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-tabbed'
url : '/ui/page-layouts/carded/right-sidenav-1'
},
{
id : 'right-sidenav-2',
title: 'Right Sidenav 2',
title: 'Right Sidenav #2',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-2'
},
{
id : 'right-sidenav-2-tabbed',
title: 'Right Sidenav 2 Tabbed',
id : 'right-sidenav-tabbed-1',
title: 'Right Sidenav Tabbed #1',
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: [
{
id : 'full-width',
title: 'Full Width',
id : 'full-width-1',
title: 'Full Width #1',
type : 'item',
url : '/ui/page-layouts/simple/full-width'
url : '/ui/page-layouts/simple/full-width-1'
},
{
id : 'left-sidenav',
title: 'Left Sidenav',
id : 'left-sidenav-1',
title: 'Left Sidenav #1',
type : 'item',
url : '/ui/page-layouts/simple/left-sidenav'
url : '/ui/page-layouts/simple/left-sidenav-1'
},
{
id : 'left-sidenav-2',
title: 'Left Sidenav 2',
title: 'Left Sidenav #2',
type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-2'
},
{
id : 'left-sidenav-3',
title: 'Left Sidenav 3',
title: 'Left Sidenav #3',
type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-3'
},
{
id : 'right-sidenav',
title: 'Right Sidenav',
id : 'right-sidenav-1',
title: 'Right Sidenav #1',
type : 'item',
url : '/ui/page-layouts/simple/right-sidenav'
url : '/ui/page-layouts/simple/right-sidenav-1'
},
{
id : 'right-sidenav-2',
title: 'Right Sidenav 2',
title: 'Right Sidenav #2',
type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-2'
},
{
id : 'right-sidenav-3',
title: 'Right Sidenav 3',
title: 'Right Sidenav #3',
type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-3'
},
{
id : 'tabbed',
title: 'Tabbed',
id : 'tabbed-1',
title: 'Tabbed #1',
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 -->
</head>
<body>
<body class="mat-grey-100-bg">
<!-- FUSE Splash Screen -->
<fuse-splash-screen id="fuse-splash-screen">