Only display email while hovering on fullname

(imported from commit 0f366deb69ba49bfda998dd993e32de0d29affe4)

zephyr/jstemplates/zephyr.html

@@ -26,8 +26,8 @@
 </td>
 <td class="messagebox" onclick="select_zephyr({{id}});" onmouseover="update_pointer_by_id({{id}});">
     <img class="profile_picture" src="http://www.gravatar.com/avatar/{{gravatar_hash}}?d=identicon"/>
-    <span class="zephyr_label_clickable zephyr_sender" onclick="prepare_huddle('{{sender}}')">
-      <span class="zephyr_sender_name">{{sender_name}}</span> <span class="zephyr_sender_email">{{sender_email}}</span>
+    <span class="zephyr_label_clickable zephyr_sender" onclick="prepare_huddle('{{sender}}')" onmouseover="show_email({{id}});" onmouseout="hide_email({{id}});">
+      <span class="zephyr_sender_name">{{sender_name}}</span> <span class="zephyr_sender_email invisible">{{sender_email}}</span>
       <span class="zephyr_sender_username">{{sender}}</span>
     </span>
     <span class="zephyr_time" title="{{full_date_str}}">{{timestr}}</span>

zephyr/static/js/zephyr.js

@@ -245,6 +245,20 @@ function select_zephyr(zephyr_id) {
     }
 }
 
+
+/* We use 'visibility' rather than 'display' and jQuery's show() / hide(),
+   because we want to reserve space for the email address.  This avoids
+   things jumping around slightly when the email address is shown. */
+
+function show_email(zephyr_id) {
+    get_zephyr(zephyr_id).find('.zephyr_sender_email').removeClass('invisible');
+}
+
+function hide_email(zephyr_id) {
+    get_zephyr(zephyr_id).find('.zephyr_sender_email').addClass('invisible');
+}
+
+
 function process_hotkey(code) {
     var next_zephyr;
 

zephyr/static/styles/zephyr.css

@@ -77,11 +77,6 @@ span.zephyr_sender_name {
 
 span.zephyr_sender_email {
     font-size: 80%;
-    visibility: hidden;
-}
-
-.selected_zephyr span.zephyr_sender_email {
-    visibility: visible;
 }
 
 span.zephyr_sender_username {