mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-08 03:25:08 +00:00
(layout) Separated the Settings drawer from the layout component
This commit is contained in:
sercan
parent
c2fa88f4d4
commit
2a4a392153
474
src/app/layout/common/settings/settings.component.html
Normal file
474
src/app/layout/common/settings/settings.component.html
Normal 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
124
src/app/layout/common/settings/settings.component.ts
Normal 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
28
src/app/layout/common/settings/settings.module.ts
Normal 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
|
||||
{
|
||||
}
|
||||
|
|
@ -44,468 +44,4 @@
|
|||
<!-- ----------------------------------------------------------------------------------------------------- -->
|
||||
<!-- Settings drawer - Remove this to remove the drawer and its button -->
|
||||
<!-- ----------------------------------------------------------------------------------------------------- -->
|
||||
<div
|
||||
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>
|
||||
<settings></settings>
|
||||
|
|
|
|||
|
|
@ -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<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
|
|
@ -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
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user