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 @@
-
+
-
-
-
-
-
+
\ 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 @@
+
+
+
+ settings
+
+
+
+
+
\ 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,