From 251732f221ab1e754c8f695a56062e3dcdd65776 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 12 Jul 2018 13:59:51 +0300
Subject: [PATCH 1/4] Updated changelog

---
 .../changelog/changelog.component.html        | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html
index cd38391e..67021fa4 100644
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -34,16 +34,14 @@
                     <div class="fixed">
                         <span class="title">Fixed</span>
                         <ul>
-                            <ul>
-                                <li>Added the missing 'is-mobile' check back to the AppComponent</li>
-                                <li>Scrollbar styles are being modified in some mobile devices</li>
-                                <li>(Chat Panel) Mobile scrolling and layout issues</li>
-                                <li>
-                                    (Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
-                                    prevent style leak
-                                </li>
-                                <li>(Toolbar) Removed unnecessary chat panel toggle method</li>
-                            </ul>
+                            <li>Added the missing 'is-mobile' check back to the AppComponent</li>
+                            <li>Scrollbar styles are being modified in some mobile devices</li>
+                            <li>(Chat Panel) Mobile scrolling and layout issues</li>
+                            <li>
+                                (Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
+                                prevent style leak
+                            </li>
+                            <li>(Toolbar) Removed unnecessary chat panel toggle method</li>
                         </ul>
                     </div>
 
@@ -83,9 +81,7 @@
                     <div class="fixed">
                         <span class="title">Fixed</span>
                         <ul>
-                            <ul>
-                                <li>(Chat Panel) Mobile width issues</li>
-                            </ul>
+                            <li>(Chat Panel) Mobile width issues</li>
                         </ul>
                     </div>
 

From 4d4d52ba0547d5fbe2c57c12561682862a36e411 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 12 Jul 2018 15:48:55 +0300
Subject: [PATCH 2/4] (Navbar) Fixed: Style variant 2 doesn't scroll on
 Firefox, IE & Edge (Chat Panel) Fixed: Doesn't scroll on Firefox, IE & Edge
 Increased Fuse version

---
 package-lock.json                                             | 2 +-
 package.json                                                  | 2 +-
 .../layout/components/chat-panel/chat-panel.component.html    | 2 +-
 .../layout/components/chat-panel/chat-panel.component.scss    | 4 ++++
 src/app/layout/components/navbar/navbar.component.scss        | 1 +
 .../components/navbar/vertical/style-1/style-1.component.scss | 2 ++
 6 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2684398b..81f93b5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.2",
+  "version": "6.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index aad07bb5..9228826c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.2",
+  "version": "6.2.3",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
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 84b4ee42..eab3cb96 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/src/app/layout/components/chat-panel/chat-panel.component.html
@@ -28,7 +28,7 @@
 
 </div>
 
-<div>
+<div class="content">
 
     <!-- Contacts -->
     <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
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 9676ba32..91531744 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,10 @@ chat-panel {
 
     }
 
+    .content {
+        min-height: 0;
+    }
+
     #contacts-list {
         padding: 8px 0;
         overflow: auto;
diff --git a/src/app/layout/components/navbar/navbar.component.scss b/src/app/layout/components/navbar/navbar.component.scss
index 44ede0d8..e14eee3b 100644
--- a/src/app/layout/components/navbar/navbar.component.scss
+++ b/src/app/layout/components/navbar/navbar.component.scss
@@ -3,4 +3,5 @@ navbar {
     flex-direction: column;
     flex: 1 1 auto;
     width: 100%;
+    height: 100%;
 }
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
index 147859a9..9bd0d98d 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -79,11 +79,13 @@ navbar {
             align-items: center;
             justify-content: space-between;
             min-height: 64px;
+            max-height: 64px;
             height: 64px;
             padding: 12px 12px 12px 20px;
 
             @include media-breakpoint('xs') {
                 min-height: 56px;
+                max-height: 56px;
                 height: 56px;
             }
 

From b6ebd2b839f33f9049bea4a87b27eb51810adc19 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 12 Jul 2018 16:04:56 +0300
Subject: [PATCH 3/4] (Navbar) Fixed: IE11 issues (Chat Panel) Fixed: IE11
 issues

---
 .../layout/components/chat-panel/chat-panel.component.scss    | 2 ++
 .../components/navbar/vertical/style-1/style-1.component.scss | 4 ++++
 2 files changed, 6 insertions(+)

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 91531744..034dfa9d 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/src/app/layout/components/chat-panel/chat-panel.component.scss
@@ -35,6 +35,7 @@ chat-panel {
     }
 
     .content {
+        flex: 1 1 100%;
         min-height: 0;
     }
 
@@ -162,6 +163,7 @@ chat-panel {
                     align-items: center;
                     justify-content: center;
                     padding: 12px;
+                    max-width: 100%;
 
                     .message {
                         white-space: pre-wrap;
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
index 9bd0d98d..d0af9829 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -41,6 +41,8 @@ fuse-sidebar {
                                 position: relative;
                                 top: auto;
                                 padding: 0;
+                                transform: translateX(0);
+                                left: auto;
 
                                 .avatar {
                                     width: 40px;
@@ -136,6 +138,8 @@ navbar {
                     top: 92px;
                     border-radius: 50%;
                     padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
 
                     .avatar {
                         width: 72px;

From ffbd000fe2dcbe089338c4dc4d89776c21019f4d Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 12 Jul 2018 17:45:46 +0300
Subject: [PATCH 4/4] (Chat Panel) Style and logic tweaks

---
 .../chat-panel/chat-panel.component.html      | 37 +++++++---
 .../chat-panel/chat-panel.component.scss      | 70 ++++++++++++++++---
 .../chat-panel/chat-panel.component.ts        | 51 ++++++++++----
 3 files changed, 128 insertions(+), 30 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 eab3cb96..8828c5fe 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/src/app/layout/components/chat-panel/chat-panel.component.html
@@ -2,7 +2,8 @@
 
     <ng-container *ngIf="selectedContact === null">
 
-        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
+        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
+             (click)="unfoldSidebarTemporarily()">
             <mat-icon class="s-32 white-fg">chat</mat-icon>
             <h3 class="ml-12">Team Chat</h3>
         </div>
@@ -18,12 +19,14 @@
 
     </ng-container>
 
-    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily()" fxHide fxShow.gt-md>
-        <mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
+            fxHide fxShow.gt-md>
+        <mat-icon class="secondary-text s-20">close</mat-icon>
     </button>
 
-    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
-        <mat-icon class="secondary-text">arrow_forward</mat-icon>
+    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
+            fxHide.gt-md>
+        <mat-icon class="secondary-text">close</mat-icon>
     </button>
 
 </div>
@@ -37,7 +40,7 @@
              class="contacts-list-item"
              [ngClass]="contact.status"
              [class.active]="contact.id === selectedContact?.id"
-             (click)="goToChat(contact)">
+             (click)="toggleChat(contact)">
 
             <img class="avatar" [src]="contact.avatar"
                  [matTooltip]="contact.name"
@@ -78,7 +81,7 @@
 
             </ng-container>
 
-            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
+            <ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
 
                 <div class="no-messages-icon">
                     <mat-icon class="s-128">chat</mat-icon>
@@ -87,11 +90,29 @@
                 <div class="no-messages secondary-text">
                     Start a conversation by typing your message below.
                 </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="!selectedContact">
+
+                <div class="no-contact-selected">
+
+                    <div class="no-contact-icon">
+                        <mat-icon class="s-128">chat</mat-icon>
+                    </div>
+
+                    <div class="no-contact secondary-text">
+                        Select a contact to start a conversation.
+                    </div>
+
+                </div>
+
             </ng-container>
 
         </div>
 
-        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
+        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
+             *ngIf="selectedContact">
 
             <form #replyForm="ngForm"
                   (ngSubmit)="reply($event)"
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 034dfa9d..424ebca1 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/src/app/layout/components/chat-panel/chat-panel.component.scss
@@ -16,11 +16,14 @@ chat-panel {
     }
 
     .header {
+        position: relative;
         height: 64px;
         max-height: 64px;
         min-height: 64px;
+        z-index: 10;
 
         .title {
+            cursor: pointer;
 
             mat-icon {
                 margin-left: 4px;
@@ -40,11 +43,14 @@ chat-panel {
     }
 
     #contacts-list {
-        padding: 8px 0;
+        position: relative;
+        z-index: 5;
+        padding: 16px 0;
         overflow: auto;
         width: 72px;
         min-width: 72px;
         max-width: 72px;
+        background-color: #F9F9F9;
         -webkit-overflow-scrolling: touch;
 
         // Perfect scrollbar
@@ -66,8 +72,24 @@ chat-panel {
             cursor: pointer;
 
             &.active {
-                background-color: mat-color(mat-palette($mat-grey, 300));
-                @include mat-elevation(2);
+                position: relative;
+                background-color: mat-color(mat-palette($mat-indigo, 50));
+
+                .status-icon {
+                    border-color: mat-color(mat-palette($mat-indigo, 50));
+                }
+
+                &:after {
+                    position: absolute;
+                    top: 8px;
+                    right: 0;
+                    bottom: 8px;
+                    content: "";
+                    width: 4px;
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                    background-color: mat-color(mat-palette($mat-indigo));
+                }
             }
 
             &.offline {
@@ -87,14 +109,17 @@ chat-panel {
 
             .avatar {
                 margin: 0;
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
             }
 
             .unread-count {
                 position: absolute;
                 min-width: 18px;
                 height: 18px;
-                top: 4px;
-                left: 10px;
+                top: 8px;
+                left: 12px;
                 border-radius: 9px;
                 padding: 0 5px;
                 font-size: 11px;
@@ -111,9 +136,9 @@ chat-panel {
                 position: absolute;
                 width: 12px;
                 height: 12px;
-                bottom: 3px;
+                bottom: 10px;
                 left: 44px;
-                border: 2px solid white;
+                border: 2px solid #F9F9F9;
                 border-radius: 50%;
 
                 &.online {
@@ -136,7 +161,11 @@ chat-panel {
     }
 
     #chat {
-        background-color: mat-color(mat-palette($mat-grey, 300));
+        position: relative;
+        z-index: 7;
+        flex: 1 1 100%;
+        background-color: white;
+        box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
 
         .messages {
             position: relative;
@@ -177,6 +206,7 @@ chat-panel {
                         font-size: 11px;
                         margin-top: 8px;
                         top: 100%;
+                        left: 0;
                         color: $black-87-opacity;
                         white-space: nowrap;
                     }
@@ -224,7 +254,7 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #FFFFFF;
+                        background-color: #E0E0E0;
                         color: $black-87-opacity;
 
                         border-top-left-radius: 20px;
@@ -304,12 +334,34 @@ chat-panel {
                 padding: 0 16px 24px 16px;
                 text-align: center;
             }
+
+            .no-contact-selected {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                transform: translateY(-50%);
+                padding: 0 24px;
+                text-align: center;
+
+                .no-contact-icon {
+
+                    mat-icon {
+                        color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+
+                .no-contact {
+                    margin-top: 24px;
+                }
+            }
         }
 
         .reply-form {
             position: relative;
 
             .message-text {
+                background-color: #E0E0E0;
                 padding: 16px 8px;
 
                 .mat-form-field-wrapper {
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 e998de21..5462e1d6 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.component.ts
@@ -206,27 +206,52 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     }
 
     /**
-     * Go to chat with the contact
+     * Toggle chat with the contact
      *
      * @param contact
      */
-    goToChat(contact): void
+    toggleChat(contact): void
     {
-        // Unfold the sidebar temporarily
-        this.unfoldSidebarTemporarily();
+        // If the contact equals to the selectedContact,
+        // that means we will deselect the contact and
+        // unload the chat
+        if ( this.selectedContact && contact.id === this.selectedContact.id )
+        {
+            // Reset
+            this.resetChat();
+        }
+        // Otherwise, we will select the contact, open
+        // the sidebar and start the chat
+        else
+        {
+            // Unfold the sidebar temporarily
+            this.unfoldSidebarTemporarily();
 
-        // Set the selected contact
-        this.selectedContact = contact;
+            // Set the selected contact
+            this.selectedContact = contact;
 
-        // Load the chat
-        this._chatPanelService.getChat(contact.id).then((chat) => {
+            // Load the chat
+            this._chatPanelService.getChat(contact.id).then((chat) => {
 
-            // Set the chat
-            this.chat = chat;
+                // Set the chat
+                this.chat = chat;
 
-            // Prepare the chat for the replies
-            this._prepareChatForReplies();
-        });
+                // Prepare the chat for the replies
+                this._prepareChatForReplies();
+            });
+        }
+    }
+
+    /**
+     * Remove the selected contact and unload the chat
+     */
+    resetChat(): void
+    {
+        // Set the selected contact as null
+        this.selectedContact = null;
+
+        // Set the chat as null
+        this.chat = null;
     }
 
     /**