mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 15:37:06 +00:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
afda4b35c9 | ||
|
|
3b88638dee | ||
|
|
b96182c848 | ||
|
|
443a103d6f | ||
|
|
42241b279d | ||
|
|
e5eaea5013 | ||
|
|
6e85b9ff2a | ||
|
|
6e593b1f1e | ||
|
|
57a3f6ae99 | ||
|
|
700a117654 | ||
|
|
5337c95782 | ||
|
|
964c4b23a9 | ||
|
|
a8337ce617 | ||
|
|
3ceda2cf3f | ||
|
|
805b50707e |
@@ -1,6 +1,9 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"defaultCollection": "@angular-eslint/schematics"
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"fuse": {
|
||||
@@ -137,8 +140,5 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "fuse",
|
||||
"cli": {
|
||||
"defaultCollection": "@angular-eslint/schematics"
|
||||
}
|
||||
"defaultProject": "fuse"
|
||||
}
|
||||
|
||||
12367
package-lock.json
generated
12367
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
94
package.json
94
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@fuse/demo",
|
||||
"version": "14.0.0",
|
||||
"version": "14.2.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
@@ -14,68 +14,68 @@
|
||||
"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.2.3",
|
||||
"@angular/cdk": "13.2.3",
|
||||
"@angular/common": "13.2.3",
|
||||
"@angular/compiler": "13.2.3",
|
||||
"@angular/core": "13.2.3",
|
||||
"@angular/forms": "13.2.3",
|
||||
"@angular/material": "13.2.3",
|
||||
"@angular/material-moment-adapter": "13.2.3",
|
||||
"@angular/platform-browser": "13.2.3",
|
||||
"@angular/platform-browser-dynamic": "13.2.3",
|
||||
"@angular/router": "13.2.3",
|
||||
"@ngneat/transloco": "3.1.4",
|
||||
"apexcharts": "3.33.1",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "11.3.1",
|
||||
"highlight.js": "11.4.0",
|
||||
"lodash-es": "4.17.21",
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.12",
|
||||
"ngx-markdown": "13.0.0",
|
||||
"ngx-quill": "16.0.1",
|
||||
"ng-apexcharts": "1.7.0",
|
||||
"ngx-markdown": "13.1.0",
|
||||
"ngx-quill": "16.1.2",
|
||||
"perfect-scrollbar": "1.5.3",
|
||||
"quill": "1.3.7",
|
||||
"rxjs": "7.4.0",
|
||||
"rxjs": "7.5.4",
|
||||
"tslib": "2.3.1",
|
||||
"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.2.4",
|
||||
"@angular-eslint/builder": "13.1.0",
|
||||
"@angular-eslint/eslint-plugin": "13.1.0",
|
||||
"@angular-eslint/eslint-plugin-template": "13.1.0",
|
||||
"@angular-eslint/schematics": "13.1.0",
|
||||
"@angular-eslint/template-parser": "13.1.0",
|
||||
"@angular/cli": "13.2.4",
|
||||
"@angular/compiler-cli": "13.2.3",
|
||||
"@tailwindcss/aspect-ratio": "0.4.0",
|
||||
"@tailwindcss/line-clamp": "0.3.1",
|
||||
"@tailwindcss/typography": "0.5.2",
|
||||
"@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-es": "4.17.5",
|
||||
"@types/node": "12.20.37",
|
||||
"@typescript-eslint/eslint-plugin": "5.3.1",
|
||||
"@typescript-eslint/parser": "5.3.1",
|
||||
"autoprefixer": "10.4.0",
|
||||
"chroma-js": "2.1.2",
|
||||
"eslint": "7.32.0",
|
||||
"eslint-plugin-import": "2.25.3",
|
||||
"eslint-plugin-jsdoc": "37.0.3",
|
||||
"@types/jasmine": "3.10.3",
|
||||
"@types/lodash": "4.14.178",
|
||||
"@types/lodash-es": "4.17.6",
|
||||
"@types/node": "12.20.46",
|
||||
"@typescript-eslint/eslint-plugin": "5.12.0",
|
||||
"@typescript-eslint/parser": "5.12.0",
|
||||
"autoprefixer": "10.4.2",
|
||||
"chroma-js": "2.4.2",
|
||||
"eslint": "8.9.0",
|
||||
"eslint-plugin-import": "2.25.4",
|
||||
"eslint-plugin-jsdoc": "37.9.4",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"jasmine-core": "3.10.1",
|
||||
"karma": "6.3.8",
|
||||
"jasmine-core": "4.0.0",
|
||||
"karma": "6.3.16",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage": "2.0.3",
|
||||
"karma-coverage": "2.1.1",
|
||||
"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.6",
|
||||
"tailwindcss": "3.0.23",
|
||||
"typescript": "4.5.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
/* Variables */
|
||||
$fuse-drawer-width: 320;
|
||||
:root {
|
||||
--fuse-drawer-width: 320px;
|
||||
}
|
||||
|
||||
fuse-drawer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: #{$fuse-drawer-width}px;
|
||||
min-width: #{$fuse-drawer-width}px;
|
||||
max-width: #{$fuse-drawer-width}px;
|
||||
width: var(--fuse-drawer-width);
|
||||
min-width: var(--fuse-drawer-width);
|
||||
max-width: var(--fuse-drawer-width);
|
||||
z-index: 300;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
|
||||
@apply bg-card;
|
||||
@@ -43,7 +45,7 @@ fuse-drawer {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-drawer-mode-side {
|
||||
margin-left: -#{$fuse-drawer-width}px;
|
||||
margin-left: calc(var(--fuse-drawer-width) * -1);
|
||||
|
||||
&.fuse-drawer-opened {
|
||||
margin-left: 0;
|
||||
@@ -71,7 +73,7 @@ fuse-drawer {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-drawer-mode-side {
|
||||
margin-right: -#{$fuse-drawer-width}px;
|
||||
margin-right: calc(var(--fuse-drawer-width) * -1);
|
||||
|
||||
&.fuse-drawer-opened {
|
||||
margin-right: 0;
|
||||
|
||||
@@ -5,7 +5,6 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
@Component({
|
||||
selector : 'fuse-masonry',
|
||||
templateUrl : './masonry.component.html',
|
||||
styleUrls : ['./masonry.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseMasonry'
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-compact-width: 112px;
|
||||
:root {
|
||||
--fuse-vertical-navigation-compact-width: 112px;
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Compact appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-compact {
|
||||
width: $fuse-vertical-navigation-compact-width;
|
||||
min-width: $fuse-vertical-navigation-compact-width;
|
||||
max-width: $fuse-vertical-navigation-compact-width;
|
||||
width: var(--fuse-vertical-navigation-compact-width);
|
||||
min-width: var(--fuse-vertical-navigation-compact-width);
|
||||
max-width: var(--fuse-vertical-navigation-compact-width);
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -$fuse-vertical-navigation-compact-width;
|
||||
margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1);
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -28,7 +30,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -$fuse-vertical-navigation-compact-width;
|
||||
margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1);
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -39,7 +41,7 @@ fuse-vertical-navigation {
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: $fuse-vertical-navigation-compact-width;
|
||||
right: var(--fuse-vertical-navigation-compact-width);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,7 +106,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: $fuse-vertical-navigation-compact-width;
|
||||
left: var(--fuse-vertical-navigation-compact-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-width: 280px;
|
||||
:root {
|
||||
--fuse-vertical-navigation-width: 280px;
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
position: sticky;
|
||||
@@ -7,9 +9,9 @@ fuse-vertical-navigation {
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
top: 0;
|
||||
width: $fuse-vertical-navigation-width;
|
||||
min-width: $fuse-vertical-navigation-width;
|
||||
max-width: $fuse-vertical-navigation-width;
|
||||
width: var(--fuse-vertical-navigation-width);
|
||||
min-width: var(--fuse-vertical-navigation-width);
|
||||
max-width: var(--fuse-vertical-navigation-width);
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
@@ -45,7 +47,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -$fuse-vertical-navigation-width;
|
||||
margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
margin-left: 0;
|
||||
@@ -73,7 +75,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -$fuse-vertical-navigation-width;
|
||||
margin-right: calc(var(--fuse-vertical-navigation-width) * -1);
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
margin-right: 0;
|
||||
@@ -170,8 +172,8 @@ fuse-vertical-navigation {
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: $fuse-vertical-navigation-width;
|
||||
width: $fuse-vertical-navigation-width;
|
||||
left: var(--fuse-vertical-navigation-width);
|
||||
width: var(--fuse-vertical-navigation-width);
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
overflow-x: hidden;
|
||||
@@ -196,7 +198,7 @@ fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: $fuse-vertical-navigation-width;
|
||||
right: var(--fuse-vertical-navigation-width);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-width: 280px;
|
||||
$fuse-vertical-navigation-dense-width: 80px;
|
||||
:root {
|
||||
--fuse-vertical-navigation-width: 280px;
|
||||
--fuse-vertical-navigation-dense-width: 80px;
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
@@ -8,16 +10,16 @@ fuse-vertical-navigation {
|
||||
&.fuse-vertical-navigation-appearance-dense {
|
||||
|
||||
&:not(.fuse-vertical-navigation-mode-over) {
|
||||
width: $fuse-vertical-navigation-dense-width;
|
||||
min-width: $fuse-vertical-navigation-dense-width;
|
||||
max-width: $fuse-vertical-navigation-dense-width;
|
||||
width: var(--fuse-vertical-navigation-dense-width);
|
||||
min-width: var(--fuse-vertical-navigation-dense-width);
|
||||
max-width: var(--fuse-vertical-navigation-dense-width);
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -$fuse-vertical-navigation-dense-width;
|
||||
margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1);
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -31,7 +33,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -$fuse-vertical-navigation-dense-width;
|
||||
margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1);
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -42,14 +44,14 @@ fuse-vertical-navigation {
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: $fuse-vertical-navigation-dense-width;
|
||||
right: var(--fuse-vertical-navigation-dense-width);
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-hover {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: $fuse-vertical-navigation-width;
|
||||
right: var(--fuse-vertical-navigation-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -69,9 +71,9 @@ fuse-vertical-navigation {
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
width: $fuse-vertical-navigation-dense-width - 24px;
|
||||
min-width: $fuse-vertical-navigation-dense-width - 24px;
|
||||
max-width: $fuse-vertical-navigation-dense-width - 24px;
|
||||
width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
|
||||
min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
|
||||
max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
|
||||
|
||||
.fuse-vertical-navigation-item-arrow,
|
||||
.fuse-vertical-navigation-item-badge,
|
||||
@@ -142,23 +144,23 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: $fuse-vertical-navigation-dense-width;
|
||||
left: var(--fuse-vertical-navigation-dense-width);
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
&.fuse-vertical-navigation-hover {
|
||||
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
width: $fuse-vertical-navigation-width;
|
||||
width: var(--fuse-vertical-navigation-width);
|
||||
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
width: $fuse-vertical-navigation-width - 24px;
|
||||
min-width: $fuse-vertical-navigation-width - 24px;
|
||||
max-width: $fuse-vertical-navigation-width - 24px;
|
||||
width: calc(var(--fuse-vertical-navigation-width) - 24px);
|
||||
min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
|
||||
max-width: calc(var(--fuse-vertical-navigation-width) - 24px);
|
||||
|
||||
.fuse-vertical-navigation-item-arrow,
|
||||
.fuse-vertical-navigation-item-badge,
|
||||
@@ -173,7 +175,7 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: $fuse-vertical-navigation-width;
|
||||
left: var(--fuse-vertical-navigation-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-thin-width: 80px;
|
||||
:root {
|
||||
--fuse-vertical-navigation-thin-width: 80px;
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Thin appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-thin {
|
||||
width: $fuse-vertical-navigation-thin-width;
|
||||
min-width: $fuse-vertical-navigation-thin-width;
|
||||
max-width: $fuse-vertical-navigation-thin-width;
|
||||
width: var(--fuse-vertical-navigation-thin-width);
|
||||
min-width: var(--fuse-vertical-navigation-thin-width);
|
||||
max-width: var(--fuse-vertical-navigation-thin-width);
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -$fuse-vertical-navigation-thin-width;
|
||||
margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1);
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
@@ -25,7 +27,7 @@ fuse-vertical-navigation {
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -$fuse-vertical-navigation-thin-width;
|
||||
margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1);
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
@@ -34,7 +36,7 @@ fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: $fuse-vertical-navigation-thin-width;
|
||||
right: var(--fuse-vertical-navigation-thin-width);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,7 +93,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: $fuse-vertical-navigation-thin-width;
|
||||
left: var(--fuse-vertical-navigation-thin-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,10 +19,11 @@ const iconSize = plugin(({
|
||||
width : value,
|
||||
height: value
|
||||
}
|
||||
}
|
||||
})),
|
||||
variants('iconSize')
|
||||
);
|
||||
})
|
||||
},
|
||||
{
|
||||
values: theme('iconSize')
|
||||
});
|
||||
},
|
||||
{
|
||||
theme: {
|
||||
@@ -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' ? 'body, .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.2.0').full;
|
||||
|
||||
@@ -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'
|
||||
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')">
|
||||
@@ -119,7 +119,7 @@
|
||||
<!-- 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}">
|
||||
<ng-container *ngTemplateOutlet="speechBubbleExtension"></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>
|
||||
|
||||
@@ -66,6 +66,9 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
|
||||
|
||||
// Check if the screen is small
|
||||
this.isScreenSmall = !matchingAliases.includes('md');
|
||||
|
||||
// Change the navigation appearance
|
||||
this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||
icon : 'heroicons_outline:speakerphone',
|
||||
link : '/docs/changelog',
|
||||
badge: {
|
||||
title : '14.0.0',
|
||||
title : '14.2.0',
|
||||
classes: 'px-2 bg-yellow-300 text-black rounded-full'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -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')">
|
||||
@@ -125,7 +125,7 @@
|
||||
<!-- 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}">
|
||||
<ng-container *ngTemplateOutlet="speechBubbleExtension"></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>
|
||||
|
||||
@@ -17,7 +17,7 @@ export const contactsRoutes: Route[] = [
|
||||
path : '',
|
||||
component: ContactsListComponent,
|
||||
resolve : {
|
||||
tasks : ContactsResolver,
|
||||
contacts : ContactsResolver,
|
||||
countries: ContactsCountriesResolver
|
||||
},
|
||||
children : [
|
||||
@@ -25,7 +25,7 @@ export const contactsRoutes: Route[] = [
|
||||
path : ':id',
|
||||
component : ContactsDetailsComponent,
|
||||
resolve : {
|
||||
task : ContactsContactResolver,
|
||||
contact : ContactsContactResolver,
|
||||
countries: ContactsCountriesResolver
|
||||
},
|
||||
canDeactivate: [CanDeactivateContactsDetails]
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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]="['..']">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -10,6 +10,66 @@ export class ChangelogComponent
|
||||
{
|
||||
changelog: any[] = [
|
||||
|
||||
// v14.2.0
|
||||
{
|
||||
version : 'v14.2.0',
|
||||
releaseDate: 'Feb 21, 2022',
|
||||
changes : [
|
||||
{
|
||||
type: 'Changed',
|
||||
list: [
|
||||
'(dependencies) Updated various packages',
|
||||
'(AngularCLI) Re-enabled the cache since Tailwind related issues are fixed',
|
||||
'(@fuse/navigation) Expose the width variables as css custom properties, so they can be overridden from the outside',
|
||||
'(@fuse/drawer) Expose the width variable as a css custom property, so it can be overridden from the outside',
|
||||
'(@fuse/masonry) Removed the unnecessary scss file'
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Fixed',
|
||||
list: [
|
||||
'(layouts/dense) Fixed: Navigation appearance doesn\'t set correctly on small devices'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// v14.1.1
|
||||
{
|
||||
version : 'v14.1.1',
|
||||
releaseDate: 'Jan 02, 2022',
|
||||
changes : [
|
||||
{
|
||||
type: 'Changed',
|
||||
list: [
|
||||
'(dependencies) Updated various packages',
|
||||
'(TailwindCSS) Moved to the new syntax on Tailwind config'
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Fixed',
|
||||
list: [
|
||||
'(TailwindCSS) Accent and Warn colors are not being generated for themes other than the Default',
|
||||
'(Contacts) Typo on resolve object'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
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 -->
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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/]
|
||||
}
|
||||
}
|
||||
},
|
||||
important : true,
|
||||
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
|
||||
},
|
||||
fontSize: {
|
||||
'xs' : '0.625rem',
|
||||
'sm' : '0.75rem',
|
||||
@@ -115,7 +86,6 @@ const config = {
|
||||
'10xl': '8rem'
|
||||
},
|
||||
screens : {
|
||||
print: {'raw': 'print'},
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
@@ -125,6 +95,9 @@ const config = {
|
||||
animation : {
|
||||
'spin-slow': 'spin 3s linear infinite'
|
||||
},
|
||||
colors : {
|
||||
gray: colors.slate
|
||||
},
|
||||
flex : {
|
||||
'0': '0 0 auto'
|
||||
},
|
||||
@@ -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')
|
||||
}),
|
||||
minHeight : theme => ({
|
||||
...theme('spacing'),
|
||||
...theme('extendedSpacing')
|
||||
}),
|
||||
maxHeight : theme => ({
|
||||
...theme('extendedSpacing'),
|
||||
maxHeight : {
|
||||
none: 'none'
|
||||
}),
|
||||
width : theme => ({
|
||||
...theme('extendedSpacing')
|
||||
}),
|
||||
minWidth : theme => ({
|
||||
},
|
||||
minWidth : ({theme}) => ({
|
||||
...theme('spacing'),
|
||||
...theme('extendedSpacing'),
|
||||
screen: '100vw'
|
||||
}),
|
||||
maxWidth : theme => ({
|
||||
maxWidth : ({theme}) => ({
|
||||
...theme('spacing'),
|
||||
...theme('extendedSpacing'),
|
||||
screen: '100vw'
|
||||
}),
|
||||
transitionDuration : {
|
||||
@@ -234,7 +189,7 @@ const config = {
|
||||
},
|
||||
|
||||
// @tailwindcss/typography
|
||||
typography: (theme) => ({
|
||||
typography: ({theme}) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
color : 'var(--fuse-text-default)',
|
||||
@@ -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: {
|
||||
appearance : false,
|
||||
gradientColorStops: false,
|
||||
container : false,
|
||||
float : false,
|
||||
clear : false,
|
||||
@@ -440,7 +282,6 @@ const config = {
|
||||
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}),
|
||||
|
||||
Reference in New Issue
Block a user