From e10549a310c0ac182b75563e80cfcb93f7e9d53b Mon Sep 17 00:00:00 2001
From: Allen Rabinovich <allenr@zulip.com>
Date: Thu, 21 Nov 2013 03:11:50 -0800
Subject: [PATCH] Lighten the message controls and show them on hover

(imported from commit 09953116ebef779ea99327ff7c76428e908e2e31)
---
 static/js/message_list_view.js      |  2 +-
 static/js/ui.js                     |  2 +-
 static/styles/zulip.css             | 38 +++++++++++++++--------------
 static/templates/message.handlebars |  4 +--
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js
index 70beec39c2..1d87e2877c 100644
--- a/static/js/message_list_view.js
+++ b/static/js/message_list_view.js
@@ -19,7 +19,7 @@ function stringify_time(time) {
     if (feature_flags.twenty_four_hour_time) {
         return time.toString('HH:mm');
     }
-    return time.toString('h:mmtt');
+    return time.toString('h:mm TT');
 }
 
 function add_display_time(message, prev) {
diff --git a/static/js/ui.js b/static/js/ui.js
index 36c2081347..c4aa2e083f 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -678,7 +678,7 @@ function toggle_star(row_id) {
             return;
         }
         var favorite_image = row.find(".message_star");
-        favorite_image.toggleClass("empty-star");
+        favorite_image.toggleClass("icon-vector-star").toggleClass("icon-vector-star-empty").toggleClass("empty-star");
         var title_state = message.starred ? "Unstar" : "Star";
         favorite_image.attr("title", title_state + " this message");
     });
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 71e564a944..1b70e04450 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -652,21 +652,24 @@ td.pointer {
 }
 
 .message_time {
-    position: absolute;
-    right: -40px;
-    top: 7px;
     display: inline-block;
     font-weight: normal;
-    font-size: 75%;
-    line-height: 100%;
-    color: #999;
+    font-size: 11px;
+    color: #aaa;
+    vertical-align: middle;
+    padding: 0px 2px 3px 2px;
+    font-weight: 300;
 }
 
 .message_controls {
     display: inline-block;
     position: absolute;
     top: 2px;
-    right: -80px;
+    right: -78px;
+}
+
+.include-sender .message_controls {
+    top: -2px;
 }
 
 .message_data {
@@ -677,10 +680,6 @@ td.pointer {
     position: relative;
 }
 
-.include-sender .message_time {
-    top: 7px;
-}
-
 .ztable_layout_row {
     visibility: collapse;
 }
@@ -1078,7 +1077,7 @@ a.message_label_clickable:hover {
 }
 
 .edit_content {
-    opacity: .5;
+    opacity: .4;
     width: 0px;
     height: 0px;
     display: inline-block;
@@ -1093,7 +1092,7 @@ a.message_label_clickable:hover {
     left: 0.4em;
     border-radius: 1px;
     padding: 1px 2px;
-    border: 1px solid #eee;
+    border: 1px dotted #ccc;
 }
 
 .edit_content:hover {
@@ -1133,7 +1132,8 @@ a.message_label_clickable:hover {
     cursor: pointer;
 }
 
-.message_hovered .info {
+.message_hovered .info,
+.message_hovered .empty-star {
     visibility: visible;
 }
 
@@ -2556,12 +2556,13 @@ li.expanded_subject {
 .star {
     display: inline-block;
     opacity: 1;
-    font-size: 16px;
+    font-size: 14px;
     color: #2c8211;
 }
 
 .empty-star {
-    color: #CCC;
+    color: #bbb;
+    visibility: hidden;
 }
 
 .empty-star:hover {
@@ -2571,8 +2572,9 @@ li.expanded_subject {
 
 .info {
     display: inline-block;
-    font-size: 16px;
-    color: #CCC;
+    font-size: 15px;
+    color: #bbb;
+    visibility: hidden;
 }
 
 .star:hover {
diff --git a/static/templates/message.handlebars b/static/templates/message.handlebars
index 86f6b6dfa8..983b733002 100644
--- a/static/templates/message.handlebars
+++ b/static/templates/message.handlebars
@@ -193,12 +193,12 @@
             </span>
         </span>
         {{/include_sender}}
-        <span class="message_time">{{timestr}}</span>
         <div class="message_controls">
           <div class="star">
-            <span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star empty-star{{/if}}"
+            <span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star-empty empty-star{{/if}}"
                title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></span>
           </div>
+          <span class="message_time">{{timestr}}</span>
           <div class="info actions_hover">
             <i class="icon-vector-chevron-down"></i>
           </div>