From 232b4de752596e7632b1cf15410ebff955c849e4 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 12:23:09 +0300 Subject: [PATCH] Moved ThemeOptions to the Fuse Sidebar Replaced align with position on Fuse Sidebar components --- .../theme-options.component.html | 29 +-- .../theme-options.component.scss | 69 +------ .../theme-options/theme-options.component.ts | 171 ++++++++++-------- .../theme-options/theme-options.module.ts | 7 +- src/app/app.component.html | 10 + src/app/app.component.scss | 25 +++ src/app/app.component.ts | 18 ++ src/app/app.module.ts | 8 + .../vertical/layout-1/layout-1.component.html | 8 +- .../vertical/layout-1/layout-1.module.ts | 3 +- .../vertical/layout-2/layout-2.component.html | 8 +- .../vertical/layout-2/layout-2.module.ts | 3 +- .../vertical/layout-3/layout-3.component.html | 8 +- .../vertical/layout-3/layout-3.module.ts | 3 +- 14 files changed, 190 insertions(+), 180 deletions(-) diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index ffe16bcb..6928fbff 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -1,12 +1,6 @@ - +
-
- -
- - @@ -26,11 +20,11 @@
-

Vertical Layout Styles:

+

Scrollable Area:

- Layout 1 - Layout 2 - Layout 3 + Content + Wrapper + Body @@ -79,8 +73,15 @@

Toolbar:

Above + + Above Sticky + Below - Below Sticky + + Below Sticky + None @@ -170,4 +171,4 @@
-
+
\ No newline at end of file diff --git a/src/@fuse/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss index 2e2c7c75..1fc3442c 100644 --- a/src/@fuse/components/theme-options/theme-options.component.scss +++ b/src/@fuse/components/theme-options/theme-options.component.scss @@ -10,33 +10,14 @@ } :host { - position: fixed; - display: block; - right: 0; - top: 160px; - z-index: 998; - - &.bar-closed .theme-options-panel { - display: none; - } + display: flex; .theme-options-panel { - position: absolute; - right: 0; - top: 0; - width: 360px; - transform: translate3d(100%, 0, 0); - z-index: 999; - max-height: calc(100vh - 200px); + display: flex; + flex: 1 0 auto; padding: 24px; overflow: auto; - @include media-breakpoint-down('xs') { - top: -120px; - max-height: calc(100vh - 100px); - width: 90vw; - } - .close-button { position: absolute; top: 8px; @@ -61,25 +42,6 @@ } } - .theme-options-panel-overlay { - position: fixed; - display: block; - background: rgba(0, 0, 0, 0); - top: 0; - right: 0; - left: 0; - bottom: 0; - z-index: 998; - - @include media-breakpoint-down('sm') { - background: rgba(0, 0, 0, 0.37); - } - - &.hidden { - display: none; - } - } - .mat-list .mat-list-item { font-size: 15px; } @@ -87,29 +49,4 @@ .mat-divider { margin: 16px; } - - .open-button { - position: absolute; - top: 0; - left: -48px; - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - cursor: pointer; - border-radius: 0; - margin: 0; - pointer-events: auto; - opacity: .75; - z-index: 998; - - mat-icon { - animation: rotating 3s linear infinite; - } - - &:hover { - opacity: 1; - } - } - } diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index 6e6ac9a9..aa61360a 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -1,5 +1,4 @@ -import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; -import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; +import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -7,6 +6,7 @@ import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfigService } from '@fuse/services/config.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; @Component({ selector : 'fuse-theme-options', @@ -18,16 +18,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy { fuseConfig: any; fuseConfigForm: FormGroup; - player: AnimationPlayer; - - @ViewChild('openButton') - openButton; - - @ViewChild('panel') - panel; - - @ViewChild('overlay') - overlay: ElementRef; @HostBinding('class.bar-closed') barClosed: boolean; @@ -35,11 +25,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy // Private private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {FormBuilder} _formBuilder + * @param {FuseConfigService} _fuseConfigService + * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseSidebarService} _fuseSidebarService + * @param {Renderer2} _renderer + */ constructor( - private _animationBuilder: AnimationBuilder, private _formBuilder: FormBuilder, private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, + private _fuseSidebarService: FuseSidebarService, private _renderer: Renderer2 ) { @@ -92,16 +91,23 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy }); // Subscribe to the form value changes - this.fuseConfigForm.valueChanges.subscribe((config) => { + this.fuseConfigForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { - // Update the config - this._fuseConfigService.config = config; - }); + // Update the config + this._fuseConfigService.config = config; + }); - // Listen for the overlay's click event - this._renderer.listen(this.overlay.nativeElement, 'click', () => { - this.closeBar(); - }); + // Subscribe to the layout style value changes + const layoutControls: any = this.fuseConfigForm.controls.layout; + layoutControls.controls.style.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((layout) => { + + // Reset the config + this.resetConfig(layout); + }); // Add customize nav item that opens the bar programmatically const customFunctionNavItem = { @@ -115,7 +121,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy 'type' : 'item', 'icon' : 'settings', 'function': () => { - this.openBar(); + this._toggleSidebarOpen('themeOptionsPanel'); } } ] @@ -137,48 +143,93 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy this._fuseNavigationService.removeNavigationItem('custom-function'); } + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle sidebar open + * + * @param key + * @private + */ + private _toggleSidebarOpen(key): void + { + this._fuseSidebarService.getSidebar(key).toggleOpen(); + } + + // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- - /** - * On config change - */ - 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 + resetConfig(layout): void { + console.log(layout); + // Check the layout style and reset the // configuration properly so we don't end // up with options that don't work with // selected layout style - switch ( this.fuseConfig.layout.style ) + switch ( layout ) { // Vertical // Layout 1 case 'vertical-layout-1': { - this._fuseConfigService.config = { + // Reset the config form + this.fuseConfigForm.patchValue({ layout: { - style : 'vertical-layout-1', navigation: { - position: 'left' + folder: false + }, + toolbar : { + position: 'below' } } - }; + }); + + break; + } + + // Layout 2 + case 'vertical-layout-2': + { + console.log('resetting the options for vertical-layout-2...'); + + // Reset the config form + this.fuseConfigForm.patchValue({ + layout: { + navigation: { + folder: false + }, + toolbar : { + position: 'below' + } + } + }); + + break; + } + + // Layout 3 + case 'vertical-layout-3': + { + // Reset the config form + this.fuseConfigForm.patchValue({ + layout: { + navigation: { + folder: false + }, + toolbar : { + position: 'below' + } + } + }); break; } @@ -189,40 +240,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy } } } - - /** - * Open the bar - */ - openBar(): void - { - this.barClosed = false; - - this.player = - this._animationBuilder - .build([ - style({transform: 'translate3d(100%,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(0,0,0)'})) - ]).create(this.panel.nativeElement); - - this.player.play(); - } - - /** - * Close the bar - */ - closeBar(): void - { - this.player = - this._animationBuilder - .build([ - style({transform: 'translate3d(0,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(100%,0,0)'})) - ]).create(this.panel.nativeElement); - - this.player.play(); - - this.player.onDone(() => { - this.barClosed = true; - }); - } } diff --git a/src/@fuse/components/theme-options/theme-options.module.ts b/src/@fuse/components/theme-options/theme-options.module.ts index d49050cb..4a764bff 100644 --- a/src/@fuse/components/theme-options/theme-options.module.ts +++ b/src/@fuse/components/theme-options/theme-options.module.ts @@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; +import { FuseDirectivesModule } from '@fuse/directives/directives'; +import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module'; import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module'; + import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component'; @NgModule({ @@ -27,7 +30,9 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme- MatSelectModule, MatSlideToggleModule, - FuseMaterialColorPickerModule + FuseDirectivesModule, + FuseMaterialColorPickerModule, + FuseSidebarModule ], exports : [ FuseThemeOptionsComponent diff --git a/src/app/app.component.html b/src/app/app.component.html index 1e6ab5c9..871dc3d7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,3 +12,13 @@ + + + + + + + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 189729a0..292e233c 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,6 +1,31 @@ :host { + position: relative; display: flex; flex: 1 1 auto; width: 100%; min-width: 0; + + .theme-options-button { + position: absolute; + top: 160px; + right: 0; + width: 48px; + height: 48px; + line-height: 48px; + text-align: center; + cursor: pointer; + border-radius: 0; + margin: 0; + pointer-events: auto; + opacity: .75; + z-index: 998; + + mat-icon { + animation: rotating 3s linear infinite; + } + + &:hover { + opacity: 1; + } + } } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2c15072b..a27d185a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,6 +5,7 @@ import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; import { FuseSplashScreenService } from '@fuse/services/splash-screen.service'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; @@ -30,6 +31,7 @@ export class AppComponent implements OnInit, OnDestroy * * @param {FuseConfigService} _fuseConfigService * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseSidebarService} _fuseSidebarService * @param {FuseSplashScreenService} _fuseSplashScreenService * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService * @param {TranslateService} _translateService @@ -37,6 +39,7 @@ export class AppComponent implements OnInit, OnDestroy constructor( private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, + private _fuseSidebarService: FuseSidebarService, private _fuseSplashScreenService: FuseSplashScreenService, private _fuseTranslationLoaderService: FuseTranslationLoaderService, private _translateService: TranslateService @@ -93,4 +96,19 @@ export class AppComponent implements OnInit, OnDestroy this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle sidebar open + * + * @param key + * @private + */ + private _toggleSidebarOpen(key): void + { + this._fuseSidebarService.getSidebar(key).toggleOpen(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b7cc2196..06374179 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,12 +4,14 @@ import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule, Routes } from '@angular/router'; import { MatMomentDateModule } from '@angular/material-moment-adapter'; +import { MatButtonModule, MatIconModule } from '@angular/material'; import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { TranslateModule } from '@ngx-translate/core'; import 'hammerjs'; import { FuseModule } from '@fuse/fuse.module'; import { FuseSharedModule } from '@fuse/shared.module'; +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; import { fuseConfig } from 'app/fuse-config'; @@ -68,9 +70,15 @@ const appRoutes: Routes = [ // Material moment date module MatMomentDateModule, + // Material + MatButtonModule, + MatIconModule, + // Fuse modules FuseModule.forRoot(fuseConfig), FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, // App modules LayoutModule, diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html index 5492fe03..b826ef61 100644 --- a/src/app/layout/vertical/layout-1/layout-1.component.html +++ b/src/app/layout/vertical/layout-1/layout-1.component.html @@ -55,7 +55,7 @@ - - + - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/layout-1.module.ts b/src/app/layout/vertical/layout-1/layout-1.module.ts index b6e77784..ed5c7c96 100644 --- a/src/app/layout/vertical/layout-1/layout-1.module.ts +++ b/src/app/layout/vertical/layout-1/layout-1.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { ContentModule } from 'app/layout/components/content/content.module'; @@ -18,7 +18,6 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1. imports : [ FuseSharedModule, FuseSidebarModule, - FuseThemeOptionsModule, ContentModule, FooterModule, diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index b95d2d4a..22587f0a 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -55,7 +55,7 @@ - - + - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-2/layout-2.module.ts b/src/app/layout/vertical/layout-2/layout-2.module.ts index 30b96fc8..26ed77d1 100644 --- a/src/app/layout/vertical/layout-2/layout-2.module.ts +++ b/src/app/layout/vertical/layout-2/layout-2.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { ContentModule } from 'app/layout/components/content/content.module'; @@ -18,7 +18,6 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2. imports : [ FuseSharedModule, FuseSidebarModule, - FuseThemeOptionsModule, ContentModule, FooterModule, diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html index 4a823b85..422f2cbd 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.html +++ b/src/app/layout/vertical/layout-3/layout-3.component.html @@ -47,7 +47,7 @@ - - + - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-3/layout-3.module.ts b/src/app/layout/vertical/layout-3/layout-3.module.ts index b2bd25cf..a0d16277 100644 --- a/src/app/layout/vertical/layout-3/layout-3.module.ts +++ b/src/app/layout/vertical/layout-3/layout-3.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { ContentModule } from 'app/layout/components/content/content.module'; @@ -18,7 +18,6 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3. imports : [ FuseSharedModule, FuseSidebarModule, - FuseThemeOptionsModule, ContentModule, FooterModule,