Moved ThemeOptions to the Fuse Sidebar

Replaced align with position on Fuse Sidebar components

src/@fuse/components/theme-options/theme-options.component.html

@@ -1,12 +1,6 @@
-<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
+<div class="theme-options-panel mat-white-bg mat-elevation-z8" fusePerfectScrollbar>
-    <mat-icon>settings</mat-icon>
-</button>
 
-<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
+    <button mat-icon-button class="close-button" (click)="_toggleSidebarOpen('themeOptionsPanel')">
-
-<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
-
-    <button mat-icon-button class="close-button" (click)="closeBar()">
         <mat-icon>close</mat-icon>
     </button>
 
@@ -26,11 +20,11 @@
             <div formGroupName="layout">
 
                 <!-- VERTICAL LAYOUT STYLES -->
-                <h3>Vertical Layout Styles:</h3>
+                <h3>Scrollable Area:</h3>
                 <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
-                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Layout 1</mat-radio-button>
+                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Content</mat-radio-button>
-                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Layout 2</mat-radio-button>
+                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Wrapper</mat-radio-button>
-                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Layout 3</mat-radio-button>
+                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Body</mat-radio-button>
                 </mat-radio-group>
 
                 <!-- HORIZONTAL LAYOUT STYLES -->
@@ -79,8 +73,15 @@
                     <h3 class="mt-24">Toolbar:</h3>
                     <mat-radio-group formControlName="position" fxLayout="column" fxLayoutAlign="start start">
                         <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
+                        <mat-radio-button class="mr-8 mb-8" value="above-sticky"
+                                          [disabled]="fuseConfig.layout.style === 'vertical-layout-1' || fuseConfig.layout.style === 'vertical-layout-2'">
+                            Above Sticky
+                        </mat-radio-button>
                         <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="below-sticky">Below Sticky</mat-radio-button>
+                        <mat-radio-button class="mr-8 mb-8" value="below-sticky"
+                                          [disabled]="fuseConfig.layout.style === 'vertical-layout-3'">
+                            Below Sticky
+                        </mat-radio-button>
                         <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
                     </mat-radio-group>
 
@@ -170,4 +171,4 @@
 
     </div>
 
-</div>
+</div>

src/@fuse/components/theme-options/theme-options.component.scss

@@ -10,33 +10,14 @@
 }
 
 :host {
-    position: fixed;
+    display: flex;
-    display: block;
-    right: 0;
-    top: 160px;
-    z-index: 998;
-
-    &.bar-closed .theme-options-panel {
-        display: none;
-    }
 
     .theme-options-panel {
-        position: absolute;
+        display: flex;
-        right: 0;
+        flex: 1 0 auto;
-        top: 0;
-        width: 360px;
-        transform: translate3d(100%, 0, 0);
-        z-index: 999;
-        max-height: calc(100vh - 200px);
         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;
-        }
-    }
-
 }

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 { Component, HostBinding, OnDestroy, OnInit, Renderer2 } 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';
@@ -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<any>;
 
+    /**
+     * 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
+                // Update the config
-            this._fuseConfigService.config = config;
+                this._fuseConfigService.config = config;
-        });
+            });
 
-        // Listen for the overlay's click event
+        // Subscribe to the layout style value changes
-        this._renderer.listen(this.overlay.nativeElement, 'click', () => {
+        const layoutControls: any = this.fuseConfigForm.controls.layout;
-            this.closeBar();
+        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;
-        });
-    }
 }

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

src/app/app.component.html

@@ -12,3 +12,13 @@
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
     <vertical-layout-3></vertical-layout-3>
 </ng-container>
+
+<!-- THEME OPTIONS PANEL -->
+<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
+        (click)="_toggleSidebarOpen('themeOptionsPanel')">
+    <mat-icon>settings</mat-icon>
+</button>
+
+<fuse-sidebar name="themeOptionsPanel" position="right" [invisibleOverlay]="true">
+    <fuse-theme-options></fuse-theme-options>
+</fuse-sidebar>

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;
+        }
+    }
 }

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();
+    }
 }

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,

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -55,7 +55,7 @@
         </div>
 
         <!-- NAVBAR: Right -->
-        <fuse-sidebar [name]="'navbar'" [align]="'right'"
+        <fuse-sidebar [name]="'navbar'" position="right"
                       [folded]="fuseConfig.layout.navigation.folded"
                       [lockedOpen]="'gt-md'"
                       class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
@@ -75,9 +75,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
+<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
-<!-- / QUICK PANEL -->
+<!-- / QUICK PANEL -->
-
-<fuse-theme-options></fuse-theme-options>

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,

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -55,7 +55,7 @@
         </div>
 
         <!-- NAVBAR: Right -->
-        <fuse-sidebar [name]="'navbar'" [align]="'right'"
+        <fuse-sidebar [name]="'navbar'" position="right"
                       [folded]="fuseConfig.layout.navigation.folded"
                       [lockedOpen]="'gt-md'"
                       class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
@@ -75,9 +75,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
+<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
-<!-- / QUICK PANEL -->
+<!-- / QUICK PANEL -->
-
-<fuse-theme-options></fuse-theme-options>

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,

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -47,7 +47,7 @@
             </div>
 
             <!-- NAVBAR: Right -->
-            <fuse-sidebar [name]="'navbar'" [align]="'right'"
+            <fuse-sidebar [name]="'navbar'" position="right"
                           [folded]="fuseConfig.layout.navigation.folded"
                           [lockedOpen]="'gt-md'"
                           class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
@@ -75,9 +75,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
+<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
-<!-- / QUICK PANEL -->
+<!-- / QUICK PANEL -->
-
-<fuse-theme-options></fuse-theme-options>

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,