From 70d895c6ed623cd58f8446ccafe742318a26764f Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 29 May 2018 14:58:48 +0300 Subject: [PATCH] New layout system (wip) --- .editorconfig | 17 +- .../search-bar/search-bar.component.ts | 2 +- .../shortcuts/shortcuts.component.ts | 2 +- .../theme-options.component.html | 222 +++++++++++------- .../theme-options/theme-options.component.ts | 101 +++++++- .../theme-options/theme-options.module.ts | 3 +- src/@fuse/scss/partials/_global.scss | 16 +- src/@fuse/types/fuse-config.ts | 22 ++ src/@fuse/types/index.ts | 1 + src/app/app.component.html | 15 +- src/app/app.component.scss | 6 + src/app/app.component.ts | 53 ++++- src/app/fuse-config/index.ts | 31 +-- .../blocks/content/content.component.scss | 3 - .../components/content/content.component.scss | 11 + .../content/content.component.ts | 11 +- .../content/content.module.ts | 2 +- .../footer/footer.component.html | 0 .../footer/footer.component.scss | 2 +- .../footer/footer.component.ts | 0 .../footer/footer.module.ts | 2 +- .../navbar/navbar.component.html | 0 .../navbar/navbar.component.scss | 0 .../navbar/navbar.component.ts | 12 +- .../navbar/navbar.module.ts | 2 +- .../quick-panel/quick-panel.component.html | 0 .../quick-panel/quick-panel.component.scss | 0 .../quick-panel/quick-panel.component.ts | 0 .../quick-panel/quick-panel.module.ts | 2 +- .../toolbar/toolbar.component.html | 4 +- .../toolbar/toolbar.component.scss | 0 .../toolbar/toolbar.component.ts | 4 +- .../toolbar/toolbar.module.ts | 2 +- .../layout-1/layout-1.component.html | 91 +++++++ .../layout-1/layout-1.component.scss | 131 +++++++++++ .../layout-1/layout-1.component.ts} | 8 +- .../horizontal/layout-1/layout-1.module.ts | 38 +++ src/app/layout/layout.module.ts | 12 +- .../vertical/basic/basic.component.html | 77 ------ .../vertical/basic/basic.component.scss | 75 ------ src/app/layout/vertical/basic/basic.module.ts | 38 --- .../vertical/layout-1/layout-1.component.html | 83 +++++++ .../vertical/layout-1/layout-1.component.scss | 117 +++++++++ .../vertical/layout-1/layout-1.component.ts | 64 +++++ .../vertical/layout-1/layout-1.module.ts | 35 +++ .../vertical/layout-2/layout-2.component.html | 83 +++++++ .../vertical/layout-2/layout-2.component.scss | 53 +++++ .../vertical/layout-2/layout-2.component.ts | 64 +++++ .../vertical/layout-2/layout-2.module.ts | 35 +++ .../vertical/layout-3/layout-3.component.html | 83 +++++++ .../vertical/layout-3/layout-3.component.scss | 45 ++++ .../vertical/layout-3/layout-3.component.ts | 64 +++++ .../vertical/layout-3/layout-3.module.ts | 35 +++ .../fullwidth-2/fullwidth-2.component.html | 4 +- .../carded/fullwidth/fullwidth.component.ts | 76 +++++- .../left-sidenav-2-tabbed.component.html | 2 +- .../left-sidenav-2.component.html | 2 +- .../right-sidenav-2-tabbed.component.html | 2 +- .../right-sidenav-2.component.html | 2 +- .../left-sidenav-2.component.html | 2 +- .../right-sidenav-2.component.html | 2 +- 61 files changed, 1508 insertions(+), 363 deletions(-) create mode 100644 src/@fuse/types/fuse-config.ts create mode 100644 src/@fuse/types/index.ts delete mode 100644 src/app/layout/blocks/content/content.component.scss create mode 100644 src/app/layout/components/content/content.component.scss rename src/app/layout/{blocks => components}/content/content.component.ts (91%) rename src/app/layout/{blocks => components}/content/content.module.ts (81%) rename src/app/layout/{blocks => components}/footer/footer.component.html (100%) rename src/app/layout/{blocks => components}/footer/footer.component.scss (94%) rename src/app/layout/{blocks => components}/footer/footer.component.ts (100%) rename src/app/layout/{blocks => components}/footer/footer.module.ts (85%) rename src/app/layout/{blocks => components}/navbar/navbar.component.html (100%) rename src/app/layout/{blocks => components}/navbar/navbar.component.scss (100%) rename src/app/layout/{blocks => components}/navbar/navbar.component.ts (93%) rename src/app/layout/{blocks => components}/navbar/navbar.module.ts (86%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.component.html (100%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.component.scss (100%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.component.ts (100%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.module.ts (83%) rename src/app/layout/{blocks => components}/toolbar/toolbar.component.html (96%) rename src/app/layout/{blocks => components}/toolbar/toolbar.component.scss (100%) rename src/app/layout/{blocks => components}/toolbar/toolbar.component.ts (98%) rename src/app/layout/{blocks => components}/toolbar/toolbar.module.ts (90%) create mode 100644 src/app/layout/horizontal/layout-1/layout-1.component.html create mode 100644 src/app/layout/horizontal/layout-1/layout-1.component.scss rename src/app/layout/{vertical/basic/basic.component.ts => horizontal/layout-1/layout-1.component.ts} (87%) create mode 100644 src/app/layout/horizontal/layout-1/layout-1.module.ts delete mode 100644 src/app/layout/vertical/basic/basic.component.html delete mode 100644 src/app/layout/vertical/basic/basic.component.scss delete mode 100644 src/app/layout/vertical/basic/basic.module.ts create mode 100644 src/app/layout/vertical/layout-1/layout-1.component.html create mode 100644 src/app/layout/vertical/layout-1/layout-1.component.scss create mode 100644 src/app/layout/vertical/layout-1/layout-1.component.ts create mode 100644 src/app/layout/vertical/layout-1/layout-1.module.ts create mode 100644 src/app/layout/vertical/layout-2/layout-2.component.html create mode 100644 src/app/layout/vertical/layout-2/layout-2.component.scss create mode 100644 src/app/layout/vertical/layout-2/layout-2.component.ts create mode 100644 src/app/layout/vertical/layout-2/layout-2.module.ts create mode 100644 src/app/layout/vertical/layout-3/layout-3.component.html create mode 100644 src/app/layout/vertical/layout-3/layout-3.component.scss create mode 100644 src/app/layout/vertical/layout-3/layout-3.component.ts create mode 100644 src/app/layout/vertical/layout-3/layout-3.module.ts diff --git a/.editorconfig b/.editorconfig index 6e87a003..ec967c61 100644 --- a/.editorconfig +++ b/.editorconfig @@ -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 diff --git a/src/@fuse/components/search-bar/search-bar.component.ts b/src/@fuse/components/search-bar/search-bar.component.ts index eb80bba9..8c7180d7 100644 --- a/src/@fuse/components/search-bar/search-bar.component.ts +++ b/src/@fuse/components/search-bar/search-bar.component.ts @@ -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; } ); } diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 5e001980..58e743a0 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -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; } ); diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 1e0f8ac7..ffe16bcb 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -12,102 +12,162 @@
-

Layout:

- - Vertical - Horizontal - None - +
-

Navigation:

- - Top - Left - Right - None - + + +
-

Navigation Fold (for vertical navigation):

- - Folded - + +

Vertical Layout Styles:

+ + Layout 1 + Layout 2 + Layout 3 + -

Toolbar:

- - Below - Above - None - + +

Horizontal Layout Styles:

+ + Layout 1 + Layout 2 + -

Footer:

- - Below - Above - None - -

Layout Mode:

- - Boxed - Fullwidth - +
- + +

Navigation Position:

-

Colors:

-
+ + + Left + Right + None + + + + + Top + None + + + + +

Navigation Fold:

+ + Folded + + + +
+ +
+ + +

Toolbar:

+ + Above + Below + Below Sticky + None + + +
+ +
+ + +

Footer:

+ + Above + Below + Below Sticky + None + + +
+ + +

Layout Mode:

+ + Boxed + Fullwidth + -
-

Toolbar Color

-
-
-

Navigation Bar Color

- + + +

Custom scrollbars:

+ + Enable custom scrollbars + + + + +

Colors:

+
+ +
+

Toolbar Color

+ +
+ +
+

Navigation Bar Color

+ +
+ +
+

Footer Color

+ +
+
-
-

Footer Color

- -
+ -
+

Router Animation:

+ + + + None + + + Slide up + + + Slide down + + + Slide right + + + Slide left + + + Fade in + + + - + -

Router Animation:

- - - - None - - - Slide up - - - Slide down - - - Slide right - - - Slide left - - - Fade in - - -
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index 8eb0a39b..6e6ac9a9 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -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; 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; + } + } } /** diff --git a/src/@fuse/components/theme-options/theme-options.module.ts b/src/@fuse/components/theme-options/theme-options.module.ts index 5aa58c8d..d49050cb 100644 --- a/src/@fuse/components/theme-options/theme-options.module.ts +++ b/src/@fuse/components/theme-options/theme-options.module.ts @@ -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, diff --git a/src/@fuse/scss/partials/_global.scss b/src/@fuse/scss/partials/_global.scss index f7b93621..fad46620 100644 --- a/src/@fuse/scss/partials/_global.scss +++ b/src/@fuse/scss/partials/_global.scss @@ -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; +} \ No newline at end of file diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts new file mode 100644 index 00000000..5cdf067a --- /dev/null +++ b/src/@fuse/types/fuse-config.ts @@ -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; +} diff --git a/src/@fuse/types/index.ts b/src/@fuse/types/index.ts new file mode 100644 index 00000000..f47ab6aa --- /dev/null +++ b/src/@fuse/types/index.ts @@ -0,0 +1 @@ +export * from './fuse-config'; diff --git a/src/app/app.component.html b/src/app/app.component.html index 1281ba0b..1e6ab5c9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,14 @@ - + + + + + + + + + + + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29b..189729a0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + flex: 1 1 auto; + width: 100%; + min-width: 0; +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4deed6b7..2c15072b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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; /** * 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(); } } diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts index 7bb7e6bb..8b1c2af2 100644 --- a/src/app/fuse-config/index.ts +++ b/src/app/fuse-config/index.ts @@ -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 diff --git a/src/app/layout/blocks/content/content.component.scss b/src/app/layout/blocks/content/content.component.scss deleted file mode 100644 index 64b48f72..00000000 --- a/src/app/layout/blocks/content/content.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - z-index: 1; -} \ No newline at end of file diff --git a/src/app/layout/components/content/content.component.scss b/src/app/layout/components/content/content.component.scss new file mode 100644 index 00000000..32e80fa3 --- /dev/null +++ b/src/app/layout/components/content/content.component.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/app/layout/blocks/content/content.component.ts b/src/app/layout/components/content/content.component.ts similarity index 91% rename from src/app/layout/blocks/content/content.component.ts rename to src/app/layout/components/content/content.component.ts index 481247a5..86fedeaf 100644 --- a/src/app/layout/blocks/content/content.component.ts +++ b/src/app/layout/components/content/content.component.ts @@ -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 { diff --git a/src/app/layout/blocks/content/content.module.ts b/src/app/layout/components/content/content.module.ts similarity index 81% rename from src/app/layout/blocks/content/content.module.ts rename to src/app/layout/components/content/content.module.ts index 5b2c42d7..410b821c 100644 --- a/src/app/layout/blocks/content/content.module.ts +++ b/src/app/layout/components/content/content.module.ts @@ -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: [ diff --git a/src/app/layout/blocks/footer/footer.component.html b/src/app/layout/components/footer/footer.component.html similarity index 100% rename from src/app/layout/blocks/footer/footer.component.html rename to src/app/layout/components/footer/footer.component.html diff --git a/src/app/layout/blocks/footer/footer.component.scss b/src/app/layout/components/footer/footer.component.scss similarity index 94% rename from src/app/layout/blocks/footer/footer.component.scss rename to src/app/layout/components/footer/footer.component.scss index 54033040..d684b80b 100644 --- a/src/app/layout/blocks/footer/footer.component.scss +++ b/src/app/layout/components/footer/footer.component.scss @@ -1,6 +1,6 @@ :host { display: flex; - flex: 0 1 auto; + flex: 0 0 auto; z-index: 3; .mat-toolbar { diff --git a/src/app/layout/blocks/footer/footer.component.ts b/src/app/layout/components/footer/footer.component.ts similarity index 100% rename from src/app/layout/blocks/footer/footer.component.ts rename to src/app/layout/components/footer/footer.component.ts diff --git a/src/app/layout/blocks/footer/footer.module.ts b/src/app/layout/components/footer/footer.module.ts similarity index 85% rename from src/app/layout/blocks/footer/footer.module.ts rename to src/app/layout/components/footer/footer.module.ts index 058b7aad..d0d6b7de 100644 --- a/src/app/layout/blocks/footer/footer.module.ts +++ b/src/app/layout/components/footer/footer.module.ts @@ -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: [ diff --git a/src/app/layout/blocks/navbar/navbar.component.html b/src/app/layout/components/navbar/navbar.component.html similarity index 100% rename from src/app/layout/blocks/navbar/navbar.component.html rename to src/app/layout/components/navbar/navbar.component.html diff --git a/src/app/layout/blocks/navbar/navbar.component.scss b/src/app/layout/components/navbar/navbar.component.scss similarity index 100% rename from src/app/layout/blocks/navbar/navbar.component.scss rename to src/app/layout/components/navbar/navbar.component.scss diff --git a/src/app/layout/blocks/navbar/navbar.component.ts b/src/app/layout/components/navbar/navbar.component.ts similarity index 93% rename from src/app/layout/blocks/navbar/navbar.component.ts rename to src/app/layout/components/navbar/navbar.component.ts index 0ef3d7a3..c611f7c9 100644 --- a/src/app/layout/blocks/navbar/navbar.component.ts +++ b/src/app/layout/components/navbar/navbar.component.ts @@ -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(); + }); } /** diff --git a/src/app/layout/blocks/navbar/navbar.module.ts b/src/app/layout/components/navbar/navbar.module.ts similarity index 86% rename from src/app/layout/blocks/navbar/navbar.module.ts rename to src/app/layout/components/navbar/navbar.module.ts index 03d2e2a7..acb91738 100644 --- a/src/app/layout/blocks/navbar/navbar.module.ts +++ b/src/app/layout/components/navbar/navbar.module.ts @@ -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: [ diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.html b/src/app/layout/components/quick-panel/quick-panel.component.html similarity index 100% rename from src/app/layout/blocks/quick-panel/quick-panel.component.html rename to src/app/layout/components/quick-panel/quick-panel.component.html diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.scss b/src/app/layout/components/quick-panel/quick-panel.component.scss similarity index 100% rename from src/app/layout/blocks/quick-panel/quick-panel.component.scss rename to src/app/layout/components/quick-panel/quick-panel.component.scss diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.ts b/src/app/layout/components/quick-panel/quick-panel.component.ts similarity index 100% rename from src/app/layout/blocks/quick-panel/quick-panel.component.ts rename to src/app/layout/components/quick-panel/quick-panel.component.ts diff --git a/src/app/layout/blocks/quick-panel/quick-panel.module.ts b/src/app/layout/components/quick-panel/quick-panel.module.ts similarity index 83% rename from src/app/layout/blocks/quick-panel/quick-panel.module.ts rename to src/app/layout/components/quick-panel/quick-panel.module.ts index 0d4062cc..48009f2e 100644 --- a/src/app/layout/blocks/quick-panel/quick-panel.module.ts +++ b/src/app/layout/components/quick-panel/quick-panel.module.ts @@ -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: [ diff --git a/src/app/layout/blocks/toolbar/toolbar.component.html b/src/app/layout/components/toolbar/toolbar.component.html similarity index 96% rename from src/app/layout/blocks/toolbar/toolbar.component.html rename to src/app/layout/components/toolbar/toolbar.component.html index d1d3cf8e..d8f7e2b6 100644 --- a/src/app/layout/blocks/toolbar/toolbar.component.html +++ b/src/app/layout/components/toolbar/toolbar.component.html @@ -8,7 +8,7 @@ @@ -92,7 +92,7 @@ diff --git a/src/app/layout/blocks/toolbar/toolbar.component.scss b/src/app/layout/components/toolbar/toolbar.component.scss similarity index 100% rename from src/app/layout/blocks/toolbar/toolbar.component.scss rename to src/app/layout/components/toolbar/toolbar.component.scss diff --git a/src/app/layout/blocks/toolbar/toolbar.component.ts b/src/app/layout/components/toolbar/toolbar.component.ts similarity index 98% rename from src/app/layout/blocks/toolbar/toolbar.component.ts rename to src/app/layout/components/toolbar/toolbar.component.ts index 34ab33fc..b2fdf441 100644 --- a/src/app/layout/blocks/toolbar/toolbar.component.ts +++ b/src/app/layout/components/toolbar/toolbar.component.ts @@ -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(); } diff --git a/src/app/layout/blocks/toolbar/toolbar.module.ts b/src/app/layout/components/toolbar/toolbar.module.ts similarity index 90% rename from src/app/layout/blocks/toolbar/toolbar.module.ts rename to src/app/layout/components/toolbar/toolbar.module.ts index 4217e99a..17e36e0c 100644 --- a/src/app/layout/blocks/toolbar/toolbar.module.ts +++ b/src/app/layout/components/toolbar/toolbar.module.ts @@ -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: [ diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html new file mode 100644 index 00000000..1294d2da --- /dev/null +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -0,0 +1,91 @@ +
+ + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.scss b/src/app/layout/horizontal/layout-1/layout-1.component.scss new file mode 100644 index 00000000..1d854f63 --- /dev/null +++ b/src/app/layout/horizontal/layout-1/layout-1.component.scss @@ -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); + } +} diff --git a/src/app/layout/vertical/basic/basic.component.ts b/src/app/layout/horizontal/layout-1/layout-1.component.ts similarity index 87% rename from src/app/layout/vertical/basic/basic.component.ts rename to src/app/layout/horizontal/layout-1/layout-1.component.ts index ad498b0e..9b2868c0 100644 --- a/src/app/layout/vertical/basic/basic.component.ts +++ b/src/app/layout/horizontal/layout-1/layout-1.component.ts @@ -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; diff --git a/src/app/layout/horizontal/layout-1/layout-1.module.ts b/src/app/layout/horizontal/layout-1/layout-1.module.ts new file mode 100644 index 00000000..ee92e4b6 --- /dev/null +++ b/src/app/layout/horizontal/layout-1/layout-1.module.ts @@ -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 +{ +} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts index 0d168275..0030580c 100644 --- a/src/app/layout/layout.module.ts +++ b/src/app/layout/layout.module.ts @@ -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 diff --git a/src/app/layout/vertical/basic/basic.component.html b/src/app/layout/vertical/basic/basic.component.html deleted file mode 100644 index a12d2561..00000000 --- a/src/app/layout/vertical/basic/basic.component.html +++ /dev/null @@ -1,77 +0,0 @@ - - -
- - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -
- - - -
- - - - - - - - - - \ No newline at end of file diff --git a/src/app/layout/vertical/basic/basic.component.scss b/src/app/layout/vertical/basic/basic.component.scss deleted file mode 100644 index 3220c433..00000000 --- a/src/app/layout/vertical/basic/basic.component.scss +++ /dev/null @@ -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); - } -} diff --git a/src/app/layout/vertical/basic/basic.module.ts b/src/app/layout/vertical/basic/basic.module.ts deleted file mode 100644 index 1f7a8949..00000000 --- a/src/app/layout/vertical/basic/basic.module.ts +++ /dev/null @@ -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 -{ -} diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html new file mode 100644 index 00000000..5492fe03 --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.component.html @@ -0,0 +1,83 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/layout-1.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss new file mode 100644 index 00000000..b0990b8a --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.component.scss @@ -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); + } +} diff --git a/src/app/layout/vertical/layout-1/layout-1.component.ts b/src/app/layout/vertical/layout-1/layout-1.component.ts new file mode 100644 index 00000000..07c58e02 --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.component.ts @@ -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; + + /** + * 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(); + } +} diff --git a/src/app/layout/vertical/layout-1/layout-1.module.ts b/src/app/layout/vertical/layout-1/layout-1.module.ts new file mode 100644 index 00000000..b6e77784 --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.module.ts @@ -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 +{ +} diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html new file mode 100644 index 00000000..b95d2d4a --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -0,0 +1,83 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss new file mode 100644 index 00000000..d1496150 --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.component.scss @@ -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; + } + } + } + } + } + } +} diff --git a/src/app/layout/vertical/layout-2/layout-2.component.ts b/src/app/layout/vertical/layout-2/layout-2.component.ts new file mode 100644 index 00000000..82fb5d8a --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.component.ts @@ -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; + + /** + * 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(); + } +} diff --git a/src/app/layout/vertical/layout-2/layout-2.module.ts b/src/app/layout/vertical/layout-2/layout-2.module.ts new file mode 100644 index 00000000..30b96fc8 --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.module.ts @@ -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 +{ +} diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html new file mode 100644 index 00000000..4a823b85 --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.component.html @@ -0,0 +1,83 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-3/layout-3.component.scss b/src/app/layout/vertical/layout-3/layout-3.component.scss new file mode 100644 index 00000000..a6d52354 --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.component.scss @@ -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; + } + } + } + } +} diff --git a/src/app/layout/vertical/layout-3/layout-3.component.ts b/src/app/layout/vertical/layout-3/layout-3.component.ts new file mode 100644 index 00000000..d99091b4 --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.component.ts @@ -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; + + /** + * 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(); + } +} diff --git a/src/app/layout/vertical/layout-3/layout-3.module.ts b/src/app/layout/vertical/layout-3/layout-3.module.ts new file mode 100644 index 00000000..b2bd25cf --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.module.ts @@ -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 +{ +} diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html index 52281b63..803bdda8 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -9,7 +9,7 @@
-

Fullwidth with page scroll

+

Fullwidth with container scroll

diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts index 7128f849..7e1616e6 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts +++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts @@ -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; + /** * 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(); } } diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html index 3246adca..575e5515 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html @@ -40,7 +40,7 @@ menu -

Left sidenav with tabs and page scroll

+

Left sidenav with tabs and container scroll

diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html index fb85cfe5..faa84817 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html @@ -32,7 +32,7 @@
-

Left sidenav with page scroll

+

Left sidenav with container scroll

diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html index 376eff20..056ae1cf 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html @@ -19,7 +19,7 @@ menu -

Right sidenav with tabs and page scroll

+

Right sidenav with tabs and container scroll

diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html index aac6936a..7e080983 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html @@ -11,7 +11,7 @@
-

Right sidenav with page scroll

+

Right sidenav with container scroll

diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html index 7a991be9..bc6a8ff9 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -24,7 +24,7 @@
-

Left sidenav with page scroll

+

Left sidenav with container scroll

diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html index e1832c0b..e4454157 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html @@ -15,7 +15,7 @@
-

Right sidenav with page scroll

+

Right sidenav with container scroll