Merge remote-tracking branch 'upstream/pull/4155'

app/assets/javascripts/messages.js

@@ -1,30 +1,34 @@
 $(document).ready(function () {
   $(".inbox-mark-unread").on("ajax:success", function (event, data) {
-    $("#inboxanchor").remove();
-    $(".user-button").before(data.inboxanchor);
-
-    $("#inbox-count").replaceWith(data.inbox_count);
-
-    $(this).parents(".inbox-row").removeClass("inbox-row").addClass("inbox-row-unread");
+    updateHtml(data);
+    updateReadState(this, false);
   });
 
   $(".inbox-mark-read").on("ajax:success", function (event, data) {
-    $("#inboxanchor").remove();
-    $(".user-button").before(data.inboxanchor);
+    updateHtml(data);
+    updateReadState(this, true);
+  });
 
-    $("#inbox-count").replaceWith(data.inbox_count);
+  $(".inbox-destroy").on("ajax:success", function (event, data) {
+    updateHtml(data);
 
-    $(this).parents(".inbox-row-unread").removeClass("inbox-row-unread").addClass("inbox-row");
+    $(this).closest("tr").fadeOut(800, "linear", function () {
+      $(this).remove();
+    });
   });
 
-  $(".inbox-destroy").on("ajax:success", function (event, data) {
+  function updateHtml(data) {
     $("#inboxanchor").remove();
     $(".user-button").before(data.inboxanchor);
 
     $("#inbox-count").replaceWith(data.inbox_count);
-
-    $(this).parents(".inbox-row, .inbox-row-unread").fadeOut(800, "linear", function () {
-      $(this).remove();
-    });
-  });
+  }
+
+  function updateReadState(target, isRead) {
+    $(target).closest("tr")
+      .toggleClass("inbox-row", isRead)
+      .toggleClass("inbox-row-unread", !isRead)
+      .find(".inbox-mark-unread").prop("hidden", !isRead).end()
+      .find(".inbox-mark-read").prop("hidden", isRead);
+  }
 });

app/assets/stylesheets/common.scss

@@ -1132,11 +1132,6 @@ tr.turn:hover {
 /* Rules for messages pages */
 
 .messages {
-  button[type="submit"] {
-    margin: auto;
-    white-space: nowrap;
-  }
-
   .inbox-row {
     background: $offwhite;
   }
@@ -1146,24 +1141,6 @@ tr.turn:hover {
   }
 }
 
-.inbox-row .inbox-mark-read {
-  display: none;
-}
-
-.inbox-sent {
-  white-space: nowrap;
-}
-
-.inbox-mark-unread,
-.inbox-mark-read,
-.inbox-delete {
-  width: 1%;
-}
-
-.inbox-row-unread .inbox-mark-unread {
-  display: none;
-}
-
 .search_form {
   background-color: $lightgrey;
 

app/views/messages/_message_summary.html.erb

@@ -1,8 +1,10 @@
 <tr id="inbox-<%= message_summary.id %>" class="inbox-row<%= "-unread" unless message_summary.message_read? %>">
-  <td class="inbox-sender"><%= link_to message_summary.sender.display_name, user_path(message_summary.sender) %></td>
-  <td class="inbox-subject"><%= link_to message_summary.title, message_path(message_summary) %></td>
-  <td class="inbox-sent"><%= l message_summary.sent_on, :format => :friendly %></td>
-  <td class="inbox-mark-unread"><%= button_to t(".unread_button"), message_mark_path(message_summary, :mark => "unread"), :remote => true, :class => "btn btn-sm btn-primary" %></td>
-  <td class="inbox-mark-read"><%= button_to t(".read_button"), message_mark_path(message_summary, :mark => "read"), :remote => true, :class => "btn btn-sm btn-primary" %></td>
-  <td class="inbox-destroy"><%= button_to t(".destroy_button"), message_path(message_summary, :referer => request.fullpath), :method => :delete, :remote => true, :class => "btn btn-sm btn-danger" %></td>
+  <td><%= link_to message_summary.sender.display_name, user_path(message_summary.sender) %></td>
+  <td><%= link_to message_summary.title, message_path(message_summary) %></td>
+  <td class="text-nowrap"><%= l message_summary.sent_on, :format => :friendly %></td>
+  <td class="text-nowrap d-flex justify-content-end gap-1">
+    <%= button_to t(".unread_button"), message_mark_path(message_summary, :mark => "unread"), :remote => true, :class => "btn btn-sm btn-primary", :form => { :class => "inbox-mark-unread", :hidden => !message_summary.message_read? } %>
+    <%= button_to t(".read_button"), message_mark_path(message_summary, :mark => "read"), :remote => true, :class => "btn btn-sm btn-primary", :form => { :class => "inbox-mark-read", :hidden => message_summary.message_read? } %>
+    <%= button_to t(".destroy_button"), message_path(message_summary, :referer => request.fullpath), :method => :delete, :remote => true, :class => "btn btn-sm btn-danger", :form_class => "inbox-destroy" %>
+  </td>
 </tr>

app/views/messages/_sent_message_summary.html.erb

@@ -1,6 +1,8 @@
 <tr class="inbox-row">
-  <td class="inbox-sender"><%= link_to sent_message_summary.recipient.display_name, user_path(sent_message_summary.recipient) %></td>
-  <td class="inbox-subject"><%= link_to sent_message_summary.title, message_path(sent_message_summary) %></td>
-  <td class="inbox-sent"><%= l sent_message_summary.sent_on, :format => :friendly %></td>
-  <td class="inbox-destroy"><%= button_to t(".destroy_button"), message_path(sent_message_summary, :referer => request.fullpath), :method => :delete, :remote => true, :class => "btn btn-sm btn-danger" %></td>
+  <td><%= link_to sent_message_summary.recipient.display_name, user_path(sent_message_summary.recipient) %></td>
+  <td><%= link_to sent_message_summary.title, message_path(sent_message_summary) %></td>
+  <td class="text-nowrap"><%= l sent_message_summary.sent_on, :format => :friendly %></td>
+  <td class="text-nowrap d-flex justify-content-end gap-1">
+    <%= button_to t(".destroy_button"), message_path(sent_message_summary, :referer => request.fullpath), :method => :delete, :remote => true, :class => "btn btn-sm btn-danger", :form_class => "inbox-destroy" %>
+  </td>
 </tr>

app/views/messages/inbox.html.erb

@@ -19,14 +19,12 @@
   <h4><%= render :partial => "message_count" %></h4>
 
 <% if current_user.messages.size > 0 %>
-  <table class="table table-sm">
+  <table class="table table-sm align-middle">
     <thead>
       <tr>
         <th><%= t ".from" %></th>
         <th><%= t ".subject" %></th>
         <th><%= t ".date" %></th>
-        <th></th>
-        <th></th>
       </tr>
     </thead>
     <tbody>

app/views/messages/outbox.html.erb

@@ -20,13 +20,12 @@
 <h4><%= t ".messages", :count => current_user.sent_messages.size %></h4>
 
 <% if current_user.sent_messages.size > 0 %>
-  <table class="table table-sm">
+  <table class="table table-sm align-middle">
     <thead>
       <tr>
         <th><%= t ".to" %></th>
         <th><%= t ".subject" %></th>
         <th><%= t ".date" %></th>
-        <th></th>
       </tr>
     </thead>
     <tbody>