Compare commits

..

5 Commits

Author SHA1 Message Date
Sercan Yemen
afda4b35c9 Updated the changelog 2022-02-21 11:59:41 +03:00
Sercan Yemen
3b88638dee Updated various packages
Re-enabled AngularCLI cache since Tailwind related issues are appeared to be fixed
2022-02-21 11:47:35 +03:00
Sercan Yemen
b96182c848 (layouts/dense) Fixed: Navigation appearance doesn't set correctly on small devices 2022-01-14 11:36:38 +03:00
Sercan Yemen
443a103d6f (@fuse/masonry) Removed the unnecessary scss file 2022-01-14 11:35:41 +03:00
Sercan Yemen
42241b279d (@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
2022-01-14 11:35:12 +03:00
14 changed files with 3939 additions and 6105 deletions

View File

@@ -2,10 +2,7 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"defaultCollection": "@angular-eslint/schematics",
"cache": {
"enabled": false
}
"defaultCollection": "@angular-eslint/schematics"
},
"newProjectRoot": "projects",
"projects": {

9770
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,6 @@
{
"name": "@fuse/demo",
"version": "14.1.1",
"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.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.1",
"@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.6.0",
"ngx-markdown": "13.0.0",
"ngx-quill": "16.1.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.5.1",
"rxjs": "7.5.4",
"tslib": "2.3.1",
"zone.js": "0.11.4"
},
"devDependencies": {
"@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",
"@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.0",
"@tailwindcss/typography": "0.5.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/jasmine": "3.10.3",
"@types/lodash": "4.14.178",
"@types/lodash-es": "4.17.5",
"@types/node": "12.20.38",
"@typescript-eslint/eslint-plugin": "5.8.1",
"@typescript-eslint/parser": "5.8.1",
"autoprefixer": "10.4.1",
"chroma-js": "2.1.2",
"eslint": "8.6.0",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsdoc": "37.5.0",
"@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.9",
"jasmine-core": "4.0.0",
"karma": "6.3.16",
"karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.1.0",
"karma-coverage": "2.1.1",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0",
"lodash": "4.17.21",
"postcss": "8.4.5",
"tailwindcss": "3.0.8",
"typescript": "4.5.4"
"postcss": "8.4.6",
"tailwindcss": "3.0.23",
"typescript": "4.5.5"
}
}

View File

@@ -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;

View File

@@ -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'

View File

@@ -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);
}
}
}

View File

@@ -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);
}
}

View File

@@ -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);
}
}
}

View File

@@ -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);
}
}
}

View File

@@ -1,3 +1,3 @@
import { Version } from '@fuse/version/version';
export const FUSE_VERSION = new Version('14.1.1').full;
export const FUSE_VERSION = new Version('14.2.0').full;

View File

@@ -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';
});
}

View File

@@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
icon : 'heroicons_outline:speakerphone',
link : '/docs/changelog',
badge: {
title : '14.1.1',
title : '14.2.0',
classes: 'px-2 bg-yellow-300 text-black rounded-full'
}
},

View File

@@ -10,6 +10,29 @@ 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',