diff --git a/src/app/core/fuseUtils.ts b/src/app/core/fuseUtils.ts
index 1d1763f3..c246c033 100644
--- a/src/app/core/fuseUtils.ts
+++ b/src/app/core/fuseUtils.ts
@@ -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
+ }
}
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 13b33950..84c29da5 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -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';
diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
index c960cbda..65a50aa0 100644
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -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";
diff --git a/src/app/core/scss/partials/_cards.scss b/src/app/core/scss/partials/_cards.scss
new file mode 100644
index 00000000..9b38e690
--- /dev/null
+++ b/src/app/core/scss/partials/_cards.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index 0bfdfa10..2a572ae1 100644
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@@ -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 {
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index ef6cbe13..692ebda0 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -195,6 +195,10 @@
> .nav-item {
+ > .nav-link {
+ height: 56px;
+ }
+
&.nav-collapse {
position: relative;
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 083e0f80..b1188038 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -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;
diff --git a/src/app/core/scss/partials/plugins/_ngx-datatable.scss b/src/app/core/scss/partials/plugins/_ngx-datatable.scss
index e3d8f384..2ef90a6a 100644
--- a/src/app/core/scss/partials/plugins/_ngx-datatable.scss
+++ b/src/app/core/scss/partials/plugins/_ngx-datatable.scss
@@ -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;
+ }
+ }
+ }
}
}
}
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
index 2335da84..045c30aa 100644
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -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);
}
}
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 4155a298..dd808a57 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -4,13 +4,13 @@
-
+
@@ -18,9 +18,9 @@
-
@@ -29,7 +29,7 @@
-
+
@@ -37,16 +37,16 @@
-
+
-
@@ -55,7 +55,7 @@
-
+
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
index e0d8aba7..5c8eede4 100644
--- a/src/app/main/navbar/vertical/navbar-vertical.component.ts
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.ts
@@ -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');
}
}
diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 296e899c..19a0dea1 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -7,7 +7,7 @@
diff --git a/src/assets/images/cards/card1.jpg b/src/assets/images/cards/card1.jpg
new file mode 100644
index 00000000..0e3d7877
Binary files /dev/null and b/src/assets/images/cards/card1.jpg differ
diff --git a/src/assets/images/cards/card2-large.jpg b/src/assets/images/cards/card2-large.jpg
new file mode 100644
index 00000000..5de61b3b
Binary files /dev/null and b/src/assets/images/cards/card2-large.jpg differ
diff --git a/src/assets/images/cards/card2-medium.jpg b/src/assets/images/cards/card2-medium.jpg
new file mode 100644
index 00000000..27fc800f
Binary files /dev/null and b/src/assets/images/cards/card2-medium.jpg differ
diff --git a/src/assets/images/cards/card2-small.jpg b/src/assets/images/cards/card2-small.jpg
new file mode 100644
index 00000000..8900f48a
Binary files /dev/null and b/src/assets/images/cards/card2-small.jpg differ
diff --git a/src/assets/images/cards/card2.jpg b/src/assets/images/cards/card2.jpg
new file mode 100644
index 00000000..ac67f024
Binary files /dev/null and b/src/assets/images/cards/card2.jpg differ
diff --git a/src/assets/images/cards/card3-square.jpg b/src/assets/images/cards/card3-square.jpg
new file mode 100644
index 00000000..57c5d94f
Binary files /dev/null and b/src/assets/images/cards/card3-square.jpg differ
diff --git a/src/assets/images/cards/card3.jpg b/src/assets/images/cards/card3.jpg
new file mode 100644
index 00000000..b49d4801
Binary files /dev/null and b/src/assets/images/cards/card3.jpg differ
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 807b49e7..af3bbf2f 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -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`.
/***************************************************************************************************
diff --git a/src/test.ts b/src/test.ts
index 0716cb06..196c8709 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -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(
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index cdbede4f..97fc94c6 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -2,8 +2,8 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
+ "baseUrl": "./",
"module": "es2015",
- "baseUrl": "",
"types": []
},
"exclude": [
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
index 633188a8..4526dc64 100644
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -2,9 +2,9 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
+ "baseUrl": "./",
"module": "commonjs",
"target": "es5",
- "baseUrl": "",
"types": [
"jasmine",
"node"
diff --git a/src/typings.d.ts b/src/typings.d.ts
index a24fa1f8..403b22fe 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -1,7 +1,5 @@
/* SystemJS module definition */
declare var module: NodeModule;
-
-interface NodeModule
-{
+interface NodeModule {
id: string;
}
diff --git a/tsconfig.json b/tsconfig.json
index a35a8ee3..a6c016bf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -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"
]
}