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 branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2017-11-04 16:20:46 +03:00
commit 410802808e
41 changed files with 2114 additions and 1666 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.angular-cli.json
View File

@ -37,13 +37,16 @@
},
"lint": [
{
"project": "src/tsconfig.app.json"
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json"
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json"
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {

2
README.md
View File

@ -1,6 +1,6 @@
# Fuse2
Material Design Admin Template with Angular 4+ and Angular Material 2
Material Design Admin Template with Angular 5+ and Angular Material 2
## Development server

20
e2e/app.e2e-spec.ts
View File

@ -1,14 +1,14 @@
import { Fuse2Page } from './app.po';
import { AppPage } from './app.po';
describe('fuse2 App', () => {
let page: Fuse2Page;
describe('angular5 App', () => {
let page: AppPage;
beforeEach(() => {
page = new Fuse2Page();
});
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!!');
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
});
});

21
e2e/app.po.ts
View File

@ -1,11 +1,14 @@
import { browser, by, element } from 'protractor';
import { AppPage } from './app.po';
export class Fuse2Page {
navigateTo() {
return browser.get('/');
}
describe('Fuse App', () => {
let page: AppPage;
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
});
});

2
e2e/tsconfig.e2e.json
View File

@ -2,10 +2,12 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}

58
karma.conf.js
View File

@ -1,33 +1,33 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

3225
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

66
package.json
View File

@ -1,42 +1,42 @@
{
"name": "fuse2",
"version": "1.1.2",
"version": "1.2.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"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",
"build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
"build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.1",
"@angular/animations": "4.4.6",
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.0.0",
"@angular/cdk": "2.0.0-beta.12",
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/core": "5.0.0",
"@angular/flex-layout": "2.0.0-beta.10",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/material": "2.0.0-beta.12",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@angular/router": "5.0.0",
"@ngx-translate/core": "8.0.0",
"@swimlane/ngx-charts": "6.0.2",
"@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "3.0.0",
"angular-calendar": "0.21.2",
"angular-in-memory-web-api": "0.5.0",
"@swimlane/ngx-charts": "6.1.0",
"@swimlane/ngx-datatable": "10.4.0",
"@withinpixels/ngx-dnd": "3.1.0",
"angular-calendar": "0.21.3",
"angular-in-memory-web-api": "0.5.1",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"d3": "4.10.0",
"d3": "4.11.0",
"hammerjs": "2.0.8",
"highlight.js": "9.12.0",
"intl": "1.2.5",
@ -44,30 +44,30 @@
"ngx-color-picker": "4.4.0",
"ngx-cookie-service": "1.0.9",
"perfect-scrollbar": "1.0.3",
"rxjs": "5.4.3",
"rxjs": "5.5.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/cli": "1.4.7",
"@angular/compiler-cli": "4.4.6",
"@angular/language-service": "4.4.6",
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "5.0.0",
"@angular/language-service": "5.0.0",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.6.0",
"@types/jasminewd2": "2.0.2",
"@types/node": "6.0.88",
"codelyzer": "3.2.0",
"jasmine-core": "2.6.2",
"jasmine-spec-reporter": "4.1.0",
"@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3",
"@types/node": "6.0.90",
"codelyzer": "3.2.2",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.2.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.2",
"ts-node": "3.2.0",
"ts-node": "3.2.2",
"tslint": "5.7.0",
"typescript": "2.3.3"
"typescript": "2.4.2"
}
}

42
protractor.conf.js
View File

@ -4,25 +4,25 @@
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

11
src/app/core/animations.ts
View File

@ -129,6 +129,17 @@ export const fuseAnimations = [
transition('* => void', animate('300ms'))
]),
trigger('expandCollapse', [
state('void', style({
height: '0px'
})),
state('*', style({
height: '*'
})),
transition('void => *', animate('300ms ease-out')),
transition('* => void', animate('300ms ease-in'))
]),
trigger('routerTransitionLeft', [
transition('* => *', [

3
src/app/core/components/countdown/countdown.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import * as moment from 'moment';
import { Observable } from 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@Component({
selector : 'fuse-countdown',

3
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
View File

@ -1,4 +1,5 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge"

2
src/app/core/components/navigation/navigation.component.html
View File

@ -22,7 +22,7 @@
<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-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
</ng-container>

2
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
View File

@ -166,7 +166,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
}
}
if ( parent.children[i].url === url )
if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
{
return true;
}

3
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -1,4 +1,5 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge"

6
src/app/core/components/theme-options/theme-options.component.html
View File

@ -21,6 +21,12 @@
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<h3>Navigation Fold (for vertical navigation):</h3>
<mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
(change)="onSettingsChange()">
Folded
</mat-slide-toggle>
<h3 class="mt-24">Toolbar:</h3>
<mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>

16
src/app/core/fuseUtils.ts
View File

@ -82,10 +82,12 @@ export class FuseUtils
{
function S4()
{
return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return (S4() + S4());
return S4() + S4();
}
public static toggleInArray(item, array)
@ -99,4 +101,14 @@ export class FuseUtils
array.splice(array.indexOf(item), 1);
}
}
public static handleize(text)
{
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
}

2
src/app/core/modules/shared.module.ts
View File

@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDnDModule } from '@withinpixels/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';

1
src/app/core/scss/core.scss
View File

@ -25,6 +25,7 @@
@import "partials/angular-material-fix";
@import "partials/typography";
@import "partials/page-layouts";
@import "partials/cards";
@import "partials/navigation";
@import "partials/forms";
@import "partials/toolbar";

154
src/app/core/scss/partials/_cards.scss Normal file
View File

@ -0,0 +1,154 @@
.fuse-card {
max-width: 320px;
min-width: 320px;
background: white;
border-radius: 2px;
@include mat-elevation(2);
&.variable-width {
min-width: 0;
}
.card-rich-media {
position: relative;
.card-title {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
font-size: 20px;
color: white;
}
}
.card-media-header {
display: flex;
padding: 16px;
align-items: center;
&.medium {
align-items: flex-start;
.card-rich-media {
width: 120px;
height: 120px;
}
}
&.large {
align-items: flex-start;
.card-rich-media {
width: 160px;
height: 160px;
}
}
.card-primary-title {
padding: 0 16px 0 0;
flex: 1;
}
.card-rich-media {
width: 80px;
height: 80px;
}
+ div {
padding-top: 0;
}
}
.card-avatar-header {
display: flex;
padding: 16px;
align-items: center;
.card-avatar {
width: 40px;
height: 40px;
border-radius: 100%;
margin-right: 16px;
}
.card-avatar-title {
.card-title {
font-size: 14px;
font-weight: bold;
}
.card-subtitle {
font-size: 13px;
font-weight: bold;
}
}
}
.card-primary-title {
padding: 16px;
.card-title {
font-size: 24px;
}
.card-subtitle {
font-size: 14px;
}
+ div {
padding-top: 0;
}
}
.card-supporting-text {
padding: 16px;
font-size: 14px;
line-height: 1.75;
+ div {
padding-top: 0;
}
}
.card-actions {
display: flex;
padding: 8px;
&.icon-buttons {
padding: 0 8px;
}
&.align-center {
justify-content: center;
}
&.align-right {
justify-content: flex-end;
}
.mat-button {
min-width: 0 !important;
padding: 0 8px !important;
}
.card-expander {
margin-left: auto;
}
+ div {
padding-top: 0;
}
}
.card-expand-area {
overflow: hidden;
.card-expanded-supporting-text {
padding: 8px 16px 16px 16px;
font-size: 14px;
line-height: 1.75;
}
}
}

5
src/app/core/scss/partials/_colors.scss
View File

@ -187,6 +187,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// Generate material element colors
// based on current contrast color
@include generateMaterialElementColors($contrastColor);
&[disabled] {
background-color: rgba($color, .12) !important;
color: rgba($contrastColor, .26) !important;
}
}
.#{$colorName}#{$hue}-fg {

4
src/app/core/scss/partials/_navigation.scss
View File

@ -195,6 +195,10 @@
> .nav-item {
> .nav-link {
height: 56px;
}
&.nav-collapse {
position: relative;

2
src/app/core/scss/partials/_page-layouts.scss
View File

@ -96,7 +96,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
max-height: $carded-toolbar-height;
}
.content {
> .content {
display: flex;
flex: 1;
overflow: auto;

11
src/app/core/scss/partials/plugins/_ngx-datatable.scss
View File

@ -55,6 +55,7 @@
min-height: 48px;
transition: none;
padding: 0 24px;
overflow: hidden;
}
}
}
@ -82,6 +83,16 @@
.datatable-pager {
margin: 0 0 0 24px;
.pager {
li {
a {
text-decoration: none !important;
}
}
}
}
}
}

14
src/app/core/services/config.service.ts
View File

@ -22,10 +22,11 @@ export class FuseConfigService
// Set the default settings
this.defaultSettings = {
layout : {
navigation: 'left', // 'right', 'left', 'top', 'none'
toolbar : 'below', // 'above', 'below', 'none'
footer : 'below', // 'above', 'below', 'none'
mode : 'fullwidth' // 'boxed', 'fullwidth'
navigation : 'left', // 'right', 'left', 'top', 'none'
navigationFolded: false, // true, false
toolbar : 'below', // 'above', 'below', 'none'
footer : 'below', // 'above', 'below', 'none'
mode : 'fullwidth' // 'boxed', 'fullwidth'
},
colorClasses : {
toolbar: 'mat-white-500-bg',
@ -44,6 +45,7 @@ export class FuseConfigService
this.defaultSettings.customScrollbars = false;
}
// Set the settings from the default settings
this.settings = Object.assign({}, this.defaultSettings);
// Reload the default settings on every navigation start
@ -58,7 +60,6 @@ export class FuseConfigService
// Create the behavior subject
this.onSettingsChanged = new BehaviorSubject(this.settings);
}
/**
@ -67,7 +68,10 @@ export class FuseConfigService
*/
setSettings(settings)
{
// Set the settings from the given object
this.settings = Object.assign({}, this.settings, settings);
// Trigger the event
this.onSettingsChanged.next(this.settings);
}
}

18
src/app/main/main.component.html
View File

@ -4,13 +4,13 @@
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
<fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
<fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<!-- NAVBAR: Top -->
<fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
[class]="fuseSettings.colorClasses.navbar"
[ngClass]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'top'">
</fuse-navbar-horizontal>
<!-- / NAVBAR: Top -->
@ -18,9 +18,9 @@
<div id="wrapper">
<!-- NAVBAR: Left -->
<fuse-navbar-vertical [folded]="false"
<fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
class="left-navbar"
[class]="fuseSettings.colorClasses.navbar"
[ngClass]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
</fuse-navbar-vertical>
<!-- / NAVBAR: Left -->
@ -29,7 +29,7 @@
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
<fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
<fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
@ -37,16 +37,16 @@
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseSettings.layout.footer === 'below'">
<fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
<fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- NAVBAR: Right -->
<fuse-navbar-vertical [folded]="false"
<fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
class="right-navbar"
[class]="fuseSettings.colorClasses.navbar"
[ngClass]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'right'">
</fuse-navbar-vertical>
<!-- / NAVBAR: Right -->
@ -55,7 +55,7 @@
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseSettings.layout.footer === 'above'">
<fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
<fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
</ng-container>
<!-- FOOTER: Above -->

51
src/app/main/navbar/vertical/navbar-vertical.component.ts
View File

@ -18,13 +18,34 @@ import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/anim
export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
{
private _backdropElement: HTMLElement | null = null;
private _folded = false;
@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(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
@Input()
set folded(value: boolean)
{
this._folded = value;
if ( this._folded )
{
this.activateFolded();
}
else
{
this.deActivateFolded();
}
}
get folded(): boolean
{
return this._folded;
}
matchMediaWatcher: Subscription;
navigationServiceWatcher: Subscription;
fusePerfectScrollbarUpdateTimeout;
@ -36,11 +57,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
private fuseMatchMedia: FuseMatchMedia,
private fuseNavigationService: FuseNavigationService,
private navBarService: FuseNavbarVerticalService,
public media: ObservableMedia,
private router: Router,
private _renderer: Renderer2,
private _elementRef: ElementRef,
private animationBuilder: AnimationBuilder
private animationBuilder: AnimationBuilder,
public media: ObservableMedia
)
{
navBarService.setNavBar(this);
@ -88,7 +109,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
ngOnInit()
{
this.isClosed = false;
this.isFoldedActive = this.foldedByDefault;
this.isFoldedActive = this._folded;
this.isFoldedOpen = false;
this.initialized = false;
this.updateCssClasses();
@ -104,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
}
else
{
if ( !this.foldedByDefault )
if ( !this._folded )
{
this.deActivateFolded();
}
@ -124,6 +145,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
openBar()
{
if ( !this.isClosed )
{
return;
}
this.isClosed = false;
this.updateCssClasses();
if ( this.media.isActive('lt-lg') )
@ -134,6 +160,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
closeBar()
{
if ( this.isClosed )
{
return;
}
this.isClosed = true;
this.updateCssClasses();
this._detachBackdrop();
@ -191,15 +222,15 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
updateCssClasses()
{
if ( this.isClosed )
if ( !this.isClosed )
{
this.fuseMainComponent.addClass('fuse-nav-bar-opened');
this.fuseMainComponent.removeClass('fuse-nav-bar-closed');
this.fuseMainComponent.addClass('fuse-navbar-opened');
this.fuseMainComponent.removeClass('fuse-navbar-closed');
}
else
{
this.fuseMainComponent.addClass('fuse-nav-bar-closed');
this.fuseMainComponent.removeClass('fuse-nav-bar-opened');
this.fuseMainComponent.addClass('fuse-navbar-closed');
this.fuseMainComponent.removeClass('fuse-navbar-opened');
}
}

2
src/app/main/toolbar/toolbar.component.html
View File

@ -7,7 +7,7 @@
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="toggle-button-navbar mat-icon-button"
fuseNavbarVertical="openBar" fxHide.gt-md>
fuseNavbarVertical="toggleBar" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>

BIN
src/assets/images/cards/card1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/cards/card2-large.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/cards/card2-medium.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/images/cards/card2-small.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/cards/card2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/images/cards/card3-square.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/cards/card3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

11
src/polyfills.ts
View File

@ -39,14 +39,17 @@ import 'core-js/es7/array';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following to support `@angular/animation`. */
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************

3
src/test.ts
View File

@ -17,8 +17,7 @@ declare const __karma__: any;
declare const require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {
};
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(

2
src/tsconfig.app.json
View File

@ -2,8 +2,8 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [

2
src/tsconfig.spec.json
View File

@ -2,9 +2,9 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"

4
src/typings.d.ts vendored
View File

@ -1,7 +1,5 @@
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule
{
interface NodeModule {
id: string;
}

3
tsconfig.json
View File

@ -2,7 +2,6 @@
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
@ -13,7 +12,7 @@
"node_modules/@types"
],
"lib": [
"es2016",
"es2017",
"dom"
]
}