From 9356c0ca95f05e2b6133830a7966ded5d94de5be Mon Sep 17 00:00:00 2001
From: Keegan McAllister <keegan@humbughq.com>
Date: Sat, 9 Feb 2013 02:11:08 -0500
Subject: [PATCH] Add a link for the actions popover next to the timestamp

Hopefully the text and link-like styling will make it more clear that this
feature exists.

The sender's name is still clickable, but loses the link-like styling since the
popover isn't about the sender.  The space between the sender's name and this
link is now active as well.

We also remove the sender's email address that was previously visible on hover.
It's not hard for the name + email + actions link + timestamp to be too long
for one line.  The email is still present in the popover.

(imported from commit 3a85f199c42102cac0d217543db0a539935e2914)
---
 zephyr/jstemplates/message.html | 11 ++++++--
 zephyr/static/styles/zephyr.css | 49 ++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/zephyr/jstemplates/message.html b/zephyr/jstemplates/message.html
index 6c16140a2b..6e055cba69 100644
--- a/zephyr/jstemplates/message.html
+++ b/zephyr/jstemplates/message.html
@@ -53,14 +53,19 @@
     </td>
     <td class="pointer"><p></p></td>
     <td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
+        <div class="message_top_line actions_hover">
         {{#include_sender}}
-        <span class="message_sender actions_hover">
+        <span class="message_sender">
             <img class="inline_profile_picture message_body_gravatar img-rounded" src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}"/>
             <span class="sender_name">{{sender_full_name}}</span>
-            <span class="sender_email">{{sender_email}}</span>
         </span>
         {{/include_sender}}
-        <span class="message_time actions_hover">{{{timestr}}}</span>
+        <div class="message_right">
+            {{! 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">{{{content}}}</div>
     </td>
 </tr>
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 430f8e1a20..bcab7a8dd1 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -231,30 +231,6 @@ td.pointer {
     font-weight: bold;
 }
 
-.actions_hovered .sender_name {
-    color: #0088CC;
-    text-decoration: underline;
-}
-
-.sender_email {
-    font-size: 80%;
-    color: gray;
-    visibility: hidden;
-
-    /* Use padding, not margin, so that there's a continuous
-       region of 'hover-ability' between fullname and email. */
-    padding-left: 5px;
-}
-@media (max-width: 480px) {
-    .sender_email {
-        display: none;
-    }
-}
-
-.message_hovered .sender_email {
-    visibility: visible;
-}
-
 .message_label_clickable:hover {
     cursor: pointer;
     color:  #08C;
@@ -265,12 +241,35 @@ td.pointer {
     color: #3BF;
 }
 
+.message_top_line {
+    /* Move the float out of the way of the contents */
+    margin-bottom: 1px;
+}
+
+.message_right {
+    float: right;
+}
+
 .message_time {
     color: gray;
-    float: right;
     font-size: 90%;
 }
 
+.actions_link {
+    font-size:    90%;
+    color:        #0088CC;
+    margin-right: 6px;
+    visibility:   hidden;
+}
+
+.message_hovered .actions_link {
+    visibility: visible;
+}
+
+.actions_hovered .actions_link {
+    text-decoration: underline;
+}
+
 table.message_table {
     table-layout: fixed;
     margin-left: auto;