Merge branch 'master' into skeleton

+ chat & toolbar small mobile tweaks

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "",
   "scripts": {
     "ng": "ng",

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,4 +1,5 @@
 <button md-icon-button
+        type="button"
         class="mat-elevation-z1"
         [mdMenuTriggerFor]="colorMenu"
         (onMenuOpen)="onMenuOpen()"

src/app/core/components/search-bar/search-bar.component.scss

@@ -3,11 +3,14 @@
 :host {
 
     .fuse-search-bar {
+        min-width: 64px;
         height: 64px;
         font-size: 13px;
+
         @include media-breakpoint-down('xs') {
             height: 56px;
         }
+
         .fuse-search-bar-expander,
         .fuse-search-bar-collapser {
             cursor: pointer;
@@ -16,6 +19,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
+
             @include media-breakpoint-down('xs') {
                 height: 56px !important;
                 line-height: 56px !important;
@@ -70,4 +74,4 @@
             }
         }
     }
-}
+}

src/app/core/components/shortcuts/shortcuts.component.html

@@ -9,7 +9,7 @@
 
     <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
 
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 
             <div fxLayout="row" fxLayoutAlign="start center">
 

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -33,17 +33,17 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
 
         if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
         {
-            this.isLockedOpen = true;
-            this.mdSidenav.mode = 'side';
             setTimeout(() => {
+                this.isLockedOpen = true;
+                this.mdSidenav.mode = 'side';
                 this.mdSidenav.open();
             });
         }
         else
         {
-            this.isLockedOpen = false;
-            this.mdSidenav.mode = 'over';
             setTimeout(() => {
+                this.isLockedOpen = false;
+                this.mdSidenav.mode = 'over';
                 this.mdSidenav.close();
             });
         }
@@ -51,15 +51,19 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
         this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
             if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
             {
-                this.isLockedOpen = true;
-                this.mdSidenav.mode = 'side';
-                this.mdSidenav.open();
+                setTimeout(() => {
+                    this.isLockedOpen = true;
+                    this.mdSidenav.mode = 'side';
+                    this.mdSidenav.open();
+                });
             }
             else
             {
-                this.isLockedOpen = false;
-                this.mdSidenav.mode = 'over';
-                this.mdSidenav.close();
+                setTimeout(() => {
+                    this.isLockedOpen = false;
+                    this.mdSidenav.mode = 'over';
+                    this.mdSidenav.close();
+                });
             }
         });
 

src/app/core/fuseUtils.ts

@@ -90,4 +90,16 @@ export class FuseUtils
 
         return (S4() + S4());
     }
+
+    public static toggleInArray(item, array)
+    {
+        if ( array.indexOf(item) === -1 )
+        {
+            array.push(item);
+        }
+        else
+        {
+            array.splice(array.indexOf(item), 1);
+        }
+    }
 }

src/app/core/modules/shared.module.ts

@@ -20,6 +20,7 @@ import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-s
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 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';
 import { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
@@ -42,7 +43,8 @@ import { CookieService } from 'ngx-cookie-service';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule
+        NgxDatatableModule,
+        Md2Module
     ],
     exports        : [
         FlexLayoutModule,
@@ -60,7 +62,8 @@ import { CookieService } from 'ngx-cookie-service';
         NgxDnDModule,
         NgxDatatableModule,
         FuseIfOnDomDirective,
-        FuseMaterialColorPickerComponent
+        FuseMaterialColorPickerComponent,
+        Md2Module
     ],
     entryComponents: [
         FuseConfirmDialogComponent

src/app/core/pipes/getById.pipe.ts

@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({name: 'getById'})
+@Pipe({
+    name: 'getById',
+    pure: false
+})
 export class GetByIdPipe implements PipeTransform
 {
     transform(value: any[], id: number, property: string): any

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

@@ -54,7 +54,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         &.secondary-text,
         .secondary-text,
         .mat-icon,
-        .icon {
+        .icon,
+        .md2-datepicker-button {
             color: rgba(0, 0, 0, 0.54);
         }
 
@@ -79,7 +80,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     @else {
 
         .mat-icon,
-        .icon {
+        .icon,
+        .md2-datepicker-button {
             color: rgba(255, 255, 255, 1);
         }
 

src/app/main/toolbar/toolbar.component.html

@@ -2,7 +2,7 @@
 
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+        <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
             <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-md>
                 <md-icon>menu</md-icon>
@@ -18,7 +18,7 @@
 
             <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
                target="_blank" md-raised-button class="ml-8 ml-sm-24 md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
-               fxLayoutAlign="start center">
+               fxLayoutAlign="start center" fxHide fxShow.gt-xs>
                 <md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
                 <span fxHide fxShow.gt-xs>Purchase Fuse template (Angular4+)</span>
             </a>
@@ -62,7 +62,7 @@
 
             <div class="toolbar-separator"></div>
 
-            <button md-button
+            <button md-button fxHide fxShow.gt-xs
                     class="language-button"
                     [mdMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">