Merge branch 'master' into skeleton

src/@fuse/components/sidebar/sidebar.component.scss

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
     display: flex;
     flex-direction: column;
@@ -14,6 +16,12 @@ fuse-sidebar {
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
     background: white;
 
+    @include media-breakpoint-down('xs') {
+        min-width: 0 !important;
+        max-width: 80vw !important;
+        width: 80vw !important;
+    }
+
     &.left-positioned {
         left: 0;
         transform: translateX(-100%);

src/app/app.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {DOCUMENT} document
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {FuseSplashScreenService} _fuseSplashScreenService
      * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
+     * @param {Platform} _platform
      * @param {TranslateService} _translateService
      */
     constructor(
+        @Inject(DOCUMENT) private document: any,
         private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
         private _fuseSidebarService: FuseSidebarService,
         private _fuseSplashScreenService: FuseSplashScreenService,
         private _fuseTranslationLoaderService: FuseTranslationLoaderService,
-        private _translateService: TranslateService
+        private _translateService: TranslateService,
+        private _platform: Platform
     )
     {
         // Get default navigation
@@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
         // Use a language
         this._translateService.use('en');
 
+        // Add is-mobile class to the body if the platform is mobile
+        if ( this._platform.ANDROID || this._platform.IOS )
+        {
+            this.document.body.className += ' is-mobile';
+        }
+
         // Set the private defaults
         this._unsubscribeAll = new Subject();
     }

src/app/layout/components/chat-panel/chat-panel.component.html

@@ -31,23 +31,23 @@
 <div>
 
     <!-- Contacts -->
-    <mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
 
-        <mat-list-item *ngFor="let contact of contacts"
+        <div *ngFor="let contact of contacts"
+             class="contacts-list-item"
              [ngClass]="contact.status"
              [class.active]="contact.id === selectedContact?.id"
-                       (click)="goToChat(contact)"
+             (click)="goToChat(contact)">
-                       [matTooltip]="contact.name"
-                       matTooltipPosition="left"
-                       matRipple>
 
-            <img matListAvatar [src]="contact.avatar">
+            <img class="avatar" [src]="contact.avatar"
+                 [matTooltip]="contact.name"
+                 matTooltipPosition="left">
             <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
             <div class="status-icon" [ngClass]="contact.status"></div>
 
-        </mat-list-item>
+        </div>
 
-    </mat-list>
+    </div>
     <!-- / Contacts -->
 
     <!-- Chat -->

src/app/layout/components/chat-panel/chat-panel.component.scss

@@ -34,6 +34,7 @@ chat-panel {
         width: 72px;
         min-width: 72px;
         max-width: 72px;
+        -webkit-overflow-scrolling: touch;
 
         // Perfect scrollbar
         .ps__rail-y {
@@ -44,9 +45,14 @@ chat-panel {
             }
         }
 
-        .mat-list-item {
+        .contacts-list-item {
-            cursor: pointer;
             position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+            height: 56px;
+            cursor: pointer;
 
             &.active {
                 background-color: mat-color(mat-palette($mat-grey, 300));
@@ -68,7 +74,9 @@ chat-panel {
                 }
             }
 
-            .mat-list-item-content {
+            .avatar {
+                margin: 0;
+            }
 
             .unread-count {
                 position: absolute;
@@ -115,7 +123,6 @@ chat-panel {
             }
         }
     }
-    }
 
     #chat {
         background-color: mat-color(mat-palette($mat-grey, 300));
@@ -337,6 +344,12 @@ fuse-sidebar {
         min-width: 360px;
         max-width: 360px;
 
+        @include media-breakpoint-down('xs') {
+            min-width: 0 !important;
+            max-width: 100vw !important;
+            width: 100vw !important;
+        }
+
         // Folded
         &.folded {
 

src/app/layout/components/chat-panel/chat-panel.component.ts

@@ -124,7 +124,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
             this._replyForm.reset();
 
             // Focus to the reply input
-            this._replyInput.nativeElement.focus();
+            // this._replyInput.nativeElement.focus();
 
             // Scroll to the bottom of the messages list
             if ( this._chatViewScrollbar )

src/app/layout/components/chat-panel/chat-panel.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
@@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
-        MatListModule,
         MatTabsModule,
         MatTooltipModule,
         MatRippleModule,

src/app/layout/components/navbar/navbar.component.scss

@@ -1,5 +1,6 @@
 navbar {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
     width: 100%;
 }

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -1,6 +1,8 @@
 @import "src/@fuse/scss/fuse";
 
 fuse-sidebar {
+
+    &.navbar-fuse-sidebar {
         overflow: hidden;
 
         &.folded:not(.unfolded) {
@@ -59,6 +61,7 @@ fuse-sidebar {
                 }
             }
         }
+    }
 }
 
 navbar {

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -1,6 +1,8 @@
 @import "src/@fuse/scss/fuse";
 
 fuse-sidebar {
+
+    &.navbar-fuse-sidebar {
         overflow: hidden;
 
         &.folded:not(.unfolded) {
@@ -23,6 +25,7 @@ fuse-sidebar {
                 }
             }
         }
+    }
 }
 
 navbar {

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -99,7 +99,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar [variant]="fuseConfig.layout.navbar.variant"

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -101,7 +101,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -113,7 +113,7 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -101,7 +101,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -113,7 +113,7 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -87,7 +87,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -99,7 +99,7 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">