mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' into skeleton
This commit is contained in:
Sercan Yemen
commit
ff0f2933d9
|
|
@ -25,6 +25,7 @@
|
|||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"hmr": "environments/environment.hmr.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2067
package-lock.json
generated
2067
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
69
package.json
69
package.json
|
|
@ -1,29 +1,32 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.0.5",
|
||||
"version": "1.1.0",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"start-hmr": "ng serve --hmr -e=hmr -sm=false",
|
||||
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
|
||||
"build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
|
||||
"build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.5",
|
||||
"@angular/animations": "4.4.3",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.5",
|
||||
"@angular/compiler": "4.3.5",
|
||||
"@angular/core": "4.3.5",
|
||||
"@angular/common": "4.4.3",
|
||||
"@angular/compiler": "4.4.3",
|
||||
"@angular/core": "4.4.3",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/forms": "4.3.5",
|
||||
"@angular/http": "4.3.5",
|
||||
"@angular/forms": "4.4.3",
|
||||
"@angular/http": "4.4.3",
|
||||
"@angular/material": "2.0.0-beta.10",
|
||||
"@angular/platform-browser": "4.3.5",
|
||||
"@angular/platform-browser-dynamic": "4.3.5",
|
||||
"@angular/router": "4.3.5",
|
||||
"@angular/platform-browser": "4.4.3",
|
||||
"@angular/platform-browser-dynamic": "4.4.3",
|
||||
"@angular/router": "4.4.3",
|
||||
"@swimlane/ngx-charts": "6.0.2",
|
||||
"@swimlane/ngx-datatable": "9.3.1",
|
||||
"@swimlane/ngx-dnd": "3.0.0",
|
||||
|
|
@ -39,32 +42,34 @@
|
|||
"moment": "2.18.1",
|
||||
"ngx-color-picker": "4.3.1",
|
||||
"ngx-cookie-service": "1.0.7",
|
||||
"ngx-perfect-scrollbar": "4.5.6",
|
||||
"ngx-perfect-scrollbar": "4.6.2",
|
||||
"perfect-scrollbar": "0.8.1",
|
||||
"rxjs": "5.4.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.3.2",
|
||||
"@angular/compiler-cli": "4.3.5",
|
||||
"@angular/language-service": "4.3.5",
|
||||
"@ngtools/webpack": "^1.6.2",
|
||||
"@types/jasmine": "^2.5.54",
|
||||
"@types/jasminewd2": "^2.0.2",
|
||||
"@types/node": "^6.0.88",
|
||||
"codelyzer": "~3.0.1",
|
||||
"jasmine-core": "~2.6.2",
|
||||
"jasmine-spec-reporter": "~4.1.0",
|
||||
"@angular/cli": "1.4.2",
|
||||
"@angular/compiler-cli": "4.4.3",
|
||||
"@angular/language-service": "4.4.3",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@ngtools/webpack": "1.7.1",
|
||||
"@types/jasmine": "2.6.0",
|
||||
"@types/jasminewd2": "2.0.2",
|
||||
"@types/node": "6.0.88",
|
||||
"codelyzer": "3.0.1",
|
||||
"jasmine-core": "2.6.2",
|
||||
"jasmine-spec-reporter": "4.1.0",
|
||||
"karma": "1.7.1",
|
||||
"karma-chrome-launcher": "~2.1.1",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"node-sass": "^4.5.3",
|
||||
"protractor": "~5.1.2",
|
||||
"ts-node": "~3.0.4",
|
||||
"tslint": "~5.3.2",
|
||||
"typescript": "~2.3.3"
|
||||
"karma-chrome-launcher": "2.1.1",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "1.2.1",
|
||||
"karma-jasmine": "1.1.0",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"node-sass": "4.5.3",
|
||||
"protractor": "5.1.2",
|
||||
"ts-node": "3.0.4",
|
||||
"tslint": "5.3.2",
|
||||
"typescript": "2.3.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
|||
import { FuseMainModule } from './main/main.module';
|
||||
import { FuseSplashScreenService } from './core/services/splash-screen.service';
|
||||
import { FuseConfigService } from './core/services/config.service';
|
||||
import { FuseNavigationService } from './core/components/navigation/navigation.service';
|
||||
import { FuseSampleModule } from './main/content/sample/sample.module';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
|
|
@ -37,7 +38,8 @@ const appRoutes: Routes = [
|
|||
],
|
||||
providers : [
|
||||
FuseSplashScreenService,
|
||||
FuseConfigService
|
||||
FuseConfigService,
|
||||
FuseNavigationService
|
||||
],
|
||||
bootstrap : [
|
||||
AppComponent
|
||||
|
|
|
|||
|
|
@ -1,10 +1,56 @@
|
|||
import { sequence, trigger, stagger, animate, style, group, query, transition, keyframes, animateChild, state } from '@angular/animations';
|
||||
import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
|
||||
|
||||
// const query = (s, a, o = {optional: true}) => q(s, a, o);
|
||||
const customAnimation = animation([
|
||||
style({
|
||||
opacity : '{{opacity}}',
|
||||
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
|
||||
}),
|
||||
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
|
||||
], {
|
||||
params: {
|
||||
duration: '200ms',
|
||||
delay : '0ms',
|
||||
opacity : '0',
|
||||
scale : '1',
|
||||
x : '0',
|
||||
y : '0',
|
||||
z : '0'
|
||||
}
|
||||
});
|
||||
|
||||
export class Animations
|
||||
{
|
||||
public static fadeInOut = trigger('fadeInOut', [
|
||||
export const fuseAnimations = [
|
||||
|
||||
trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
|
||||
|
||||
trigger('animateStagger', [
|
||||
state('50', style('*')),
|
||||
state('100', style('*')),
|
||||
state('200', style('*')),
|
||||
|
||||
transition('void => 50',
|
||||
query('@*',
|
||||
[
|
||||
stagger('50ms', [
|
||||
animateChild()
|
||||
])
|
||||
])),
|
||||
transition('void => 100',
|
||||
query('@*',
|
||||
[
|
||||
stagger('100ms', [
|
||||
animateChild()
|
||||
])
|
||||
])),
|
||||
transition('void => 200',
|
||||
query('@*',
|
||||
[
|
||||
stagger('200ms', [
|
||||
animateChild()
|
||||
])
|
||||
]))
|
||||
]),
|
||||
|
||||
trigger('fadeInOut', [
|
||||
state('0', style({
|
||||
display: 'none',
|
||||
opacity: 0
|
||||
|
|
@ -15,9 +61,9 @@ export class Animations
|
|||
})),
|
||||
transition('1 => 0', animate('300ms ease-out')),
|
||||
transition('0 => 1', animate('300ms ease-in'))
|
||||
]);
|
||||
]),
|
||||
|
||||
public static slideInOut = trigger('slideInOut', [
|
||||
trigger('slideInOut', [
|
||||
state('0', style({
|
||||
height : '0px',
|
||||
display: 'none'
|
||||
|
|
@ -28,9 +74,9 @@ export class Animations
|
|||
})),
|
||||
transition('1 => 0', animate('300ms ease-out')),
|
||||
transition('0 => 1', animate('300ms ease-in'))
|
||||
]);
|
||||
]),
|
||||
|
||||
public static slideInLeft = trigger('slideInLeft', [
|
||||
trigger('slideInLeft', [
|
||||
state('void', style({
|
||||
transform: 'translateX(-100%)',
|
||||
display : 'none'
|
||||
|
|
@ -41,9 +87,9 @@ export class Animations
|
|||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]);
|
||||
]),
|
||||
|
||||
public static slideInRight = trigger('slideInRight', [
|
||||
trigger('slideInRight', [
|
||||
state('void', style({
|
||||
transform: 'translateX(100%)',
|
||||
display : 'none'
|
||||
|
|
@ -54,9 +100,9 @@ export class Animations
|
|||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]);
|
||||
]),
|
||||
|
||||
public static slideInTop = trigger('slideInTop', [
|
||||
trigger('slideInTop', [
|
||||
state('void', style({
|
||||
transform: 'translateY(-100%)',
|
||||
display : 'none'
|
||||
|
|
@ -67,9 +113,9 @@ export class Animations
|
|||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]);
|
||||
]),
|
||||
|
||||
public static slideInBottom = trigger('slideInBottom', [
|
||||
trigger('slideInBottom', [
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translateY(100%)',
|
||||
|
|
@ -81,9 +127,9 @@ export class Animations
|
|||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]);
|
||||
]),
|
||||
|
||||
public static routerTransitionLeft = trigger('routerTransitionLeft', [
|
||||
trigger('routerTransitionLeft', [
|
||||
|
||||
transition('* => *', [
|
||||
query('fuse-content > :enter, fuse-content > :leave', [
|
||||
|
|
@ -108,7 +154,7 @@ export class Animations
|
|||
transform: 'translateX(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(-100%)',
|
||||
opacity : 0
|
||||
|
|
@ -116,7 +162,7 @@ export class Animations
|
|||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
style({transform: 'translateX(100%)'}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(0%)',
|
||||
opacity : 1
|
||||
|
|
@ -127,9 +173,9 @@ export class Animations
|
|||
query('fuse-content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
])
|
||||
]);
|
||||
]),
|
||||
|
||||
public static routerTransitionRight = trigger('routerTransitionRight', [
|
||||
trigger('routerTransitionRight', [
|
||||
|
||||
transition('* => *', [
|
||||
query('fuse-content > :enter, fuse-content > :leave', [
|
||||
|
|
@ -154,7 +200,7 @@ export class Animations
|
|||
transform: 'translateX(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(100%)',
|
||||
opacity : 0
|
||||
|
|
@ -162,7 +208,7 @@ export class Animations
|
|||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
style({transform: 'translateX(-100%)'}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(0%)',
|
||||
opacity : 1
|
||||
|
|
@ -173,9 +219,9 @@ export class Animations
|
|||
query('fuse-content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
])
|
||||
]);
|
||||
]),
|
||||
|
||||
public static routerTransitionUp = trigger('routerTransitionUp', [
|
||||
trigger('routerTransitionUp', [
|
||||
|
||||
transition('* => *', [
|
||||
query('fuse-content > :enter, fuse-content > :leave', [
|
||||
|
|
@ -193,35 +239,33 @@ export class Animations
|
|||
opacity : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
sequence([
|
||||
group([
|
||||
query('fuse-content > :leave', [
|
||||
group([
|
||||
query('fuse-content > :leave', [
|
||||
style({
|
||||
transform: 'translateY(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(0)',
|
||||
transform: 'translateY(-100%)',
|
||||
opacity : 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
style({transform: 'translateY(100%)'}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(0%)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
style({
|
||||
transform: 'translateY(-100%)',
|
||||
opacity : 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
style({transform: 'translateY(100%)'}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
style({
|
||||
transform: 'translateY(0%)',
|
||||
opacity : 1
|
||||
}))
|
||||
], {optional: true})
|
||||
]),
|
||||
query('fuse-content > :leave', animateChild(), {optional: true}),
|
||||
query('fuse-content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
}))
|
||||
], {optional: true})
|
||||
]),
|
||||
query('fuse-content > :leave', animateChild(), {optional: true}),
|
||||
query('fuse-content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
]);
|
||||
]),
|
||||
|
||||
public static routerTransitionDown = trigger('routerTransitionDown', [
|
||||
trigger('routerTransitionDown', [
|
||||
|
||||
transition('* => *', [
|
||||
query('fuse-content > :enter, fuse-content > :leave', [
|
||||
|
|
@ -246,7 +290,7 @@ export class Animations
|
|||
transform: 'translateY(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(100%)',
|
||||
opacity : 0
|
||||
|
|
@ -254,7 +298,7 @@ export class Animations
|
|||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
style({transform: 'translateY(-100%)'}),
|
||||
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(0%)',
|
||||
opacity : 1
|
||||
|
|
@ -265,11 +309,11 @@ export class Animations
|
|||
query('fuse-content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
])
|
||||
]);
|
||||
]),
|
||||
|
||||
public static routerTransitionFade = trigger('routerTransitionFade', [
|
||||
trigger('routerTransitionFade', [
|
||||
|
||||
transition('* => *', [
|
||||
transition('* => *', group([
|
||||
|
||||
query('fuse-content > :enter, fuse-content > :leave ', [
|
||||
style({
|
||||
|
|
@ -280,33 +324,32 @@ export class Animations
|
|||
right : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
|
||||
query('fuse-content > :enter', [
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
], {optional: true}),
|
||||
// sequence([
|
||||
query('fuse-content > :leave', [
|
||||
style({
|
||||
opacity: 1
|
||||
}),
|
||||
animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
style({
|
||||
opacity: 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
query('fuse-content > :leave', [
|
||||
style({
|
||||
opacity: 1
|
||||
}),
|
||||
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
opacity: 0
|
||||
}),
|
||||
animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
style({
|
||||
opacity: 1
|
||||
}))
|
||||
], {optional: true}),
|
||||
// ]),
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('fuse-content > :enter', [
|
||||
style({
|
||||
opacity: 0
|
||||
}),
|
||||
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
opacity: 1
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('fuse-content > :enter', animateChild(), {optional: true}),
|
||||
query('fuse-content > :leave', animateChild(), {optional: true})
|
||||
])
|
||||
]);
|
||||
}
|
||||
]))
|
||||
])
|
||||
];
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<div fxLayout="row" fxLayoutWrap
|
||||
fxLayoutAlign="start start"
|
||||
class="colors" perfect-scrollbar>
|
||||
class="colors" fusePerfectScrollbar>
|
||||
<div class="color"
|
||||
[ngClass]="'md-'+color.key+'-bg'"
|
||||
*ngFor="let color of (colors | keys)"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
[@slideInRight]>
|
||||
<div fxLayout="row" fxLayoutWrap
|
||||
fxLayoutAlign="start start"
|
||||
class="colors" perfect-scrollbar>
|
||||
class="colors" fusePerfectScrollbar>
|
||||
<div class="color"
|
||||
*ngFor="let hue of hues"
|
||||
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { MatColors } from '../../matColors';
|
||||
import { Animations } from '../../animations';
|
||||
import { fuseAnimations } from '../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-material-color-picker',
|
||||
templateUrl : './material-color-picker.component.html',
|
||||
styleUrls : ['./material-color-picker.component.scss'],
|
||||
animations : [Animations.slideInLeft, Animations.slideInRight],
|
||||
animations : fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@
|
|||
<div class="{{fuseSettings.colorClasses.navbar}}">
|
||||
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
|
||||
[item]="item"></fuse-nav-horizontal-collapse>
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
|
||||
import { Animations } from '../../../../animations';
|
||||
import { fuseAnimations } from '../../../../animations';
|
||||
import { FuseConfigService } from '../../../../services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
|
|||
selector : 'fuse-nav-horizontal-collapse',
|
||||
templateUrl: './nav-horizontal-collapse.component.html',
|
||||
styleUrls : ['./nav-horizontal-collapse.component.scss'],
|
||||
animations : [Animations.slideInOut]
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,27 +1,32 @@
|
|||
<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
|
||||
<div id="main-navigation" class="nav"
|
||||
[ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
|
||||
|
||||
<!-- Vertical Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'vertical'">
|
||||
|
||||
<ng-container *ngFor="let item of verticalNavigation">
|
||||
<ng-container *ngFor="let item of navigationModel">
|
||||
|
||||
<fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
<!-- / Vertical Navigation Layout -->
|
||||
|
||||
<!-- Horizontal Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'horizontal'">
|
||||
|
||||
<ng-container *ngFor="let item of horizontalNavigation">
|
||||
<ng-container *ngFor="let item of navigationModel">
|
||||
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
<fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
|
||||
[item]="item"></fuse-nav-horizontal-collapse>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
<!-- / Horizontal Navigation Layout -->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { FuseNavigationService } from './navigation.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navigation',
|
||||
|
|
@ -7,17 +8,26 @@ import { FuseNavigationService } from './navigation.service';
|
|||
styleUrls : ['./navigation.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseNavigationComponent
|
||||
export class FuseNavigationComponent implements OnDestroy
|
||||
{
|
||||
verticalNavigation: any[];
|
||||
horizontalNavigation: any[];
|
||||
navigationModel: any[];
|
||||
navigationModelChangeSubscription: Subscription;
|
||||
|
||||
@Input('layout') layout = 'vertical';
|
||||
|
||||
constructor(private navigationService: FuseNavigationService)
|
||||
constructor(private fuseNavigationService: FuseNavigationService)
|
||||
{
|
||||
this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
|
||||
this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
|
||||
this.navigationModelChangeSubscription =
|
||||
this.fuseNavigationService.onNavigationModelChange
|
||||
.subscribe((navigationModel) => {
|
||||
this.navigationModel = navigationModel;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
console.warn('destroyed');
|
||||
this.navigationModelChangeSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseNavigationComponent } from './navigation.component';
|
||||
import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
|
||||
import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
|
||||
import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
|
||||
import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
|
||||
import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
|
||||
import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
|
|||
],
|
||||
declarations: [
|
||||
FuseNavigationComponent,
|
||||
FuseNavVerticalSubheaderComponent,
|
||||
FuseNavVerticalGroupComponent,
|
||||
FuseNavVerticalItemComponent,
|
||||
FuseNavVerticalCollapseComponent,
|
||||
FuseNavHorizontalItemComponent,
|
||||
|
|
|
|||
|
|
@ -1,25 +1,43 @@
|
|||
import { EventEmitter, Injectable } from '@angular/core';
|
||||
import { FuseNavigation } from '../../../navigation.model';
|
||||
import { NavigationModel } from '../../../navigation.model';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
|
||||
@Injectable()
|
||||
export class FuseNavigationService
|
||||
{
|
||||
onNavCollapseToggled = new EventEmitter<any>();
|
||||
navigation: FuseNavigation;
|
||||
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
|
||||
navigationModel: NavigationModel;
|
||||
flatNavigation: any[] = [];
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.navigation = new FuseNavigation();
|
||||
this.navigationModel = new NavigationModel();
|
||||
this.onNavigationModelChange.next(this.navigationModel.model);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get navigation array
|
||||
* Get navigation model
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getNavigation(item)
|
||||
getNavigationModel()
|
||||
{
|
||||
return this.navigation[item];
|
||||
return this.navigationModel.model;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the navigation model
|
||||
* @param model
|
||||
*/
|
||||
setNavigationModel(model)
|
||||
{
|
||||
// console.log(model);
|
||||
|
||||
this.navigationModel = model;
|
||||
|
||||
console.log(this.navigationModel);
|
||||
|
||||
this.onNavigationModelChange.next(this.navigationModel.model);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -31,7 +49,7 @@ export class FuseNavigationService
|
|||
{
|
||||
if ( !navigationItems )
|
||||
{
|
||||
navigationItems = this.navigation;
|
||||
navigationItems = this.navigationModel.model;
|
||||
}
|
||||
|
||||
for ( const navItem of navigationItems )
|
||||
|
|
@ -41,7 +59,7 @@ export class FuseNavigationService
|
|||
continue;
|
||||
}
|
||||
|
||||
if ( navItem.type === 'nav-item' )
|
||||
if ( navItem.type === 'item' )
|
||||
{
|
||||
this.flatNavigation.push({
|
||||
title: navItem.title,
|
||||
|
|
@ -53,7 +71,7 @@ export class FuseNavigationService
|
|||
continue;
|
||||
}
|
||||
|
||||
if ( navItem.type === 'nav-collapse' )
|
||||
if ( navItem.type === 'collapse' || navItem.type === 'group' )
|
||||
{
|
||||
this.getFlatNavigation(navItem.children);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</a>
|
||||
<div class="children" [@slideInOut]="isOpen">
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
import { FuseNavigationService } from '../../navigation.service';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Animations } from '../../../../animations';
|
||||
import { fuseAnimations } from '../../../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-collapse',
|
||||
templateUrl: './nav-vertical-collapse.component.html',
|
||||
styleUrls : ['./nav-vertical-collapse.component.scss'],
|
||||
animations : [Animations.slideInOut]
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
{
|
||||
|
|
@ -15,21 +15,20 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
@HostBinding('class') classes = 'nav-collapse nav-item';
|
||||
@HostBinding('class.open') public isOpen = false;
|
||||
|
||||
constructor(private navigationService: FuseNavigationService, private router: Router)
|
||||
constructor(
|
||||
private navigationService: FuseNavigationService,
|
||||
private router: Router
|
||||
)
|
||||
{
|
||||
/**
|
||||
* When navigation changed
|
||||
*/
|
||||
// Listen for route changes
|
||||
router.events.subscribe(
|
||||
(event) => {
|
||||
if ( event instanceof NavigationEnd )
|
||||
{
|
||||
/**
|
||||
* Check if the url is child of the collapse
|
||||
*/
|
||||
// Check if the url can be found in
|
||||
// one of the children of this item
|
||||
if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
|
||||
{
|
||||
// console.log(this.item);
|
||||
this.expand();
|
||||
}
|
||||
else
|
||||
|
|
@ -40,47 +39,53 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Whenever a navigation collapse item toggled
|
||||
*/
|
||||
this.navigationService.onNavCollapseToggled.subscribe(
|
||||
(clickedItem) => {
|
||||
if ( clickedItem.children )
|
||||
{
|
||||
/**
|
||||
* if clicked collapse is child of this collapse
|
||||
* return
|
||||
*/
|
||||
if ( this.item.children.indexOf(clickedItem) !== -1 )
|
||||
// Listen for collapsing of any navigation item
|
||||
this.navigationService.onNavCollapseToggled
|
||||
.subscribe(
|
||||
(clickedItem) => {
|
||||
if ( clickedItem.children )
|
||||
{
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* If collapsed item is not related with this collapse
|
||||
* collapse
|
||||
*/
|
||||
if ( this.item !== clickedItem )
|
||||
{
|
||||
this.collapse();
|
||||
// Check if the clicked item is one
|
||||
// of the children of this item
|
||||
if ( this.isChildrenOf(this.item, clickedItem) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the url can be found in
|
||||
// one of the children of this item
|
||||
if ( this.isUrlInChildren(this.item, this.router.url) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If the clicked item is not this item, collapse...
|
||||
if ( this.item !== clickedItem )
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle Collapse
|
||||
* Toggle collapse
|
||||
*
|
||||
* @param ev
|
||||
*/
|
||||
toggleOpen(ev)
|
||||
{
|
||||
ev.preventDefault();
|
||||
|
||||
this.isOpen = !this.isOpen;
|
||||
|
||||
// Navigation collapse toggled...
|
||||
this.navigationService.onNavCollapseToggled.emit(this.item);
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand
|
||||
* Expand the collapsable navigation
|
||||
*/
|
||||
expand()
|
||||
{
|
||||
|
|
@ -88,11 +93,12 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse
|
||||
* Collapse the collapsable navigation
|
||||
*/
|
||||
collapse()
|
||||
{
|
||||
|
|
@ -104,29 +110,60 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
|
||||
/**
|
||||
* Checking the url is in children
|
||||
* @param arr
|
||||
* @param url
|
||||
* @returns {any}
|
||||
* Check if the given parent has the
|
||||
* given item in one of its children
|
||||
*
|
||||
* @param parent
|
||||
* @param item
|
||||
* @return {any}
|
||||
*/
|
||||
isUrlInChildren(arr, url)
|
||||
isChildrenOf(parent, item)
|
||||
{
|
||||
if ( !arr.children )
|
||||
if ( !parent.children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
for ( let i = 0; i < arr.children.length; i++ )
|
||||
if ( parent.children.indexOf(item) !== -1 )
|
||||
{
|
||||
if ( arr.children[i].children )
|
||||
return true;
|
||||
}
|
||||
|
||||
for ( const children of parent.children )
|
||||
{
|
||||
if ( children.children )
|
||||
{
|
||||
if ( this.isUrlInChildren(arr.children[i], url) )
|
||||
return this.isChildrenOf(children, item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given url can be found
|
||||
* in one of the given parent's children
|
||||
*
|
||||
* @param parent
|
||||
* @param url
|
||||
* @returns {any}
|
||||
*/
|
||||
isUrlInChildren(parent, url)
|
||||
{
|
||||
if ( !parent.children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
for ( let i = 0; i < parent.children.length; i++ )
|
||||
{
|
||||
if ( parent.children[i].children )
|
||||
{
|
||||
if ( this.isUrlInChildren(parent.children[i], url) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if ( arr.children[i].url === url )
|
||||
if ( parent.children[i].url === url )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
|
@ -135,11 +172,6 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
return false;
|
||||
}
|
||||
|
||||
public isCollapsed(): boolean
|
||||
{
|
||||
return this.isOpen;
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<div class="group-title">
|
||||
<span class="hint-text">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="group-items">
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
|
||||
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
|
||||
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
:host {
|
||||
|
||||
.folded:not(.folded-open) & {
|
||||
|
||||
> .group-title {
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
min-width: 1.6rem;
|
||||
border-top: 2px solid;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-group',
|
||||
templateUrl: './nav-vertical-group.component.html',
|
||||
styleUrls : ['./nav-vertical-group.component.scss']
|
||||
})
|
||||
export class FuseNavVerticalGroupComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-group';
|
||||
@Input() item: any;
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<span class="hint-text">{{ item.title }}</span>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
|
||||
:host {
|
||||
|
||||
.folded:not(.folded-open) & {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
min-width: 1.6rem;
|
||||
border-top: 2px solid;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
> span {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-subheader',
|
||||
templateUrl: './nav-vertical-subheader.component.html',
|
||||
styleUrls : ['./nav-vertical-subheader.component.scss']
|
||||
})
|
||||
export class FuseNavVerticalSubheaderComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-subheader';
|
||||
@Input() item: any;
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</md-input-container>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
|
||||
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
|
||||
|
||||
<md-list-item *ngFor="let shortcutItem of shortcutItems"
|
||||
(click)="toggleShortcut($event, shortcutItem)">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</md-list-item>
|
||||
</md-nav-list>
|
||||
|
||||
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
|
||||
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
|
||||
<md-list-item *ngFor="let navigationItem of filteredNavigationItems"
|
||||
(click)="toggleShortcut($event, navigationItem)">
|
||||
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -4,107 +4,95 @@
|
|||
|
||||
<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
|
||||
|
||||
<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16">
|
||||
<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
|
||||
|
||||
<button md-icon-button class="close-button" (click)="closeBar()">
|
||||
<md-icon>close</md-icon>
|
||||
</button>
|
||||
|
||||
<md-list>
|
||||
<h3 md-subheader>Navigation:</h3>
|
||||
<md-list-item>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
|
||||
<md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
|
||||
</md-radio-group>
|
||||
</md-list-item>
|
||||
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
|
||||
|
||||
<h3 md-subheader>Toolbar:</h3>
|
||||
<md-list-item>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
|
||||
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
|
||||
</md-radio-group>
|
||||
</md-list-item>
|
||||
<h3>Navigation:</h3>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
|
||||
</md-radio-group>
|
||||
|
||||
<h3 md-subheader>Footer:</h3>
|
||||
<md-list-item>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
|
||||
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
|
||||
</md-radio-group>
|
||||
</md-list-item>
|
||||
<h3 class="mt-24">Toolbar:</h3>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
|
||||
</md-radio-group>
|
||||
|
||||
<h3 md-subheader>Layout Mode:</h3>
|
||||
<md-list-item>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
|
||||
<md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
|
||||
</md-radio-group>
|
||||
</md-list-item>
|
||||
<h3 class="mt-24">Footer:</h3>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
|
||||
</md-radio-group>
|
||||
|
||||
<h3 class="mt-24">Layout Mode:</h3>
|
||||
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
|
||||
<md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
|
||||
</md-radio-group>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<h3 md-subheader>Colors:</h3>
|
||||
<h3>Colors:</h3>
|
||||
<div class="colors">
|
||||
|
||||
<md-list-item class="mb-8">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Toolbar Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
|
||||
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="mb-8">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Navigation Bar Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
|
||||
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="mb-8">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Footer Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
|
||||
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
</div>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<h3 md-subheader>Animation:</h3>
|
||||
<h3>Router Animation:</h3>
|
||||
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<md-option value="none">
|
||||
None
|
||||
</md-option>
|
||||
<md-option value="slideUp">
|
||||
Slide up
|
||||
</md-option>
|
||||
<md-option value="slideDown">
|
||||
Slide down
|
||||
</md-option>
|
||||
<md-option value="slideRight">
|
||||
Slide right
|
||||
</md-option>
|
||||
<md-option value="slideLeft">
|
||||
Slide left
|
||||
</md-option>
|
||||
<md-option value="fadeIn">
|
||||
Fade in
|
||||
</md-option>
|
||||
</md-select>
|
||||
|
||||
<md-list-item>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4>Router Animation</h4>
|
||||
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<md-option value="none">
|
||||
None
|
||||
</md-option>
|
||||
<md-option value="slideUp">
|
||||
Slide up
|
||||
</md-option>
|
||||
<md-option value="slideDown">
|
||||
Slide down
|
||||
</md-option>
|
||||
<md-option value="slideRight">
|
||||
Slide right
|
||||
</md-option>
|
||||
<md-option value="slideLeft">
|
||||
Slide left
|
||||
</md-option>
|
||||
<md-option value="fadeIn">
|
||||
Fade in
|
||||
</md-option>
|
||||
</md-select>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</div>
|
||||
|
||||
</md-list>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@
|
|||
right: 0;
|
||||
top: 160px;
|
||||
|
||||
&.bar-closed .theme-options-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-options-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -22,11 +26,14 @@
|
|||
width: 360px;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
z-index: 999;
|
||||
max-width: 80vw;
|
||||
max-height: calc(100vh - 180px);
|
||||
max-height: calc(100vh - 200px);
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
top: -120px;
|
||||
max-height: calc(100vh - 100px);
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
|
|
@ -34,6 +41,23 @@
|
|||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.mat-divider{
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
margin: 24px 0 16px 0;
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-options-panel-overlay {
|
||||
|
|
@ -46,6 +70,10 @@
|
|||
bottom: 0;
|
||||
z-index: 998;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
background: rgba(0, 0, 0, 0.37);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -82,4 +110,5 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
|
||||
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { Animations } from '../../animations';
|
||||
import { fuseAnimations } from '../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-theme-options',
|
||||
templateUrl: './theme-options.component.html',
|
||||
styleUrls : ['./theme-options.component.scss'],
|
||||
animations : [Animations.fadeInOut]
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
|
@ -18,10 +18,11 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
|
||||
public player: AnimationPlayer;
|
||||
fuseSettings: any;
|
||||
barClosed: boolean;
|
||||
|
||||
onSettingsChanged: Subscription;
|
||||
|
||||
@HostBinding('class.bar-closed') barClosed: boolean;
|
||||
|
||||
constructor(
|
||||
private animationBuilder: AnimationBuilder,
|
||||
private fuseConfig: FuseConfigService,
|
||||
|
|
@ -53,8 +54,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
|
||||
closeBar()
|
||||
{
|
||||
this.barClosed = true;
|
||||
|
||||
this.player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
|
|
@ -63,6 +62,10 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
]).create(this.panel.nativeElement);
|
||||
|
||||
this.player.play();
|
||||
|
||||
this.player.onDone(() => {
|
||||
this.barClosed = true;
|
||||
});
|
||||
}
|
||||
|
||||
openBar()
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
|
|||
{
|
||||
setTimeout(() => {
|
||||
this.viewContainer.createEmbeddedView(this.templateRef);
|
||||
}, 0);
|
||||
}, 350);
|
||||
this.isCreated = true;
|
||||
}
|
||||
else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
|
||||
import * as Ps from 'perfect-scrollbar';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
|
||||
@Directive({
|
||||
selector: '[fusePerfectScrollbar]'
|
||||
})
|
||||
export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
|
||||
{
|
||||
onSettingsChanged: Subscription;
|
||||
isDisableCustomScrollbars = false;
|
||||
isMobile = false;
|
||||
isInitialized = true;
|
||||
|
||||
constructor(
|
||||
private element: ElementRef,
|
||||
private zone: NgZone,
|
||||
private fuseConfig: FuseConfigService,
|
||||
private platform: Platform
|
||||
)
|
||||
{
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
(settings) => {
|
||||
this.isDisableCustomScrollbars = !settings.customScrollbars;
|
||||
}
|
||||
);
|
||||
|
||||
if ( this.platform.ANDROID || this.platform.IOS )
|
||||
{
|
||||
this.isMobile = true;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit()
|
||||
{
|
||||
if ( this.isMobile || this.isDisableCustomScrollbars )
|
||||
{
|
||||
this.isInitialized = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.zone.runOutsideAngular(() => {
|
||||
|
||||
// Initialize the perfect-scrollbar
|
||||
Ps.initialize(this.element.nativeElement);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
if ( !this.isInitialized )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.onSettingsChanged.unsubscribe();
|
||||
|
||||
// Destroy the perfect-scrollbar
|
||||
Ps.destroy(this.element.nativeElement);
|
||||
}
|
||||
|
||||
update()
|
||||
{
|
||||
if ( !this.isInitialized )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the perfect-scrollbar
|
||||
Ps.update(this.element.nativeElement);
|
||||
}
|
||||
|
||||
destroy()
|
||||
{
|
||||
this.ngOnDestroy();
|
||||
}
|
||||
|
||||
scrollToX(x: number, speed?: number)
|
||||
{
|
||||
this.animateScrolling('scrollLeft', x, speed);
|
||||
}
|
||||
|
||||
scrollToY(y: number, speed?: number)
|
||||
{
|
||||
this.animateScrolling('scrollTop', y, speed);
|
||||
}
|
||||
|
||||
scrollToTop(offset?: number, speed?: number)
|
||||
{
|
||||
this.animateScrolling('scrollTop', (offset || 0), speed);
|
||||
}
|
||||
|
||||
scrollToLeft(offset?: number, speed?: number)
|
||||
{
|
||||
this.animateScrolling('scrollLeft', (offset || 0), speed);
|
||||
}
|
||||
|
||||
scrollToRight(offset?: number, speed?: number)
|
||||
{
|
||||
const width = this.element.nativeElement.scrollWidth;
|
||||
|
||||
this.animateScrolling('scrollLeft', width - (offset || 0), speed);
|
||||
}
|
||||
|
||||
scrollToBottom(offset?: number, speed?: number)
|
||||
{
|
||||
const height = this.element.nativeElement.scrollHeight;
|
||||
|
||||
this.animateScrolling('scrollTop', height - (offset || 0), speed);
|
||||
}
|
||||
|
||||
animateScrolling(target: string, value: number, speed?: number)
|
||||
{
|
||||
if ( !speed )
|
||||
{
|
||||
this.element.nativeElement[target] = value;
|
||||
|
||||
// PS has weird event sending order, this is a workaround for that
|
||||
this.update();
|
||||
|
||||
this.update();
|
||||
}
|
||||
else if ( value !== this.element.nativeElement[target] )
|
||||
{
|
||||
let newValue = 0;
|
||||
let scrollCount = 0;
|
||||
|
||||
let oldTimestamp = performance.now();
|
||||
let oldValue = this.element.nativeElement[target];
|
||||
|
||||
const cosParameter = (oldValue - value) / 2;
|
||||
|
||||
const step = (newTimestamp) => {
|
||||
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
|
||||
|
||||
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
|
||||
|
||||
// Only continue animation if scroll position has not changed
|
||||
if ( this.element.nativeElement[target] === oldValue )
|
||||
{
|
||||
if ( scrollCount >= Math.PI )
|
||||
{
|
||||
this.element.nativeElement[target] = value;
|
||||
|
||||
// PS has weird event sending order, this is a workaround for that
|
||||
this.update();
|
||||
|
||||
this.update();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.element.nativeElement[target] = oldValue = newValue;
|
||||
|
||||
oldTimestamp = newTimestamp;
|
||||
|
||||
window.requestAnimationFrame(step);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(step);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
|
||||
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
|
||||
import { MdSidenav } from '@angular/material';
|
||||
import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
|
||||
import { FuseMatchMedia } from '../../services/match-media.service';
|
||||
|
|
@ -8,7 +8,7 @@ import { Subscription } from 'rxjs/Subscription';
|
|||
@Directive({
|
||||
selector: '[fuseMdSidenavHelper]'
|
||||
})
|
||||
export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
|
||||
export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
|
||||
{
|
||||
matchMediaSubscription: Subscription;
|
||||
|
||||
|
|
@ -38,6 +38,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
|
|||
this.mdSidenav.mode = 'side';
|
||||
this.mdSidenav.open();
|
||||
});
|
||||
this.stopTransition = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -46,6 +47,10 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
|
|||
this.mdSidenav.mode = 'over';
|
||||
this.mdSidenav.close();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.stopTransition = false;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
|
||||
|
|
@ -69,13 +74,6 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
|
|||
|
||||
}
|
||||
|
||||
ngAfterViewInit()
|
||||
{
|
||||
setTimeout(() => {
|
||||
this.stopTransition = false;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.matchMediaSubscription.unsubscribe();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
export class FuseUtils
|
||||
{
|
||||
|
||||
public static filterArrayByString(mainArr, searchText)
|
||||
{
|
||||
if ( searchText === '' )
|
||||
|
|
@ -17,7 +16,6 @@ export class FuseUtils
|
|||
|
||||
public static searchInObj(itemObj, searchText)
|
||||
{
|
||||
|
||||
for ( const prop in itemObj )
|
||||
{
|
||||
if ( !itemObj.hasOwnProperty(prop) )
|
||||
|
|
@ -29,7 +27,7 @@ export class FuseUtils
|
|||
|
||||
if ( typeof value === 'string' )
|
||||
{
|
||||
if ( this.searchInSting(value, searchText) )
|
||||
if ( this.searchInString(value, searchText) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
|
@ -41,7 +39,6 @@ export class FuseUtils
|
|||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if ( typeof value === 'object' )
|
||||
|
|
@ -60,7 +57,7 @@ export class FuseUtils
|
|||
{
|
||||
if ( typeof value === 'string' )
|
||||
{
|
||||
if ( this.searchInSting(value, searchText) )
|
||||
if ( this.searchInString(value, searchText) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
|
@ -76,7 +73,7 @@ export class FuseUtils
|
|||
}
|
||||
}
|
||||
|
||||
public static searchInSting(value, searchText)
|
||||
public static searchInString(value, searchText)
|
||||
{
|
||||
return value.toLowerCase().includes(searchText);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { MaterialModule } from './material.module';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { ColorPickerModule } from 'ngx-color-picker';
|
||||
import { NgxDnDModule } from '@swimlane/ngx-dnd';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
|
@ -13,11 +12,11 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
|
|||
import { FusePipesModule } from '../pipes/pipes.module';
|
||||
import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
|
||||
import { FuseCountdownComponent } from '../components/countdown/countdown.component';
|
||||
import { FuseNavigationService } from '../components/navigation/navigation.service';
|
||||
import { FuseMatchMedia } from '../services/match-media.service';
|
||||
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
|
||||
import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
|
||||
import { FuseHljsComponent } from '../components/hljs/hljs.component';
|
||||
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
|
||||
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
|
||||
import { Md2Module } from 'md2';
|
||||
|
|
@ -31,6 +30,7 @@ import { CookieService } from 'ngx-cookie-service';
|
|||
FuseCountdownComponent,
|
||||
FuseHljsComponent,
|
||||
FuseIfOnDomDirective,
|
||||
FusePerfectScrollbarDirective,
|
||||
FuseMaterialColorPickerComponent
|
||||
],
|
||||
imports : [
|
||||
|
|
@ -39,7 +39,6 @@ import { CookieService } from 'ngx-cookie-service';
|
|||
CommonModule,
|
||||
FormsModule,
|
||||
FusePipesModule,
|
||||
PerfectScrollbarModule,
|
||||
ReactiveFormsModule,
|
||||
ColorPickerModule,
|
||||
NgxDnDModule,
|
||||
|
|
@ -56,7 +55,7 @@ import { CookieService } from 'ngx-cookie-service';
|
|||
FusePipesModule,
|
||||
FuseCountdownComponent,
|
||||
FuseHljsComponent,
|
||||
PerfectScrollbarModule,
|
||||
FusePerfectScrollbarDirective,
|
||||
ReactiveFormsModule,
|
||||
ColorPickerModule,
|
||||
NgxDnDModule,
|
||||
|
|
@ -70,7 +69,6 @@ import { CookieService } from 'ngx-cookie-service';
|
|||
],
|
||||
providers : [
|
||||
CookieService,
|
||||
FuseNavigationService,
|
||||
FuseMatchMedia,
|
||||
FuseNavbarVerticalService,
|
||||
FuseMdSidenavHelperService
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
@import '~@swimlane/ngx-datatable/release/index.css';
|
||||
@import '~@swimlane/ngx-datatable/release/themes/material.css';
|
||||
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
|
||||
// Perfect Scrollbar
|
||||
@import "~perfect-scrollbar/src/css/main";
|
||||
// Perfect scrollbar
|
||||
@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
|
||||
// Fuse
|
||||
@import "fuse";
|
||||
|
||||
|
|
|
|||
|
|
@ -4,3 +4,38 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
md-sidenav-container {
|
||||
|
||||
md-sidenav {
|
||||
|
||||
&[md-is-locked-open].md-stop-transition {
|
||||
transition: none !important;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
opacity: 0;
|
||||
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-sidenav-opened {
|
||||
|
||||
&.mat-drawer-side {
|
||||
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
transition: none !important;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-drawer-end {
|
||||
}
|
||||
}
|
||||
|
||||
.mat-drawer-content {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,21 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
|
||||
> .group-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
font-weight: 500;
|
||||
padding-left: 24px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
|
|
@ -119,6 +134,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .nav-group {
|
||||
|
||||
> .group-items {
|
||||
|
||||
> .nav-collapse {
|
||||
background: transparent;
|
||||
transition: background 200ms ease-in-out;
|
||||
|
||||
&.open {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
|
||||
.nav-group {
|
||||
|
||||
.group-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -137,19 +137,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
@include mat-elevation(7);
|
||||
|
||||
&.md-is-locked-open {
|
||||
position: relative;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.md-stop-transition {
|
||||
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
height: $carded-header-height;
|
||||
min-height: $carded-header-height;
|
||||
|
|
@ -233,7 +224,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
margin-left: 0 !important;
|
||||
|
||||
.center {
|
||||
margin-left: 0;
|
||||
|
|
@ -257,7 +247,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
margin-right: 0 !important;
|
||||
|
||||
.center {
|
||||
margin-right: 0;
|
||||
|
|
@ -284,6 +273,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
}
|
||||
|
||||
// Fullwidth
|
||||
&.fullwidth {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&.fullwidth,
|
||||
&.inner-sidenav {
|
||||
min-height: 100%;
|
||||
|
|
@ -309,10 +302,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
> .mat-drawer-content {
|
||||
flex: 1 0 auto;
|
||||
max-height: none;
|
||||
|
||||
> .center {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -352,6 +341,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
> md-sidenav-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//flex-direction: row;
|
||||
flex: 1;
|
||||
background: none;
|
||||
z-index: 2;
|
||||
|
|
@ -372,14 +362,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
&.md-stop-transition {
|
||||
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -467,7 +449,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
&.simple {
|
||||
|
||||
&.fullwidth {
|
||||
overflow: visible;
|
||||
|
||||
> .content {
|
||||
flex: 1 0 auto;
|
||||
|
|
@ -483,10 +464,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
flex: 1 0 auto;
|
||||
|
||||
> .center {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
body:not(.is-mobile) {
|
||||
|
||||
::-webkit-scrollbar:hover {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
|
||||
border-radius: 24px;
|
||||
}
|
||||
::-webkit-scrollbar:hover {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
|
||||
border-radius: 24px;
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.ps {
|
||||
position: relative;
|
||||
|
||||
> .ps__scrollbar-y-rail {
|
||||
z-index: 99999;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export class FuseConfigService
|
|||
colorClasses : {
|
||||
toolbar: 'md-white-500-bg',
|
||||
navbar : 'md-fuse-dark-500-bg',
|
||||
footer : 'md-fuse-dark-800-bg'
|
||||
footer : 'md-fuse-dark-700-bg'
|
||||
},
|
||||
customScrollbars: true,
|
||||
routerAnimation : 'fadeIn'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
|
||||
import { Animations } from '../../core/animations';
|
||||
import { fuseAnimations } from '../../core/animations';
|
||||
import { FuseConfigService } from '../../core/services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import 'rxjs/add/operator/filter';
|
||||
|
|
@ -10,13 +10,7 @@ import 'rxjs/add/operator/map';
|
|||
selector : 'fuse-content',
|
||||
templateUrl: './content.component.html',
|
||||
styleUrls : ['./content.component.scss'],
|
||||
animations : [
|
||||
Animations.routerTransitionUp,
|
||||
Animations.routerTransitionDown,
|
||||
Animations.routerTransitionRight,
|
||||
Animations.routerTransitionLeft,
|
||||
Animations.routerTransitionFade
|
||||
]
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class FuseContentComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout blank p-24" perfect-scrollbar>
|
||||
<div class="page-layout blank p-24" fusePerfectScrollbar>
|
||||
|
||||
<h2>Sample Page</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<md-toolbar>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
|
||||
|
||||
<a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
|
||||
target="_blank" md-button class="ml-8 ml-sm-24 md-accent-800-bg" fxFlex="0 0 auto" fxLayout="row"
|
||||
target="_blank" md-button class="md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
<md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
|
||||
<span>Purchase Fuse template (Angular4+)</span>
|
||||
<span>Purchase FUSE (Angular4+)</span>
|
||||
</a>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
|
||||
<a md-button href="http://fuse-angular-material-docs.withinpixels.com/" target="_blank">Documentation</a>
|
||||
<span>•</span>
|
||||
<a md-button href="http://withinpixels.com/themes/fuse/changelog" target="_blank">Changelog</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</md-toolbar>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,6 @@ fuse-main {
|
|||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
&.disable-perfect-scrollbar {
|
||||
|
||||
.ps {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.ps__scrollbar-x-rail,
|
||||
.ps__scrollbar-y-rail {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .mat-sidenav-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, ElementRef, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseConfigService } from '../core/services/config.service';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-main',
|
||||
|
|
@ -12,13 +14,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
|
|||
{
|
||||
onSettingsChanged: Subscription;
|
||||
fuseSettings: any;
|
||||
@HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars;
|
||||
@HostBinding('class.boxed') boxed;
|
||||
|
||||
constructor(
|
||||
private _renderer: Renderer2,
|
||||
private _elementRef: ElementRef,
|
||||
private fuseConfig: FuseConfigService
|
||||
private fuseConfig: FuseConfigService,
|
||||
private platform: Platform,
|
||||
@Inject(DOCUMENT) private document: any
|
||||
)
|
||||
{
|
||||
this.onSettingsChanged =
|
||||
|
|
@ -26,10 +29,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
|
|||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
this.disableCustomScrollbars = !this.fuseSettings.customScrollbars;
|
||||
this.boxed = this.fuseSettings.layout.mode === 'boxed';
|
||||
}
|
||||
);
|
||||
|
||||
if ( this.platform.ANDROID || this.platform.IOS )
|
||||
{
|
||||
this.document.body.className += ' is-mobile';
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
|
|
|
|||
|
|
@ -1,137 +1 @@
|
|||
@import "../../../core/scss/fuse";
|
||||
|
||||
fuse-main {
|
||||
|
||||
&.fuse-nav-bar-folded {
|
||||
|
||||
.content-wrapper {
|
||||
|
||||
&:last-child {
|
||||
padding-left: 64px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-right: 64px !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fuse-navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
max-width: 256px;
|
||||
background-color: #FFFFFF;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 3;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
|
||||
transform: translateX(0);
|
||||
|
||||
&.folded {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.folded-open) {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.folded-open {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
&.right-navbar {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint('lt-lg') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.initialized) {
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
&.right-navbar {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
justify-content: space-between;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="navbar-header">
|
||||
|
||||
<div class="logo">
|
||||
<span class="logo-icon">F</span>
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -15,6 +15,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" perfect-scrollbar>
|
||||
<div class="navbar-content" fusePerfectScrollbar>
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ fuse-navbar-vertical {
|
|||
background-color: #FFFFFF;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
|
||||
transform: translateX(0);
|
||||
|
|
@ -45,6 +45,7 @@ fuse-navbar-vertical {
|
|||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -55,40 +56,50 @@ fuse-navbar-vertical {
|
|||
max-width: 64px;
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 16px;
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.folded-open {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
box-shadow: none;
|
||||
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint('lt-lg') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.initialized) {
|
||||
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
|
@ -111,22 +122,14 @@ fuse-navbar-vertical {
|
|||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -135,3 +138,14 @@ fuse-navbar-vertical {
|
|||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-navbar-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseMatchMedia } from '../../../core/services/match-media.service';
|
||||
import { FuseNavbarVerticalService } from './navbar-vertical.service';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { FuseMainComponent } from '../../main.component';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navbar-vertical',
|
||||
|
|
@ -16,22 +17,28 @@ import { FuseNavigationService } from '../../../core/components/navigation/navig
|
|||
})
|
||||
export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
||||
{
|
||||
private _backdropElement: HTMLElement | null = null;
|
||||
@HostBinding('class.close') isClosed: boolean;
|
||||
@HostBinding('class.folded') isFoldedActive: boolean;
|
||||
@HostBinding('class.folded-open') isFoldedOpen: boolean;
|
||||
@HostBinding('class.initialized') initialized: boolean;
|
||||
@Input('folded') foldedByDefault = false;
|
||||
@ViewChild(PerfectScrollbarDirective) perfectScrollbarDirective;
|
||||
@ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
|
||||
|
||||
matchMediaWatcher: Subscription;
|
||||
|
||||
player: AnimationPlayer;
|
||||
|
||||
constructor(
|
||||
private fuseMainComponentEl: FuseMainComponent,
|
||||
private fuseMainComponent: FuseMainComponent,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private fuseNavigationService: FuseNavigationService,
|
||||
private navBarService: FuseNavbarVerticalService,
|
||||
public media: ObservableMedia,
|
||||
private router: Router
|
||||
private router: Router,
|
||||
private _renderer: Renderer2,
|
||||
private _elementRef: ElementRef,
|
||||
private animationBuilder: AnimationBuilder
|
||||
)
|
||||
{
|
||||
navBarService.setNavBar(this);
|
||||
|
|
@ -39,7 +46,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
this.fuseNavigationService.onNavCollapseToggled.subscribe(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
this.perfectScrollbarDirective.update();
|
||||
this.fusePerfectScrollbarDirective.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
|
|
@ -56,6 +63,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
else
|
||||
{
|
||||
this.openBar();
|
||||
this._detachBackdrop();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -109,12 +117,17 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
{
|
||||
this.isClosed = false;
|
||||
this.updateCssClasses();
|
||||
if ( this.media.isActive('lt-lg') )
|
||||
{
|
||||
this._attachBackdrop();
|
||||
}
|
||||
}
|
||||
|
||||
closeBar()
|
||||
{
|
||||
this.isClosed = true;
|
||||
this.updateCssClasses();
|
||||
this._detachBackdrop();
|
||||
}
|
||||
|
||||
toggleBar()
|
||||
|
|
@ -144,14 +157,14 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
activateFolded()
|
||||
{
|
||||
this.isFoldedActive = true;
|
||||
this.fuseMainComponentEl.addClass('fuse-nav-bar-folded');
|
||||
this.fuseMainComponent.addClass('fuse-nav-bar-folded');
|
||||
this.isFoldedOpen = false;
|
||||
}
|
||||
|
||||
deActivateFolded()
|
||||
{
|
||||
this.isFoldedActive = false;
|
||||
this.fuseMainComponentEl.removeClass('fuse-nav-bar-folded');
|
||||
this.fuseMainComponent.removeClass('fuse-nav-bar-folded');
|
||||
this.isFoldedOpen = false;
|
||||
}
|
||||
|
||||
|
|
@ -171,13 +184,56 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
{
|
||||
if ( this.isClosed )
|
||||
{
|
||||
this.fuseMainComponentEl.addClass('fuse-nav-bar-opened');
|
||||
this.fuseMainComponentEl.removeClass('fuse-nav-bar-closed');
|
||||
this.fuseMainComponent.addClass('fuse-nav-bar-opened');
|
||||
this.fuseMainComponent.removeClass('fuse-nav-bar-closed');
|
||||
}
|
||||
else
|
||||
{
|
||||
this.fuseMainComponentEl.addClass('fuse-nav-bar-closed');
|
||||
this.fuseMainComponentEl.removeClass('fuse-nav-bar-opened');
|
||||
this.fuseMainComponent.addClass('fuse-nav-bar-closed');
|
||||
this.fuseMainComponent.removeClass('fuse-nav-bar-opened');
|
||||
}
|
||||
}
|
||||
|
||||
private _attachBackdrop()
|
||||
{
|
||||
this._backdropElement = this._renderer.createElement('div');
|
||||
this._backdropElement.classList.add('fuse-navbar-backdrop');
|
||||
|
||||
this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdropElement);
|
||||
|
||||
this.player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
animate('400ms ease', style({opacity: 1}))
|
||||
]).create(this._backdropElement);
|
||||
|
||||
this.player.play();
|
||||
|
||||
this._backdropElement.addEventListener('click', () => {
|
||||
this.closeBar();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private _detachBackdrop()
|
||||
{
|
||||
if ( this._backdropElement )
|
||||
{
|
||||
this.player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
animate('400ms cubic-bezier(.25,.8,.25,1)', style({opacity: 0}))
|
||||
]).create(this._backdropElement);
|
||||
|
||||
this.player.play();
|
||||
|
||||
this.player.onDone(() => {
|
||||
if ( this._backdropElement )
|
||||
{
|
||||
this._backdropElement.parentNode.removeChild(this._backdropElement);
|
||||
this._backdropElement = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<md-list class="date">
|
||||
<md-list class="date" cdk-focus-region-start>
|
||||
|
||||
<h3 md-subheader>
|
||||
<h3 md-subheader cdk-focus-init>
|
||||
<span>Today</span>
|
||||
</h3>
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</md-list>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider cdk-focus-region-end></md-divider>
|
||||
|
||||
<md-list>
|
||||
<h3 md-subheader>
|
||||
|
|
@ -24,19 +24,22 @@
|
|||
</h3>
|
||||
|
||||
<md-list-item>
|
||||
<md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" labelPosition="before">
|
||||
<md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
|
||||
labelPosition="before">
|
||||
<h3>Notifications</h3>
|
||||
</md-slide-toggle>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" labelPosition="before">
|
||||
<md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
|
||||
labelPosition="before">
|
||||
<h3>Cloud Sync</h3>
|
||||
</md-slide-toggle>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" labelPosition="before">
|
||||
<md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
|
||||
labelPosition="before">
|
||||
<h3>Retro Thrusters</h3>
|
||||
</md-slide-toggle>
|
||||
</md-list-item>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
|
||||
<div class="logo ml-16">
|
||||
<span class="logo-icon">F</span>
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,22 +20,7 @@
|
|||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
width: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,13 @@
|
|||
export class FuseNavigation
|
||||
export class NavigationModel
|
||||
{
|
||||
public verticalNavItems: any[];
|
||||
public horizontalNavItems: any[];
|
||||
public model: any[];
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.verticalNavItems = [
|
||||
this.model = [
|
||||
{
|
||||
'title': 'APPS',
|
||||
'type' : 'subheader'
|
||||
},
|
||||
{
|
||||
'title': 'Sample',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'email',
|
||||
'url' : '/sample',
|
||||
'badge': {
|
||||
'title': 25,
|
||||
'bg' : '#F44336',
|
||||
'fg' : '#FFFFFF'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
this.horizontalNavItems = [
|
||||
{
|
||||
'title' : 'Apps',
|
||||
'icon' : 'apps',
|
||||
'type' : 'nav-collapse',
|
||||
'title': 'Applications',
|
||||
'type' : 'group',
|
||||
'children': [
|
||||
{
|
||||
'title': 'Sample',
|
||||
|
|
|
|||
1127
src/assets/images/logos/fuse.svg
Normal file
1127
src/assets/images/logos/fuse.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 110 KiB |
4
src/environments/environment.hmr.ts
Normal file
4
src/environments/environment.hmr.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export const environment = {
|
||||
production: false,
|
||||
hmr: true
|
||||
};
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export const environment = {
|
||||
production: true
|
||||
production: true,
|
||||
hmr: false
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@
|
|||
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
production: false,
|
||||
hmr: false
|
||||
};
|
||||
|
|
|
|||
BIN
src/favicon.ico
BIN
src/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
15
src/hmr.ts
Normal file
15
src/hmr.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModuleRef, ApplicationRef } from '@angular/core';
|
||||
import { createNewHosts } from '@angularclass/hmr';
|
||||
|
||||
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
|
||||
let ngModule: NgModuleRef<any>;
|
||||
module.hot.accept();
|
||||
bootstrap().then(mod => ngModule = mod);
|
||||
module.hot.dispose(() => {
|
||||
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
|
||||
const elements = appRef.components.map(c => c.location.nativeElement);
|
||||
const makeVisible = createNewHosts(elements);
|
||||
ngModule.destroy();
|
||||
makeVisible();
|
||||
});
|
||||
};
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<meta name="description" content="Material design admin template with pre-built apps and pages">
|
||||
<meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material">
|
||||
<meta name="author" content="Withinpixels">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
|
|
@ -40,17 +40,12 @@
|
|||
}
|
||||
|
||||
#fuse-splash-screen .logo {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 56px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
background-color: #039BE5;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
#fuse-splash-screen .logo img {
|
||||
filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.2))
|
||||
}
|
||||
|
||||
#fuse-splash-screen .spinner-wrapper {
|
||||
|
|
@ -194,7 +189,7 @@
|
|||
<div class="center">
|
||||
|
||||
<div class="logo">
|
||||
<span>F</span>
|
||||
<img width="128" src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<!-- Material Design Spinner -->
|
||||
|
|
|
|||
20
src/main.ts
20
src/main.ts
|
|
@ -3,10 +3,28 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
import { hmrBootstrap } from './hmr';
|
||||
|
||||
if ( environment.production )
|
||||
{
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
if ( environment.hmr )
|
||||
{
|
||||
if ( module['hot'] )
|
||||
{
|
||||
hmrBootstrap(module, bootstrap);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.error('HMR is not enabled for webpack-dev-server!');
|
||||
console.log('Are you using the --hmr flag for ng serve?');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
bootstrap();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user