diff --git a/src/app/layout/common/settings/settings.component.html b/src/app/layout/common/settings/settings.component.html new file mode 100644 index 00000000..515c40a0 --- /dev/null +++ b/src/app/layout/common/settings/settings.component.html @@ -0,0 +1,474 @@ +
+ +
+ + + +
+
+ +
Settings
+ +
+ +
+ + +
THEME
+
+ +
+
+
+ {{theme[0] | titlecase}} +
+
+ +
+ +
+ + +
SCHEME
+
+ +
+
+ +
+
+ Auto +
+
+ +
+
+ +
+
+ Dark +
+
+ +
+
+ +
+
+ Light +
+
+
+ +
+ + +
LAYOUT
+
+ + +
+
+
+
+
+ Empty +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Classic +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Classy +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Compact +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dense +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Futuristic +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Thin +
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Centered +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enterprise +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Material +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modern +
+
+ +
+ +
+ +
+ + diff --git a/src/app/layout/common/settings/settings.component.ts b/src/app/layout/common/settings/settings.component.ts new file mode 100644 index 00000000..ddaa22a5 --- /dev/null +++ b/src/app/layout/common/settings/settings.component.ts @@ -0,0 +1,124 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { FuseConfigService } from '@fuse/services/config'; +import { FuseTailwindService } from '@fuse/services/tailwind'; +import { AppConfig, Scheme, Theme } from 'app/core/config/app.config'; +import { Layout } from 'app/layout/layout.types'; + +@Component({ + selector : 'settings', + templateUrl : './settings.component.html', + styles : [ + ` + settings { + position: static; + display: block; + flex: none; + width: auto; + } + ` + ], + encapsulation: ViewEncapsulation.None +}) +export class SettingsComponent implements OnInit, OnDestroy +{ + config: AppConfig; + layout: Layout; + scheme: 'dark' | 'light'; + theme: string; + themes: [string, any][] = []; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _router: Router, + private _fuseConfigService: FuseConfigService, + private _fuseTailwindService: FuseTailwindService + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Get the themes + this._fuseTailwindService.tailwindConfig$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.themes = Object.entries(config.themes); + }); + + // Subscribe to config changes + this._fuseConfigService.config$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config: AppConfig) => { + + // Store the config + this.config = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Set the layout on the config + * + * @param layout + */ + setLayout(layout: string): void + { + // Clear the 'layout' query param to allow layout changes + this._router.navigate([], { + queryParams : { + layout: null + }, + queryParamsHandling: 'merge' + }).then(() => { + + // Set the config + this._fuseConfigService.config = {layout}; + }); + } + + /** + * Set the scheme on the config + * + * @param scheme + */ + setScheme(scheme: Scheme): void + { + this._fuseConfigService.config = {scheme}; + } + + /** + * Set the theme on the config + * + * @param theme + */ + setTheme(theme: Theme): void + { + this._fuseConfigService.config = {theme}; + } +} diff --git a/src/app/layout/common/settings/settings.module.ts b/src/app/layout/common/settings/settings.module.ts new file mode 100644 index 00000000..fbd6627f --- /dev/null +++ b/src/app/layout/common/settings/settings.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { FuseDrawerModule } from '@fuse/components/drawer'; +import { SettingsComponent } from 'app/layout/common/settings/settings.component'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + declarations: [ + SettingsComponent + ], + imports: [ + CommonModule, + RouterModule, + MatIconModule, + MatTooltipModule, + FuseDrawerModule, + MatButtonModule + ], + exports : [ + SettingsComponent + ] +}) +export class SettingsModule +{ +} diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html index 42c07400..fafc0082 100644 --- a/src/app/layout/layout.component.html +++ b/src/app/layout/layout.component.html @@ -44,468 +44,4 @@ -
- -
- - - -
-
- -
Settings
-
- -
- - -
THEME
-
- -
-
-
- {{theme[0] | titlecase}} -
-
- -
- -
- - -
SCHEME
-
- -
-
- -
-
- Auto -
-
- -
-
- -
-
- Dark -
-
- -
-
- -
-
- Light -
-
-
- -
- - -
LAYOUT
-
- - -
-
-
-
-
- Empty -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Classic -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Classy -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Compact -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Dense -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Futuristic -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Thin -
-
- -
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Centered -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Enterprise -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Material -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Modern -
-
- -
- -
- -
- - + diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts index 1858e61c..76aaa8d4 100644 --- a/src/app/layout/layout.component.ts +++ b/src/app/layout/layout.component.ts @@ -5,10 +5,9 @@ import { combineLatest, Subject } from 'rxjs'; import { filter, map, takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; -import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service'; import { FUSE_VERSION } from '@fuse/version'; import { Layout } from 'app/layout/layout.types'; -import { AppConfig, Scheme, Theme } from 'app/core/config/app.config'; +import { AppConfig } from 'app/core/config/app.config'; @Component({ selector : 'layout', @@ -22,7 +21,6 @@ export class LayoutComponent implements OnInit, OnDestroy layout: Layout; scheme: 'dark' | 'light'; theme: string; - themes: [string, any][] = []; private _unsubscribeAll: Subject = new Subject(); /** @@ -34,8 +32,7 @@ export class LayoutComponent implements OnInit, OnDestroy private _renderer2: Renderer2, private _router: Router, private _fuseConfigService: FuseConfigService, - private _fuseMediaWatcherService: FuseMediaWatcherService, - private _fuseTailwindConfigService: FuseTailwindService + private _fuseMediaWatcherService: FuseMediaWatcherService ) { } @@ -49,11 +46,6 @@ export class LayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Get the themes - this._fuseTailwindConfigService.tailwindConfig$.subscribe((config) => { - this.themes = Object.entries(config.themes); - }); - // Set the theme and scheme based on the configuration combineLatest([ this._fuseConfigService.config$, @@ -123,50 +115,6 @@ export class LayoutComponent implements OnInit, OnDestroy this._unsubscribeAll.complete(); } - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * Set the layout on the config - * - * @param layout - */ - setLayout(layout: string): void - { - // Clear the 'layout' query param to allow layout changes - this._router.navigate([], { - queryParams : { - layout: null - }, - queryParamsHandling: 'merge' - }).then(() => { - - // Set the config - this._fuseConfigService.config = {layout}; - }); - } - - /** - * Set the scheme on the config - * - * @param scheme - */ - setScheme(scheme: Scheme): void - { - this._fuseConfigService.config = {scheme}; - } - - /** - * Set the theme on the config - * - * @param theme - */ - setTheme(theme: Theme): void - { - this._fuseConfigService.config = {theme}; - } - // ----------------------------------------------------------------------------------------------------- // @ Private methods // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts index 44ba1fc0..426c45ad 100644 --- a/src/app/layout/layout.module.ts +++ b/src/app/layout/layout.module.ts @@ -14,6 +14,7 @@ import { CompactLayoutModule } from 'app/layout/layouts/vertical/compact/compact import { DenseLayoutModule } from 'app/layout/layouts/vertical/dense/dense.module'; import { FuturisticLayoutModule } from 'app/layout/layouts/vertical/futuristic/futuristic.module'; import { ThinLayoutModule } from 'app/layout/layouts/vertical/thin/thin.module'; +import { SettingsModule } from 'app/layout/common/settings/settings.module'; import { SharedModule } from 'app/shared/shared.module'; const layoutModules = [ @@ -39,12 +40,13 @@ const layoutModules = [ declarations: [ LayoutComponent ], - imports : [ + imports: [ MatIconModule, MatTooltipModule, FuseDrawerModule, SharedModule, - ...layoutModules + SettingsModule, + ...layoutModules, ], exports : [ LayoutComponent,