Add Date Headers to Floating Bar and Message Headers.

This adds the date of a block of messages to the floating recipient
bar along with message headers of blocks that are the first of a
particular day.

frontend_tests/casper_lib/common.js

@@ -237,7 +237,10 @@ exports.get_rendered_messages = function (table) {
         var tbl = $('#'+table);
         return {
             headings: $.map(tbl.find('.recipient_row .message-header-contents'), function (elem) {
-                return elem.innerText;
+                var $clone = $(elem).clone(true);
+                $clone.find(".recipient_row_date").remove();
+
+                return $clone.text();
             }),
 
             bodies: $.map(tbl.find('.message_content'), function (elem) {

static/js/message_list_view.js

@@ -85,6 +85,15 @@ function populate_group_from_message_container(group, message_container) {
     group.always_visible_topic_edit = message_container.msg.always_visible_topic_edit;
     group.on_hover_topic_edit = message_container.msg.on_hover_topic_edit;
     group.subject_links = message_container.msg.subject_links;
+
+    var time = new XDate(message_container.msg.timestamp * 1000);
+    var date_element = timerender.render_date(time)[0];
+
+    if (!message_container.print_date) {
+        date_element.className = "hide-date";
+    }
+
+    group.date = date_element.outerHTML;
 }
 
 MessageListView.prototype = {
@@ -157,8 +166,11 @@ MessageListView.prototype = {
             message_container.include_recipient = false;
             message_container.include_footer    = false;
 
-            if (same_recipient(prev, message_container) &&
-                self.collapse_messages &&
+            if (!same_day(prev, message_container)) {
+                message_container.print_date = true;
+            }
+
+            if (same_recipient(prev, message_container) && self.collapse_messages &&
                 prev.msg.historical === message_container.msg.historical &&
                 same_day(prev, message_container)) {
                 add_message_container_to_group(message_container);

static/styles/zulip.css

@@ -812,6 +812,26 @@ td.pointer {
     line-height: 17px;
 }
 
+.recipient_row_date {
+    display: inline-block;
+
+    color: #888;
+    font-size: 0.8em;
+    font-weight: 600;
+    padding: 3px 10px 2px 10px;
+    height: 17px;
+    line-height: 17px;
+    float: right;
+}
+
+.recipient_row_date .hide-date {
+    display: none;
+}
+
+.floating_recipient .recipient_row_date .hide-date {
+    display: block;
+}
+
 .summary_row .message_header {
     padding: 5px 0px 4px 5px;
 }
@@ -940,6 +960,7 @@ just a temporary hack.
     font-size: 14px;
     height: 17px;
     line-height: 17px;
+    border-left-color: #444;
 }
 
 /* Base color backgrounds for messageboxes,
@@ -955,7 +976,7 @@ just a temporary hack.
     background-color: #feffe0;
 }
 
-.message_header_private_message .message-header-contents {
+.floating_recipient .message-header-contents {
     border-right: 1px solid #e2e2e2;
 }
 

static/templates/recipient_row.handlebars

@@ -50,6 +50,8 @@
         <span class="topic_edit">
           <span class="topic_edit_form" id="{{id}}"></span>
         </span>
+
+        <span class="recipient_row_date">{{{date}}}</span>
       </div>
     </div>
   </div>
@@ -57,11 +59,13 @@
   <div class="message_header message_header_private_message dark_background">
     <div class="message-header-wrapper">
       <div class="message-header-contents">
-        <a class="message_label_clickable narrows_by_recipient"
+        <a class="message_label_clickable narrows_by_recipient stream_label"
            href="{{pm_with_url}}"
            title="{{#tr this}}Narrow to your private messages with __display_reply_to__{{/tr}}">
         {{#tr this}}You and __display_reply_to__{{/tr}}
         </a>
+
+        <span class="recipient_row_date">{{{date}}}</span>
       </div>
     </div>
   </div>