From 828b40dca1d1967c355a6653144bedf0d1a7b04e Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Wed, 12 Dec 2018 13:42:24 +0100
Subject: [PATCH] MDL-64102 core_message: add message tails to match ux design

---
 ...er_view_conversation_body_message.mustache |  5 +++--
 theme/boost/scss/moodle/message.scss          | 21 ++++++++++++++++++-
 theme/boost/style/moodle.css                  | 15 +++++++++++++
 theme/bootstrapbase/less/moodle/message.less  | 20 ++++++++++++++++++
 theme/bootstrapbase/style/moodle.css          | 18 ++++++++++++++++
 ...er_view_conversation_body_message.mustache |  3 ++-
 6 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/message/templates/message_drawer_view_conversation_body_message.mustache b/message/templates/message_drawer_view_conversation_body_message.mustache
index bd3c2c2034e..e742c9bb704 100644
--- a/message/templates/message_drawer_view_conversation_body_message.mustache
+++ b/message/templates/message_drawer_view_conversation_body_message.mustache
@@ -35,13 +35,14 @@
 
 }}
 <div
-    class="message clickable d-flex flex-column p-2 {{#fromloggedinuser}}bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
+    class="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}received bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
     data-region="message"
     data-message-id="{{id}}"
     role="checkbox"
     aria-checked="false"
     tabindex="0"
 >
+    <div class="tail position-absolute"></div>
     <div class="d-flex align-items-center {{^fromloggedinuser}}pb-2{{/fromloggedinuser}}">
         {{^fromloggedinuser}}
         <div style="flex-shrink: 0">
@@ -67,4 +68,4 @@
         <span class="hidden ml-2 small text-primary" data-region="selected-icon">{{#pix}} i/checkedcircle, core {{/pix}}</span>
     </div>
     <div dir="auto" align="initial">{{{text}}}</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index 59a8a490e6f..44eb10cf05a 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -1357,7 +1357,26 @@ $message-drawer-width: 320px;
             overflow: hidden;
         }
     }
-
+    .message {
+        .tail {
+            content: '';
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border: 0.5rem solid transparent;
+            position: relative;
+        }
+        &.send .tail {
+            right: 0;
+            margin-right: -0.5rem;
+            border-bottom-color: map-get($theme-colors, 'secondary');
+        }
+        &.received .tail {
+            left: 0;
+            margin-left: -0.5rem;
+            border-bottom-color: $white;
+        }
+    }
     .lazy-load-list {
         overflow-y: auto;
     }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index f6863540876..6b6abd62f0e 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -14216,6 +14216,21 @@ a.ygtvspacer:hover {
     min-height: 1.5rem; }
   .message-drawer .section .collapsing {
     overflow: hidden; }
+  .message-drawer .message .tail {
+    content: '';
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border: 0.5rem solid transparent;
+    position: relative; }
+  .message-drawer .message.send .tail {
+    right: 0;
+    margin-right: -0.5rem;
+    border-bottom-color: #ced4da; }
+  .message-drawer .message.received .tail {
+    left: 0;
+    margin-left: -0.5rem;
+    border-bottom-color: #fff; }
   .message-drawer .lazy-load-list {
     overflow-y: auto; }
 
diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
index 9bfff5b3555..5597bebcda8 100644
--- a/theme/bootstrapbase/less/moodle/message.less
+++ b/theme/bootstrapbase/less/moodle/message.less
@@ -1360,6 +1360,26 @@
     .last-message {
         min-height: 20px;
     }
+    .message {
+        .tail {
+            content: '';
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border: 0.5rem solid transparent;
+            position: relative;
+        }
+        &.send .tail {
+            right: 0;
+            margin-right: -0.5rem;
+            border-bottom-color: #e9ecef;
+        }
+        &.received .tail {
+            left: 0;
+            margin-left: -0.5rem;
+            border-bottom-color: @white;
+        }
+    }
 
     .lazy-load-list {
         overflow-y: auto;
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 22d0adf7a4c..e15322175aa 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -9251,6 +9251,24 @@ a.ygtvspacer:hover {
 .message-drawer .last-message {
   min-height: 20px;
 }
+.message-drawer .message .tail {
+  content: '';
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border: 0.5rem solid transparent;
+  position: relative;
+}
+.message-drawer .message.send .tail {
+  right: 0;
+  margin-right: -0.5rem;
+  border-bottom-color: #e9ecef;
+}
+.message-drawer .message.received .tail {
+  left: 0;
+  margin-left: -0.5rem;
+  border-bottom-color: #fff;
+}
 .message-drawer .lazy-load-list {
   overflow-y: auto;
 }
diff --git a/theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_body_message.mustache b/theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_body_message.mustache
index f6ee0e177d1..9b77a3ef2c8 100644
--- a/theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_body_message.mustache
+++ b/theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_body_message.mustache
@@ -39,13 +39,14 @@
 }}
 
 <div
-    class="message clickable d-flex flex-column p-2 {{#fromloggedinuser}}bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
+    class="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}received bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
     data-region="message"
     data-message-id="{{id}}"
     aria-checked="false"
     role="checkbox"
     tabindex="0"
 >
+    <div class="tail position-absolute"></div>
     <div class="d-flex align-items-center {{^fromloggedinuser}}pb-2{{/fromloggedinuser}}">
         {{^fromloggedinuser}}
         <div style="flex-shrink: 0">