MOBILE-2963 messages: Add message tails to match web

src/addon/messages/pages/discussion/discussion.html

@@ -47,7 +47,7 @@
 
                 <ion-item text-wrap (longPress)="copyMessage(message)" class="addon-message" [class.addon-message-mine]="message.useridfrom == currentUserId" [class.addon-message-not-mine]="message.useridfrom != currentUserId" [class.addon-message-no-user]="!message.showUserData" [@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'">
                     <!-- User data. -->
-                    <h2 class="addon-message-user" >
+                    <h2 class="addon-message-user">
                         <ion-avatar item-start core-user-avatar [user]="members[message.useridfrom]" [linkProfile]="false" *ngIf="message.showUserData"></ion-avatar>
 
                         <div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div>
@@ -64,6 +64,7 @@
                     <button ion-button icon-only clear="true" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)" class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'" [attr.aria-label]=" 'addon.messages.deletemessage' | translate">
                         <ion-icon name="trash" color="danger"></ion-icon>
                     </button>
+                    <div class="tail" *ngIf="message.showTail"></div>
                 </ion-item>
             </ng-container>
         </ion-list>

src/addon/messages/pages/discussion/discussion.scss

@@ -47,6 +47,9 @@ ion-app.app-root page-addon-messages-discussion {
         min-height: 0;
         position: relative;
         @include core-transition(width);
+        // This is needed to display bubble tails.
+        overflow: visible;
+        contain: none;
 
         core-format-text > p:only-child {
             display: inline;
@@ -127,6 +130,15 @@ ion-app.app-root page-addon-messages-discussion {
                 line-height: initial;
             }
         }
+
+        .tail {
+            content: '';
+            width: 0;
+            height: 0;
+            border: 0.5rem solid transparent;
+            position: absolute;
+            touch-action: none;
+        }
     }
 
     .addon-message.addon-message-mine + .addon-message-no-user.addon-message-mine,
@@ -158,6 +170,18 @@ ion-app.app-root page-addon-messages-discussion {
               height: 16px;
             }
         }
+
+        .tail {
+            @include position(null, 0, 0, null);
+            @include margin-horizontal(null, -0.5rem);
+            border-bottom-color: $item-message-mine-bg;
+        }
+    }
+
+    .addon-message-not-mine .tail {
+        @include position(null, null, 0, 0);
+        @include margin-horizontal(-0.5rem, null);
+        border-bottom-color: $item-message-bg;
     }
 
     .toolbar-title {

src/addon/messages/pages/discussion/discussion.ts

@@ -384,6 +384,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
         this.messages.forEach((message, index): any => {
             message.showDate = this.showDate(message, this.messages[index - 1]);
             message.showUserData = this.showUserData(message, this.messages[index - 1]);
+            message.showTail = this.showTail(message, this.messages[index + 1]);
         });
 
         // Call resize to recalculate the dimensions.
@@ -1046,6 +1047,17 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
             (!prevMessage || prevMessage.useridfrom != message.useridfrom || message.showDate);
     }
 
+    /**
+     * Check if a css tail should be shown.
+     *
+     * @param {any} message Current message where to show the user info.
+     * @param {any} [nextMessage] Next message.
+     * @return {boolean} Whether user data should be shown.
+     */
+    showTail(message: any, nextMessage?: any): boolean {
+        return !nextMessage || nextMessage.useridfrom != message.useridfrom || nextMessage.showDate;
+    }
+
     /**
      * Toggles delete state.
      */

src/app/app.scss

@@ -1052,7 +1052,7 @@ ion-modal,
 
 // Highlight text.
 .matchtext {
-  background-color: lighten($blue, 40%);
+  background-color: $core-text-hightlight-background-color;
 }
 
 // Styles for desktop apps only.

src/theme/variables.scss

@@ -263,6 +263,8 @@ $core-rte-min-height: 80px;
 
 $core-toolbar-button-image-width: 32px;
 
+$core-text-hightlight-background-color: lighten($blue, 40%) !default;
+
 // Timer variables.
 $core-timer-warn-color:     $red !default;
 $core-timer-iterations:     15 !default;