Modify message box layout and spacing.

* Modify the narrow icon in FontAwesome to make it better align to the pixel grid and display well on Windows+Chrome.
   * Move the message controls to the right
   * Hide the message info icon until the message is hovered / selected
   * Switch the star to a gray version
   * Increase the size of the gravatar
   * Adjust the spacing
   * Add the right-side message pointer
   * Fix private message background colors and mention colors
   * Modify star count test to account for new stars
   * Bug fixes for stream subscription messages and other miscellanea.

(imported from commit 3d3d9de7e03f3658c5c78b492051b2b7f795487d)

templates/zephyr/compose.html

@@ -11,8 +11,9 @@
           <tbody>
             <tr class="ztable_layout_row">
               <td class="ztable_col1" />
-              <td class="ztable_col2" />
               <td class="ztable_col3" />
+              <td class="ztable_col2" />
+              <td class="ztable_col4" />
             </tr>
             <tr id="stream-message">
               <td colspan="2" class="message_header message_header_stream left_part">

zephyr/static/js/ui.js

@@ -241,9 +241,6 @@ function message_unhover() {
 
 function message_hover(message_row) {
     message_unhover();
-    while (!message_row.hasClass('include-sender')) {
-        message_row = message_row.prev();
-    }
     message_row.addClass('message_hovered');
     current_message_hover = message_row;
 }
@@ -574,8 +571,7 @@ function toggle_star(row_id) {
             return;
         }
         var favorite_image = row.find(".message_star");
-        favorite_image.toggleClass("icon-vector-star-empty");
+        favorite_image.toggleClass("empty-star");
-        favorite_image.toggleClass("icon-vector-star");
         var title_state = message.starred ? "Unstar" : "Star";
         favorite_image.attr("title", title_state + " this message");
     });
@@ -1061,24 +1057,22 @@ $(function () {
 
     $("#main_div").on("mousedown", ".messagebox", mousedown);
     $("#main_div").on("mousemove", ".messagebox", mousemove);
-    $("#main_div").on("mouseover", ".messagebox", function (e) {
+    $("#main_div").on("mouseover", ".message_row", function (e) {
-        var row = $(this).closest(".message_row");
+        var row = $(this);
         message_hover(row);
     });
 
-    $("#main_div").on("mouseout", ".messagebox", function (e) {
+    $("#main_div").on("mouseout", ".message_row", function (e) {
         message_unhover();
     });
 
     $("#main_div").on("mouseover", ".actions_hover", function (e) {
         var row = $(this).closest(".message_row");
-        message_hover(row);
         row.addClass("actions_hovered");
     });
 
     $("#main_div").on("mouseout", ".actions_hover", function (e) {
         var row = $(this).closest(".message_row");
-        message_unhover();
         row.removeClass("actions_hovered");
     });
 

zephyr/static/styles/fonts.css

@@ -155,13 +155,15 @@
 
 }
 
+
+
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../third/fontawesome/fontawesome2-webfont.eot?v=3.0.1');
+  src: url('../third/fontawesome/fontawesome3-webfont.eot?v=3.0.1');
-  src: url('../third/fontawesome/fontawesome2-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
+  src: url('../third/fontawesome/fontawesome3-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
-       url('../third/fontawesome/fontawesome2-webfont.woff?v=3.0.1') format('woff'),
+       url('../third/fontawesome/fontawesome3-webfont.woff?v=3.0.1') format('woff'),
-       url('../third/fontawesome/fontawesome2-webfont.ttf?v=3.0.1') format('truetype'),
+       url('../third/fontawesome/fontawesome3-webfont.ttf?v=3.0.1') format('truetype'),
-       url('../third/fontawesome/fontawesome2-webfont.svg#FontAwesome') format('svg');
+       url('../third/fontawesome/fontawesome3-webfont.svg#FontAwesome') format('svg');
   font-weight: normal;
   font-style: normal;
 }

zephyr/static/styles/zephyr.css

@@ -92,6 +92,13 @@ li, .table th, .table td {
     position: absolute !important;
 }
 
+/* Lighter strong */
+
+strong {
+    font-weight: 600;
+}
+
+
 /* Inline and block code */
 
 code {
@@ -287,8 +294,8 @@ ul.filters li.out_of_home_view {
 
 .message_area_padder {
     margin-top: 10px;
-    padding-left: 10px;
+    padding-left: 5px;
-    padding-right: 10px;
+    padding-right: 5px;
     /* This is needed for the floating recipient bar
      in Firefox only, for some reason; otherwise it gets
      a scrollbar */
@@ -320,9 +327,13 @@ td.pointer {
     background-color: #FAFFC7;
 }
 
-.selected_message.private-message .message_data, .selected_message .messagebox.private-message,
+.selected_message .info {
+    visibility: visible;
+}
+
+.selected_message.private-message .message_data, .selected_message.private-message .messagebox,
 .new_private_messages {
-    background-color: #e1ffb2;
+    background-color: #FAFFC7;
 }
 
 .new_private_messages, .new_private_messages_fadeout {
@@ -332,17 +343,19 @@ td.pointer {
     transition: all 3s ease-in-out;
 }
 
-.selected_message .messagebox.mention {
+.selected_message .pointer {
-    background-color: #FFE0DC;
-}
-
-.selected_message .pointer, .selected_message.private-message .pointer {
     background-color: #08c;
 }
 
+.private-message.selected_message .pointer {
+    background-color: #444;
+}
+
+/*
 .window_blurred .selected_message .pointer {
     background-color: #9bc;
 }
+*/
 
 /* Adjust certain message elements so they still
    stand out against the grey background */
@@ -359,10 +372,15 @@ td.pointer {
     border-left-color: #BBB;
 }
 
+.message_controls {
+    position: relative;
+    top: -2px;
+}
+
 .message_data {
     vertical-align: top;
-    text-align: right;
+    text-align: left;
-    padding: 7px 5px 0px 5px;
+    padding: 5px 5px 0px 5px;
     background-color: #fff;
 }
 
@@ -374,11 +392,15 @@ td.pointer {
     width: 2px;
 }
 
-.ztable_col2 {  /* sender's gravatar  and date */
+.ztable_col2 {    /* subjectname */
+}
+
+.ztable_col3 {  /* sender's gravatar  and date */
     width: 50px;
 }
 
-.ztable_col3 {    /* subjectname */
+.ztable_col4 {
+    width: 2px;
 }
 
 .message_header {
@@ -391,8 +413,7 @@ td.pointer {
     white-space:    nowrap;
     font-weight:    600;
     line-height:    14px;
-    padding-top:    4px;
+    padding:        3px 0px 2px 5px;
-    padding-left:   5px;
 }
 
 .message_header_stream {
@@ -404,36 +425,45 @@ td.pointer {
 }
 
 .private-message .messagebox, .private-message .message_data, .private-message .pointer {
-    background-color: #E2FFDE;
+    background-color: #C2DBFF;
 }
 
-.messagebox.mention {
+.mention .messagebox, .mention .message_data, .mention .pointer {
-    background-color: #FFE4E0;
+    background-color: #FFE9BA;
 }
 
-.selected_message .messagebox.mention {
+.selected_message.mention .messagebox, .selected_message.mention .message_data {
-    background-color: #FEE4B3;
+    background-color: #FAFFC7;
+}
+
+.selected_message.private-message.mention .messagebox, .selected_message.private-message.mention .message_data {
+    background-color: #FAFFC7;
 }
 
 .message_sender {
-    line-height: 15px;
+    height: 0px;
     vertical-align: top;
+    position: relative;
 }
 
 .sender_name {
     color: #333;
     display: inline-block;
-    font-weight: 600;
+    font-weight: bold;
-    line-height: 14px;
+    line-height: 5px;
 }
 
 .actions_hover {
     line-height: 0px;
+    display: inline-block;
 }
 
 .actions_hovered .sender_name {
     color: #0088CC;
-    text-decoration: underline;
+}
+
+.actions_hovered .inline_profile_picture {
+    border-color: #0088CC;
 }
 
 .message_label_clickable:hover {
@@ -464,15 +494,16 @@ td.pointer {
     margin-bottom: 1px;
 }
 
-.message_right {
+.message-right {
     float: right;
 }
 
 .message_time {
     display: inline-block;
-    font-weight: 300;
+    font-weight: normal;
-    font-size: 80%;
+    font-size: 75%;
     line-height: 100%;
+    color: #999;
 }
 
 .small {
@@ -480,8 +511,8 @@ td.pointer {
 }
 
 .actions_hovered .message_time {
-    color:           #0088CC;
+    color: #0088CC;
-    text-decoration: underline;
+    cursor: pointer;
 }
 
 .actions_link {
@@ -495,6 +526,14 @@ td.pointer {
     visibility: visible;
 }
 
+.message_hovered .info {
+    visibility: visible;
+}
+
+.actions_hovered .info {
+    opacity: 1;
+}
+
 .actions_hovered .actions_link {
     text-decoration: underline;
 }
@@ -517,6 +556,7 @@ table.focused_table {
 }
 
 .message_content {
+    margin-top: 3px;
     line-height: 17px;
 }
 @media (max-width: 480px) {
@@ -558,10 +598,20 @@ blockquote p {
 }
 
 .messagebox {
-    padding: 5px 10px 5px 5px;
+    padding: 5px;
     background-color: #fff;
     word-wrap: break-word;
     cursor: pointer;
+    vertical-align: top;
+}
+
+.messagebox p {
+    margin-bottom: 0px;
+}
+
+.messagebox blockquote {
+    padding-left: 5px;
+    margin-left: 10px;
 }
 
 #send_message_form {
@@ -597,10 +647,6 @@ blockquote p {
     padding-top: 6px;
 }
 
-.messagebox p {
-    margin-bottom: 5px;
-}
-
 .bookend {
     padding-top: 10px;
 }
@@ -610,7 +656,7 @@ blockquote p {
 }
 
 .prev_is_same_sender.message_data {
-    padding-top: 5px;
+    padding-top: 0px;
 }
 
 .next_is_same_sender {
@@ -635,14 +681,14 @@ blockquote p {
 
 .inline_profile_picture {
     display: inline-block;
-    width: 15px;
+    width: 17px;
-    height: 15px;
+    height: 17px;
-    background-size: 15px 15px;
+    background-size: 17px 17px;
-   -moz-box-shadow:     1px 1px 1px #777 inset;
+    border-radius: 17px;
-   -webkit-box-shadow:  1px 1px 1px #777 inset;
+    border: 1px solid #CCC;
-    box-shadow:         1px 1px 1px #777 inset;
-    border-radius: 15px;
     vertical-align: middle;
+    position: relative;
+    left: -1px;
 }
 
 #compose {
@@ -1299,26 +1345,24 @@ li.expanded_subject {
 
 .star {
     display: inline-block;
-    padding-left: 5px;
+    opacity: 1;
-    opacity: .7;
     font-size: 16px;
     color: #2c8211;
 }
 
+.empty-star {
+    opacity: 0.4;
+    color: #565656;
+}
+
 .info {
     display: inline-block;
-    padding-left: 2px;
-    opacity: .7;
     font-size: 16px;
-    color: #ccc;
+    color: #0088CC;
+    visibility: hidden;
 }
 
-.info:hover {
+.star:hover, .info:hover {
-    cursor: pointer;
-    opacity: 1;
-}
-
-.star:hover {
     cursor:  pointer;
     opacity: 1;
 }

zephyr/static/templates/message.handlebars

@@ -9,14 +9,14 @@
   <td class="ztable_col1" />
   <td class="ztable_col2" />
   <td class="ztable_col3" />
+  <td class="ztable_col4" />
 </tr>
 {{/include_layout_row}}
 
 {{#each messages}}
 {{#with this}}
 {{#include_bookend}}
-<tr class="bookend_tr"><td/>
+<tr class="bookend_tr"><td colspan="4" class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}">
-<td /><td class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}">
 {{#if subscribed}}
 <span>--- Subscribed to stream {{subscribed}} ---</span>
 {{/if}}
@@ -30,7 +30,7 @@
 {{#include_recipient}}
 {{#if is_stream}}
 <tr zid="{{id}}" class="recipient_row">
-    <td colspan="3" class="message_header message_header_stream right_part {{color_class}}"
+    <td colspan="4" 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"
@@ -43,7 +43,7 @@
 </tr>
 {{else}}
 <tr zid="{{id}}" class="recipient_row">
-    <td colspan="3" class="message_header message_header_private_message right_part dark_background">
+    <td colspan="4" 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>
@@ -52,23 +52,9 @@
 {{/if}}
 {{/include_recipient}}
 <tr zid="{{id}}" id="{{dom_id}}"
-    class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}">
+    class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}">
     <td class="pointer"><p></p></td>
-    <td class="message_data{{^include_sender}} prev_is_same_sender{{/include_sender}}">
+        <td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
-        <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">
@@ -85,13 +71,27 @@
         <div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
         <div class="message_condenser message_length_controller" title="Make this message take up less space on the screen">[Condense this message]</div>
     </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">
+            <span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star empty-star{{/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="pointer"><p></p></td>
 </tr>
 {{/with}}
 {{/each}}
 
 {{#if trailing_bookend}}
-<tr id="trailing_bookend" class="bookend_tr"><td/>
+<tr id="trailing_bookend" class="bookend_tr"><td colspan="4" class="bookend">
-<td /><td class="bookend">
 <center>{{trailing_bookend}}</center>
 <span class="tiny"><p></p></span></td>
 </tr>

zephyr/static/templates/trailing_bookend.handlebars

@@ -1,8 +1,7 @@
 {{! Client-side Mustache template for rendering the trailing bookend.}}
 
 {{#if trailing_bookend}}
-<tr id="trailing_bookend" class="bookend_tr"><td/>
+<tr id="trailing_bookend" class="bookend_tr"><td colspan="4" class="bookend">
-<td /><td class="bookend">
 <center>{{trailing_bookend}}</center>
 <span class="tiny"><p></p></span></td>
 </tr>

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

@@ -2,7 +2,7 @@ var common = require('../common.js').common;
 
 function star_count() {
     return casper.evaluate(function () {
-        return $("#zhome .icon-vector-star").length;
+        return $("#zhome .icon-vector-star:not(.empty-star)").length;
     });
 }