MDL-64102 core_message: add message tails to match ux design
authorBas Brands <bas@moodle.com>
Wed, 12 Dec 2018 12:42:24 +0000 (13:42 +0100)
committerBas Brands <bas@moodle.com>
Mon, 8 Apr 2019 10:25:56 +0000 (12:25 +0200)
message/templates/message_drawer_view_conversation_body_message.mustache
theme/boost/scss/moodle/message.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index bd3c2c2..e742c9b 100644 (file)
 
 }}
 <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>
index 164121a..087ff4b 100644 (file)
@@ -595,7 +595,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;
     }
index d18668f..2285345 100644 (file)
@@ -13764,6 +13764,21 @@ a.ygtvspacer:hover {
     min-height: 1.5rem; }
   .message-app .section .collapsing {
     overflow: hidden; }
+  .message-app .message .tail {
+    content: '';
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border: 0.5rem solid transparent;
+    position: relative; }
+  .message-app .message.send .tail {
+    right: 0;
+    margin-right: -0.5rem;
+    border-bottom-color: #ced4da; }
+  .message-app .message.received .tail {
+    left: 0;
+    margin-left: -0.5rem;
+    border-bottom-color: #fff; }
   .message-app .lazy-load-list {
     overflow-y: auto; }
 
index e682d12..386ceed 100644 (file)
@@ -14011,6 +14011,21 @@ a.ygtvspacer:hover {
     min-height: 1.5rem; }
   .message-app .section .collapsing {
     overflow: hidden; }
+  .message-app .message .tail {
+    content: '';
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border: 0.5rem solid transparent;
+    position: relative; }
+  .message-app .message.send .tail {
+    right: 0;
+    margin-right: -0.5rem;
+    border-bottom-color: #e9ecef; }
+  .message-app .message.received .tail {
+    left: 0;
+    margin-left: -0.5rem;
+    border-bottom-color: #fff; }
   .message-app .lazy-load-list {
     overflow-y: auto; }