Updated changelog and nav badge

(Chat Panel) Fixed: IE11 issues

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.2",
+  "version": "6.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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",

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,17 +19,19 @@
 
     </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>
 
-<div>
+<div class="content">
 
     <!-- Contacts -->
     <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
@@ -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;
@@ -34,12 +37,20 @@ chat-panel {
 
     }
 
+    .content {
+        flex: 1 1 100%;
+        min-height: 0;
+    }
+
     #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
@@ -61,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 {
@@ -82,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;
@@ -106,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 {
@@ -131,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;
@@ -158,6 +192,7 @@ chat-panel {
                     align-items: center;
                     justify-content: center;
                     padding: 12px;
+                    max-width: 100%;
 
                     .message {
                         white-space: pre-wrap;
@@ -171,6 +206,7 @@ chat-panel {
                         font-size: 11px;
                         margin-top: 8px;
                         top: 100%;
+                        left: 0;
                         color: $black-87-opacity;
                         white-space: nowrap;
                     }
@@ -218,7 +254,7 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #FFFFFF;
+                        background-color: #E0E0E0;
                         color: $black-87-opacity;
 
                         border-top-left-radius: 20px;
@@ -298,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;
     }
 
     /**

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

@@ -3,4 +3,5 @@ navbar {
     flex-direction: column;
     flex: 1 1 auto;
     width: 100%;
+    height: 100%;
 }

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;
@@ -79,11 +81,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;
             }
 
@@ -134,6 +138,8 @@ navbar {
                     top: 92px;
                     border-radius: 50%;
                     padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
 
                     .avatar {
                         width: 72px;

src/app/main/documentation/changelog/changelog.component.html

@@ -19,6 +19,38 @@
 
         <div class="changelog">
 
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.3 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.3</span>
+                    <span class="date">(2018-07-13)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Navbar) Doesn't scroll on Firefox, IE & Edge</li>
+                            <li>(Navbar) IE11 style fixes</li>
+                            <li>(Chat Panel) IE11 style fixes</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Chat Panel) Style and logic tweaks</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
             <!-- --------------------------------------------------------------------------------------------- -->
             <!-- @ v6.2.2 -->
             <!-- --------------------------------------------------------------------------------------------- -->

src/app/navigation/navigation.ts

@@ -849,7 +849,7 @@ export const navigation: FuseNavigation[] = [
                 icon : 'update',
                 url  : '/documentation/changelog',
                 badge: {
-                    title: '6.2.2',
+                    title: '6.2.3',
                     bg   : '#EC0C8E',
                     fg   : '#FFFFFF'
                 }