mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
Merge remote-tracking branch 'origin/demo' into starter
This commit is contained in:
sercan
commit
cafc3188cf
2294
package-lock.json
generated
2294
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
48
package.json
48
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fuse/starter",
|
"name": "@fuse/starter",
|
||||||
"version": "13.5.0",
|
"version": "13.6.0",
|
||||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||||
"author": "https://themeforest.net/user/srcn",
|
"author": "https://themeforest.net/user/srcn",
|
||||||
"license": "https://themeforest.net/licenses/standard",
|
"license": "https://themeforest.net/licenses/standard",
|
||||||
|
|
@ -14,17 +14,17 @@
|
||||||
"lint": "ng lint"
|
"lint": "ng lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "12.2.1",
|
"@angular/animations": "12.2.3",
|
||||||
"@angular/cdk": "12.2.1",
|
"@angular/cdk": "12.2.3",
|
||||||
"@angular/common": "12.2.1",
|
"@angular/common": "12.2.3",
|
||||||
"@angular/compiler": "12.2.1",
|
"@angular/compiler": "12.2.3",
|
||||||
"@angular/core": "12.2.1",
|
"@angular/core": "12.2.3",
|
||||||
"@angular/forms": "12.2.1",
|
"@angular/forms": "12.2.3",
|
||||||
"@angular/material": "12.2.1",
|
"@angular/material": "12.2.3",
|
||||||
"@angular/material-moment-adapter": "12.2.1",
|
"@angular/material-moment-adapter": "12.2.3",
|
||||||
"@angular/platform-browser": "12.2.1",
|
"@angular/platform-browser": "12.2.3",
|
||||||
"@angular/platform-browser-dynamic": "12.2.1",
|
"@angular/platform-browser-dynamic": "12.2.3",
|
||||||
"@angular/router": "12.2.1",
|
"@angular/router": "12.2.3",
|
||||||
"@fullcalendar/angular": "4.4.5-beta",
|
"@fullcalendar/angular": "4.4.5-beta",
|
||||||
"@fullcalendar/core": "4.4.2",
|
"@fullcalendar/core": "4.4.2",
|
||||||
"@fullcalendar/daygrid": "4.4.2",
|
"@fullcalendar/daygrid": "4.4.2",
|
||||||
|
|
@ -34,14 +34,14 @@
|
||||||
"@fullcalendar/rrule": "4.4.2",
|
"@fullcalendar/rrule": "4.4.2",
|
||||||
"@fullcalendar/timegrid": "4.4.2",
|
"@fullcalendar/timegrid": "4.4.2",
|
||||||
"@ngneat/transloco": "2.22.0",
|
"@ngneat/transloco": "2.22.0",
|
||||||
"apexcharts": "3.27.3",
|
"apexcharts": "3.28.1",
|
||||||
"crypto-js": "3.3.0",
|
"crypto-js": "3.3.0",
|
||||||
"highlight.js": "11.2.0",
|
"highlight.js": "11.2.0",
|
||||||
"lodash-es": "4.17.21",
|
"lodash-es": "4.17.21",
|
||||||
"moment": "2.29.1",
|
"moment": "2.29.1",
|
||||||
"ng-apexcharts": "1.5.12",
|
"ng-apexcharts": "1.5.12",
|
||||||
"ngx-markdown": "12.0.1",
|
"ngx-markdown": "12.0.1",
|
||||||
"ngx-quill": "14.2.0",
|
"ngx-quill": "14.3.0",
|
||||||
"perfect-scrollbar": "1.5.2",
|
"perfect-scrollbar": "1.5.2",
|
||||||
"quill": "1.3.7",
|
"quill": "1.3.7",
|
||||||
"rrule": "2.6.8",
|
"rrule": "2.6.8",
|
||||||
|
|
@ -51,14 +51,14 @@
|
||||||
"zone.js": "0.11.4"
|
"zone.js": "0.11.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "12.2.1",
|
"@angular-devkit/build-angular": "12.2.3",
|
||||||
"@angular-eslint/builder": "12.3.1",
|
"@angular-eslint/builder": "12.3.1",
|
||||||
"@angular-eslint/eslint-plugin": "12.3.1",
|
"@angular-eslint/eslint-plugin": "12.3.1",
|
||||||
"@angular-eslint/eslint-plugin-template": "12.3.1",
|
"@angular-eslint/eslint-plugin-template": "12.3.1",
|
||||||
"@angular-eslint/schematics": "12.3.1",
|
"@angular-eslint/schematics": "12.3.1",
|
||||||
"@angular-eslint/template-parser": "12.3.1",
|
"@angular-eslint/template-parser": "12.3.1",
|
||||||
"@angular/cli": "12.2.1",
|
"@angular/cli": "12.2.3",
|
||||||
"@angular/compiler-cli": "12.2.1",
|
"@angular/compiler-cli": "12.2.3",
|
||||||
"@tailwindcss/aspect-ratio": "0.2.1",
|
"@tailwindcss/aspect-ratio": "0.2.1",
|
||||||
"@tailwindcss/line-clamp": "0.2.1",
|
"@tailwindcss/line-clamp": "0.2.1",
|
||||||
"@tailwindcss/typography": "0.4.1",
|
"@tailwindcss/typography": "0.4.1",
|
||||||
|
|
@ -68,14 +68,14 @@
|
||||||
"@types/jasmine": "3.8.2",
|
"@types/jasmine": "3.8.2",
|
||||||
"@types/lodash": "4.14.172",
|
"@types/lodash": "4.14.172",
|
||||||
"@types/lodash-es": "4.17.4",
|
"@types/lodash-es": "4.17.4",
|
||||||
"@types/node": "12.20.19",
|
"@types/node": "12.20.21",
|
||||||
"@typescript-eslint/eslint-plugin": "4.29.1",
|
"@typescript-eslint/eslint-plugin": "4.30.0",
|
||||||
"@typescript-eslint/parser": "4.29.1",
|
"@typescript-eslint/parser": "4.30.0",
|
||||||
"autoprefixer": "10.3.1",
|
"autoprefixer": "10.3.3",
|
||||||
"chroma-js": "2.1.2",
|
"chroma-js": "2.1.2",
|
||||||
"eslint": "7.32.0",
|
"eslint": "7.32.0",
|
||||||
"eslint-plugin-import": "2.24.0",
|
"eslint-plugin-import": "2.24.2",
|
||||||
"eslint-plugin-jsdoc": "36.0.7",
|
"eslint-plugin-jsdoc": "36.0.8",
|
||||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||||
"jasmine-core": "3.8.0",
|
"jasmine-core": "3.8.0",
|
||||||
"karma": "6.3.4",
|
"karma": "6.3.4",
|
||||||
|
|
@ -85,7 +85,7 @@
|
||||||
"karma-jasmine-html-reporter": "1.7.0",
|
"karma-jasmine-html-reporter": "1.7.0",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"postcss": "8.3.6",
|
"postcss": "8.3.6",
|
||||||
"tailwindcss": "2.2.7",
|
"tailwindcss": "2.2.9",
|
||||||
"typescript": "4.3.5"
|
"typescript": "4.3.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -116,7 +116,7 @@ fuse-drawer {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 299;
|
z-index: 299;
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
|
||||||
/* Fixed mode */
|
/* Fixed mode */
|
||||||
|
|
|
||||||
|
|
@ -211,6 +211,12 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
*/
|
*/
|
||||||
ngOnDestroy(): void
|
ngOnDestroy(): void
|
||||||
{
|
{
|
||||||
|
// Finish the animation
|
||||||
|
if ( this._player )
|
||||||
|
{
|
||||||
|
this._player.finish();
|
||||||
|
}
|
||||||
|
|
||||||
// Deregister the drawer from the registry
|
// Deregister the drawer from the registry
|
||||||
this._fuseDrawerService.deregisterComponent(this.name);
|
this._fuseDrawerService.deregisterComponent(this.name);
|
||||||
}
|
}
|
||||||
|
|
@ -338,6 +344,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
|
|
||||||
// Create the enter animation and attach it to the player
|
// Create the enter animation and attach it to the player
|
||||||
this._player = this._animationBuilder.build([
|
this._player = this._animationBuilder.build([
|
||||||
|
style({opacity: 0}),
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
||||||
]).create(this._overlay);
|
]).create(this._overlay);
|
||||||
|
|
||||||
|
|
@ -346,6 +353,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
|
|
||||||
// Destroy the player
|
// Destroy the player
|
||||||
this._player.destroy();
|
this._player.destroy();
|
||||||
|
this._player = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
|
|
@ -382,6 +390,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
|
|
||||||
// Destroy the player
|
// Destroy the player
|
||||||
this._player.destroy();
|
this._player.destroy();
|
||||||
|
this._player = null;
|
||||||
|
|
||||||
// If the backdrop still exists...
|
// If the backdrop still exists...
|
||||||
if ( this._overlay )
|
if ( this._overlay )
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
import { Version } from '@fuse/version/version';
|
import { Version } from '@fuse/version/version';
|
||||||
|
|
||||||
export const FUSE_VERSION = new Version('13.5.0').full;
|
export const FUSE_VERSION = new Version('13.6.0').full;
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { forkJoin, Observable } from 'rxjs';
|
||||||
import { MessagesService } from 'app/layout/common/messages/messages.service';
|
import { MessagesService } from 'app/layout/common/messages/messages.service';
|
||||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||||
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
|
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
|
||||||
|
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
|
||||||
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
|
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
|
||||||
import { UserService } from 'app/core/user/user.service';
|
import { UserService } from 'app/core/user/user.service';
|
||||||
|
|
||||||
|
|
@ -19,6 +20,7 @@ export class InitialDataResolver implements Resolve<any>
|
||||||
private _messagesService: MessagesService,
|
private _messagesService: MessagesService,
|
||||||
private _navigationService: NavigationService,
|
private _navigationService: NavigationService,
|
||||||
private _notificationsService: NotificationsService,
|
private _notificationsService: NotificationsService,
|
||||||
|
private _quickChatService: QuickChatService,
|
||||||
private _shortcutsService: ShortcutsService,
|
private _shortcutsService: ShortcutsService,
|
||||||
private _userService: UserService
|
private _userService: UserService
|
||||||
)
|
)
|
||||||
|
|
@ -42,6 +44,7 @@ export class InitialDataResolver implements Resolve<any>
|
||||||
this._navigationService.get(),
|
this._navigationService.get(),
|
||||||
this._messagesService.getAll(),
|
this._messagesService.getAll(),
|
||||||
this._notificationsService.getAll(),
|
this._notificationsService.getAll(),
|
||||||
|
this._quickChatService.getChats(),
|
||||||
this._shortcutsService.getAll(),
|
this._shortcutsService.getAll(),
|
||||||
this._userService.get()
|
this._userService.get()
|
||||||
]);
|
]);
|
||||||
|
|
|
||||||
196
src/app/layout/common/quick-chat/quick-chat.component.html
Normal file
196
src/app/layout/common/quick-chat/quick-chat.component.html
Normal file
|
|
@ -0,0 +1,196 @@
|
||||||
|
<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen">
|
||||||
|
<div
|
||||||
|
class="flex flex-col w-full sm:w-96 h-full lg:shadow transform transition-transform duration-400 ease-drawer bg-card"
|
||||||
|
[ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div
|
||||||
|
class="quick-chat-header flex flex-0 items-center justify-start cursor-pointer"
|
||||||
|
(click)="toggle()">
|
||||||
|
|
||||||
|
<!-- Toggle -->
|
||||||
|
<ng-container *ngIf="!opened || (opened && !selectedChat)">
|
||||||
|
<div class="flex flex-auto items-center justify-center">
|
||||||
|
<div class="flex flex-0 items-center justify-center w-16">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-6"
|
||||||
|
[svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</div>
|
||||||
|
<div class="text-lg font-medium text-secondary">Team Chat</div>
|
||||||
|
<button
|
||||||
|
class="ml-auto mr-4"
|
||||||
|
mat-icon-button>
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Contact info -->
|
||||||
|
<ng-container *ngIf="opened && selectedChat">
|
||||||
|
<div class="flex flex-auto items-center ml-3">
|
||||||
|
<div class="relative flex flex-0 items-center justify-center w-10 h-10">
|
||||||
|
<ng-container *ngIf="chat.contact.avatar">
|
||||||
|
<img
|
||||||
|
class="w-full h-full rounded-full object-cover"
|
||||||
|
[src]="chat.contact.avatar"
|
||||||
|
alt="Contact avatar"/>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!chat.contact.avatar">
|
||||||
|
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||||
|
{{chat.contact.name.charAt(0)}}
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 text-lg font-medium leading-5 truncate">{{chat.contact.name}}</div>
|
||||||
|
<button
|
||||||
|
class="ml-auto mr-4"
|
||||||
|
mat-icon-button>
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="flex flex-auto border-t overflow-hidden">
|
||||||
|
|
||||||
|
<!-- Chat list -->
|
||||||
|
<div
|
||||||
|
class="flex-0 w-16 h-full overflow-y-auto overscroll-y-contain sm:overflow-hidden sm:overscroll-auto"
|
||||||
|
fuseScrollbar
|
||||||
|
[fuseScrollbarOptions]="{wheelPropagation: false}">
|
||||||
|
<div class="flex-auto">
|
||||||
|
<ng-container *ngFor="let chat of chats; trackBy: trackByFn">
|
||||||
|
<div
|
||||||
|
class="flex items-center py-3 px-4 cursor-pointer"
|
||||||
|
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
|
||||||
|
'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
|
||||||
|
(click)="selectChat(chat.id)">
|
||||||
|
<div class="relative flex flex-0 items-center justify-center w-8 h-8">
|
||||||
|
<ng-container *ngIf="chat.unreadCount > 0">
|
||||||
|
<div
|
||||||
|
class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
|
||||||
|
[class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="chat.contact.avatar">
|
||||||
|
<img
|
||||||
|
class="w-full h-full rounded-full object-cover"
|
||||||
|
[src]="chat.contact.avatar"
|
||||||
|
alt="Contact avatar"/>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!chat.contact.avatar">
|
||||||
|
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||||
|
{{chat.contact.name.charAt(0)}}
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Conversation -->
|
||||||
|
<div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
|
||||||
|
<ng-container *ngIf="chat; else selectChatOrStartNew">
|
||||||
|
<div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
|
||||||
|
<div class="flex flex-col flex-auto flex-shrink p-6">
|
||||||
|
<ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
|
||||||
|
<!-- Start of the day -->
|
||||||
|
<ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
|
||||||
|
<div class="flex items-center justify-center my-3 -mx-6">
|
||||||
|
<div class="flex-auto border-b"></div>
|
||||||
|
<div class="flex-0 mx-4 text-sm font-medium leading-5 text-secondary">
|
||||||
|
{{message.createdAt | date: 'longDate'}}
|
||||||
|
</div>
|
||||||
|
<div class="flex-auto border-b"></div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<div
|
||||||
|
class="flex flex-col"
|
||||||
|
[ngClass]="{'items-end': message.isMine,
|
||||||
|
'items-start': !message.isMine,
|
||||||
|
'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
|
||||||
|
'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
|
||||||
|
<!-- Bubble -->
|
||||||
|
<div
|
||||||
|
class="relative max-w-3/4 px-3 py-2 rounded-lg"
|
||||||
|
[ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
|
||||||
|
'bg-gray-500 text-gray-50': !message.isMine}">
|
||||||
|
<!-- Speech bubble tail -->
|
||||||
|
<ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
|
||||||
|
<div
|
||||||
|
class="absolute bottom-0 w-3 transform"
|
||||||
|
[ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
|
||||||
|
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
|
||||||
|
<ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Message -->
|
||||||
|
<div
|
||||||
|
class="min-w-4 leading-5"
|
||||||
|
[innerHTML]="message.value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Time -->
|
||||||
|
<ng-container
|
||||||
|
*ngIf="first
|
||||||
|
|| last
|
||||||
|
|| chat.messages[i + 1].isMine !== message.isMine
|
||||||
|
|| chat.messages[i + 1].createdAt !== message.createdAt">
|
||||||
|
<div
|
||||||
|
class="my-0.5 text-sm font-medium text-secondary"
|
||||||
|
[ngClass]="{'mr-3': message.isMine,
|
||||||
|
'ml-3': !message.isMine}">
|
||||||
|
{{message.createdAt | date:'HH:mm'}}
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message field -->
|
||||||
|
<div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
|
||||||
|
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
|
||||||
|
<textarea
|
||||||
|
class="min-h-5 my-0 resize-none"
|
||||||
|
style="margin: 11px 0 !important; padding: 0 !important;"
|
||||||
|
[rows]="1"
|
||||||
|
matInput
|
||||||
|
#messageInput></textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
<div class="flex items-center h-11 my-px ml-4">
|
||||||
|
<button
|
||||||
|
mat-icon-button>
|
||||||
|
<mat-icon
|
||||||
|
class="transform rotate-90"
|
||||||
|
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Select chat or start new template -->
|
||||||
|
<ng-template #selectChatOrStartNew>
|
||||||
|
<div class="flex flex-col flex-auto items-center justify-center w-full h-full p-4">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-20"
|
||||||
|
[svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
|
||||||
|
<div class="mt-4 text-xl text-center font-medium tracking-tight text-secondary">Select a conversation</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<!-- Speech bubble tail SVG -->
|
||||||
|
<!-- @formatter:off -->
|
||||||
|
<ng-template #speechBubbleExtension>
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M1.01522827,0.516204834 C-8.83532715,54.3062744 61.7609863,70.5215302 64.8009949,64.3061218 C68.8074951,54.8859711 30.1663208,52.9997559 37.5036011,0.516204834 L1.01522827,0.516204834 Z" fill="currentColor" fill-rule="nonzero"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</ng-template>
|
||||||
|
<!-- @formatter:on -->
|
||||||
26
src/app/layout/common/quick-chat/quick-chat.component.scss
Normal file
26
src/app/layout/common/quick-chat/quick-chat.component.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
quick-chat {
|
||||||
|
z-index: 399;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjustments depending on the selected layout */
|
||||||
|
.quick-chat-header {
|
||||||
|
height: 64px;
|
||||||
|
|
||||||
|
enterprise-layout &,
|
||||||
|
modern-layout & {
|
||||||
|
height: 80px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Overlay */
|
||||||
|
.quick-chat-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 299;
|
||||||
|
opacity: 1;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
275
src/app/layout/common/quick-chat/quick-chat.component.ts
Normal file
275
src/app/layout/common/quick-chat/quick-chat.component.ts
Normal file
|
|
@ -0,0 +1,275 @@
|
||||||
|
import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||||
|
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
|
||||||
|
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'quick-chat',
|
||||||
|
templateUrl : './quick-chat.component.html',
|
||||||
|
styleUrls : ['./quick-chat.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
exportAs : 'quickChat'
|
||||||
|
})
|
||||||
|
export class QuickChatComponent implements OnInit, OnDestroy
|
||||||
|
{
|
||||||
|
@ViewChild('messageInput') messageInput: ElementRef;
|
||||||
|
chat: Chat;
|
||||||
|
chats: Chat[];
|
||||||
|
opened: boolean = false;
|
||||||
|
selectedChat: Chat;
|
||||||
|
private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
|
||||||
|
private _overlay: HTMLElement;
|
||||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _elementRef: ElementRef,
|
||||||
|
private _renderer2: Renderer2,
|
||||||
|
private _ngZone: NgZone,
|
||||||
|
private _quickChatService: QuickChatService,
|
||||||
|
private _scrollStrategyOptions: ScrollStrategyOptions
|
||||||
|
)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Decorated methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Host binding for component classes
|
||||||
|
*/
|
||||||
|
@HostBinding('class') get classList(): any
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
'quick-chat-opened': this.opened
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resize on 'input' and 'ngModelChange' events
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
@HostListener('input')
|
||||||
|
@HostListener('ngModelChange')
|
||||||
|
private _resizeMessageInput(): void
|
||||||
|
{
|
||||||
|
// This doesn't need to trigger Angular's change detection by itself
|
||||||
|
this._ngZone.runOutsideAngular(() => {
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
// Set the height to 'auto' so we can correctly read the scrollHeight
|
||||||
|
this.messageInput.nativeElement.style.height = 'auto';
|
||||||
|
|
||||||
|
// Get the scrollHeight and subtract the vertical padding
|
||||||
|
this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void
|
||||||
|
{
|
||||||
|
// Chat
|
||||||
|
this._quickChatService.chat$
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe((chat: Chat) => {
|
||||||
|
this.chat = chat;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Chats
|
||||||
|
this._quickChatService.chats$
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe((chats: Chat[]) => {
|
||||||
|
this.chats = chats;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Selected chat
|
||||||
|
this._quickChatService.chat$
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe((chat: Chat) => {
|
||||||
|
this.selectedChat = chat;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void
|
||||||
|
{
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open the panel
|
||||||
|
*/
|
||||||
|
open(): void
|
||||||
|
{
|
||||||
|
// Return if the panel has already opened
|
||||||
|
if ( this.opened )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open the panel
|
||||||
|
this._toggleOpened(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close the panel
|
||||||
|
*/
|
||||||
|
close(): void
|
||||||
|
{
|
||||||
|
// Return if the panel has already closed
|
||||||
|
if ( !this.opened )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close the panel
|
||||||
|
this._toggleOpened(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle the panel
|
||||||
|
*/
|
||||||
|
toggle(): void
|
||||||
|
{
|
||||||
|
if ( this.opened )
|
||||||
|
{
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Select the chat
|
||||||
|
*
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
selectChat(id: string): void
|
||||||
|
{
|
||||||
|
// Open the panel
|
||||||
|
this._toggleOpened(true);
|
||||||
|
|
||||||
|
// Get the chat data
|
||||||
|
this._quickChatService.getChatById(id).subscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Track by function for ngFor loops
|
||||||
|
*
|
||||||
|
* @param index
|
||||||
|
* @param item
|
||||||
|
*/
|
||||||
|
trackByFn(index: number, item: any): any
|
||||||
|
{
|
||||||
|
return item.id || index;
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Private methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the backdrop
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
private _showOverlay(): void
|
||||||
|
{
|
||||||
|
// Try hiding the overlay in case there is one already opened
|
||||||
|
this._hideOverlay();
|
||||||
|
|
||||||
|
// Create the backdrop element
|
||||||
|
this._overlay = this._renderer2.createElement('div');
|
||||||
|
|
||||||
|
// Return if overlay couldn't be create for some reason
|
||||||
|
if ( !this._overlay )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a class to the backdrop element
|
||||||
|
this._overlay.classList.add('quick-chat-overlay');
|
||||||
|
|
||||||
|
// Append the backdrop to the parent of the panel
|
||||||
|
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
|
||||||
|
|
||||||
|
// Enable block scroll strategy
|
||||||
|
this._scrollStrategy.enable();
|
||||||
|
|
||||||
|
// Add an event listener to the overlay
|
||||||
|
this._overlay.addEventListener('click', () => {
|
||||||
|
this.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the backdrop
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
private _hideOverlay(): void
|
||||||
|
{
|
||||||
|
if ( !this._overlay )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the backdrop still exists...
|
||||||
|
if ( this._overlay )
|
||||||
|
{
|
||||||
|
// Remove the backdrop
|
||||||
|
this._overlay.parentNode.removeChild(this._overlay);
|
||||||
|
this._overlay = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disable block scroll strategy
|
||||||
|
this._scrollStrategy.disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open/close the panel
|
||||||
|
*
|
||||||
|
* @param open
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
private _toggleOpened(open: boolean): void
|
||||||
|
{
|
||||||
|
// Set the opened
|
||||||
|
this.opened = open;
|
||||||
|
|
||||||
|
// If the panel opens, show the overlay
|
||||||
|
if ( open )
|
||||||
|
{
|
||||||
|
this._showOverlay();
|
||||||
|
}
|
||||||
|
// Otherwise, hide the overlay
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this._hideOverlay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/app/layout/common/quick-chat/quick-chat.module.ts
Normal file
32
src/app/layout/common/quick-chat/quick-chat.module.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { FuseDrawerModule } from '@fuse/components/drawer';
|
||||||
|
import { FuseScrollbarModule } from '@fuse/directives/scrollbar';
|
||||||
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
|
import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
QuickChatComponent
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
RouterModule,
|
||||||
|
MatButtonModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatInputModule,
|
||||||
|
FuseDrawerModule,
|
||||||
|
FuseScrollbarModule,
|
||||||
|
SharedModule,
|
||||||
|
],
|
||||||
|
exports : [
|
||||||
|
QuickChatComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class QuickChatModule
|
||||||
|
{
|
||||||
|
}
|
||||||
85
src/app/layout/common/quick-chat/quick-chat.service.ts
Normal file
85
src/app/layout/common/quick-chat/quick-chat.service.ts
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
|
||||||
|
import { map, switchMap, tap } from 'rxjs/operators';
|
||||||
|
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class QuickChatService
|
||||||
|
{
|
||||||
|
private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
|
||||||
|
private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject<Chat[]>(null);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(private _httpClient: HttpClient)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Accessors
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Getter for chat
|
||||||
|
*/
|
||||||
|
get chat$(): Observable<Chat>
|
||||||
|
{
|
||||||
|
return this._chat.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Getter for chat
|
||||||
|
*/
|
||||||
|
get chats$(): Observable<Chat[]>
|
||||||
|
{
|
||||||
|
return this._chats.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get chats
|
||||||
|
*/
|
||||||
|
getChats(): Observable<any>
|
||||||
|
{
|
||||||
|
return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe(
|
||||||
|
tap((response: Chat[]) => {
|
||||||
|
this._chats.next(response);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get chat
|
||||||
|
*
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
getChatById(id: string): Observable<any>
|
||||||
|
{
|
||||||
|
return this._httpClient.get<Chat>('api/apps/chat/chat', {params: {id}}).pipe(
|
||||||
|
map((chat) => {
|
||||||
|
|
||||||
|
// Update the chat
|
||||||
|
this._chat.next(chat);
|
||||||
|
|
||||||
|
// Return the chat
|
||||||
|
return chat;
|
||||||
|
}),
|
||||||
|
switchMap((chat) => {
|
||||||
|
|
||||||
|
if ( !chat )
|
||||||
|
{
|
||||||
|
return throwError('Could not found chat with id of ' + id + '!');
|
||||||
|
}
|
||||||
|
|
||||||
|
return of(chat);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
12
src/app/layout/common/quick-chat/quick-chat.types.ts
Normal file
12
src/app/layout/common/quick-chat/quick-chat.types.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
export interface Notification
|
||||||
|
{
|
||||||
|
id: string;
|
||||||
|
icon?: string;
|
||||||
|
image?: string;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
time: string;
|
||||||
|
link?: string;
|
||||||
|
useRouter?: boolean;
|
||||||
|
read: boolean;
|
||||||
|
}
|
||||||
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 -->
|
<!-- 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>
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -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 = [
|
||||||
|
|
@ -39,12 +40,13 @@ const layoutModules = [
|
||||||
declarations: [
|
declarations: [
|
||||||
LayoutComponent
|
LayoutComponent
|
||||||
],
|
],
|
||||||
imports : [
|
imports: [
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatTooltipModule,
|
MatTooltipModule,
|
||||||
FuseDrawerModule,
|
FuseDrawerModule,
|
||||||
SharedModule,
|
SharedModule,
|
||||||
...layoutModules
|
SettingsModule,
|
||||||
|
...layoutModules,
|
||||||
],
|
],
|
||||||
exports : [
|
exports : [
|
||||||
LayoutComponent,
|
LayoutComponent,
|
||||||
|
|
|
||||||
|
|
@ -45,13 +45,19 @@
|
||||||
</button>
|
</button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
<user></user>
|
<user></user>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -86,3 +92,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -54,13 +54,19 @@
|
||||||
</button>
|
</button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
<user></user>
|
<user></user>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,3 +84,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -35,13 +35,19 @@
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
<user></user>
|
<user></user>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -59,3 +65,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -65,12 +65,18 @@
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -87,3 +93,6 @@
|
||||||
</div>-->
|
</div>-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.mod
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -30,13 +30,19 @@
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
<user></user>
|
<user></user>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -54,3 +60,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -39,13 +39,19 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
<user></user>
|
<user></user>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -63,3 +69,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -44,13 +44,19 @@
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -67,3 +73,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -31,13 +31,19 @@
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<!-- Components -->
|
<!-- Components -->
|
||||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
|
||||||
<languages></languages>
|
<languages></languages>
|
||||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||||
<search [appearance]="'bar'"></search>
|
<search [appearance]="'bar'"></search>
|
||||||
<shortcuts></shortcuts>
|
<shortcuts></shortcuts>
|
||||||
<messages></messages>
|
<messages></messages>
|
||||||
<notifications></notifications>
|
<notifications></notifications>
|
||||||
|
<button
|
||||||
|
class="lg:hidden"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="quickChat.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||||
|
</button>
|
||||||
<user></user>
|
<user></user>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,3 +61,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick chat -->
|
||||||
|
<quick-chat #quickChat="quickChat"></quick-chat>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||||
|
import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
|
||||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||||
import { UserModule } from 'app/layout/common/user/user.module';
|
import { UserModule } from 'app/layout/common/user/user.module';
|
||||||
|
|
@ -32,6 +33,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
|
||||||
LanguagesModule,
|
LanguagesModule,
|
||||||
MessagesModule,
|
MessagesModule,
|
||||||
NotificationsModule,
|
NotificationsModule,
|
||||||
|
QuickChatModule,
|
||||||
SearchModule,
|
SearchModule,
|
||||||
ShortcutsModule,
|
ShortcutsModule,
|
||||||
UserModule,
|
UserModule,
|
||||||
|
|
|
||||||
|
|
@ -176,7 +176,7 @@ const config = {
|
||||||
* smaller by not generating useless utilities such as
|
* smaller by not generating useless utilities such as
|
||||||
* p-1/4 or m-480.
|
* p-1/4 or m-480.
|
||||||
*/
|
*/
|
||||||
extendedSpacing: {
|
extendedSpacing : {
|
||||||
// Fractional values
|
// Fractional values
|
||||||
'1/2': '50%',
|
'1/2': '50%',
|
||||||
'1/3': '33.333333%',
|
'1/3': '33.333333%',
|
||||||
|
|
@ -202,30 +202,36 @@ const config = {
|
||||||
'400': '100rem',
|
'400': '100rem',
|
||||||
'480': '120rem'
|
'480': '120rem'
|
||||||
},
|
},
|
||||||
height : theme => ({
|
height : theme => ({
|
||||||
...theme('extendedSpacing')
|
...theme('extendedSpacing')
|
||||||
}),
|
}),
|
||||||
minHeight : theme => ({
|
minHeight : theme => ({
|
||||||
...theme('spacing'),
|
...theme('spacing'),
|
||||||
...theme('extendedSpacing')
|
...theme('extendedSpacing')
|
||||||
}),
|
}),
|
||||||
maxHeight : theme => ({
|
maxHeight : theme => ({
|
||||||
...theme('extendedSpacing'),
|
...theme('extendedSpacing'),
|
||||||
none: 'none'
|
none: 'none'
|
||||||
}),
|
}),
|
||||||
width : theme => ({
|
width : theme => ({
|
||||||
...theme('extendedSpacing')
|
...theme('extendedSpacing')
|
||||||
}),
|
}),
|
||||||
minWidth : theme => ({
|
minWidth : theme => ({
|
||||||
...theme('spacing'),
|
...theme('spacing'),
|
||||||
...theme('extendedSpacing'),
|
...theme('extendedSpacing'),
|
||||||
screen: '100vw'
|
screen: '100vw'
|
||||||
}),
|
}),
|
||||||
maxWidth : theme => ({
|
maxWidth : theme => ({
|
||||||
...theme('spacing'),
|
...theme('spacing'),
|
||||||
...theme('extendedSpacing'),
|
...theme('extendedSpacing'),
|
||||||
screen: '100vw'
|
screen: '100vw'
|
||||||
}),
|
}),
|
||||||
|
transitionDuration : {
|
||||||
|
'400': '400ms'
|
||||||
|
},
|
||||||
|
transitionTimingFunction: {
|
||||||
|
'drawer': 'cubic-bezier(0.25, 0.8, 0.25, 1)'
|
||||||
|
},
|
||||||
|
|
||||||
// @tailwindcss/typography
|
// @tailwindcss/typography
|
||||||
typography: (theme) => ({
|
typography: (theme) => ({
|
||||||
|
|
@ -413,7 +419,7 @@ const config = {
|
||||||
transitionDuration : [],
|
transitionDuration : [],
|
||||||
transitionProperty : [],
|
transitionProperty : [],
|
||||||
transitionTimingFunction: [],
|
transitionTimingFunction: [],
|
||||||
translate : ['hover'],
|
translate : ['responsive', 'hover'],
|
||||||
userSelect : ['responsive'],
|
userSelect : ['responsive'],
|
||||||
visibility : ['responsive'],
|
visibility : ['responsive'],
|
||||||
whitespace : ['responsive'],
|
whitespace : ['responsive'],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user