purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 20:15:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/demo' into starter

Browse Source
This commit is contained in:
Sercan Yemen 2022-02-21 12:00:18 +03:00
commit 9d93a2b060
11 changed files with 65 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
angular.json
View File

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

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@fuse/starter", "name": "@fuse/starter",
"version": "14.1.1", "version": "14.2.0",
"description": "Fuse - Angular Admin Template and Starter Project", "description": "Fuse - Angular Admin Template and Starter Project",
"author": "https://themeforest.net/user/srcn", "author": "https://themeforest.net/user/srcn",
"license": "https://themeforest.net/licenses/standard", "license": "https://themeforest.net/licenses/standard",

14
src/@fuse/components/drawer/drawer.component.scss
View File

@ -1,14 +1,16 @@
/* Variables */ /* Variables */
$fuse-drawer-width: 320; :root {
--fuse-drawer-width: 320px;
}
fuse-drawer { fuse-drawer {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
width: #{$fuse-drawer-width}px; width: var(--fuse-drawer-width);
min-width: #{$fuse-drawer-width}px; min-width: var(--fuse-drawer-width);
max-width: #{$fuse-drawer-width}px; max-width: var(--fuse-drawer-width);
z-index: 300; z-index: 300;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
@apply bg-card; @apply bg-card;
@ -43,7 +45,7 @@ fuse-drawer {
/* Side mode */ /* Side mode */
&.fuse-drawer-mode-side { &.fuse-drawer-mode-side {
margin-left: -#{$fuse-drawer-width}px; margin-left: calc(var(--fuse-drawer-width) * -1);
&.fuse-drawer-opened { &.fuse-drawer-opened {
margin-left: 0; margin-left: 0;
@ -71,7 +73,7 @@ fuse-drawer {
/* Side mode */ /* Side mode */
&.fuse-drawer-mode-side { &.fuse-drawer-mode-side {
margin-right: -#{$fuse-drawer-width}px; margin-right: calc(var(--fuse-drawer-width) * -1);
&.fuse-drawer-opened { &.fuse-drawer-opened {
margin-right: 0; margin-right: 0;

0
src/@fuse/components/masonry/masonry.component.scss
View File

1
src/@fuse/components/masonry/masonry.component.ts
View File

@ -5,7 +5,6 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@Component({ @Component({
selector : 'fuse-masonry', selector : 'fuse-masonry',
templateUrl : './masonry.component.html', templateUrl : './masonry.component.html',
styleUrls : ['./masonry.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : fuseAnimations, animations : fuseAnimations,
exportAs : 'fuseMasonry' exportAs : 'fuseMasonry'

18
src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
View File

@ -1,20 +1,22 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-compact-width: 112px; :root {
--fuse-vertical-navigation-compact-width: 112px;
}
fuse-vertical-navigation { fuse-vertical-navigation {
/* Compact appearance overrides */ /* Compact appearance overrides */
&.fuse-vertical-navigation-appearance-compact { &.fuse-vertical-navigation-appearance-compact {
width: $fuse-vertical-navigation-compact-width; width: var(--fuse-vertical-navigation-compact-width);
min-width: $fuse-vertical-navigation-compact-width; min-width: var(--fuse-vertical-navigation-compact-width);
max-width: $fuse-vertical-navigation-compact-width; max-width: var(--fuse-vertical-navigation-compact-width);
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -$fuse-vertical-navigation-compact-width; margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1);
} }
/* Opened */ /* Opened */
@ -28,7 +30,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -$fuse-vertical-navigation-compact-width; margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1);
} }
/* Opened */ /* Opened */
@ -39,7 +41,7 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: $fuse-vertical-navigation-compact-width; right: var(--fuse-vertical-navigation-compact-width);
} }
} }
@ -104,7 +106,7 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: $fuse-vertical-navigation-compact-width; left: var(--fuse-vertical-navigation-compact-width);
} }
} }
} }

20
src/@fuse/components/navigation/vertical/styles/appearances/default.scss
View File

@ -1,5 +1,7 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-width: 280px; :root {
--fuse-vertical-navigation-width: 280px;
}
fuse-vertical-navigation { fuse-vertical-navigation {
position: sticky; position: sticky;
@ -7,9 +9,9 @@ fuse-vertical-navigation {
flex-direction: column; flex-direction: column;
flex: 1 0 auto; flex: 1 0 auto;
top: 0; top: 0;
width: $fuse-vertical-navigation-width; width: var(--fuse-vertical-navigation-width);
min-width: $fuse-vertical-navigation-width; min-width: var(--fuse-vertical-navigation-width);
max-width: $fuse-vertical-navigation-width; max-width: var(--fuse-vertical-navigation-width);
height: 100vh; height: 100vh;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; max-height: 100vh;
@ -45,7 +47,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -$fuse-vertical-navigation-width; margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
margin-left: 0; margin-left: 0;
@ -73,7 +75,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -$fuse-vertical-navigation-width; margin-right: calc(var(--fuse-vertical-navigation-width) * -1);
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
margin-right: 0; margin-right: 0;
@ -170,8 +172,8 @@ fuse-vertical-navigation {
flex-direction: column; flex-direction: column;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: $fuse-vertical-navigation-width; left: var(--fuse-vertical-navigation-width);
width: $fuse-vertical-navigation-width; width: var(--fuse-vertical-navigation-width);
height: 100%; height: 100%;
z-index: 5; z-index: 5;
overflow-x: hidden; overflow-x: hidden;
@ -196,7 +198,7 @@ fuse-vertical-navigation {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: $fuse-vertical-navigation-width; right: var(--fuse-vertical-navigation-width);
} }
} }

38
src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
View File

@ -1,6 +1,8 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-width: 280px; :root {
$fuse-vertical-navigation-dense-width: 80px; --fuse-vertical-navigation-width: 280px;
--fuse-vertical-navigation-dense-width: 80px;
}
fuse-vertical-navigation { fuse-vertical-navigation {
@ -8,16 +10,16 @@ fuse-vertical-navigation {
&.fuse-vertical-navigation-appearance-dense { &.fuse-vertical-navigation-appearance-dense {
&:not(.fuse-vertical-navigation-mode-over) { &:not(.fuse-vertical-navigation-mode-over) {
width: $fuse-vertical-navigation-dense-width; width: var(--fuse-vertical-navigation-dense-width);
min-width: $fuse-vertical-navigation-dense-width; min-width: var(--fuse-vertical-navigation-dense-width);
max-width: $fuse-vertical-navigation-dense-width; max-width: var(--fuse-vertical-navigation-dense-width);
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -$fuse-vertical-navigation-dense-width; margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1);
} }
/* Opened */ /* Opened */
@ -31,7 +33,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -$fuse-vertical-navigation-dense-width; margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1);
} }
/* Opened */ /* Opened */
@ -42,14 +44,14 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: $fuse-vertical-navigation-dense-width; right: var(--fuse-vertical-navigation-dense-width);
} }
&.fuse-vertical-navigation-hover { &.fuse-vertical-navigation-hover {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; 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-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
width: $fuse-vertical-navigation-dense-width - 24px; width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
min-width: $fuse-vertical-navigation-dense-width - 24px; min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
max-width: $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-arrow,
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
@ -142,23 +144,23 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: $fuse-vertical-navigation-dense-width; left: var(--fuse-vertical-navigation-dense-width);
} }
/* Hover */ /* Hover */
&.fuse-vertical-navigation-hover { &.fuse-vertical-navigation-hover {
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
width: $fuse-vertical-navigation-width; width: var(--fuse-vertical-navigation-width);
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
width: $fuse-vertical-navigation-width - 24px; width: calc(var(--fuse-vertical-navigation-width) - 24px);
min-width: $fuse-vertical-navigation-width - 24px; min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
max-width: $fuse-vertical-navigation-width - 24px; max-width: calc(var(--fuse-vertical-navigation-width) - 24px);
.fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-arrow,
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
@ -173,7 +175,7 @@ fuse-vertical-navigation {
} }
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: $fuse-vertical-navigation-width; left: var(--fuse-vertical-navigation-width);
} }
} }
} }

18
src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
View File

@ -1,19 +1,21 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-thin-width: 80px; :root {
--fuse-vertical-navigation-thin-width: 80px;
}
fuse-vertical-navigation { fuse-vertical-navigation {
/* Thin appearance overrides */ /* Thin appearance overrides */
&.fuse-vertical-navigation-appearance-thin { &.fuse-vertical-navigation-appearance-thin {
width: $fuse-vertical-navigation-thin-width; width: var(--fuse-vertical-navigation-thin-width);
min-width: $fuse-vertical-navigation-thin-width; min-width: var(--fuse-vertical-navigation-thin-width);
max-width: $fuse-vertical-navigation-thin-width; max-width: var(--fuse-vertical-navigation-thin-width);
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
&.fuse-vertical-navigation-mode-side { &.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 { &.fuse-vertical-navigation-opened {
@ -25,7 +27,7 @@ fuse-vertical-navigation {
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
&.fuse-vertical-navigation-mode-side { &.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 { &.fuse-vertical-navigation-opened {
@ -34,7 +36,7 @@ fuse-vertical-navigation {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: $fuse-vertical-navigation-thin-width; right: var(--fuse-vertical-navigation-thin-width);
} }
} }
@ -91,7 +93,7 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: $fuse-vertical-navigation-thin-width; left: var(--fuse-vertical-navigation-thin-width);
} }
} }
} }

2
src/@fuse/version/fuse-version.ts
View File

@ -1,3 +1,3 @@
import { Version } from '@fuse/version/version'; 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;

3
src/app/layout/layouts/vertical/dense/dense.component.ts
View File

@ -66,6 +66,9 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
// Change the navigation appearance
this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense';
}); });
} }