Change the layout of the message boxes in the message pane and make other message-related adjustments.

Specifically:
   * Leave the avatar image as inline and round it.
   * Move timestamp to the left column.
   * Replace the "Info" link with a permanent info sign.
   * Move the pointer bar to the left.
   * Remove borders
   * Change selection background colors, and PM colors.
   * Introduce the "narrowing" icon into our FontAwesome set.
   * Modify the tests to account for the new "narrowing" icon and fixed a bug in star-finding.
   * Clean up CSS and add a more prominent color to private messages

(imported from commit 8a8d6de8acccc52c0d16f5d1ce31aabdc72c88c8)

templates/zephyr/compose.html

@@ -38,6 +38,7 @@
               </td>
             </tr>
             <tr>
+              <td class="pointer"></td>
               <td id="left-of-compose">
                 <div>
                   <input type="file" id="file_input" class="notvisible pull-left" multiple />
@@ -47,9 +48,7 @@
                      href="#markdown-help" title="Formatting" data-toggle="modal"></a>
                 </div>
               </td>
-              <td class="pointer"></td>
               <td class="messagebox">
-
                 <div class="message_content">
                   <textarea class="new_message_textarea" name="content" id="new_message_content"
                             value="" placeholder="Compose your message here..." tabindex="140" maxlength="10000"></textarea>

templates/zephyr/home.html

@@ -22,12 +22,10 @@
             <td class="ztable_col3" />
           </tr>
           <tr style="display: none;" id="current_label_stream" class="recipient_row">
-            <td colspan="2" class="message_label_clickable message_header message_header_stream left_part"></td>
+           <td colspan="3" class="message_label_clickable message_header message_header_stream right_part"></td>
-            <td class="message_label_clickable message_header message_header_stream right_part"></td>
           </tr>
           <tr style="display: none;" id="current_label_private_message" class="recipient_row">
-            <td colspan="2" class="message_label_clickable message_header message_header_private_message left_part"></td>
+            <td colspan="3" class="message_label_clickable message_header message_header_private_message right_part"></td>
-            <td class="message_label_clickable message_header message_header_private_message right_part"></td>
           </tr>
         </table>
       </div>

zephyr/static/js/compose.js

@@ -90,7 +90,7 @@ exports.decorate_stream_bar = function (stream_name) {
 };
 
 function messages_to_fade() {
-    var all_elts = rows.get_table(current_msg_list.table_name).find(".recipient_row, .messagebox");
+    var all_elts = rows.get_table(current_msg_list.table_name).find(".recipient_row, .message_row");
     var i, elts_to_fade = [];
     var different_recipient = false;
     // Note: The below algorithm relies on the fact that all_elts is
@@ -117,7 +117,7 @@ exports.unfade_messages = function (clear_state) {
     }
 
     var fade_class = narrow.active() ? "message_reply_fade_narrowed" : "message_reply_fade";
-    rows.get_table(current_msg_list.table_name).find(".recipient_row, .messagebox").removeClass(fade_class);
+    rows.get_table(current_msg_list.table_name).find(".recipient_row, .message_row").removeClass(fade_class);
     if (clear_state === true) {
         faded_to = undefined;
     }

zephyr/static/js/timerender.js

@@ -53,13 +53,13 @@ function render_now(time) {
 
         // "\xa0" is U+00A0 NO-BREAK SPACE.
         // Can't use   as that represents the literal string " ".
-        return [day_string + "\xa0" + time.toString("HH:mm"),
+        return [day_string + " " + time.toString("HH:mm"),
                 start_of_other_day.addDays(expire_days)
                 .toString("yyyy-MM-dd")];
     } else {
         // For now, if we get a message from tomorrow, we don't bother
         // rewriting the timestamp when it gets to be tomorrow.
-        return [time.toString("MMM dd") + "\xa0\xa0" + time.toString("HH:mm"),
+        return [time.toString("MMM\xa0dd") + " " + time.toString("HH:mm"),
                 undefined];
     }
 }

zephyr/static/js/ui.js

@@ -592,7 +592,7 @@ function toggle_star(row_id) {
             // messages table from a stream that isn't in your home view.
             return;
         }
-        var favorite_image = row.find("i");
+        var favorite_image = row.find(".message_star");
         favorite_image.toggleClass("icon-vector-star-empty");
         favorite_image.toggleClass("icon-vector-star");
         var title_state = message.starred ? "Unstar" : "Star";

zephyr/static/styles/zephyr.css

@@ -289,7 +289,7 @@ ul.filters li.out_of_home_view {
 .message_area_padder {
     margin-top: 10px;
     padding-left: 10px;
-    padding-right: 20px;
+    padding-right: 10px;
     /* This is needed for the floating recipient bar
      in Firefox only, for some reason; otherwise it gets
      a scrollbar */
@@ -314,23 +314,25 @@ ul.filters li.out_of_home_view {
 td.pointer {
     vertical-align: top;
     padding-top: 10px;
+    background-color: #fff;
 }
 
-.selected_message .messagebox {
+.selected_message .messagebox, .selected_message .message_data {
-    background-color: #F7F7F7;
+    background-color: #FAFFC7;
 }
 
-.selected_message .messagebox.private-message {
+.selected_message.private-message .message_data, .selected_message .messagebox.private-message {
-    background-color: #FEFFCC;
+    background-color: #e1ffb2;
 }
 
 .selected_message .messagebox.mention {
     background-color: #FFE0DC;
 }
 
-.selected_message .pointer {
+.selected_message .pointer, .selected_message.private-message .pointer {
     background-color: #08c;
 }
+
 .window_blurred .selected_message .pointer {
     background-color: #9bc;
 }
@@ -350,43 +352,40 @@ td.pointer {
     border-left-color: #BBB;
 }
 
-.message_picture {
+.message_data {
     vertical-align: top;
     text-align: right;
-    padding-right: 7px;
+    padding: 7px 5px 0px 5px;
-    padding-top: 5px;
+    background-color: #fff;
 }
 
 .ztable_layout_row {
     visibility: collapse;
 }
-.ztable_col1 {    /* sender's gravatar */
+
-    width: 46px;
+.ztable_col1 {    /* pointer */
-}
-@media (max-width: 480px) {
-    .ztable_col1 {
-        width: 0px;
-    }
-}
-.ztable_col2 {    /* pointer */
     width: 2px;
 }
-.ztable_col3 {    /* subjectname */
+
+.ztable_col2 {  /* sender's gravatar  and date */
+    width: 50px;
 }
 
-.recipient_row {
+.ztable_col3 {    /* subjectname */
-    border: 1px solid grey;
 }
 
 .message_header {
     vertical-align: middle;
     text-align:     left;
+
     /* We can overflow-y if the font size gets big */
     overflow:       hidden;
     text-overflow:  ellipsis;
     white-space:    nowrap;
-    font-weight:    bold;
+    font-weight:    600;
-    padding-left:   14px;
+    line-height:    14px;
+    padding-top:    4px;
+    padding-left:   5px;
 }
 
 .message_header_stream {
@@ -397,28 +396,42 @@ td.pointer {
     background-color: #444;
 }
 
-.messagebox.private-message {
+.private-message .messagebox, .private-message .message_data, .private-message .pointer {
-    border-width: 0px 1px 1px 1px;
+    background-color: #E2FFDE;
-    background-color: #feffe0;
 }
 
 .messagebox.mention {
     background-color: #FFE4E0;
 }
 
+.selected_message .messagebox.mention {
+    background-color: #FEE4B3;
+}
+
+.message_sender {
+    line-height: 15px;
+    vertical-align: top;
+}
+
 .sender_name {
     color: #333;
-    font-weight: bold;
+    display: inline-block;
+    font-weight: 600;
+    line-height: 14px;
+}
+
+.actions_hover {
+    line-height: 0px;
 }
 
 .actions_hovered .sender_name {
-    color:           #0088CC;
+    color: #0088CC;
     text-decoration: underline;
 }
 
 .message_label_clickable:hover {
     cursor: pointer;
-    color:  #08C;
+    color: #08C;
 }
 
 /* Brighten text because of the dark background */
@@ -440,8 +453,10 @@ td.pointer {
 }
 
 .message_time {
+    display: inline-block;
     font-weight: 300;
-    font-size: 90%;
+    font-size: 80%;
+    line-height: 100%;
 }
 
 .small {
@@ -486,8 +501,6 @@ table.focused_table {
 }
 
 .message_content {
-    margin-left: 5px;
-    margin-right: 35px; /* size of the timestamp */
     line-height: 17px;
 }
 @media (max-width: 480px) {
@@ -529,10 +542,8 @@ blockquote p {
 }
 
 .messagebox {
-    padding: 5px 14px;
+    padding: 5px 10px 5px 5px;
-    background-color: white;
+    background-color: #fff;
-    border: 1px solid gray;
-    border-width: 0px 1px 1px 1px;
     word-wrap: break-word;
     cursor: pointer;
 }
@@ -578,36 +589,44 @@ blockquote p {
     padding-top: 10px;
 }
 
-.prev_is_same_sender {
+.prev_is_same_sender.messagebox {
     padding-top: 0px;
 }
 
+.prev_is_same_sender.message_data {
+    padding-top: 5px;
+}
+
 .next_is_same_sender {
     border-bottom: 0px;
     padding-bottom: 0px;
 }
 
-img.profile_picture {
+.profile_picture {
     display: block;
     float: right;
     margin-top: 5px;
-    max-height: 30px;
+    max-height: 15px;
-    width:  30px;
+    width:  15px;
-    height: 30px;
+    height: 15px;
     cursor: pointer;
+    border-radius: 30px;
+   -moz-box-shadow:     1px 1px 1px #777 inset;
+   -webkit-box-shadow:  1px 1px 1px #777 inset;
+    box-shadow:         1px 1px 1px #777 inset;
+    background-size: 15px 15px; 
 }
-@media (max-width: 480px) {
+
-    img.profile_picture {
+.inline_profile_picture {
-        display: none;
+    display: inline-block;
-    }
+    width: 15px;
-}
+    height: 15px;
-img.inline_profile_picture {
+    background-size: 15px 15px;
-    display: none;
+   -moz-box-shadow:     1px 1px 1px #777 inset;
-}
+   -webkit-box-shadow:  1px 1px 1px #777 inset;
-@media (max-width: 480px) {
+    box-shadow:         1px 1px 1px #777 inset;
-    img.inline_profile_picture {
+    border-radius: 15px;
-        display: inline;
+    vertical-align: middle;
-    }
 }
 
 #compose {
@@ -918,12 +937,6 @@ table.floating_recipient {
     line-height: 38px;
 }
 
-.message_body_gravatar {
-    margin-bottom: 2px;
-    width:  20px;
-    height: 20px;
-}
-
 .message_inline_image {
     margin-bottom: 5px;
     margin-left: 5px;
@@ -1194,14 +1207,10 @@ table.floating_recipient {
 }
 
 .message_reply_fade {
-    /* If we change the message_list background, we must change this */
-    border-color: aliceblue;
     opacity: .4;
 }
 
 .message_reply_fade_narrowed {
-    /* If we change the narrowed_view background, we must change this */
-    border-color: #DDD;
     opacity: .4;
 }
 
@@ -1258,12 +1267,26 @@ li.expanded_subject {
 }
 
 .star {
+    display: inline-block;
     padding-left: 5px;
     opacity: .7;
     font-size: 16px;
     color: #2c8211;
 }
 
+.info {
+    display: inline-block;
+    padding-left: 2px;
+    opacity: .7;
+    font-size: 16px;
+    color: #ccc;
+}
+
+.info:hover {
+    cursor: pointer;
+    opacity: 1;
+}
+
 .star:hover {
     cursor:  pointer;
     opacity: 1;

zephyr/static/templates/message.handlebars

@@ -30,11 +30,7 @@
 {{#include_recipient}}
 {{#if is_stream}}
 <tr zid="{{id}}" class="recipient_row">
-    <td colspan="2"
+    <td colspan="3" class="message_header message_header_stream right_part {{color_class}}"
-        class="message_header message_header_stream left_part {{color_class}}"
-        style="background-color: {{background_color}};">
-    </td>
-    <td class="message_header message_header_stream right_part {{color_class}}"
         style="background-color: {{background_color}};">
       {{#if invite_only}}<i class="icon-lock" title="This is an invite-only stream"></i>{{/if}}
       <span class="message_label_clickable narrows_by_recipient stream_label"
@@ -46,10 +42,7 @@
 </tr>
 {{else}}
 <tr zid="{{id}}" class="recipient_row">
-    <td colspan="2"
+    <td colspan="3" class="message_header message_header_private_message right_part dark_background">
-        class="message_header message_header_private_message left_part dark_background">
-    </td>
-    <td class="message_header message_header_private_message right_part dark_background">
         <span class="message_label_clickable narrows_by_recipient"
                title="Narrow to your private messages with {{display_reply_to}}">
         You and {{display_reply_to}}</span>
@@ -59,30 +52,30 @@
 {{/include_recipient}}
 <tr zid="{{id}}" id="{{dom_id}}"
     class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}">
-    <td class="message_picture">
-    {{#include_sender}}
-        <img class="img-rounded profile_picture actions_hover"
-             src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}"/>
-    {{/include_sender}}
-    </td>
     <td class="pointer"><p></p></td>
+    <td class="message_data{{^include_sender}} prev_is_same_sender{{/include_sender}}">
+        <div class="actions_hover">
+            <span class="message_time">{{{timestr}}}</span>
+        </div>
+        <div class="message_controls">
+          <div class="star">
+            <i class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star-empty{{/if}}"
+               title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></i>
+          </div>
+          <div class="info actions_hover">
+            <i class="icon-vector-info-sign"></i>
+          </div>
+        </div>
+    </td>
     <td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}{{#contains_mention}} mention{{/contains_mention}}">
         <div class="message_top_line">
         {{#include_sender}}
         <span class="message_sender actions_hover">
-            <img class="inline_profile_picture message_body_gravatar img-rounded" src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}"/>
+            <div class="inline_profile_picture"
+                 style="background-image: url('https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}');"/>
             <span class="sender_name">{{sender_full_name}}</span>
         </span>
         {{/include_sender}}
-        <div class="message_right star">
-          <i class="{{#if starred}}icon-vector-star{{else}}icon-vector-star-empty{{/if}}"
-             title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></i>
-        </div>
-        <div class="message_right actions_hover">
-            {{! If include_sender is not set, we will never show this link anyway. }}
-            {{#include_sender}}<span class="actions_link">&laquo; Info</span>{{/include_sender}}
-            <span class="message_time">{{{timestr}}}</span>
-        </div>
         </div>
         <div class="message_content">{{#if ../../use_match_properties}}{{{match_content}}}{{else}}{{{content}}}{{/if}}</div>
         <div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>

zephyr/tests/frontend/tests/01-site.js

@@ -21,7 +21,7 @@ casper.then(function () {
 
     msg.headings.forEach(function (heading) {
         casper.test.assertMatch(common.normalize_spaces(heading),
-            /(^You and )|( > )/,
+            /(^You and )|( )/,
             'Heading is well-formed');
     });
 
@@ -57,8 +57,8 @@ common.send_many([
 
 common.wait_for_receive(function () {
     common.expected_messages('zhome', [
-        'Verona > frontend test',
+        'Verona frontend test',
-        'Verona > other subject',
+        'Verona other subject',
         'You and Cordelia Lear, King Hamlet',
         'You and Cordelia Lear'
     ], [

zephyr/tests/frontend/tests/02-narrow.js

@@ -47,7 +47,7 @@ common.send_many([
 
 function expect_home() {
     common.expected_messages('zhome', [
-        'Verona > frontend test',
+        'Verona frontend test',
         'You and Cordelia Lear, King Hamlet',
         'You and Cordelia Lear'
     ], [
@@ -59,9 +59,9 @@ function expect_home() {
 
 function expect_stream() {
     common.expected_messages('zfilt', [
-        'Verona > frontend test',
+        'Verona frontend test',
-        'Verona > other subject',
+        'Verona other subject',
-        'Verona > frontend test'
+        'Verona frontend test'
     ], [
         '<p>test message A</p>',
         '<p>test message B</p>',
@@ -72,7 +72,7 @@ function expect_stream() {
 
 function expect_stream_subject() {
     common.expected_messages('zfilt', [
-        'Verona > frontend test'
+        'Verona frontend test'
     ], [
         '<p>test message A</p>',
         '<p>test message B</p>',
@@ -82,9 +82,9 @@ function expect_stream_subject() {
 
 function expect_subject() {
     common.expected_messages('zfilt', [
-        'Verona > frontend test',
+        'Verona frontend test',
-        'Venice > frontend test',
+        'Venice frontend test',
-        'Verona > frontend test'
+        'Verona frontend test'
     ], [
         '<p>test message A</p>',
         '<p>test message B</p>',

zephyr/tests/frontend/tests/07-stars.js

@@ -41,7 +41,7 @@ casper.then(function() {
 
 casper.then(function() {
     // You can narrow to your starred messages.
-    common.expected_messages('zfilt', ['Verona > stars'], ['<p>test star</p>']);
+    common.expected_messages('zfilt', ['Verona stars'], ['<p>test star</p>']);
     common.un_narrow();
 });