(Chat Panel) Styling adjustments

src/app/fake-db/chat-panel.ts

@@ -199,6 +199,11 @@ export class ChatPanelFakeDb
                     'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
                     'time'   : '2017-03-22T08:55:28.299Z'
                 },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
+                    'time'   : '2017-03-22T08:55:28.299Z'
+                },
                 {
                     'who'    : '5725a680b3249760ea21de52',
                     'message': 'We are losing money! Quick!',
@@ -219,6 +224,16 @@ export class ChatPanelFakeDb
                     'message': 'We are losing money! Quick!',
                     'time'   : '2017-03-22T09:15:28.299Z'
                 },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:05:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-03-22T09:15:28.299Z'
+                },
                 {
                     'who'    : '5725a6802d10e277a0f35724',
                     'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
@@ -244,6 +259,11 @@ export class ChatPanelFakeDb
                     'message': 'You are the worst!',
                     'time'   : '2017-03-22T09:33:28.299Z'
                 },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:33:28.299Z'
+                },
                 {
                     'who'    : '5725a680b3249760ea21de52',
                     'message': 'We are losing money! Quick!',
@@ -265,7 +285,7 @@ export class ChatPanelFakeDb
             'id'    : '2725a680b8d240c011dd2243',
             'dialog': [
                 {
-                    'who'    : '5725a680b8d240c011dd224b',
+                    'who'    : '5725a680606588342058356d',
                     'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                     'time'   : '2017-04-22T01:00:00.299Z'
                 },
@@ -275,7 +295,7 @@ export class ChatPanelFakeDb
                     'time'   : '2017-04-22T01:05:00.299Z'
                 },
                 {
-                    'who'    : '5725a680b8d240c011dd224b',
+                    'who'    : '5725a680606588342058356d',
                     'message': 'We are losing money! Quick!',
                     'time'   : '2017-04-22T01:10:00.299Z'
                 }
@@ -285,7 +305,7 @@ export class ChatPanelFakeDb
             'id'    : '3725a6809413bf8a0a5272b4',
             'dialog': [
                 {
-                    'who'    : '5725a6809413bf8a0a5272b1',
+                    'who'    : '5725a68009e20d0a9e9acf2a',
                     'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                     'time'   : '2017-04-22T02:10:00.299Z'
                 }

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

@@ -60,18 +60,21 @@
 
         <div class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
 
-            <div fxLayout="row" *ngFor="let message of chat.dialog" class="message-row"
+            <div *ngFor="let message of chat.dialog; let i = index" class="message-row"
-                 [ngClass]="{'user': message.who === user.id}">
+                 [ngClass]="{
+                            'me': message.who === user.id,
+                            'contact': message.who !== user.id,
+                            'first-of-group': isFirstMessageOfGroup(message, i),
+                            'last-of-group': isLastMessageOfGroup(message, i)
+                            }">
 
-                <img *ngIf="message.who === contact.id"
+                <img *ngIf="shouldShowContactAvatar(message, i)"
                      src="{{contact.avatar}}"
                      class="avatar">
 
-                <img *ngIf="message.who === user.id" class="avatar" src="{{user.avatar}}">
-
                 <div class="bubble">
                     <div class="message">{{message.message}}</div>
-                    <div class="time secondary-text">{{message.time | date:'medium'}}</div>
+                    <div class="time secondary-text">{{message.time | date:'short'}}</div>
                 </div>
 
             </div>
@@ -81,8 +84,8 @@
         <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
 
             <form #replyForm="ngForm"
-                  (ngSubmit)="reply()"
+                  (ngSubmit)="reply($event)"
-                  (keyup.enter)="reply()"
+                  (keydown.enter)="reply($event)"
                   fxFlex class="reply-form"
                   fxLayout="row"
                   fxLayoutAlign="start center">

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

@@ -101,54 +101,84 @@ chat-panel {
     }
 
     #chat {
-        background-color: mat-color(mat-palette($mat-grey, 200));
+        background-color: mat-color(mat-palette($mat-grey, 300));
 
         .messages {
             overflow: auto;
+            padding: 16px 0 40px 40px;
 
             .message-row {
-                padding: 16px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: flex-end;
+                padding: 0 16px 4px 16px;
+
+                .avatar {
+                    position: absolute;
+                    left: -32px;
+                    margin: 0;
+                }
 
                 .bubble {
                     position: relative;
-                    padding: 6px 7px 8px 9px;
+                    display: flex;
-                    background-color: #FFF;
+                    align-items: center;
-                    box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
+                    justify-content: center;
-                    border-radius: 6px;
+                    padding: 12px;
-
-                    &:before {
-                        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
-                        content: '';
-                        position: absolute;
-                        left: -11px;
-                        bottom: 3px;
-                        width: 12px;
-                        height: 19px;
-                        background-position: 50% 50%;
-                        background-repeat: no-repeat;
-                        background-size: contain;
-                    }
 
                     .message {
                         white-space: pre-wrap;
+                        line-height: 1.2;
                     }
 
                     .time {
+                        position: absolute;
+                        display: none;
+                        width: 100%;
                         font-size: 11px;
                         margin-top: 8px;
-                        text-align: right;
+                        top: 100%;
+                        color: $black-87-opacity;
+                        white-space: nowrap;
                     }
                 }
 
                 &.contact {
 
-                    .avatar {
+                    .bubble {
-                        margin: 0 16px 0 0;
+                        background-color: mat-color(mat-palette($mat-indigo));
+                        color: white;
+
+                        border-top-left-radius: 5px;
+                        border-bottom-left-radius: 5px;
+
+                        border-top-right-radius: 20px;
+                        border-bottom-right-radius: 20px;
+
+                        .time {
+                            margin-left: 12px;
                         }
                     }
 
-                &.user {
+                    &.first-of-group {
-                    align-items: flex-end;
+
+                        .bubble {
+                            border-top-left-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-left-radius: 20px;
+                        }
+                    }
+                }
+
+                &.me {
+                    padding-left: 40px;
 
                     .avatar {
                         order: 2;
@@ -157,13 +187,59 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #E8F5E9;
+                        background-color: #FFFFFF;
-                        border: 1px solid #DFEBE0;
+                        color: $black-87-opacity;
-                        order: 1;
+
-                        &:before {
+                        border-top-left-radius: 20px;
-                            right: -11px;
+                        border-bottom-left-radius: 20px;
-                            left: auto;
+
-                            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
+                        border-top-right-radius: 5px;
+                        border-bottom-right-radius: 5px;
+
+                        .time {
+                            justify-content: flex-end;
+                            right: 0;
+                            margin-right: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-right-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-right-radius: 20px;
+                        }
+                    }
+                }
+
+                &.contact + .me,
+                &.me + .contact {
+                    padding-top: 20px;
+                    margin-top: 20px;
+                }
+
+                &.first-of-group {
+
+                    .bubble {
+                        border-top-left-radius: 20px;
+                        padding-top: 13px;
+                    }
+                }
+
+                &.last-of-group {
+
+                    .bubble {
+                        border-bottom-left-radius: 20px;
+                        padding-bottom: 13px;
+
+                        .time {
+                            display: flex;
                         }
                     }
                 }

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

@@ -153,6 +153,45 @@ export class ChatPanelComponent implements OnInit, OnDestroy
         this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
     }
 
+    /**
+     * Decide whether to show or not the contact's avatar in the message row
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    shouldShowContactAvatar(message, i): boolean
+    {
+        return (
+            message.who === this.contact.id &&
+            ((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.contact.id) || !this.chat.dialog[i + 1])
+        );
+    }
+
+    /**
+     * Check if the given message is the first message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isFirstMessageOfGroup(message, i): boolean
+    {
+        return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
+    }
+
+    /**
+     * Check if the given message is the last message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isLastMessageOfGroup(message, i): boolean
+    {
+        return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
+    }
+
     /**
      * Go to chat with the contact
      *
@@ -195,8 +234,15 @@ export class ChatPanelComponent implements OnInit, OnDestroy
     /**
      * Reply
      */
-    reply(): void
+    reply(event): void
     {
+        event.preventDefault();
+
+        if ( !this._replyForm.form.value.message )
+        {
+            return;
+        }
+
         // Message
         const message = {
             who    : this.user.id,