purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2026-04-27 02:44:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Angular to v13.1

Browse Source 
Updated ESLint to v13
Updated Tailwind to v3
Updated various other packages
This commit is contained in:
Sercan Yemen
2021-12-22 14:19:21 +03:00
parent 3fd522de31
commit 805b50707e
86 changed files with 2738 additions and 3354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
angular.json
+7 -4
View File
@@ -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"
}
package-lock.json
Generated
+2330 -2739
View File
File diff suppressed because it is too large Load Diff
package.json
+38 -38
View File
@@ -1,6 +1,6 @@
{
"name": "@fuse/demo",
"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"
}
}
src/@fuse/fuse.module.ts
-2
View File
@@ -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: [
src/@fuse/services/media-watcher/media-watcher.service.ts
+7 -5
View File
@@ -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 )
src/@fuse/services/tailwind/index.ts
-1
View File
@@ -1 +0,0 @@
export * from '@fuse/services/tailwind/public-api';
src/@fuse/services/tailwind/public-api.ts
-2
View File
@@ -1,2 +0,0 @@
export * from '@fuse/services/tailwind/tailwind.module';
export * from '@fuse/services/tailwind/tailwind.service';
src/@fuse/services/tailwind/tailwind.module.ts
-17
View File
@@ -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)
{
}
}
src/@fuse/services/tailwind/tailwind.service.ts
-58
View File
@@ -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();
}
}
src/@fuse/styles/core/tailwind-config.scss
-6
View File
@@ -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 {
}
src/@fuse/styles/main.scss
+2 -5
View File
@@ -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';
src/@fuse/styles/themes.scss
+50 -50
View File
@@ -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 */
)
)
);
src/@fuse/tailwind/plugins/extract-config.js
-38
View File
@@ -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;
src/@fuse/tailwind/plugins/icon-size.js
+15 -21
View File
@@ -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;
}
);
src/@fuse/tailwind/plugins/theming.js
+25 -26
View File
@@ -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: {}
}
};
}
);
src/@fuse/tailwind/plugins/utilities.js
+1 -9
View File
@@ -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;
src/@fuse/version/fuse-version.ts
+1 -1
View File
@@ -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;
src/app/app.component.scss
+1 -1
View File
@@ -3,4 +3,4 @@
flex: 1 1 auto;
width: 100%;
height: 100%;
}
}
src/app/core/config/app.config.ts
+45 -4
View File
@@ -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'
}
]
};
src/app/layout/common/messages/messages.component.html
+4 -4
View File
@@ -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>
src/app/layout/common/notifications/notifications.component.html
+4 -4
View File
@@ -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>
src/app/layout/common/quick-chat/quick-chat.component.html
+10 -10
View File
@@ -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>
src/app/layout/common/search/search.component.html
+3 -3
View File
@@ -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">
src/app/layout/common/settings/settings.component.html
+8 -7
View File
@@ -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>
src/app/layout/common/settings/settings.component.ts
+3 -12
View File
@@ -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))
src/app/layout/common/shortcuts/shortcuts.component.html
+2 -2
View File
@@ -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'"
src/app/layout/layout.component.ts
+1 -1
View File
@@ -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);
}
}
src/app/layout/layouts/vertical/classy/classy.component.html
+2 -2
View File
@@ -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>
src/app/layout/layouts/vertical/futuristic/futuristic.component.html
+2 -2
View File
@@ -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>
src/app/mock-api/common/navigation/data.ts
+1 -1
View File
@@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
icon : 'heroicons_outline:speakerphone',
link : '/docs/changelog',
badge: {
title : '14.0.0',
title : '14.1.0',
classes: 'px-2 bg-yellow-300 text-black rounded-full'
}
},
src/app/mock-api/ui/icons/api.ts
+7 -7
View File
@@ -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)
}
]);
src/app/modules/admin/apps/chat/conversation/conversation.component.html
+9 -9
View File
@@ -99,7 +99,7 @@
<!-- Conversation -->
<div class="flex overflow-y-auto flex-col-reverse">
<div class="flex flex-col flex-auto flex-shrink p-6 bg-card dark:bg-transparent">
<div class="flex flex-col flex-auto shrink p-6 bg-card dark:bg-transparent">
<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')">
@@ -114,20 +114,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>
@@ -146,7 +146,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>
@@ -179,7 +179,7 @@
<button
mat-icon-button>
<mat-icon
class="transform rotate-90"
class="rotate-90"
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
</button>
</div>
src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
+1 -1
View File
@@ -11,7 +11,7 @@
<!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">Inventory</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- Search -->
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
<mat-icon
src/app/modules/admin/apps/help-center/guides/guide/guide.component.html
+1 -1
View File
@@ -37,7 +37,7 @@
<!-- Next -->
<a
class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transform transition-shadow ease-in-out duration-150"
class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transition-shadow ease-in-out duration-150"
[routerLink]="'.'">
<div>
<div class="text-secondary">Next</div>
src/app/modules/admin/apps/help-center/help-center.component.html
+3 -3
View File
@@ -35,7 +35,7 @@
<!-- Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
<!-- FAQs card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">FAQs</div>
<div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
@@ -53,7 +53,7 @@
</div>
</div>
<!-- Guides card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">Guides</div>
<div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
@@ -71,7 +71,7 @@
</div>
</div>
<!-- Support card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">Support</div>
<div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>
src/app/modules/admin/apps/mailbox/details/details.component.html
+1 -1
View File
@@ -128,7 +128,7 @@
<!-- Threads -->
<div
class="flex flex-col flex-auto flex-shrink-0 lg:flex-shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
class="flex flex-col flex-auto shrink-0 lg:shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
fuseScrollReset>
<!-- Thread -->
src/app/modules/admin/apps/scrumboard/board/board.component.html
+1 -1
View File
@@ -9,7 +9,7 @@
</h2>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<a
mat-stroked-button
[routerLink]="['..']">
src/app/modules/admin/dashboards/crypto/crypto.component.html
+1 -1
View File
@@ -49,7 +49,7 @@
</div>
<!-- Buy / Sell -->
<div class="flex flex-col flex-auto flex-shrink-0 pt-6 bg-gray-50 dark:bg-transparent">
<div class="flex flex-col flex-auto shrink-0 pt-6 bg-gray-50 dark:bg-transparent">
<!-- Action -->
<div class="flex flex-col px-6 pb-2">
src/app/modules/admin/docs/changelog/changelog.ts
+16
View File
@@ -10,6 +10,22 @@ export class ChangelogComponent
{
changelog: any[] = [
// v14.1.0
{
version : 'v14.1.0',
releaseDate: 'Dec 22, 2021',
changes : [
{
type: 'Changed',
list: [
'(dependencies) Updated Angular & Angular Material to v13.1',
'(dependencies) Updated Tailwind to v3',
'(dependencies) Updated various other packages',
'(AngularCLI) Disabled file based cache as it causes issues with Tailwind v3'
]
}
]
},
// v14.0.0
{
version : 'v14.0.0',
src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.html
+2 -6
View File
@@ -61,12 +61,8 @@
<h2>Tailwind and Fuse</h2>
<p>
Fuse also uses Tailwind as its main configuration source for Angular Material components. Basically, some of the Tailwind configuration is exported during
the Tailwind's build process and made available for Fuse's internal use cases. This allows Fuse to use Tailwind's configuration as the single source of truth.
</p>
<p>
To summarize; if you want to add/edit/remove any color, change the font families, modify the breakpoints or change any other visual configuration, you have to do
that via the Tailwind's config file and they will be carried over to the Angular Material components.
Fuse also uses Tailwind as its main configuration source for Angular Material theming. If you want to add/edit/remove any color or change the font families,
you have to do that via the Tailwind's config file
</p>
<h2>Building Tailwind</h2>
src/app/modules/admin/docs/guides/customization/theming/theming.html
+4 -4
View File
@@ -73,8 +73,8 @@
DEFAULT: colors.indigo[600]
},
accent : {
...colors.blueGray,
DEFAULT: colors.blueGray[800]
...colors.slate,
DEFAULT: colors.slate[800]
},
warn : {
...colors.red,
@@ -184,8 +184,8 @@
// It uses the default "blue-gray" color palette from Tailwind's default
// color palettes and sets the 800 hue level as the DEFAULT color.
accent : {
...colors.blueGray,
DEFAULT: colors.blueGray[800]
...colors.slate,
DEFAULT: colors.slate[800]
},
// Here we define the "Warn" palette for the default theme.
src/app/modules/admin/docs/guides/development/component-structure/component-structure.html
+3 -3
View File
@@ -54,13 +54,13 @@
<div class="my-8 p-8 rounded bg-card shadow">
<!-- AppComponent -->
<div class="relative border-2 border-gray-400 rounded h-120 p-6 pt-12">
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 transform -translate-y-1/2 bg-card text-gray-500 font-medium">AppComponent</span>
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 -translate-y-1/2 bg-card text-gray-500 font-medium">AppComponent</span>
<!-- LayoutComponent -->
<div class="relative border-2 border-purple-400 rounded w-full h-full p-6 pt-12">
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 transform -translate-y-1/2 bg-card text-purple-500 font-medium">LayoutComponent</span>
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 -translate-y-1/2 bg-card text-purple-500 font-medium">LayoutComponent</span>
<!-- xxxLayoutComponent -->
<div class="relative border-2 border-green-400 rounded w-full h-full">
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 transform -translate-y-1/2 bg-card text-green-500 font-medium">Layout</span>
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 -translate-y-1/2 bg-card text-green-500 font-medium">Layout</span>
<div class="flex w-full h-full">
<!-- Navigation -->
src/app/modules/admin/pages/activities/activities.component.html
+2 -2
View File
@@ -36,7 +36,7 @@
<div class="relative flex flex-auto">
<!-- Icon -->
<ng-container *ngIf="activity.icon && !activity.image">
<div class="flex flex-shrink-0 items-center justify-center w-10 h-10 mr-4 rounded-full bg-gray-400">
<div class="flex shrink-0 items-center justify-center w-10 h-10 mr-4 rounded-full bg-gray-400">
<mat-icon
class="icon-size-5 text-white"
[svgIcon]="activity.icon">
@@ -47,7 +47,7 @@
<!-- Image -->
<ng-container *ngIf="activity.image">
<img
class="flex-shrink-0 w-10 h-10 mr-4 rounded-full overflow-hidden object-cover object-center"
class="shrink-0 w-10 h-10 mr-4 rounded-full overflow-hidden object-cover object-center"
[src]="activity.image"
[alt]="'Activity image'">
</ng-container>
src/app/modules/admin/pages/profile/profile.component.html
+1 -1
View File
@@ -786,7 +786,7 @@
(click)="expandableCard02.expanded = !expandableCard02.expanded">
<span class="mr-1">5 Comments</span>
<mat-icon
class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0"
class="icon-size-5 transition-transform ease-in-out duration-150 rotate-0"
[ngClass]="{'rotate-180': expandableCard02.expanded}"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button>
src/app/modules/admin/ui/cards/cards.component.html
+2 -2
View File
@@ -160,7 +160,7 @@
(click)="expandableCard01.expanded = !expandableCard01.expanded">
<span class="mr-1">Details</span>
<mat-icon
class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0"
class="icon-size-5 transition-transform ease-in-out duration-150 rotate-0"
[ngClass]="{'rotate-180': expandableCard01.expanded}"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button>
@@ -2422,7 +2422,7 @@
(click)="expandableCard02.expanded = !expandableCard02.expanded">
<span class="mr-1">5 Comments</span>
<mat-icon
class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0"
class="icon-size-5 transition-transform ease-in-out duration-150 rotate-0"
[ngClass]="{'rotate-180': expandableCard02.expanded}"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button>
src/app/modules/admin/ui/fuse-components/services/config/config.component.html
+45 -4
View File
@@ -62,7 +62,9 @@
// 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
@@ -72,7 +74,9 @@
{
layout: Layout;
scheme: Scheme;
screens: Screens;
theme: Theme;
themes: Themes;
}
/**
@@ -82,11 +86,48 @@
* 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'
}
]
};
</textarea>
<!-- @formatter:on -->
src/app/modules/admin/ui/icons/icons.component.html
+8 -8
View File
@@ -51,13 +51,13 @@
<mat-form-field class="min-w-40 ml-8 xs:ml-0">
<mat-label>Icon size</mat-label>
<mat-select [(ngModel)]="iconSize">
<mat-option [value]="4">16</mat-option>
<mat-option [value]="5">20</mat-option>
<mat-option [value]="6">24</mat-option>
<mat-option [value]="8">32</mat-option>
<mat-option [value]="10">40</mat-option>
<mat-option [value]="12">48</mat-option>
<mat-option [value]="16">64</mat-option>
<mat-option [value]="'icon-size-4'">16</mat-option>
<mat-option [value]="'icon-size-5'">20</mat-option>
<mat-option [value]="'icon-size-6'">24</mat-option>
<mat-option [value]="'icon-size-8'">32</mat-option>
<mat-option [value]="'icon-size-10'">40</mat-option>
<mat-option [value]="'icon-size-12'">48</mat-option>
<mat-option [value]="'icon-size-16'">64</mat-option>
</mat-select>
</mat-form-field>
</div>
@@ -75,7 +75,7 @@
<div class="flex items-center justify-center mb-3">
<mat-icon
[ngClass]="'icon-size-' + iconSize"
[ngClass]="iconSize"
[svgIcon]="icons.namespace + ':' + icon"></mat-icon>
</div>
src/app/modules/admin/ui/icons/icons.component.ts
+1 -1
View File
@@ -14,7 +14,7 @@ export class IconsComponent implements OnInit, OnDestroy
filteredIcons$: Observable<Icon>;
filterValue$: BehaviorSubject<string> = new BehaviorSubject('');
iconSize: number = 24;
iconSize: string = 'icon-size-8';
selectedIcon: string[];
private _unsubscribeAll: Subject<any> = new Subject();
src/app/modules/admin/ui/material-components/material-components.component.html
+1 -1
View File
@@ -17,7 +17,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<a
mat-flat-button
href="https://material.angular.io/components/categories"
src/app/modules/admin/ui/page-layouts/carded/fullwidth/content-scroll/fullwidth.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/carded/fullwidth/normal-scroll/fullwidth.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/carded/fullwidth/page-scroll/fullwidth.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-1/content-scroll/left-sidebar-1.component.html
+1 -1
View File
@@ -56,7 +56,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-1/normal-scroll/left-sidebar-1.component.html
+1 -1
View File
@@ -56,7 +56,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-1/page-scroll/left-sidebar-1.component.html
+1 -1
View File
@@ -58,7 +58,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-2/content-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-2/normal-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-2/page-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-1/content-scroll/right-sidebar-1.component.html
+1 -1
View File
@@ -57,7 +57,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-1/normal-scroll/right-sidebar-1.component.html
+1 -1
View File
@@ -57,7 +57,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-1/page-scroll/right-sidebar-1.component.html
+1 -1
View File
@@ -59,7 +59,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-2/content-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-2/normal-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-2/page-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/content-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -57,7 +57,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/inner-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -57,7 +57,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/normal-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -57,7 +57,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/page-scroll/left-sidebar-2.component.html
+1 -1
View File
@@ -59,7 +59,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-3/content-scroll/left-sidebar-3.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-3/normal-scroll/left-sidebar-3.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-3/page-scroll/left-sidebar-3.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/content-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -58,7 +58,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/inner-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -58,7 +58,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/normal-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -58,7 +58,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/page-scroll/right-sidebar-2.component.html
+1 -1
View File
@@ -60,7 +60,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-3/content-scroll/right-sidebar-3.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-3/normal-scroll/right-sidebar-3.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-3/page-scroll/right-sidebar-3.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button
mat-icon-button
(click)="matDrawer.toggle()">
src/index.html
+1 -1
View File
@@ -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">
tailwind.config.js
+31 -187
View File
@@ -25,8 +25,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 +41,7 @@ const themes = {
'brand' : {
primary: customPalettes.brand
},
'indigo': {
'teal': {
primary: {
...colors.teal,
DEFAULT: colors.teal[600]
@@ -65,38 +65,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 +87,41 @@ const config = {
'10xl': '8rem'
},
screens : {
print: {'raw': 'print'},
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 +133,7 @@ const config = {
'9999' : 9999,
'99999': 99999
},
spacing : {
spacing : {
'13': '3.25rem',
'15': '3.75rem',
'18': '4.5rem',
@@ -167,23 +141,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 +158,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,119 +271,7 @@ 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,
@@ -437,7 +281,7 @@ const config = {
placeholderOpacity: false,
verticalAlign : false
},
plugins : [
plugins : [
// Fuse - Tailwind plugins
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/extract-config'))),