(Chat Panel) Style and logic tweaks

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>
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
-        <mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
+            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>
+    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
-        <mat-icon class="secondary-text">arrow_forward</mat-icon>
+            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)"

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));
+                position: relative;
-                @include mat-elevation(2);
+                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;
+                top: 8px;
-                left: 10px;
+                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 {

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
+        // If the contact equals to the selectedContact,
-        this.unfoldSidebarTemporarily();
+        // 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
+            // Set the selected contact
-        this.selectedContact = contact;
+            this.selectedContact = contact;
 
-        // Load the chat
+            // Load the chat
-        this._chatPanelService.getChat(contact.id).then((chat) => {
+            this._chatPanelService.getChat(contact.id).then((chat) => {
 
-            // Set the chat
+                // Set the chat
-            this.chat = chat;
+                this.chat = chat;
 
-            // Prepare the chat for the replies
+                // Prepare the chat for the replies
-            this._prepareChatForReplies();
+                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;
     }
 
     /**