From f39504694532ef297c2b29d5c198dde4268954cf Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 12 Jul 2018 10:48:31 +0300
Subject: [PATCH] (Chat Panel) Removed mat-list, moved mat-tooltip to the
 avatar due to mobile scrolling issues

---
 .../chat-panel/chat-panel.component.html      | 22 ++---
 .../chat-panel/chat-panel.component.scss      | 95 +++++++++++--------
 .../chat-panel/chat-panel.component.ts        |  2 +-
 .../chat-panel/chat-panel.module.ts           |  3 +-
 4 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/src/app/layout/components/chat-panel/chat-panel.component.html b/src/app/layout/components/chat-panel/chat-panel.component.html
index 585f2a8c..07ebf17a 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/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"
-                       [ngClass]="contact.status"
-                       [class.active]="contact.id === selectedContact?.id"
-                       (click)="goToChat(contact)"
-                       [matTooltip]="contact.name"
-                       matTooltipPosition="left"
-                       matRipple>
+        <div *ngFor="let contact of contacts"
+             class="contacts-list-item"
+             [ngClass]="contact.status"
+             [class.active]="contact.id === selectedContact?.id"
+             (click)="goToChat(contact)">
 
-            <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 -->
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.scss b/src/app/layout/components/chat-panel/chat-panel.component.scss
index 93b0d321..ffb556f7 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/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 {
-            cursor: pointer;
+        .contacts-list-item {
             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,50 +74,51 @@ chat-panel {
                 }
             }
 
-            .mat-list-item-content {
+            .avatar {
+                margin: 0;
+            }
 
-                .unread-count {
-                    position: absolute;
-                    min-width: 18px;
-                    height: 18px;
-                    top: 4px;
-                    left: 10px;
-                    border-radius: 9px;
-                    padding: 0 5px;
-                    font-size: 11px;
-                    text-align: center;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background-color: mat-color(mat-palette($mat-indigo));
-                    color: white;
-                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+            .unread-count {
+                position: absolute;
+                min-width: 18px;
+                height: 18px;
+                top: 4px;
+                left: 10px;
+                border-radius: 9px;
+                padding: 0 5px;
+                font-size: 11px;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: mat-color(mat-palette($mat-indigo));
+                color: white;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+            }
+
+            .status-icon {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                bottom: 3px;
+                left: 44px;
+                border: 2px solid white;
+                border-radius: 50%;
+
+                &.online {
+                    background-color: #4CAF50;
                 }
 
-                .status-icon {
-                    position: absolute;
-                    width: 12px;
-                    height: 12px;
-                    bottom: 3px;
-                    left: 44px;
-                    border: 2px solid white;
-                    border-radius: 50%;
+                &.do-not-disturb {
+                    background-color: #F44336;
+                }
 
-                    &.online {
-                        background-color: #4CAF50;
-                    }
+                &.away {
+                    background-color: #FFC107;
+                }
 
-                    &.do-not-disturb {
-                        background-color: #F44336;
-                    }
-
-                    &.away {
-                        background-color: #FFC107;
-                    }
-
-                    &.offline {
-                        background-color: #646464;
-                    }
+                &.offline {
+                    background-color: #646464;
                 }
             }
         }
@@ -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 {
 
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.ts b/src/app/layout/components/chat-panel/chat-panel.component.ts
index cf7c04f9..df12d123 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/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 )
diff --git a/src/app/layout/components/chat-panel/chat-panel.module.ts b/src/app/layout/components/chat-panel/chat-panel.module.ts
index 5d9eb29b..103a006e 100644
--- a/src/app/layout/components/chat-panel/chat-panel.module.ts
+++ b/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,