MDL-64099 message: fix last message and date in group conversations

lang/en/message.php

@@ -46,6 +46,7 @@ $string['contactblocked'] = 'Contact blocked';
 $string['contactrequests'] = 'Contact requests';
 $string['contactrequestsent'] = 'Contact request sent';
 $string['contacts'] = 'Contacts';
+$string['conversationlastmessage'] = '{$a->sender}: {$a->message}';
 $string['decline'] = 'Decline';
 $string['defaultmessageoutputs'] = 'Default message outputs';
 $string['defaults'] = 'Defaults';
@@ -250,6 +251,7 @@ $string['viewunreadmessageswith'] = 'View unread messages with {$a}';
 $string['writeamessage'] = 'Write a message...';
 $string['wouldliketocontactyou'] = 'Would like to contact you';
 $string['you'] = 'You:';
+$string['yousender'] = 'You';
 $string['youhaveblockeduser'] = 'You have blocked this user in the past';
 $string['yourcontactrequestpending'] = 'Your contact request is pending with {$a}';
 

message/amd/src/message_drawer_view_overview_section.js

@@ -194,7 +194,7 @@ function(
                         carry = member.fullname;
                     }
                     return carry;
-                }, null) + ':';
+                }, null);
             }
 
             return formattedConversation;
@@ -363,7 +363,7 @@ function(
         var message = conversation.messages[conversation.messages.length - 1];
         var youString = '';
         var stringRequests = [
-            {key: 'you', component: 'core_message'},
+            {key: 'yousender', component: 'core_message'},
             {key: 'strftimetime24', component: 'core_langconfig'},
         ];
         return Str.get_strings(stringRequests)
@@ -375,17 +375,16 @@ function(
                 return dates[0];
             })
             .then(function(dateString) {
-                var lastMessage = $(message.text).text();
-
-                if (message.fromLoggedInUser) {
-                    lastMessage = youString + ' ' + lastMessage;
-                } else {
-                    lastMessage = message.userFrom.fullname + ': ' + lastMessage;
-                }
-
-                element.find(SELECTORS.LAST_MESSAGE).html(lastMessage);
                 element.find(SELECTORS.LAST_MESSAGE_DATE).text(dateString).removeClass('hidden');
-                return dateString;
+
+                // Now load the last message.
+                return Str.get_string('conversationlastmessage', 'core_message', {
+                    sender: message.fromLoggedInUser ? youString : message.userFrom.fullname,
+                    message: "<span class='text-muted'>" + $(message.text).text() + "</span>"
+                });
+            })
+            .then(function(lastMessage) {
+                return element.find(SELECTORS.LAST_MESSAGE).html(lastMessage);
             });
     };
 

message/templates/message_drawer_conversations_list.mustache

@@ -66,16 +66,34 @@
                 <p class="m-0 text-truncate">{{.}}</p>
             {{/subname}}
             <p class="m-0 font-weight-light text-truncate" data-region="last-message">
-                {{#sentfromcurrentuser}}{{#str}} you, core_message {{/str}}{{/sentfromcurrentuser}}
-                {{^sentfromcurrentuser}}{{lastsendername}}{{/sentfromcurrentuser}}
-                <span class="text-muted">{{lastmessage}}</span>
+                {{#sentfromcurrentuser}}
+                    {{#str}}
+                        conversationlastmessage,
+                        core_message,
+                        {
+                            "sender": "{{#str}} yousender, core_message {{/str}}",
+                            "message": "<span class='text-muted'>{{lastmessage}}</span>"
+                        }
+                    {{/str}}
+                {{/sentfromcurrentuser}}
+                {{^sentfromcurrentuser}}
+                    {{#lastsendername}}
+                        {{#str}}
+                            conversationlastmessage,
+                            core_message,
+                            {
+                                "sender": "{{.}}",
+                                "message": "<span class='text-muted'>{{lastmessage}}</span>"
+                            }
+                        {{/str}}
+                    {{/lastsendername}}
+                {{/sentfromcurrentuser}}
             </p>
         </div>
         <div class="d-flex align-self-stretch">
             <div
-                class="ml-auto small position-absolute text-muted {{^lastmessagedate}}hidden{{/lastmessagedate}}"
+                class="px-2 py-1 small position-absolute position-right text-muted {{^lastmessagedate}}hidden{{/lastmessagedate}}"
                 data-region="last-message-date"
-                style="right: 0.5rem"
             >
                 {{#lastmessagedate}}
                     {{#userdate}} {{.}}, {{#str}} strftimetime24, core_langconfig  {{/str}} {{/userdate}}

theme/boost/scss/moodle/core.scss

@@ -2248,4 +2248,8 @@ $switch-transition: .2s all !default;
 
 .text-decoration-none {
     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.position-right {
+    right: 0 !important; /* stylelint-disable-line declaration-no-important */
 }

theme/boost/style/moodle.css

@@ -10532,6 +10532,10 @@ div.editor_atto_toolbar button .icon {
   text-decoration: none !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.position-right {
+  right: 0 !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
 .icon {
   font-size: 16px;
   width: 16px;

theme/bootstrapbase/less/moodle/core.less

@@ -2446,4 +2446,8 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 
 .text-decoration-none {
     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.position-right {
+    right: 0 !important; /* stylelint-disable-line declaration-no-important */
 }

theme/bootstrapbase/style/moodle.css

@@ -4827,6 +4827,10 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
   text-decoration: none !important;
   /* stylelint-disable-line declaration-no-important */
 }
+.position-right {
+  right: 0 !important;
+  /* stylelint-disable-line declaration-no-important */
+}
 /* admin.less */
 .formtable tbody th {
   font-weight: normal;