From a460fcddef9186b2a7e11c53ab6a2aa8f769da7f Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brockwhittaker@Brocks-MacBook.local>
Date: Thu, 18 Aug 2016 13:18:33 -0700
Subject: [PATCH] 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       |  5 ++++-
 static/js/message_list_view.js            | 16 ++++++++++++++--
 static/styles/zulip.css                   | 23 ++++++++++++++++++++++-
 static/templates/recipient_row.handlebars |  6 +++++-
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend_tests/casper_lib/common.js b/frontend_tests/casper_lib/common.js
index 8b6e4fe142..eae16a9338 100644
--- a/frontend_tests/casper_lib/common.js
+++ b/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) {
diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js
index aff439e0ec..567048e578 100644
--- a/static/js/message_list_view.js
+++ b/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);
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index ad5f1b4428..80052c5417 100644
--- a/static/styles/zulip.css
+++ b/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;
 }
 
diff --git a/static/templates/recipient_row.handlebars b/static/templates/recipient_row.handlebars
index 85873e4b8d..34583c267b 100644
--- a/static/templates/recipient_row.handlebars
+++ b/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>