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 Yemen
commit
d9dee128de
11
angular.json
11
angular.json
|
|
@ -1,6 +1,12 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"defaultCollection": "@angular-eslint/schematics",
|
||||
"cache": {
|
||||
"enabled": false
|
||||
}
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"fuse": {
|
||||
|
|
@ -137,8 +143,5 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "fuse",
|
||||
"cli": {
|
||||
"defaultCollection": "@angular-eslint/schematics"
|
||||
}
|
||||
"defaultProject": "fuse"
|
||||
}
|
||||
|
|
|
|||
6307
package-lock.json
generated
6307
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
76
package.json
76
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@fuse/starter",
|
||||
"version": "14.0.0",
|
||||
"version": "14.1.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
|
|
@ -14,26 +14,26 @@
|
|||
"lint": "ng lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "13.0.1",
|
||||
"@angular/cdk": "13.0.0",
|
||||
"@angular/common": "13.0.1",
|
||||
"@angular/compiler": "13.0.1",
|
||||
"@angular/core": "13.0.1",
|
||||
"@angular/forms": "13.0.1",
|
||||
"@angular/material": "13.0.0",
|
||||
"@angular/material-moment-adapter": "13.0.0",
|
||||
"@angular/platform-browser": "13.0.1",
|
||||
"@angular/platform-browser-dynamic": "13.0.1",
|
||||
"@angular/router": "13.0.1",
|
||||
"@ngneat/transloco": "3.1.0",
|
||||
"apexcharts": "3.29.0",
|
||||
"@angular/animations": "13.1.1",
|
||||
"@angular/cdk": "13.1.1",
|
||||
"@angular/common": "13.1.1",
|
||||
"@angular/compiler": "13.1.1",
|
||||
"@angular/core": "13.1.1",
|
||||
"@angular/forms": "13.1.1",
|
||||
"@angular/material": "13.1.1",
|
||||
"@angular/material-moment-adapter": "13.1.1",
|
||||
"@angular/platform-browser": "13.1.1",
|
||||
"@angular/platform-browser-dynamic": "13.1.1",
|
||||
"@angular/router": "13.1.1",
|
||||
"@ngneat/transloco": "3.1.1",
|
||||
"apexcharts": "3.32.0",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "11.3.1",
|
||||
"lodash-es": "4.17.21",
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.12",
|
||||
"ng-apexcharts": "1.6.0",
|
||||
"ngx-markdown": "13.0.0",
|
||||
"ngx-quill": "16.0.1",
|
||||
"ngx-quill": "16.1.1",
|
||||
"perfect-scrollbar": "1.5.3",
|
||||
"quill": "1.3.7",
|
||||
"rxjs": "7.4.0",
|
||||
|
|
@ -41,41 +41,41 @@
|
|||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "13.0.2",
|
||||
"@angular-eslint/builder": "12.6.1",
|
||||
"@angular-eslint/eslint-plugin": "12.6.1",
|
||||
"@angular-eslint/eslint-plugin-template": "12.6.1",
|
||||
"@angular-eslint/schematics": "12.6.1",
|
||||
"@angular-eslint/template-parser": "12.6.1",
|
||||
"@angular/cli": "13.0.2",
|
||||
"@angular/compiler-cli": "13.0.1",
|
||||
"@tailwindcss/aspect-ratio": "0.3.0",
|
||||
"@tailwindcss/line-clamp": "0.2.2",
|
||||
"@tailwindcss/typography": "0.4.1",
|
||||
"@angular-devkit/build-angular": "13.1.2",
|
||||
"@angular-eslint/builder": "13.0.1",
|
||||
"@angular-eslint/eslint-plugin": "13.0.1",
|
||||
"@angular-eslint/eslint-plugin-template": "13.0.1",
|
||||
"@angular-eslint/schematics": "13.0.1",
|
||||
"@angular-eslint/template-parser": "13.0.1",
|
||||
"@angular/cli": "13.1.2",
|
||||
"@angular/compiler-cli": "13.1.1",
|
||||
"@tailwindcss/aspect-ratio": "0.4.0",
|
||||
"@tailwindcss/line-clamp": "0.3.0",
|
||||
"@tailwindcss/typography": "0.5.0",
|
||||
"@types/chroma-js": "2.1.3",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "3.10.2",
|
||||
"@types/lodash": "4.14.176",
|
||||
"@types/lodash": "4.14.178",
|
||||
"@types/lodash-es": "4.17.5",
|
||||
"@types/node": "12.20.37",
|
||||
"@typescript-eslint/eslint-plugin": "5.3.1",
|
||||
"@typescript-eslint/parser": "5.3.1",
|
||||
"@types/node": "12.20.38",
|
||||
"@typescript-eslint/eslint-plugin": "5.8.0",
|
||||
"@typescript-eslint/parser": "5.8.0",
|
||||
"autoprefixer": "10.4.0",
|
||||
"chroma-js": "2.1.2",
|
||||
"eslint": "7.32.0",
|
||||
"eslint": "8.5.0",
|
||||
"eslint-plugin-import": "2.25.3",
|
||||
"eslint-plugin-jsdoc": "37.0.3",
|
||||
"eslint-plugin-jsdoc": "37.4.0",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"jasmine-core": "3.10.1",
|
||||
"karma": "6.3.8",
|
||||
"karma": "6.3.9",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage": "2.0.3",
|
||||
"karma-coverage": "2.1.0",
|
||||
"karma-jasmine": "4.0.1",
|
||||
"karma-jasmine-html-reporter": "1.7.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.3.11",
|
||||
"tailwindcss": "2.2.19",
|
||||
"typescript": "4.4.4"
|
||||
"postcss": "8.4.5",
|
||||
"tailwindcss": "3.0.7",
|
||||
"typescript": "4.5.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
|||
import { FuseLoadingModule } from '@fuse/services/loading';
|
||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
||||
import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
|
||||
import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
|
||||
import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -14,7 +13,6 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
|||
FuseLoadingModule,
|
||||
FuseMediaWatcherModule,
|
||||
FuseSplashScreenModule,
|
||||
FuseTailwindConfigModule,
|
||||
FuseUtilsModule
|
||||
],
|
||||
providers: [
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
||||
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
|
||||
import { fromPairs } from 'lodash-es';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
|
||||
@Injectable()
|
||||
export class FuseMediaWatcherService
|
||||
|
|
@ -13,11 +14,12 @@ export class FuseMediaWatcherService
|
|||
*/
|
||||
constructor(
|
||||
private _breakpointObserver: BreakpointObserver,
|
||||
private _fuseTailwindConfigService: FuseTailwindService
|
||||
private _fuseConfigService: FuseConfigService
|
||||
)
|
||||
{
|
||||
this._fuseTailwindConfigService.tailwindConfig$.pipe(
|
||||
switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
|
||||
this._fuseConfigService.config$.pipe(
|
||||
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
|
||||
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
|
||||
map((state) => {
|
||||
|
||||
// Prepare the observable values and set their defaults
|
||||
|
|
@ -29,7 +31,7 @@ export class FuseMediaWatcherService
|
|||
for ( const [query] of matchingBreakpoints )
|
||||
{
|
||||
// Find the alias of the matching query
|
||||
const matchingAlias = Object.entries(config.breakpoints).find(([alias, q]) => q === query)[0];
|
||||
const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
|
||||
|
||||
// Add the matching query to the observable values
|
||||
if ( matchingAlias )
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export * from '@fuse/services/tailwind/public-api';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from '@fuse/services/tailwind/tailwind.module';
|
||||
export * from '@fuse/services/tailwind/tailwind.service';
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
FuseTailwindService
|
||||
]
|
||||
})
|
||||
export class FuseTailwindConfigModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseTailwindConfigService: FuseTailwindService)
|
||||
{
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { fromPairs, map } from 'lodash-es';
|
||||
import * as extractedTailwindConfigStyle from '@fuse/styles/core/tailwind-config.scss';
|
||||
|
||||
@Injectable()
|
||||
export class FuseTailwindService
|
||||
{
|
||||
private _tailwindConfig: ReplaySubject<any> = new ReplaySubject<any>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
// Prepare the config object
|
||||
const config: any = {};
|
||||
|
||||
// Extract the style from the class
|
||||
const regexpForClass = /\.fuse-tailwind-extracted-config\s\{([\s\S]*)\}/g;
|
||||
const style = regexpForClass.exec(extractedTailwindConfigStyle.default)[1].trim();
|
||||
|
||||
// Extract the rules
|
||||
const regexp = /(--[\s\S]*?):'([\s\S]*?)';/g;
|
||||
let rules = regexp.exec(style);
|
||||
|
||||
// Add to the config
|
||||
while ( rules !== null )
|
||||
{
|
||||
const configGroup = /--([\s\S]*?)-/g.exec(rules[1])[1];
|
||||
if ( !config[configGroup] )
|
||||
{
|
||||
config[configGroup] = {};
|
||||
}
|
||||
|
||||
config[configGroup][rules[1].replace(/(--[\s\S]*?-)/g, '')] = rules[2];
|
||||
rules = regexp.exec(style);
|
||||
}
|
||||
|
||||
// Parse the themes objects
|
||||
config.themes = fromPairs(map(config.themes, (value, key) => [key, JSON.parse(value)]));
|
||||
|
||||
// Execute the observable with the config
|
||||
this._tailwindConfig.next(config);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for _tailwindConfig
|
||||
*/
|
||||
get tailwindConfig$(): Observable<any>
|
||||
{
|
||||
return this._tailwindConfig.asObservable();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ Any configuration we need from Tailwind's config file will be extracted here so we can import this
|
||||
/* @ file from "config.ts" to access the extracted configuration from TypeScript
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
@variants fuse-tailwind-extracted-config {
|
||||
}
|
||||
|
|
@ -1,11 +1,8 @@
|
|||
/* 1. Core */
|
||||
@import 'core/tailwind-config';
|
||||
|
||||
/* 2. Components */
|
||||
/* 1. Components */
|
||||
@import 'components/example-viewer';
|
||||
@import 'components/input';
|
||||
|
||||
/* 3. Overrides */
|
||||
/* 2. Overrides */
|
||||
@import 'overrides/angular-material';
|
||||
@import 'overrides/highlightjs';
|
||||
@import 'overrides/perfect-scrollbar';
|
||||
|
|
|
|||
|
|
@ -72,38 +72,38 @@ body .light {
|
|||
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
||||
foreground: (
|
||||
base: #000000,
|
||||
divider: #E2E8F0, /* blueGray.200 */
|
||||
dividers: #E2E8F0, /* blueGray.200 */
|
||||
disabled: #94A3B8, /* blueGray.400 */
|
||||
disabled-button: #94A3B8, /* blueGray.400 */
|
||||
disabled-text: #94A3B8, /* blueGray.400 */
|
||||
divider: #E2E8F0, /* slate.200 */
|
||||
dividers: #E2E8F0, /* slate.200 */
|
||||
disabled: #94A3B8, /* slate.400 */
|
||||
disabled-button: #94A3B8, /* slate.400 */
|
||||
disabled-text: #94A3B8, /* slate.400 */
|
||||
elevation: #000000,
|
||||
hint-text: #94A3B8, /* blueGray.400 */
|
||||
secondary-text: #64748B, /* blueGray.500 */
|
||||
icon: #64748B, /* blueGray.500 */
|
||||
icons: #64748B, /* blueGray.500 */
|
||||
mat-icon: #64748B, /* blueGray.500 */
|
||||
text: #1E293B, /* blueGray.800 */
|
||||
slider-min: #1E293B, /* blueGray.800 */
|
||||
slider-off: #CBD5E1, /* blueGray.300 */
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||
hint-text: #94A3B8, /* slate.400 */
|
||||
secondary-text: #64748B, /* slate.500 */
|
||||
icon: #64748B, /* slate.500 */
|
||||
icons: #64748B, /* slate.500 */
|
||||
mat-icon: #64748B, /* slate.500 */
|
||||
text: #1E293B, /* slate.800 */
|
||||
slider-min: #1E293B, /* slate.800 */
|
||||
slider-off: #CBD5E1, /* slate.300 */
|
||||
slider-off-active: #94A3B8 /* slate.400 */
|
||||
),
|
||||
background: (
|
||||
status-bar: #CBD5E1, /* blueGray.300 */
|
||||
status-bar: #CBD5E1, /* slate.300 */
|
||||
app-bar: #FFFFFF,
|
||||
background: #F1F5F9, /* blueGray.100 */
|
||||
hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
|
||||
background: #F1F5F9, /* slate.100 */
|
||||
hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
|
||||
card: #FFFFFF,
|
||||
dialog: #FFFFFF,
|
||||
disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
|
||||
disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
|
||||
raised-button: #FFFFFF,
|
||||
focused-button: #64748B, /* blueGray.500 */
|
||||
selected-button: #E2E8F0, /* blueGray.200 */
|
||||
selected-disabled-button: #E2E8F0, /* blueGray.200 */
|
||||
disabled-button-toggle: #CBD5E1, /* blueGray.300 */
|
||||
unselected-chip: #E2E8F0, /* blueGray.200 */
|
||||
disabled-list-option: #CBD5E1, /* blueGray.300 */
|
||||
tooltip: #1E293B /* blueGray.800 */
|
||||
focused-button: #64748B, /* slate.500 */
|
||||
selected-button: #E2E8F0, /* slate.200 */
|
||||
selected-disabled-button: #E2E8F0, /* slate.200 */
|
||||
disabled-button-toggle: #CBD5E1, /* slate.300 */
|
||||
unselected-chip: #E2E8F0, /* slate.200 */
|
||||
disabled-list-option: #CBD5E1, /* slate.300 */
|
||||
tooltip: #1E293B /* slate.800 */
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
@ -126,38 +126,38 @@ body .dark {
|
|||
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
||||
foreground: (
|
||||
base: #FFFFFF,
|
||||
divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
||||
dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
||||
disabled: #475569, /* blueGray.600 */
|
||||
disabled-button: #1E293B, /* blueGray.800 */
|
||||
disabled-text: #475569, /* blueGray.600 */
|
||||
divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
||||
dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
||||
disabled: #475569, /* slate.600 */
|
||||
disabled-button: #1E293B, /* slate.800 */
|
||||
disabled-text: #475569, /* slate.600 */
|
||||
elevation: #000000,
|
||||
hint-text: #64748B, /* blueGray.500 */
|
||||
secondary-text: #94A3B8, /* blueGray.400 */
|
||||
icon: #F1F5F9, /* blueGray.100 */
|
||||
icons: #F1F5F9, /* blueGray.100 */
|
||||
mat-icon: #94A3B8, /* blueGray.400 */
|
||||
hint-text: #64748B, /* slate.500 */
|
||||
secondary-text: #94A3B8, /* slate.400 */
|
||||
icon: #F1F5F9, /* slate.100 */
|
||||
icons: #F1F5F9, /* slate.100 */
|
||||
mat-icon: #94A3B8, /* slate.400 */
|
||||
text: #FFFFFF,
|
||||
slider-min: #FFFFFF,
|
||||
slider-off: #64748B, /* blueGray.500 */
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||
slider-off: #64748B, /* slate.500 */
|
||||
slider-off-active: #94A3B8 /* slate.400 */
|
||||
),
|
||||
background: (
|
||||
status-bar: #0F172A, /* blueGray.900 */
|
||||
app-bar: #0F172A, /* blueGray.900 */
|
||||
background: #0F172A, /* blueGray.900 */
|
||||
status-bar: #0F172A, /* slate.900 */
|
||||
app-bar: #0F172A, /* slate.900 */
|
||||
background: #0F172A, /* slate.900 */
|
||||
hover: rgba(255, 255, 255, 0.05),
|
||||
card: #1E293B, /* blueGray.800 */
|
||||
dialog: #1E293B, /* blueGray.800 */
|
||||
disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
|
||||
raised-button: #0F172A, /* blueGray.900 */
|
||||
focused-button: #E2E8F0, /* blueGray.200 */
|
||||
card: #1E293B, /* slate.800 */
|
||||
dialog: #1E293B, /* slate.800 */
|
||||
disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
|
||||
raised-button: #0F172A, /* slate.900 */
|
||||
focused-button: #E2E8F0, /* slate.200 */
|
||||
selected-button: rgba(255, 255, 255, 0.05),
|
||||
selected-disabled-button: #1E293B, /* blueGray.800 */
|
||||
disabled-button-toggle: #0F172A, /* blueGray.900 */
|
||||
unselected-chip: #475569, /* blueGray.600 */
|
||||
disabled-list-option: #E2E8F0, /* blueGray.200 */
|
||||
tooltip: #64748B /* blueGray.500 */
|
||||
selected-disabled-button: #1E293B, /* slate.800 */
|
||||
disabled-button-toggle: #0F172A, /* slate.900 */
|
||||
unselected-chip: #475569, /* slate.600 */
|
||||
disabled-list-option: #E2E8F0, /* slate.200 */
|
||||
tooltip: #64748B /* slate.500 */
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
const plugin = require('tailwindcss/plugin');
|
||||
const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
|
||||
|
||||
const extractConfig = plugin(({
|
||||
addVariant,
|
||||
theme
|
||||
}) =>
|
||||
{
|
||||
addVariant('fuse-tailwind-extracted-config', ({container}) =>
|
||||
{
|
||||
// Prepare the extracted config variable
|
||||
let extractedConfig = '';
|
||||
|
||||
// Breakpoints
|
||||
Object.entries(theme('screens')).forEach(([key, value]) =>
|
||||
{
|
||||
extractedConfig = `${extractedConfig} --breakpoints-${key}:'${buildMediaQuery(value)}';`;
|
||||
});
|
||||
|
||||
// Themes
|
||||
(theme('fuse.themes')).forEach((value) =>
|
||||
{
|
||||
Object.entries(value).forEach(([key, value]) =>
|
||||
{
|
||||
extractedConfig = `${extractedConfig} --themes-${key}:'${JSON.stringify(value)}';`;
|
||||
});
|
||||
});
|
||||
|
||||
// Append the extracted config
|
||||
container.append(`
|
||||
.fuse-tailwind-extracted-config {
|
||||
${extractedConfig}
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = extractConfig;
|
||||
|
|
@ -1,17 +1,14 @@
|
|||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
const iconSize = plugin(({
|
||||
addUtilities,
|
||||
theme,
|
||||
e,
|
||||
variants
|
||||
module.exports = plugin(
|
||||
({
|
||||
matchUtilities,
|
||||
theme
|
||||
}) =>
|
||||
{
|
||||
const values = theme('iconSize');
|
||||
|
||||
addUtilities(
|
||||
Object.entries(values).map(([key, value]) => ({
|
||||
[`.${e(`icon-size-${key}`)}`]: {
|
||||
matchUtilities(
|
||||
{
|
||||
'icon-size': (value) => ({
|
||||
width : value,
|
||||
height : value,
|
||||
minWidth : value,
|
||||
|
|
@ -22,13 +19,14 @@ const iconSize = plugin(({
|
|||
width : value,
|
||||
height: value
|
||||
}
|
||||
}
|
||||
})),
|
||||
variants('iconSize')
|
||||
);
|
||||
})
|
||||
},
|
||||
{
|
||||
values: theme('iconSize')
|
||||
});
|
||||
},
|
||||
{
|
||||
theme : {
|
||||
theme: {
|
||||
iconSize: {
|
||||
3 : '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
|
|
@ -47,10 +45,6 @@ const iconSize = plugin(({
|
|||
22 : '5.5rem',
|
||||
24 : '6rem'
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
iconSize: ['responsive']
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = iconSize;
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
// @ Map variable colors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
|
||||
themeName === 'default' ? 'body' : `body.theme-${e(themeName)}`,
|
||||
themeName === 'default' ? '.theme-default' : `.theme-${e(themeName)}`,
|
||||
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
|
||||
[
|
||||
e(paletteName),
|
||||
|
|
@ -185,47 +185,46 @@ const theming = plugin.withOptions((options) => ({
|
|||
light: {
|
||||
'bg-app-bar' : '#FFFFFF',
|
||||
'bg-card' : '#FFFFFF',
|
||||
'bg-default' : colors.blueGray[100],
|
||||
'bg-default' : colors.slate[100],
|
||||
'bg-dialog' : '#FFFFFF',
|
||||
'bg-hover' : chroma(colors.blueGray[400]).alpha(0.12).css(),
|
||||
'bg-status-bar': colors.blueGray[300]
|
||||
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
|
||||
'bg-status-bar': colors.slate[300]
|
||||
},
|
||||
dark : {
|
||||
'bg-app-bar' : colors.blueGray[900],
|
||||
'bg-card' : colors.blueGray[800],
|
||||
'bg-default' : colors.blueGray[900],
|
||||
'bg-dialog' : colors.blueGray[800],
|
||||
'bg-app-bar' : colors.slate[900],
|
||||
'bg-card' : colors.slate[800],
|
||||
'bg-default' : colors.slate[900],
|
||||
'bg-dialog' : colors.slate[800],
|
||||
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
|
||||
'bg-status-bar': colors.blueGray[900]
|
||||
'bg-status-bar': colors.slate[900]
|
||||
}
|
||||
},
|
||||
foreground: {
|
||||
light: {
|
||||
'text-default' : colors.blueGray[800],
|
||||
'text-secondary': colors.blueGray[500],
|
||||
'text-hint' : colors.blueGray[400],
|
||||
'text-disabled' : colors.blueGray[400],
|
||||
'border' : colors.blueGray[200],
|
||||
'divider' : colors.blueGray[200],
|
||||
'icon' : colors.blueGray[500],
|
||||
'mat-icon' : colors.blueGray[500]
|
||||
'text-default' : colors.slate[800],
|
||||
'text-secondary': colors.slate[500],
|
||||
'text-hint' : colors.slate[400],
|
||||
'text-disabled' : colors.slate[400],
|
||||
'border' : colors.slate[200],
|
||||
'divider' : colors.slate[200],
|
||||
'icon' : colors.slate[500],
|
||||
'mat-icon' : colors.slate[500]
|
||||
},
|
||||
dark : {
|
||||
'text-default' : '#FFFFFF',
|
||||
'text-secondary': colors.blueGray[400],
|
||||
'text-hint' : colors.blueGray[500],
|
||||
'text-disabled' : colors.blueGray[600],
|
||||
'border' : chroma(colors.blueGray[100]).alpha(0.12).css(),
|
||||
'divider' : chroma(colors.blueGray[100]).alpha(0.12).css(),
|
||||
'icon' : colors.blueGray[400],
|
||||
'mat-icon' : colors.blueGray[400]
|
||||
'text-secondary': colors.slate[400],
|
||||
'text-hint' : colors.slate[500],
|
||||
'text-disabled' : colors.slate[600],
|
||||
'border' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||
'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||
'icon' : colors.slate[400],
|
||||
'mat-icon' : colors.slate[400]
|
||||
}
|
||||
}
|
||||
},
|
||||
themes : generateThemesObject(options.themes)
|
||||
}
|
||||
},
|
||||
variants: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
const utilities = plugin(({
|
||||
module.exports = plugin(({
|
||||
addComponents
|
||||
}) =>
|
||||
{
|
||||
|
|
@ -54,9 +54,6 @@ const utilities = plugin(({
|
|||
'--tw-ring-opacity': '1 !important',
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
|
||||
}
|
||||
},
|
||||
{
|
||||
variants: ['dark', 'responsive', 'group-hover', 'hover']
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -65,11 +62,6 @@ const utilities = plugin(({
|
|||
'.bg-hover': {
|
||||
backgroundColor: 'var(--fuse-bg-hover) !important'
|
||||
}
|
||||
},
|
||||
{
|
||||
variants: ['dark', 'group-hover', 'hover']
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
module.exports = utilities;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import { Version } from '@fuse/version/version';
|
||||
|
||||
export const FUSE_VERSION = new Version('14.0.0').full;
|
||||
export const FUSE_VERSION = new Version('14.1.0').full;
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ import { Layout } from 'app/layout/layout.types';
|
|||
|
||||
// Types
|
||||
export type Scheme = 'auto' | 'dark' | 'light';
|
||||
export type Theme = 'default' | string;
|
||||
export type Screens = { [key: string]: string };
|
||||
export type Theme = 'theme-default' | string;
|
||||
export type Themes = { id: string; name: string }[];
|
||||
|
||||
/**
|
||||
* AppConfig interface. Update this interface to strictly type your config
|
||||
|
|
@ -12,7 +14,9 @@ export interface AppConfig
|
|||
{
|
||||
layout: Layout;
|
||||
scheme: Scheme;
|
||||
screens: Screens;
|
||||
theme: Theme;
|
||||
themes: Themes;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -22,9 +26,46 @@ export interface AppConfig
|
|||
* If you need to store global configuration for your app, you can use this
|
||||
* object to set the defaults. To access, update and reset the config, use
|
||||
* FuseConfigService and its methods.
|
||||
*
|
||||
* "Screens" are carried over to the BreakpointObserver for accessing them within
|
||||
* components, and they are required.
|
||||
*
|
||||
* "Themes" are required for Tailwind to generate themes.
|
||||
*/
|
||||
export const appConfig: AppConfig = {
|
||||
layout: 'classy',
|
||||
scheme: 'light',
|
||||
theme : 'default'
|
||||
layout : 'classy',
|
||||
scheme : 'light',
|
||||
screens: {
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
xl: '1440px'
|
||||
},
|
||||
theme : 'theme-default',
|
||||
themes : [
|
||||
{
|
||||
id : 'theme-default',
|
||||
name: 'Default'
|
||||
},
|
||||
{
|
||||
id : 'theme-brand',
|
||||
name: 'Brand'
|
||||
},
|
||||
{
|
||||
id : 'theme-teal',
|
||||
name: 'Teal'
|
||||
},
|
||||
{
|
||||
id : 'theme-rose',
|
||||
name: 'Rose'
|
||||
},
|
||||
{
|
||||
id : 'theme-purple',
|
||||
name: 'Purple'
|
||||
},
|
||||
{
|
||||
id : 'theme-amber',
|
||||
name: 'Amber'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
#messagesOrigin>
|
||||
<ng-container *ngIf="unreadCount > 0">
|
||||
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
|
||||
<span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
|
||||
<span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
|
||||
{{unreadCount}}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="sm:hidden -ml-1 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
<ng-template #messageContent>
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="message.icon && !message.image">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="message.icon">
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
<!-- Image -->
|
||||
<ng-container *ngIf="message.image">
|
||||
<img
|
||||
class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
[src]="message.image"
|
||||
[alt]="'Message image'">
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
#notificationsOrigin>
|
||||
<ng-container *ngIf="unreadCount > 0">
|
||||
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
|
||||
<span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
|
||||
<span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
|
||||
{{unreadCount}}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="sm:hidden -ml-1 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
<ng-template #notificationContent>
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="notification.icon && !notification.image">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="notification.icon">
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<!-- Image -->
|
||||
<ng-container *ngIf="notification.image">
|
||||
<img
|
||||
class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
[src]="notification.image"
|
||||
[alt]="'Notification image'">
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
|
||||
<div
|
||||
class="flex flex-col w-full sm:w-96 h-full transform transition-transform duration-400 ease-drawer bg-card"
|
||||
class="flex flex-col w-full sm:w-96 h-full 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 -->
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<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">
|
||||
<div class="flex flex-col flex-auto 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')">
|
||||
|
|
@ -108,20 +108,20 @@
|
|||
<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}">
|
||||
'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}">
|
||||
'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"
|
||||
class="absolute bottom-0 w-3"
|
||||
[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}">
|
||||
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
|
||||
<ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
<div
|
||||
class="my-0.5 text-sm font-medium text-secondary"
|
||||
[ngClass]="{'mr-3': message.isMine,
|
||||
'ml-3': !message.isMine}">
|
||||
'ml-3': !message.isMine}">
|
||||
{{message.createdAt | date:'HH:mm'}}
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<button
|
||||
mat-icon-button>
|
||||
<mat-icon
|
||||
class="transform rotate-90"
|
||||
class="rotate-90"
|
||||
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
||||
</button>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
|
||||
class="absolute inset-0 flex items-center shrink-0 z-99 bg-card"
|
||||
*ngIf="opened"
|
||||
@slideInTop
|
||||
@slideOutTop>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
<button
|
||||
class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
|
||||
class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5"
|
||||
mat-icon-button
|
||||
(click)="close()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
#contactResult
|
||||
let-result>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
|
||||
<div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
|
||||
<img
|
||||
*ngIf="result.avatar"
|
||||
[src]="result.avatar">
|
||||
|
|
|
|||
|
|
@ -38,18 +38,19 @@
|
|||
<!-- 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">
|
||||
<ng-container *ngFor="let theme of config.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])">
|
||||
[class.ring-2]="config.theme === theme.id"
|
||||
[ngClass]="theme.id"
|
||||
(click)="setTheme(theme.id)">
|
||||
<div
|
||||
class="flex-0 w-3 h-3 rounded-full"
|
||||
[style.background-color]="theme[1].primary"></div>
|
||||
class="flex-0 w-3 h-3 rounded-full bg-primary"
|
||||
></div>
|
||||
<div
|
||||
class="ml-2.5 font-medium leading-5 truncate"
|
||||
[class.text-secondary]="config.theme !== theme[0]">
|
||||
{{theme[0] | titlecase}}
|
||||
[class.text-secondary]="config.theme !== theme.id">
|
||||
{{theme.name}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
|||
import { Router } from '@angular/router';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind';
|
||||
import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
|
||||
import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config';
|
||||
import { Layout } from 'app/layout/layout.types';
|
||||
|
||||
@Component({
|
||||
|
|
@ -27,7 +26,7 @@ export class SettingsComponent implements OnInit, OnDestroy
|
|||
layout: Layout;
|
||||
scheme: 'dark' | 'light';
|
||||
theme: string;
|
||||
themes: [string, any][] = [];
|
||||
themes: Themes;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
|
|
@ -35,8 +34,7 @@ export class SettingsComponent implements OnInit, OnDestroy
|
|||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseTailwindService: FuseTailwindService
|
||||
private _fuseConfigService: FuseConfigService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
|
@ -50,13 +48,6 @@ export class SettingsComponent implements OnInit, OnDestroy
|
|||
*/
|
||||
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))
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="sm:hidden -ml-1 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
</a>
|
||||
<!-- Link content template -->
|
||||
<ng-template #linkContent>
|
||||
<div class="relative flex flex-shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<mat-icon
|
||||
class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5"
|
||||
*ngIf="mode === 'modify'"
|
||||
|
|
|
|||
|
|
@ -203,6 +203,6 @@ export class LayoutComponent implements OnInit, OnDestroy
|
|||
});
|
||||
|
||||
// Add class name for the currently selected theme
|
||||
this._document.body.classList.add(`theme-${this.theme}`);
|
||||
this._document.body.classList.add(this.theme);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@
|
|||
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center w-full mt-6">
|
||||
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
|
||||
<div class="w-full whitespace-nowrap text-ellipsis overflow-hidden text-center leading-normal font-medium">
|
||||
{{user.name}}
|
||||
</div>
|
||||
<div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
|
||||
<div class="w-full mt-0.5 whitespace-nowrap text-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
|
||||
{{user.email}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@
|
|||
<div class="flex items-center w-full px-6 py-8 border-t">
|
||||
<user></user>
|
||||
<div class="flex flex-col w-full ml-4 overflow-hidden">
|
||||
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
|
||||
<div class="w-full whitespace-nowrap text-ellipsis overflow-hidden leading-normal text-current opacity-80">
|
||||
{{user.name}}
|
||||
</div>
|
||||
<div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
|
||||
<div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50">
|
||||
brian.hughes@company.com
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: 'feather',
|
||||
name : 'Feather',
|
||||
grid : 6,
|
||||
grid : 'icon-size-6',
|
||||
list : cloneDeep(this._feather)
|
||||
}
|
||||
]);
|
||||
|
|
@ -56,7 +56,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: 'heroicons_outline',
|
||||
name : 'Heroicons Outline',
|
||||
grid : 6,
|
||||
grid : 'icon-size-6',
|
||||
list : cloneDeep(this._heroicons)
|
||||
}
|
||||
]);
|
||||
|
|
@ -71,7 +71,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: 'heroicons_solid',
|
||||
name : 'Heroicons Solid',
|
||||
grid : 5,
|
||||
grid : 'icon-size-5',
|
||||
list : cloneDeep(this._heroicons)
|
||||
}
|
||||
]);
|
||||
|
|
@ -86,7 +86,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: 'iconsmind',
|
||||
name : 'Iconsmind',
|
||||
grid : 10,
|
||||
grid : 'icon-size-10',
|
||||
list : cloneDeep(this._iconsmind)
|
||||
}
|
||||
]);
|
||||
|
|
@ -101,7 +101,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: 'mat_solid',
|
||||
name : 'Material Solid',
|
||||
grid : 6,
|
||||
grid : 'icon-size-6',
|
||||
list : cloneDeep(this._material)
|
||||
}
|
||||
]);
|
||||
|
|
@ -116,7 +116,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: 'mat_outline',
|
||||
name : 'Material Outline',
|
||||
grid : 6,
|
||||
grid : 'icon-size-6',
|
||||
list : cloneDeep(this._material)
|
||||
}
|
||||
]);
|
||||
|
|
@ -131,7 +131,7 @@ export class IconsMockApi
|
|||
{
|
||||
namespace: '',
|
||||
name : 'Material Twotone',
|
||||
grid : 6,
|
||||
grid : 'icon-size-6',
|
||||
list : cloneDeep(this._material)
|
||||
}
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
content="Admin Template and Starter Kit with Angular, Angular Material Components and TailwindCSS">
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Fuse,HTML,CSS,Angular,Angular 2,Angular 10,Angular 11,Angular 12,Material,Material 2,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit">
|
||||
content="Fuse,HTML,CSS,Angular,Angular 2,Angular 11,Angular 12,Angular 13,Material,Material 2,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
const path = require('path');
|
||||
const process = require('process');
|
||||
const colors = require('tailwindcss/colors');
|
||||
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||
const generatePalette = require(path.resolve(__dirname, ('src/@fuse/tailwind/utils/generate-palette')));
|
||||
|
|
@ -25,8 +24,8 @@ const themes = {
|
|||
DEFAULT: colors.indigo[600]
|
||||
},
|
||||
accent : {
|
||||
...colors.blueGray,
|
||||
DEFAULT: colors.blueGray[800]
|
||||
...colors.slate,
|
||||
DEFAULT: colors.slate[800]
|
||||
},
|
||||
warn : {
|
||||
...colors.red,
|
||||
|
|
@ -41,7 +40,7 @@ const themes = {
|
|||
'brand' : {
|
||||
primary: customPalettes.brand
|
||||
},
|
||||
'indigo': {
|
||||
'teal' : {
|
||||
primary: {
|
||||
...colors.teal,
|
||||
DEFAULT: colors.teal[600]
|
||||
|
|
@ -65,38 +64,10 @@ const themes = {
|
|||
* Tailwind configuration
|
||||
*/
|
||||
const config = {
|
||||
experimental: {},
|
||||
future : {},
|
||||
darkMode : 'class',
|
||||
important : true,
|
||||
purge : {
|
||||
enabled: process.env.TAILWIND_MODE === 'build',
|
||||
content: ['./src/**/*.{html,scss,ts}'],
|
||||
options: {
|
||||
safelist: {
|
||||
standard: ['dark'],
|
||||
deep : [/^theme/, /^mat/]
|
||||
}
|
||||
}
|
||||
},
|
||||
theme : {
|
||||
colors : {
|
||||
transparent: 'transparent',
|
||||
current : 'currentColor',
|
||||
black : colors.black,
|
||||
white : colors.white,
|
||||
pink : colors.pink,
|
||||
gray : colors.blueGray,
|
||||
red : colors.red,
|
||||
orange : colors.orange,
|
||||
amber : colors.amber,
|
||||
yellow : colors.yellow,
|
||||
green : colors.green,
|
||||
teal : colors.teal,
|
||||
blue : colors.blue,
|
||||
indigo : colors.indigo,
|
||||
purple : colors.purple
|
||||
},
|
||||
darkMode : 'class',
|
||||
content : ['./src/**/*.{html,scss,ts}'],
|
||||
important : true,
|
||||
theme : {
|
||||
fontSize: {
|
||||
'xs' : '0.625rem',
|
||||
'sm' : '0.75rem',
|
||||
|
|
@ -115,39 +86,41 @@ const config = {
|
|||
'10xl': '8rem'
|
||||
},
|
||||
screens : {
|
||||
print: {'raw': 'print'},
|
||||
sm : '600px',
|
||||
md : '960px',
|
||||
lg : '1280px',
|
||||
xl : '1440px'
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
xl: '1440px'
|
||||
},
|
||||
extend : {
|
||||
animation : {
|
||||
animation : {
|
||||
'spin-slow': 'spin 3s linear infinite'
|
||||
},
|
||||
flex : {
|
||||
colors : {
|
||||
gray: colors.slate
|
||||
},
|
||||
flex : {
|
||||
'0': '0 0 auto'
|
||||
},
|
||||
fontFamily: {
|
||||
fontFamily : {
|
||||
sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`,
|
||||
mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`
|
||||
},
|
||||
opacity : {
|
||||
opacity : {
|
||||
12: '0.12',
|
||||
38: '0.38',
|
||||
87: '0.87'
|
||||
},
|
||||
rotate : {
|
||||
rotate : {
|
||||
'-270': '270deg',
|
||||
'15' : '15deg',
|
||||
'30' : '30deg',
|
||||
'60' : '60deg',
|
||||
'270' : '270deg'
|
||||
},
|
||||
scale : {
|
||||
scale : {
|
||||
'-1': '-1'
|
||||
},
|
||||
zIndex : {
|
||||
zIndex : {
|
||||
'-1' : -1,
|
||||
'49' : 49,
|
||||
'60' : 60,
|
||||
|
|
@ -159,7 +132,7 @@ const config = {
|
|||
'9999' : 9999,
|
||||
'99999': 99999
|
||||
},
|
||||
spacing : {
|
||||
spacing : {
|
||||
'13': '3.25rem',
|
||||
'15': '3.75rem',
|
||||
'18': '4.5rem',
|
||||
|
|
@ -167,23 +140,7 @@ const config = {
|
|||
'26': '6.5rem',
|
||||
'30': '7.5rem',
|
||||
'50': '12.5rem',
|
||||
'90': '22.5rem'
|
||||
},
|
||||
/**
|
||||
* Extended spacing values for width and height utilities.
|
||||
* This way, we won't be adding these to other utilities
|
||||
* that use 'spacing' config to keep the file size
|
||||
* smaller by not generating useless utilities such as
|
||||
* p-1/4 or m-480.
|
||||
*/
|
||||
extendedSpacing : {
|
||||
// Fractional values
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'90': '22.5rem',
|
||||
|
||||
// Bigger values
|
||||
'100': '25rem',
|
||||
|
|
@ -200,30 +157,28 @@ const config = {
|
|||
'320': '80rem',
|
||||
'360': '90rem',
|
||||
'400': '100rem',
|
||||
'480': '120rem'
|
||||
'480': '120rem',
|
||||
|
||||
// Fractional values
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%'
|
||||
},
|
||||
height : theme => ({
|
||||
...theme('extendedSpacing')
|
||||
}),
|
||||
minHeight : theme => ({
|
||||
...theme('spacing'),
|
||||
...theme('extendedSpacing')
|
||||
...theme('spacing')
|
||||
}),
|
||||
maxHeight : theme => ({
|
||||
...theme('extendedSpacing'),
|
||||
none: 'none'
|
||||
}),
|
||||
width : theme => ({
|
||||
...theme('extendedSpacing')
|
||||
}),
|
||||
minWidth : theme => ({
|
||||
...theme('spacing'),
|
||||
...theme('extendedSpacing'),
|
||||
screen: '100vw'
|
||||
}),
|
||||
maxWidth : theme => ({
|
||||
...theme('spacing'),
|
||||
...theme('extendedSpacing'),
|
||||
screen: '100vw'
|
||||
}),
|
||||
transitionDuration : {
|
||||
|
|
@ -315,121 +270,8 @@ const config = {
|
|||
})
|
||||
}
|
||||
},
|
||||
variants : {
|
||||
accessibility : [],
|
||||
alignContent : ['responsive'],
|
||||
alignItems : ['responsive'],
|
||||
alignSelf : ['responsive'],
|
||||
animation : [],
|
||||
backgroundAttachment : [],
|
||||
backgroundClip : [],
|
||||
backgroundColor : ['dark', 'responsive', 'group-hover', 'hover', 'focus', 'focus-within'],
|
||||
backgroundImage : [],
|
||||
backgroundOpacity : ['dark', 'hover'],
|
||||
backgroundPosition : [],
|
||||
backgroundRepeat : [],
|
||||
backgroundSize : [],
|
||||
borderCollapse : [],
|
||||
borderColor : ['dark', 'group-hover', 'hover', 'focus', 'focus-within'],
|
||||
borderOpacity : ['group-hover', 'hover'],
|
||||
borderRadius : ['responsive'],
|
||||
borderStyle : [],
|
||||
borderWidth : ['dark', 'responsive', 'first', 'last', 'odd', 'even'],
|
||||
boxShadow : ['dark', 'responsive', 'hover', 'focus-within'],
|
||||
boxSizing : [],
|
||||
cursor : [],
|
||||
display : ['dark', 'responsive', 'hover', 'group-hover'],
|
||||
divideColor : ['dark'],
|
||||
divideOpacity : [],
|
||||
divideStyle : [],
|
||||
divideWidth : ['responsive'],
|
||||
fill : [],
|
||||
flex : ['responsive'],
|
||||
flexDirection : ['responsive'],
|
||||
flexGrow : ['responsive'],
|
||||
flexShrink : ['responsive'],
|
||||
flexWrap : ['responsive'],
|
||||
fontFamily : [],
|
||||
fontSize : ['responsive'],
|
||||
fontSmoothing : [],
|
||||
fontStyle : ['responsive'],
|
||||
fontVariantNumeric : [],
|
||||
fontWeight : ['responsive'],
|
||||
gap : ['responsive'],
|
||||
gridAutoColumns : ['responsive'],
|
||||
gridAutoFlow : ['responsive'],
|
||||
gridAutoRows : ['responsive'],
|
||||
gridColumn : ['responsive'],
|
||||
gridColumnEnd : ['responsive'],
|
||||
gridColumnStart : ['responsive'],
|
||||
gridRow : ['responsive'],
|
||||
gridRowEnd : ['responsive'],
|
||||
gridRowStart : ['responsive'],
|
||||
gridTemplateColumns : ['responsive'],
|
||||
gridTemplateRows : ['responsive'],
|
||||
height : ['responsive'],
|
||||
inset : ['responsive'],
|
||||
justifyContent : ['responsive'],
|
||||
justifyItems : ['responsive'],
|
||||
justifySelf : ['responsive'],
|
||||
letterSpacing : ['responsive'],
|
||||
lineHeight : ['responsive'],
|
||||
listStylePosition : [],
|
||||
listStyleType : [],
|
||||
margin : ['responsive'],
|
||||
maxHeight : ['responsive'],
|
||||
maxWidth : ['responsive'],
|
||||
minHeight : ['responsive'],
|
||||
minWidth : ['responsive'],
|
||||
objectFit : ['responsive'],
|
||||
objectPosition : ['responsive'],
|
||||
opacity : ['responsive', 'group-hover', 'hover'],
|
||||
order : ['responsive'],
|
||||
outline : [],
|
||||
overflow : ['responsive'],
|
||||
overscrollBehavior : ['responsive'],
|
||||
padding : ['responsive'],
|
||||
placeContent : ['responsive'],
|
||||
placeItems : ['responsive'],
|
||||
placeSelf : ['responsive'],
|
||||
pointerEvents : ['responsive'],
|
||||
position : ['responsive'],
|
||||
resize : [],
|
||||
ringColor : ['dark', 'group-hover'],
|
||||
ringOffsetColor : ['dark'],
|
||||
ringOffsetWidth : [],
|
||||
ringOpacity : [],
|
||||
ringWidth : [],
|
||||
rotate : [],
|
||||
scale : [],
|
||||
skew : [],
|
||||
space : ['responsive'],
|
||||
stroke : ['responsive'],
|
||||
strokeWidth : ['responsive'],
|
||||
tableLayout : ['responsive'],
|
||||
textAlign : ['responsive'],
|
||||
textColor : ['dark', 'group-hover', 'hover'],
|
||||
textDecoration : ['group-hover', 'hover'],
|
||||
textOpacity : ['group-hover', 'hover'],
|
||||
textOverflow : ['responsive'],
|
||||
textTransform : [],
|
||||
transform : [],
|
||||
transformOrigin : [],
|
||||
transitionDelay : [],
|
||||
transitionDuration : [],
|
||||
transitionProperty : [],
|
||||
transitionTimingFunction: [],
|
||||
translate : ['responsive', 'hover'],
|
||||
userSelect : ['responsive'],
|
||||
visibility : ['responsive'],
|
||||
whitespace : ['responsive'],
|
||||
width : ['responsive'],
|
||||
wordBreak : ['responsive'],
|
||||
zIndex : ['responsive']
|
||||
},
|
||||
corePlugins : {
|
||||
corePlugins: {
|
||||
appearance : false,
|
||||
gradientColorStops: false,
|
||||
container : false,
|
||||
float : false,
|
||||
clear : false,
|
||||
|
|
@ -437,10 +279,9 @@ const config = {
|
|||
placeholderOpacity: false,
|
||||
verticalAlign : false
|
||||
},
|
||||
plugins : [
|
||||
plugins : [
|
||||
|
||||
// Fuse - Tailwind plugins
|
||||
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/extract-config'))),
|
||||
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/utilities'))),
|
||||
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/icon-size'))),
|
||||
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/theming')))({themes}),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user