new helpers.scss + size helpers + ngx-datatable styles + show toolbar by default

src/app/core/scss/core.scss

@@ -18,7 +18,7 @@
 // Partials
 @import "partials/reset";
 @import "partials/normalize";
-@import "partials/spacing";
+@import "partials/helpers";
 @import "partials/global";
 @import "partials/icons";
 @import "partials/colors";

src/app/core/scss/partials/_colors.scss

@@ -1,5 +1,8 @@
 // Material colors map
 $matColorsMap: (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
     red: $mat-red,
     pink: $mat-pink,
     purple: $mat-purple,
@@ -20,92 +23,111 @@ $matColorsMap: (
     grey: $mat-grey,
     blue-grey: $mat-blue-grey,
     white: $mat-white,
-    black: $mat-black,
+    black: $mat-black
-    primary: $primary,
-    accent: $accent,
-    warn: $warn
 );
 
 // Material color hues list
 $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
+// Text color levels generator mixin
+@mixin generateTextColorLevels($baseTextColor) {
+
+    // If the base text color is black...
+    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+
+        &.secondary-text,
+        .secondary-text,
+        &.mat-icon,
+        .mat-icon,
+        &.icon,
+        .icon {
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
+
+        &.hint-text,
+        .hint-text,
+        &.disabled-text,
+        .disabled-text {
+            color: rgba(0, 0, 0, 0.38) !important;
+        }
+
+        &.divider,
+        .divider {
+            color: rgba(0, 0, 0, 0.12) !important;
+        }
+
+    }
+        // If the base text color is white...
+    @else {
+
+        &.mat-icon,
+        .mat-icon,
+        &.icon,
+        .icon {
+            color: rgba(255, 255, 255, 1) !important;
+        }
+
+        &.secondary-text,
+        .secondary-text {
+            color: rgba(255, 255, 255, 0.70) !important;
+        }
+
+        &.hint-text,
+        .hint-text,
+        &.disabled-text,
+        .disabled-text {
+            color: rgba(255, 255, 255, 0.50) !important;
+        }
+
+        &.divider,
+        .divider {
+            color: rgba(255, 255, 255, 0.12) !important;
+        }
+    }
+}
+
 // Color classes generator mixin
-@mixin generateColorClasses($colorName, $bgColor, $fgColor, $hue) {
+@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
 
     .#{$colorName}#{$hue}-bg {
-        background-color: $bgColor !important;
+        background-color: $color !important;
     }
 
     .md-#{$colorName}#{$hue}-bg {
-        background-color: $bgColor !important;
+        background-color: $color !important;
-        color: $fgColor !important;
+        color: $contrastColor !important;
 
-        @if (rgba(black, 1) == rgba($fgColor, 1)) {
+        // Generate text color levels
-
+        // based on current contrast color
-            &.secondary-text,
+        @include generateTextColorLevels($contrastColor);
-            .secondary-text,
-            &.mat-icon,
-            .mat-icon,
-            &.icon,
-            .icon {
-                color: rgba(0, 0, 0, 0.54) !important;
-            }
-
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(0, 0, 0, 0.38) !important;
-            }
-
-            &.divider,
-            .divider {
-                color: rgba(0, 0, 0, 0.12) !important;
-            }
-
-        } @else {
-
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(255, 255, 255, 0.70) !important;
-            }
-
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(255, 255, 255, 0.50) !important;
-            }
-
-            &.divider,
-            .divider {
-                color: rgba(255, 255, 255, 0.12) !important;
-            }
-        }
     }
 
     .#{$colorName}#{$hue}-fg {
-        color: $bgColor !important;
+        color: $color !important;
+
+        // Generate text color levels
+        // based on current color
+        @include generateTextColorLevels($color);
     }
 
     .#{$colorName}#{$hue}-border {
-        border-color: $bgColor !important;
+        border-color: $color !important;
     }
 
     .#{$colorName}#{$hue}-border-top {
-        border-top-color: $bgColor !important;
+        border-top-color: $color !important;
     }
 
     .#{$colorName}#{$hue}-border-right {
-        border-right-color: $bgColor !important;
+        border-right-color: $color !important;
     }
 
     .#{$colorName}#{$hue}-border-bottom {
-        border-bottom-color: $bgColor !important;
+        border-bottom-color: $color !important;
     }
 
     .#{$colorName}#{$hue}-border-left {
-        border-left-color: $bgColor !important;
+        border-left-color: $color !important;
     }
 }
 
@@ -114,16 +136,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
     @each $hue in $matColorHues {
 
-        $bgColor: map-get($colorMap, $hue);
+        $color: map-get($colorMap, $hue);
-        $fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
+        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
 
-        @if ($bgColor != null and $fgColor != null) {
+        @if ($color != null and $contrastColor != null) {
 
-            @include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
+            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
 
             // Run the generator one more time for default values (500)
             @if ($hue == 500) {
-                @include generateColorClasses($colorName, $bgColor, $fgColor, '');
+                @include generateColorClasses($colorName, $color, $contrastColor, '');
             }
         }
     }

src/app/core/scss/partials/_helpers.scss

@@ -1,28 +1,54 @@
-// Margin and Padding
+// ######################
+// SIZE HELPERS
+// ######################
+@each $prop, $abbrev in (height: h, width: w) {
+
+    @for $index from 0 through 128 {
+        $size: $index * 4;
+        $length: #{$size}px;
+
+        .#{$abbrev}-#{$size} {
+            #{$prop}: $length !important;
+            min-#{$prop}: $length !important;
+            max-#{$prop}: $length !important;
+        }
+    }
+}
+
+// ######################
+// SPACING HELPERS
+// ######################
 @each $prop, $abbrev in (margin: m, padding: p) {
 
     @for $index from 0 through 64 {
-        $size: $index *4;
+        $size: $index * 4;
         $length: #{$size}px;
+
         .#{$abbrev}-#{$size} {
             #{$prop}: $length !important;
         }
+
         .#{$abbrev}t-#{$size} {
             #{$prop}-top: $length !important;
         }
+
         .#{$abbrev}r-#{$size} {
             #{$prop}-right: $length !important;
         }
+
         .#{$abbrev}b-#{$size} {
             #{$prop}-bottom: $length !important;
         }
+
         .#{$abbrev}l-#{$size} {
             #{$prop}-left: $length !important;
         }
+
         .#{$abbrev}x-#{$size} {
             #{$prop}-right: $length !important;
             #{$prop}-left: $length !important;
         }
+
         .#{$abbrev}y-#{$size} {
             #{$prop}-top: $length !important;
             #{$prop}-bottom: $length !important;
@@ -30,7 +56,7 @@
     }
 }
 
-// Some special margin utils
+// Some special margin utils for flex alignments
 .m-auto {
     margin: auto !important;
 }

src/app/core/scss/partials/plugins/_ngx-datatable.scss

@@ -0,0 +1,63 @@
+.ngx-datatable {
+
+    &.material {
+        @include mat-elevation(4);
+
+        .empty-row {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            height: 56px;
+            padding: 0 24px;
+        }
+
+        .datatable-header {
+
+            .datatable-header-cell {
+                display: inline-flex;
+                align-items: center;
+                line-height: 1;
+                min-height: 48px;
+                padding: 0 24px;
+                font-size: 13px;
+            }
+        }
+
+        .datatable-body {
+
+            .datatable-row-left,
+            .datatable-row-center,
+            .datatable-row-right {
+                min-height: 48px;
+            }
+
+            .datatable-row-wrapper {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+                .datatable-body-cell {
+                    display: inline-flex;
+                    align-items: center;
+                    line-height: 1;
+                    min-height: 48px;
+                    padding: 0 24px;
+                }
+            }
+        }
+
+        .datatable-footer {
+            border: none;
+
+            .datatable-footer-inner {
+                padding: 0 24px;
+
+                .page-count {
+                    padding: 0;
+                }
+
+                .datatable-pager {
+                    margin: 0 0 0 24px;
+                }
+            }
+        }
+    }
+}

src/app/core/scss/partials/plugins/_plugins.scss

@@ -1 +1,2 @@
-@import "perfect-scrollbar";
+@import "perfect-scrollbar";
+@import "ngx-datatable";

src/app/core/services/layout.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRoute, ActivatedRouteSnapshot, NavigationStart, Router, NavigationEnd, Route, RouterState } from '@angular/router';
+import { NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import 'rxjs/add/operator/filter';
@@ -20,7 +20,7 @@ export class FuseLayoutService
         // Set the default settings
         this.defaultSettings = {
             navigation: 'left', // 'right', 'left', 'top', none
-            toolbar   : 'none', // 'above', 'below', none
+            toolbar   : 'below', // 'above', 'below', none
             footer    : 'none' // 'above', 'below', none
         };
 

src/app/main/components/datatable/ngx-datatable.component.html

@@ -1,12 +1,44 @@
-<ngx-datatable
+<div id="ngx-datatable" class="page-layout simple fullwidth">
-    class="material"
+
-    [rows]="rows"
+    <!-- HEADER -->
-    [loadingIndicator]="loadingIndicator"
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">
-    [columns]="columns"
+        <div fxLayout="column" fxLayoutAlign="center start">
-    [columnMode]="'force'"
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-    [headerHeight]="50"
+                <md-icon class="secondary-text s-16">home</md-icon>
-    [footerHeight]="50"
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
-    [rowHeight]="'auto'"
+                <span class="secondary-text">Tables</span>
-    [reorderable]="reorderable"
+            </div>
-    [limit]="10">
+            <div class="h2 mt-16">ngx-datatable</div>
-</ngx-datatable>
+        </div>
+
+        <div fxLayout="row" fxLayoutAlign="start center">
+            <a md-raised-button class="md-white-bg"
+               href="https://github.com/swimlane/ngx-datatable"
+               target="_blank">
+                <md-icon>link</md-icon>
+                <span>Reference</span>
+            </a>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <ngx-datatable
+            class="material"
+            [rows]="rows"
+            [loadingIndicator]="loadingIndicator"
+            [columns]="columns"
+            [columnMode]="'force'"
+            [headerHeight]="50"
+            [footerHeight]="50"
+            [rowHeight]="'auto'"
+            [reorderable]="reorderable"
+            [limit]="10">
+        </ngx-datatable>
+
+    </div>
+
+</div>
+