purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 12:05:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(layout) Separated the Settings drawer from the layout component

Browse Source
This commit is contained in:
sercan 2021-08-31 09:20:55 +03:00
parent c2fa88f4d4
commit 2a4a392153
6 changed files with 633 additions and 521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

474
src/app/layout/common/settings/settings.component.html Normal file
View File

@ -0,0 +1,474 @@
<div
class="fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-90 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
[class.lg:right-0]="config.layout === 'centered' || config.layout === 'material'"
[class.lg:right-16]="config.layout !== 'centered' && config.layout !== 'material'"
style="top: 275px"
(click)="settingsDrawer.toggle()">
<mat-icon
class="icon-size-5 text-white animate-spin-slow"
[svgIcon]="'heroicons_solid:cog'"></mat-icon>
</div>
<fuse-drawer
class="w-screen min-w-screen sm:w-100 sm:min-w-100 z-999"
fixed
[mode]="'over'"
[name]="'settingsDrawer'"
[position]="'right'"
#settingsDrawer>
<div class="flex flex-col w-full overflow-auto bg-card">
<div class="flex flex-row items-center px-6 h-20 min-h-20 text-white bg-primary">
<mat-icon
class="icon-size-7 text-current"
[svgIcon]="'heroicons_solid:cog'"></mat-icon>
<div class="ml-3 text-2xl font-semibold tracking-tight">Settings</div>
<button
class="ml-auto"
mat-icon-button
(click)="settingsDrawer.close()">
<mat-icon
class="text-current"
[svgIcon]="'heroicons_outline:x'"></mat-icon>
</button>
</div>
<div class="flex flex-col p-6">
<!-- Theme -->
<div class="text-md font-semibold text-secondary">THEME</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
<ng-container *ngFor="let theme of themes">
<div
class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.theme === theme[0]"
(click)="setTheme(theme[0])">
<div
class="flex-0 w-3 h-3 rounded-full"
[style.background-color]="theme[1].primary"></div>
<div
class="ml-2.5 font-medium leading-5 truncate"
[class.text-secondary]="config.theme !== theme[0]">
{{theme[0] | titlecase}}
</div>
</div>
</ng-container>
</div>
<hr class="my-8">
<!-- Scheme -->
<div class="text-md font-semibold text-secondary">SCHEME</div>
<div class="grid grid-cols-3 gap-3 justify-items-start mt-6">
<!-- Auto -->
<div
class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.scheme === 'auto'"
matTooltip="Automatically sets the scheme based on user's operating system's color scheme preference using 'prefer-color-scheme' media query."
(click)="setScheme('auto')">
<div class="flex items-center rounded-full overflow-hidden">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:lightning-bolt'"></mat-icon>
</div>
<div
class="flex items-center ml-2 font-medium leading-5"
[class.text-secondary]="config.scheme !== 'auto'">
Auto
</div>
</div>
<!-- Dark -->
<div
class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.scheme === 'dark'"
(click)="setScheme('dark')">
<div class="flex items-center rounded-full overflow-hidden">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:moon'"></mat-icon>
</div>
<div
class="flex items-center ml-2 font-medium leading-5"
[class.text-secondary]="config.scheme !== 'dark'">
Dark
</div>
</div>
<!-- Light -->
<div
class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.scheme === 'light'"
(click)="setScheme('light')">
<div class="flex items-center rounded-full overflow-hidden">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:sun'"></mat-icon>
</div>
<div
class="flex items-center ml-2 font-medium leading-5"
[class.text-secondary]="config.scheme !== 'light'">
Light
</div>
</div>
</div>
<hr class="my-8">
<!-- Layout -->
<div class="text-md font-semibold text-secondary">LAYOUT</div>
<div class="grid grid-cols-3 gap-3 mt-6">
<!-- Empty -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('empty')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'empty'">
<div class="flex flex-col flex-auto bg-gray-50 dark:bg-gray-900"></div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'empty'">
Empty
</div>
</div>
<!-- Classic -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('classic')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'classic'">
<div class="w-8 bg-gray-100 dark:bg-gray-800">
<div class="mt-3 mx-1.5 space-y-1">
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'classic'">
Classic
</div>
</div>
<!-- Classy -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('classy')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'classy'">
<div class="w-8 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center mt-1 mx-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-0.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="w-4 h-4 mt-2.5 mx-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="mt-2 mx-1 space-y-1">
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-2">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'classy'">
Classy
</div>
</div>
<!-- Compact -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('compact')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'compact'">
<div class="w-5 bg-gray-100 dark:bg-gray-800">
<div class="w-3 h-3 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex flex-col items-center w-full mt-2 space-y-1">
<div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'compact'">
Compact
</div>
</div>
<!-- Dense -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('dense')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'dense'">
<div class="w-4 bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex flex-col items-center w-full mt-2 space-y-1">
<div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'dense'">
Dense
</div>
</div>
<!-- Futuristic -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('futuristic')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'futuristic'">
<div class="w-8 bg-gray-100 dark:bg-gray-800">
<div class="flex flex-col flex-auto h-full py-3 px-1.5 space-y-1">
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex-auto"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'futuristic'">
Futuristic
</div>
</div>
<!-- Thin -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('thin')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'thin'">
<div class="w-3 bg-gray-100 dark:bg-gray-800">
<div class="w-1.5 h-1.5 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex flex-col items-center w-full mt-2 space-y-1">
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'thin'">
Thin
</div>
</div>
<div class="col-span-2"></div>
<!-- Centered -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('centered')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'centered'">
<div class="flex flex-col flex-auto my-1 mx-2 border rounded-md overflow-hidden">
<div class="flex items-center h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex ml-1.5">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex items-center justify-end ml-auto mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'centered'">
Centered
</div>
</div>
<!-- Enterprise -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('enterprise')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'enterprise'">
<div class="flex items-center h-3 px-2 bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="flex items-center justify-end ml-auto space-x-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex items-center h-3 px-2 border-t border-b space-x-1 bg-gray-100 dark:bg-gray-800">
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
<div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'enterprise'">
Enterprise
</div>
</div>
<!-- Material -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('material')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'material'">
<div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
<div class="flex items-center h-4 px-2 bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="flex items-center justify-end ml-auto space-x-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex items-center h-2 px-2 space-x-1 bg-gray-100 dark:bg-gray-800">
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'material'">
Material
</div>
</div>
<!-- Modern -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('modern')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'modern'">
<div class="flex items-center h-4 px-2 border-b bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="flex items-center h-3 ml-2 space-x-1">
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex items-center justify-end ml-auto space-x-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto">
<div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'modern'">
Modern
</div>
</div>
</div>
</div>
</div>
</fuse-drawer>

124
src/app/layout/common/settings/settings.component.ts Normal file
View File

@ -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<any> = new Subject<any>();
/**
* 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};
}
}

28
src/app/layout/common/settings/settings.module.ts Normal file
View File

@ -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
{
}

466
src/app/layout/layout.component.html
View File

@ -44,468 +44,4 @@
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Settings drawer - Remove this to remove the drawer and its button --> <!-- Settings drawer - Remove this to remove the drawer and its button -->
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<div <settings></settings>
class="fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-999 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
style="top: 275px"
(click)="settingsDrawer.toggle()">
<mat-icon
class="icon-size-5 text-white animate-spin-slow"
[svgIcon]="'heroicons_solid:cog'"></mat-icon>
</div>
<fuse-drawer
class="w-screen min-w-screen sm:w-100 sm:min-w-100"
fixed
transparentOverlay
[mode]="'over'"
[name]="'settingsDrawer'"
[position]="'right'"
#settingsDrawer>
<div class="flex flex-col w-full overflow-auto bg-card">
<div class="flex flex-row items-center px-6 h-20 min-h-20 text-white bg-primary">
<mat-icon
class="icon-size-7 text-current"
[svgIcon]="'heroicons_solid:cog'"></mat-icon>
<div class="ml-3 text-2xl font-semibold tracking-tight">Settings</div>
</div>
<div class="flex flex-col p-6">
<!-- Theme -->
<div class="text-md font-semibold text-secondary">THEME</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
<ng-container *ngFor="let theme of themes">
<div
class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.theme === theme[0]"
(click)="setTheme(theme[0])">
<div
class="flex-0 w-3 h-3 rounded-full"
[style.background-color]="theme[1].primary"></div>
<div
class="ml-2.5 font-medium leading-5 truncate"
[class.text-secondary]="config.theme !== theme[0]">
{{theme[0] | titlecase}}
</div>
</div>
</ng-container>
</div>
<hr class="my-8">
<!-- Scheme -->
<div class="text-md font-semibold text-secondary">SCHEME</div>
<div class="grid grid-cols-3 gap-3 justify-items-start mt-6">
<!-- Auto -->
<div
class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.scheme === 'auto'"
[matTooltip]="'Automatically sets the scheme based on user\'s operating system\'s color scheme preference using \'prefer-color-scheme\' media query.'"
(click)="setScheme('auto')">
<div class="flex items-center rounded-full overflow-hidden">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:lightning-bolt'"></mat-icon>
</div>
<div
class="flex items-center ml-2 font-medium leading-5"
[class.text-secondary]="config.scheme !== 'auto'">
Auto
</div>
</div>
<!-- Dark -->
<div
class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.scheme === 'dark'"
(click)="setScheme('dark')">
<div class="flex items-center rounded-full overflow-hidden">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:moon'"></mat-icon>
</div>
<div
class="flex items-center ml-2 font-medium leading-5"
[class.text-secondary]="config.scheme !== 'dark'">
Dark
</div>
</div>
<!-- Light -->
<div
class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.scheme === 'light'"
(click)="setScheme('light')">
<div class="flex items-center rounded-full overflow-hidden">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:sun'"></mat-icon>
</div>
<div
class="flex items-center ml-2 font-medium leading-5"
[class.text-secondary]="config.scheme !== 'light'">
Light
</div>
</div>
</div>
<hr class="my-8">
<!-- Layout -->
<div class="text-md font-semibold text-secondary">LAYOUT</div>
<div class="grid grid-cols-3 gap-3 mt-6">
<!-- Empty -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('empty')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'empty'">
<div class="flex flex-col flex-auto bg-gray-50 dark:bg-gray-900"></div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'empty'">
Empty
</div>
</div>
<!-- Classic -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('classic')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'classic'">
<div class="w-8 bg-gray-100 dark:bg-gray-800">
<div class="mt-3 mx-1.5 space-y-1">
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'classic'">
Classic
</div>
</div>
<!-- Classy -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('classy')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'classy'">
<div class="w-8 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center mt-1 mx-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-0.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="w-4 h-4 mt-2.5 mx-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="mt-2 mx-1 space-y-1">
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-2">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'classy'">
Classy
</div>
</div>
<!-- Compact -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('compact')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'compact'">
<div class="w-5 bg-gray-100 dark:bg-gray-800">
<div class="w-3 h-3 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex flex-col items-center w-full mt-2 space-y-1">
<div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'compact'">
Compact
</div>
</div>
<!-- Dense -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('dense')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'dense'">
<div class="w-4 bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex flex-col items-center w-full mt-2 space-y-1">
<div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'dense'">
Dense
</div>
</div>
<!-- Futuristic -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('futuristic')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'futuristic'">
<div class="w-8 bg-gray-100 dark:bg-gray-800">
<div class="flex flex-col flex-auto h-full py-3 px-1.5 space-y-1">
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex-auto"></div>
<div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'futuristic'">
Futuristic
</div>
</div>
<!-- Thin -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('thin')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'thin'">
<div class="w-3 bg-gray-100 dark:bg-gray-800">
<div class="w-1.5 h-1.5 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
<div class="flex flex-col items-center w-full mt-2 space-y-1">
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto border-l">
<div class="h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-end h-full mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'thin'">
Thin
</div>
</div>
<div class="col-span-2"></div>
<!-- Centered -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('centered')">
<div
class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'centered'">
<div class="flex flex-col flex-auto my-1 mx-2 border rounded-md overflow-hidden">
<div class="flex items-center h-3 bg-gray-100 dark:bg-gray-800">
<div class="flex ml-1.5">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex items-center justify-end ml-auto mr-1.5">
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'centered'">
Centered
</div>
</div>
<!-- Enterprise -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('enterprise')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'enterprise'">
<div class="flex items-center h-3 px-2 bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="flex items-center justify-end ml-auto space-x-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex items-center h-3 px-2 border-t border-b space-x-1 bg-gray-100 dark:bg-gray-800">
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
<div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'enterprise'">
Enterprise
</div>
</div>
<!-- Material -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('material')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'material'">
<div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
<div class="flex items-center h-4 px-2 bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="flex items-center justify-end ml-auto space-x-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex items-center h-2 px-2 space-x-1 bg-gray-100 dark:bg-gray-800">
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'material'">
Material
</div>
</div>
<!-- Modern -->
<div
class="flex flex-col cursor-pointer"
(click)="setLayout('modern')">
<div
class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
[class.border-primary]="config.layout === 'modern'">
<div class="flex items-center h-4 px-2 border-b bg-gray-100 dark:bg-gray-800">
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="flex items-center h-3 ml-2 space-x-1">
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
<div class="flex items-center justify-end ml-auto space-x-1">
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
</div>
</div>
<div class="flex flex-col flex-auto">
<div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
</div>
</div>
<div
class="mt-2 text-md font-medium text-center text-secondary"
[class.text-primary]="config.layout === 'modern'">
Modern
</div>
</div>
</div>
</div>
</div>
</fuse-drawer>

56
src/app/layout/layout.component.ts
View File

@ -5,10 +5,9 @@ import { combineLatest, Subject } from 'rxjs';
import { filter, map, takeUntil } from 'rxjs/operators'; import { filter, map, takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config'; import { FuseConfigService } from '@fuse/services/config';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
import { FUSE_VERSION } from '@fuse/version'; import { FUSE_VERSION } from '@fuse/version';
import { Layout } from 'app/layout/layout.types'; 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({ @Component({
selector : 'layout', selector : 'layout',
@ -22,7 +21,6 @@ export class LayoutComponent implements OnInit, OnDestroy
layout: Layout; layout: Layout;
scheme: 'dark' | 'light'; scheme: 'dark' | 'light';
theme: string; theme: string;
themes: [string, any][] = [];
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
/** /**
@ -34,8 +32,7 @@ export class LayoutComponent implements OnInit, OnDestroy
private _renderer2: Renderer2, private _renderer2: Renderer2,
private _router: Router, private _router: Router,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService
private _fuseTailwindConfigService: FuseTailwindService
) )
{ {
} }
@ -49,11 +46,6 @@ export class LayoutComponent implements OnInit, OnDestroy
*/ */
ngOnInit(): void 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 // Set the theme and scheme based on the configuration
combineLatest([ combineLatest([
this._fuseConfigService.config$, this._fuseConfigService.config$,
@ -123,50 +115,6 @@ export class LayoutComponent implements OnInit, OnDestroy
this._unsubscribeAll.complete(); 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 // @ Private methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------

4
src/app/layout/layout.module.ts
View File

@ -14,6 +14,7 @@ import { CompactLayoutModule } from 'app/layout/layouts/vertical/compact/compact
import { DenseLayoutModule } from 'app/layout/layouts/vertical/dense/dense.module'; import { DenseLayoutModule } from 'app/layout/layouts/vertical/dense/dense.module';
import { FuturisticLayoutModule } from 'app/layout/layouts/vertical/futuristic/futuristic.module'; import { FuturisticLayoutModule } from 'app/layout/layouts/vertical/futuristic/futuristic.module';
import { ThinLayoutModule } from 'app/layout/layouts/vertical/thin/thin.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'; import { SharedModule } from 'app/shared/shared.module';
const layoutModules = [ const layoutModules = [
@ -44,7 +45,8 @@ const layoutModules = [
MatTooltipModule, MatTooltipModule,
FuseDrawerModule, FuseDrawerModule,
SharedModule, SharedModule,
...layoutModules SettingsModule,
...layoutModules,
], ],
exports : [ exports : [
LayoutComponent, LayoutComponent,