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

New layout system (wip)

Browse Source
This commit is contained in:
Sercan Yemen 2018-05-29 14:58:48 +03:00
parent 0ac4e6c220
commit 70d895c6ed
61 changed files with 1508 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.editorconfig
View File

@ -1,13 +1,6 @@
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
charset=utf-8
end_of_line=lf
insert_final_newline=false
indent_style=space
indent_size=4

2
src/@fuse/components/search-bar/search-bar.component.ts
View File

@ -51,7 +51,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(
(config) => {
this.toolbarColor = config.colorClasses.toolbar;
this.toolbarColor = config.layout.toolbar.background;
}
);
}

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

@ -71,7 +71,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(
(config) => {
this.toolbarColor = config.colorClasses.toolbar;
this.toolbarColor = config.layout.toolbar.background;
}
);

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

@ -12,102 +12,162 @@
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
<h3>Layout:</h3>
<mat-radio-group [(ngModel)]="fuseConfig.layout.style" (ngModelChange)="onConfigChange()"
fxLayout="column" fxLayout.gt-xs="row wrap" 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-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<form [formGroup]="fuseConfigForm">
<h3>Navigation:</h3>
<mat-radio-group [(ngModel)]="fuseConfig.layout.navigation" (ngModelChange)="onConfigChange()"
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
<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>
<!-- 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">
<h3>Navigation Fold (for vertical navigation):</h3>
<mat-slide-toggle [(ngModel)]="fuseConfig.layout.navigationFolded"
(change)="onConfigChange()">
Folded
</mat-slide-toggle>
<!-- VERTICAL LAYOUT STYLES -->
<h3>Vertical Layout Styles:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Layout 1</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Layout 2</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Layout 3</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24">Toolbar:</h3>
<mat-radio-group [(ngModel)]="fuseConfig.layout.toolbar" (ngModelChange)="onConfigChange()"
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</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>
</mat-radio-group>
<h3 class="mt-24">Footer:</h3>
<mat-radio-group [(ngModel)]="fuseConfig.layout.footer" (ngModelChange)="onConfigChange()"
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24">Layout Mode:</h3>
<mat-radio-group [(ngModel)]="fuseConfig.layout.mode" (ngModelChange)="onConfigChange()"
fxLayout="column" fxLayout.gt-xs="row wrap" 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 formGroupName="navigation">
<mat-divider></mat-divider>
<!-- NAVIGATION POSITIONS -->
<h3 class="mt-32">Navigation Position:</h3>
<h3>Colors:</h3>
<div class="colors">
<!-- 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>
<!-- 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">
Folded
</mat-slide-toggle>
</ng-container>
</div>
<div formGroupName="toolbar">
<!-- 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="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>
<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 fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Toolbar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseConfig.colorClasses.toolbar"
(onValueChange)="onConfigChange()"></fuse-material-color-picker>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Navigation Bar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseConfig.colorClasses.navbar"
(onValueChange)="onConfigChange()"></fuse-material-color-picker>
<mat-divider></mat-divider>
<h3>Custom scrollbars:</h3>
<mat-slide-toggle formControlName="customScrollbars">
Enable custom scrollbars
</mat-slide-toggle>
<mat-divider></mat-divider>
<h3>Colors:</h3>
<div class="colors">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Toolbar Color</h4>
<fuse-material-color-picker
[(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Navigation Bar Color</h4>
<fuse-material-color-picker
[(selectedClass)]="fuseConfig.layout.navigation.background"></fuse-material-color-picker>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Footer Color</h4>
<fuse-material-color-picker
[(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
</div>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Footer Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseConfig.colorClasses.footer"
(onValueChange)="onConfigChange()"></fuse-material-color-picker>
</div>
<mat-divider></mat-divider>
</div>
<h3>Router Animation:</h3>
<mat-form-field class="w-100-p">
<mat-select class="p-0" formControlName="routerAnimation">
<mat-option value="none">
None
</mat-option>
<mat-option value="slideUp">
Slide up
</mat-option>
<mat-option value="slideDown">
Slide down
</mat-option>
<mat-option value="slideRight">
Slide right
</mat-option>
<mat-option value="slideLeft">
Slide left
</mat-option>
<mat-option value="fadeIn">
Fade in
</mat-option>
</mat-select>
</mat-form-field>
<mat-divider></mat-divider>
</form>
<h3>Router Animation:</h3>
<mat-form-field class="w-100-p">
<mat-select class="p-0" [(ngModel)]="fuseConfig.routerAnimation">
<mat-option value="none">
None
</mat-option>
<mat-option value="slideUp">
Slide up
</mat-option>
<mat-option value="slideDown">
Slide down
</mat-option>
<mat-option value="slideRight">
Slide right
</mat-option>
<mat-option value="slideLeft">
Slide left
</mat-option>
<mat-option value="fadeIn">
Fade in
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>

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

@ -1,5 +1,6 @@
import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -15,8 +16,9 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
})
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
@Input()
navigation;
fuseConfig: any;
fuseConfigForm: FormGroup;
player: AnimationPlayer;
@ViewChild('openButton')
openButton;
@ -27,16 +29,15 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
@ViewChild('overlay')
overlay: ElementRef;
player: AnimationPlayer;
fuseConfig: any;
@HostBinding('class.bar-closed') barClosed: boolean;
@HostBinding('class.bar-closed')
barClosed: boolean;
// Private
private _unsubscribeAll: Subject<any>;
constructor(
private _animationBuilder: AnimationBuilder,
private _formBuilder: FormBuilder,
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _renderer: Renderer2
@ -66,16 +67,44 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
}
);
// 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
});
// Subscribe to the form value changes
this.fuseConfigForm.valueChanges.subscribe((config) => {
// Update the config
this._fuseConfigService.config = config;
});
// Listen for the overlay's click event
this._renderer.listen(this.overlay.nativeElement, 'click', () => {
this.closeBar();
});
// Get the nav model and add customize nav item
// that opens the bar programmatically
const nav: any = this.navigation;
nav.push({
// Add customize nav item that opens the bar programmatically
const customFunctionNavItem = {
'id' : 'custom-function',
'title' : 'Custom Function',
'type' : 'group',
@ -90,7 +119,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
}
}
]
});
};
this._fuseNavigationService.addNavigationItem(customFunctionNavItem, 'end');
}
/**
@ -101,6 +132,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
// Remove the custom function menu
this._fuseNavigationService.removeNavigationItem('custom-function');
}
// -----------------------------------------------------------------------------------------------------
@ -110,9 +144,50 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
/**
* On config change
*/
onConfigChange(): void
onConfigChange(layoutChanged = false): void
{
this._fuseConfigService.config = this.fuseConfig;
// If the layout changed, reset the settings
if ( layoutChanged )
{
this.resetConfig();
}
}
/**
* Reset the config correctly
*/
resetConfig(): void
{
// 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 ( this.fuseConfig.layout.style )
{
// Vertical
// Layout 1
case 'vertical-layout-1':
{
this._fuseConfigService.config = {
layout: {
style : 'vertical-layout-1',
navigation: {
position: 'left'
}
}
};
break;
}
default :
{
break;
}
}
}
/**

3
src/@fuse/components/theme-options/theme-options.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
@ -14,6 +14,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
imports : [
CommonModule,
FormsModule,
ReactiveFormsModule,
FlexLayoutModule,

16
src/@fuse/scss/partials/_global.scss
View File

@ -1,6 +1,12 @@
html,
body {
> mat-sidenav-container {
height: 100%;
}
}
display: flex;
flex: 1 0 auto;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

22
src/@fuse/types/fuse-config.ts Normal file
View File

@ -0,0 +1,22 @@
export interface FuseConfig
{
layout: {
style: string,
navigation: {
position: 'left' | 'right' | 'top' | 'none',
folded: boolean,
background: string
},
toolbar: {
position: 'above' | 'above-sticky' | 'below' | 'below-sticky' | 'none',
background: string
}
footer: {
position: 'above' | 'below' | 'below-sticky' | 'none',
background: string
},
mode: 'fullwidth' | 'boxed'
};
customScrollbars: boolean;
routerAnimation: string;
}

1
src/@fuse/types/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './fuse-config';

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

@ -1 +1,14 @@
<vertical-nav-basic-layout></vertical-nav-basic-layout>
<!-- VERTICAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
<vertical-layout-1></vertical-layout-1>
</ng-container>
<!-- VERTICAL LAYOUT 2 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-2'">
<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>
</ng-container>

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

@ -0,0 +1,6 @@
:host {
display: flex;
flex: 1 1 auto;
width: 100%;
min-width: 0;
}

53
src/app/app.component.ts
View File

@ -1,9 +1,12 @@
import { Component } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { navigation } from 'app/navigation/navigation';
import { locale as navigationEnglish } from 'app/navigation/i18n/en';
@ -14,28 +17,40 @@ import { locale as navigationTurkish } from 'app/navigation/i18n/tr';
templateUrl: './app.component.html',
styleUrls : ['./app.component.scss']
})
export class AppComponent
export class AppComponent implements OnInit, OnDestroy
{
navigation: any;
fuseConfig: any;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSplashScreenService} _fuseSplashScreenService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {TranslateService} _translateService
*/
constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSplashScreenService: FuseSplashScreenService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _translateService: TranslateService
)
{
// Navigation
// Get default navigation
this.navigation = navigation;
// Register the navigation to the service
this._fuseNavigationService.register('main', this.navigation);
// Set the main navigation as our current navigation
this._fuseNavigationService.setCurrentNavigation('main');
// Add languages
this._translateService.addLangs(['en', 'tr']);
@ -47,5 +62,35 @@ export class AppComponent
// Use a language
this._translateService.use('en');
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Subscribe to config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}

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

@ -1,3 +1,5 @@
import { FuseConfig } from '@fuse/types';
/**
* Default Fuse Configuration
*
@ -5,23 +7,24 @@
* basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more
* about changing these options per component basis.
*/
export const fuseConfig = {
export const fuseConfig: FuseConfig = {
layout : {
style : 'vertical-basic',
style : 'vertical-layout-1',
navigation: {
position: 'left',
folded : false
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
// navigation : 'left', // 'right', 'left', 'top', 'none'
// navigationFolded: false, // true, false
toolbar : 'below', // 'above', 'below', 'none'
footer : 'below', // 'above', 'below', 'none'
mode : 'fullwidth' // 'boxed', 'fullwidth'
},
colorClasses : {
toolbar: 'mat-white-500-bg',
navbar : 'mat-fuse-dark-700-bg',
footer : 'mat-fuse-dark-900-bg'
toolbar : {
position : 'below',
background: 'mat-white-500-bg'
},
footer : {
position : 'below',
background: 'mat-fuse-dark-900-bg'
},
mode : 'fullwidth'
},
customScrollbars: true,
routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none

3
src/app/layout/blocks/content/content.component.scss
View File

@ -1,3 +0,0 @@
:host {
z-index: 1;
}

11
src/app/layout/components/content/content.component.scss Normal file
View File

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

11
src/app/layout/blocks/content/content.component.ts → src/app/layout/components/content/content.component.ts
View File

@ -1,4 +1,4 @@
import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
import { Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
@ -8,10 +8,11 @@ import { fuseAnimations } from '@fuse/animations';
import { FuseConfigService } from '@fuse/services/config.service';
@Component({
selector : 'content',
templateUrl: './content.component.html',
styleUrls : ['./content.component.scss'],
animations : fuseAnimations
selector : 'content',
templateUrl : './content.component.html',
styleUrls : ['./content.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class ContentComponent implements OnInit, OnDestroy
{

2
src/app/layout/blocks/content/content.module.ts → src/app/layout/components/content/content.module.ts
View File

@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentComponent } from 'app/layout/blocks/content/content.component';
import { ContentComponent } from 'app/layout/components/content/content.component';
@NgModule({
declarations: [

0
src/app/layout/blocks/footer/footer.component.html → src/app/layout/components/footer/footer.component.html
View File

2
src/app/layout/blocks/footer/footer.component.scss → src/app/layout/components/footer/footer.component.scss
View File

@ -1,6 +1,6 @@
:host {
display: flex;
flex: 0 1 auto;
flex: 0 0 auto;
z-index: 3;
.mat-toolbar {

0
src/app/layout/blocks/footer/footer.component.ts → src/app/layout/components/footer/footer.component.ts
View File

2
src/app/layout/blocks/footer/footer.module.ts → src/app/layout/components/footer/footer.module.ts
View File

@ -3,7 +3,7 @@ import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/mater
import { FuseSharedModule } from '@fuse/shared.module';
import { FooterComponent } from 'app/layout/blocks/footer/footer.component';
import { FooterComponent } from 'app/layout/components/footer/footer.component';
@NgModule({
declarations: [

0
src/app/layout/blocks/navbar/navbar.component.html → src/app/layout/components/navbar/navbar.component.html
View File

0
src/app/layout/blocks/navbar/navbar.component.scss → src/app/layout/components/navbar/navbar.component.scss
View File

12
src/app/layout/blocks/navbar/navbar.component.ts → src/app/layout/components/navbar/navbar.component.ts
View File

@ -3,12 +3,10 @@ import { NavigationEnd, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { navigation } from 'app/navigation/navigation';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
selector : 'navbar',
templateUrl : './navbar.component.html',
@ -43,7 +41,6 @@ export class NavbarComponent implements OnInit, OnDestroy
{
// Set the defaults
this.layout = 'vertical';
this.navigation = navigation;
// Set the private defaults
this._unsubscribeAll = new Subject();
@ -94,6 +91,13 @@ export class NavbarComponent implements OnInit, OnDestroy
}
}
);
// Get current navigation
this._fuseNavigationService.onNavigationChanged
.pipe(filter(value => value !== null))
.subscribe(() => {
this.navigation = this._fuseNavigationService.getCurrentNavigation();
});
}
/**

2
src/app/layout/blocks/navbar/navbar.module.ts → src/app/layout/components/navbar/navbar.module.ts
View File

@ -4,7 +4,7 @@ import { MatButtonModule, MatIconModule } from '@angular/material';
import { FuseNavigationModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { NavbarComponent } from 'app/layout/blocks/navbar/navbar.component';
import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
@NgModule({
declarations: [

0
src/app/layout/blocks/quick-panel/quick-panel.component.html → src/app/layout/components/quick-panel/quick-panel.component.html
View File

0
src/app/layout/blocks/quick-panel/quick-panel.component.scss → src/app/layout/components/quick-panel/quick-panel.component.scss
View File

0
src/app/layout/blocks/quick-panel/quick-panel.component.ts → src/app/layout/components/quick-panel/quick-panel.component.ts
View File

2
src/app/layout/blocks/quick-panel/quick-panel.module.ts → src/app/layout/components/quick-panel/quick-panel.module.ts
View File

@ -3,7 +3,7 @@ import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/
import { FuseSharedModule } from '@fuse/shared.module';
import { QuickPanelComponent } from 'app/layout/blocks/quick-panel/quick-panel.component';
import { QuickPanelComponent } from 'app/layout/components/quick-panel/quick-panel.component';
@NgModule({
declarations: [

4
src/app/layout/blocks/toolbar/toolbar.component.html → src/app/layout/components/toolbar/toolbar.component.html
View File

@ -8,7 +8,7 @@
<button mat-icon-button class="toggle-button-navbar"
*ngIf="!noNav"
(click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
(click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
@ -92,7 +92,7 @@
<button mat-icon-button
class="quick-panel-toggle-button"
fuseMatSidenavToggler="quick-panel"
(click)="toggleSidebarOpen('quickPanel')"
aria-label="Toggle quick panel">
<mat-icon class="icon">format_list_bulleted</mat-icon>
</button>

0
src/app/layout/blocks/toolbar/toolbar.component.scss → src/app/layout/components/toolbar/toolbar.component.scss
View File

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

@ -146,11 +146,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar opened
* Toggle sidebar open
*
* @param key
*/
toggleSidebarOpened(key): void
toggleSidebarOpen(key): void
{
this._fuseSidebarService.getSidebar(key).toggleOpen();
}

2
src/app/layout/blocks/toolbar/toolbar.module.ts → src/app/layout/components/toolbar/toolbar.module.ts
View File

@ -5,7 +5,7 @@ import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, Ma
import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ToolbarComponent } from 'app/layout/blocks/toolbar/toolbar.component';
import { ToolbarComponent } from 'app/layout/components/toolbar/toolbar.component';
@NgModule({
declarations: [

91
src/app/layout/horizontal/layout-1/layout-1.component.html Normal file
View File

@ -0,0 +1,91 @@
<div id="main">
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseConfig.layout.toolbar === 'above'">
<toolbar class="above" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<!-- NAVBAR: Top -->
<!--<navbar layout="horizontal"
class="top-navbar" fxHide fxShow.gt-md
[ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'top'">
</navbar>-->
<!-- / NAVBAR: Top -->
<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.colorClasses.navbar"
*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 === 'below-sticky'">
<toolbar class="below-sticky" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below sticky -->
<div id="container-3" class="container" fusePerfectScrollbar>
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar === 'below'">
<toolbar class="below" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer === 'below'">
<footer class="below" [ngClass]="fuseConfig.colorClasses.footer"></footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- FOOTER: Below sticky -->
<ng-container *ngIf="fuseConfig.layout.footer === 'below-sticky'">
<footer class="below-sticky" [ngClass]="fuseConfig.colorClasses.footer"></footer>
</ng-container>
<!-- / FOOTER: Below sticky -->
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" [align]="'right'"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'right'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Right -->
</div>
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseConfig.layout.footer === 'above'">
<footer class="above" [ngClass]="fuseConfig.colorClasses.footer"></footer>
</ng-container>
<!-- FOOTER: Above -->
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options [navigation]="navigation"></fuse-theme-options>

131
src/app/layout/horizontal/layout-1/layout-1.component.scss Normal file
View File

@ -0,0 +1,131 @@
@import "src/@fuse/scss/fuse";
horizontal-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);
&.container-scroll {
overflow-x: hidden;
overflow-y: auto;
// Content component
content {
flex: 1 0 auto;
> *:not(router-outlet) {
flex: 1 0 auto;
}
}
}
}
}
}
}
}
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);
}
}

8
src/app/layout/vertical/basic/basic.component.ts → src/app/layout/horizontal/layout-1/layout-1.component.ts
View File

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

38
src/app/layout/horizontal/layout-1/layout-1.module.ts Normal file
View File

@ -0,0 +1,38 @@
import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
import { FooterModule } from 'app/layout/components/footer/footer.module';
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 { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layout-1.component';
@NgModule({
declarations: [
HorizontalLayout1Component
],
imports : [
MatSidenavModule,
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,
NavbarModule,
QuickPanelModule,
ToolbarModule
],
exports : [
HorizontalLayout1Component
]
})
export class HorizontalLayout1Module
{
}

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

@ -1,13 +1,19 @@
import { NgModule } from '@angular/core';
import { VerticalNavBasicLayoutModule } from 'app/layout/vertical/basic/basic.module';
import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.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: [
VerticalNavBasicLayoutModule
VerticalLayout1Module,
VerticalLayout2Module,
VerticalLayout3Module
],
exports: [
VerticalNavBasicLayoutModule
VerticalLayout1Module,
VerticalLayout2Module,
VerticalLayout3Module
]
})
export class LayoutModule

77
src/app/layout/vertical/basic/basic.component.html
View File

@ -1,77 +0,0 @@
<mat-sidenav-container>
<div id="main-content">
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseConfig.layout.toolbar === 'above'">
<toolbar class="above" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<!-- NAVBAR: Top -->
<navbar layout="horizontal"
class="top-navbar" fxHide fxShow.gt-md
[ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'top'">
</navbar>
<!-- / NAVBAR: Top -->
<div id="wrapper">
<!-- NAVBAR: Left -->
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Left -->
<div class="content-wrapper">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar === 'below'">
<toolbar class="below" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<content></content>
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer === 'below'">
<footer class="below" [ngClass]="fuseConfig.colorClasses.footer"></footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" [align]="'right'"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'right'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<!-- / NAVBAR: Right -->
</div>
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseConfig.layout.footer === 'above'">
<footer class="above" [ngClass]="fuseConfig.colorClasses.footer"></footer>
</ng-container>
<!-- FOOTER: Above -->
</div>
<!-- QUICK PANEL -->
<mat-sidenav fuseMatSidenavHelper="quick-panel" position="end">
<quick-panel></quick-panel>
</mat-sidenav>
<!-- / QUICK PANEL -->
</mat-sidenav-container>
<fuse-theme-options [navigation]="navigation"></fuse-theme-options>

75
src/app/layout/vertical/basic/basic.component.scss
View File

@ -1,75 +0,0 @@
@import "src/@fuse/scss/fuse";
vertical-nav-basic-layout {
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;
#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);
}
}

38
src/app/layout/vertical/basic/basic.module.ts
View File

@ -1,38 +0,0 @@
import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/blocks/content/content.module';
import { FooterModule } from 'app/layout/blocks/footer/footer.module';
import { NavbarModule } from 'app/layout/blocks/navbar/navbar.module';
import { QuickPanelModule } from 'app/layout/blocks/quick-panel/quick-panel.module';
import { ToolbarModule } from 'app/layout/blocks/toolbar/toolbar.module';
import { VerticalNavBasicLayoutComponent } from 'app/layout/vertical/basic/basic.component';
@NgModule({
declarations: [
VerticalNavBasicLayoutComponent
],
imports : [
MatSidenavModule,
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,
NavbarModule,
QuickPanelModule,
ToolbarModule
],
exports : [
VerticalNavBasicLayoutComponent
]
})
export class VerticalNavBasicLayoutModule
{
}

83
src/app/layout/vertical/layout-1/layout-1.component.html Normal file
View File

@ -0,0 +1,83 @@
<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'" [align]="'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'" [align]="'right'" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options></fuse-theme-options>

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

@ -0,0 +1,117 @@
@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);
}
}

64
src/app/layout/vertical/layout-1/layout-1.component.ts Normal file
View File

@ -0,0 +1,64 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
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'],
encapsulation: ViewEncapsulation.None
})
export class VerticalLayout1Component implements OnInit, OnDestroy
{
fuseConfig: any;
navigation: any;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
*/
constructor(
private _fuseConfigService: FuseConfigService
)
{
// Set the defaults
this.navigation = navigation;
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Subscribe to config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}

35
src/app/layout/vertical/layout-1/layout-1.module.ts Normal file
View File

@ -0,0 +1,35 @@
import { NgModule } from '@angular/core';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
import { FooterModule } from 'app/layout/components/footer/footer.module';
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';
@NgModule({
declarations: [
VerticalLayout1Component
],
imports : [
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,
NavbarModule,
QuickPanelModule,
ToolbarModule
],
exports : [
VerticalLayout1Component
]
})
export class VerticalLayout1Module
{
}

83
src/app/layout/vertical/layout-2/layout-2.component.html Normal file
View File

@ -0,0 +1,83 @@
<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" fusePerfectScrollbar>
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- 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'" [align]="'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'" [align]="'right'" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options></fuse-theme-options>

53
src/app/layout/vertical/layout-2/layout-2.component.scss Normal file
View File

@ -0,0 +1,53 @@
@import "src/@fuse/scss/fuse";
vertical-layout-2 {
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);
overflow-x: hidden;
overflow-y: auto;
// Content component
content {
flex: 1 0 auto;
> *:not(router-outlet) {
flex: 1 0 auto;
}
}
}
}
}
}
}

64
src/app/layout/vertical/layout-2/layout-2.component.ts Normal file
View File

@ -0,0 +1,64 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { navigation } from 'app/navigation/navigation';
@Component({
selector : 'vertical-layout-2',
templateUrl : './layout-2.component.html',
styleUrls : ['./layout-2.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class VerticalLayout2Component implements OnInit, OnDestroy
{
fuseConfig: any;
navigation: any;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
*/
constructor(
private _fuseConfigService: FuseConfigService
)
{
// Set the defaults
this.navigation = navigation;
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Subscribe to config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}

35
src/app/layout/vertical/layout-2/layout-2.module.ts Normal file
View File

@ -0,0 +1,35 @@
import { NgModule } from '@angular/core';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
import { FooterModule } from 'app/layout/components/footer/footer.module';
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 { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.component';
@NgModule({
declarations: [
VerticalLayout2Component
],
imports : [
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,
NavbarModule,
QuickPanelModule,
ToolbarModule
],
exports : [
VerticalLayout2Component
]
})
export class VerticalLayout2Module
{
}

83
src/app/layout/vertical/layout-3/layout-3.component.html Normal file
View File

@ -0,0 +1,83 @@
<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'" [align]="'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'" [align]="'right'" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options></fuse-theme-options>

45
src/app/layout/vertical/layout-3/layout-3.component.scss Normal file
View File

@ -0,0 +1,45 @@
@import "src/@fuse/scss/fuse";
vertical-layout-3 {
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 (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 0 auto;
width: 100%;
// Container 3
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
}
}
}
}

64
src/app/layout/vertical/layout-3/layout-3.component.ts Normal file
View File

@ -0,0 +1,64 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
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'],
encapsulation: ViewEncapsulation.None
})
export class VerticalLayout3Component implements OnInit, OnDestroy
{
fuseConfig: any;
navigation: any;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
*/
constructor(
private _fuseConfigService: FuseConfigService
)
{
// Set the defaults
this.navigation = navigation;
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Subscribe to config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}

35
src/app/layout/vertical/layout-3/layout-3.module.ts Normal file
View File

@ -0,0 +1,35 @@
import { NgModule } from '@angular/core';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
import { FooterModule } from 'app/layout/components/footer/footer.module';
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';
@NgModule({
declarations: [
VerticalLayout3Component
],
imports : [
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,
NavbarModule,
QuickPanelModule,
ToolbarModule
],
exports : [
VerticalLayout3Component
]
})
export class VerticalLayout3Module
{
}

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

@ -1,4 +1,4 @@
<div class="page-layout carded fullwidth single-scroll" fusePerfectScrollbar>
<div class="page-layout carded fullwidth">
<!-- 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 page scroll</h2>
<h2>Fullwidth with container scroll</h2>
</div>
<!-- / CONTENT HEADER -->

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

@ -1,16 +1,86 @@
import { Component } from '@angular/core';
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
export class CardedFullWidthComponent implements OnInit, OnDestroy
{
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseMatchMediaService} _fuseMatchMediaService
*/
constructor()
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();
}
}

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

@ -40,7 +40,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and page scroll</h2>
<h2>Left sidenav with tabs and container scroll</h2>
</div>

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

@ -32,7 +32,7 @@
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<h2>Left sidenav with page scroll</h2>
<h2>Left sidenav with container scroll</h2>
</div>
<!-- / CONTENT HEADER -->

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

@ -19,7 +19,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and page scroll</h2>
<h2>Right sidenav with tabs and container scroll</h2>
</div>

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

@ -11,7 +11,7 @@
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<h2>Right sidenav with page scroll</h2>
<h2>Right sidenav with container scroll</h2>
</div>
<!-- / CONTENT HEADER -->

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

@ -24,7 +24,7 @@
</button>
<div>
<h2>Left sidenav with page scroll</h2>
<h2>Left sidenav with container scroll</h2>
</div>
</div>

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

@ -15,7 +15,7 @@
</button>
<div>
<h2>Right sidenav with page scroll</h2>
<h2>Right sidenav with container scroll</h2>
</div>
</div>