Restyle and refactor .message_controls for better UX.

This refactors the .message_controls to stop relying on absolute
positioning and strange CSS, and throws them inline.

This also restyles so they hang to the right of the time which is now
always present.

Fixes: #3761.

frontend_tests/node_tests/templates.js

@@ -550,7 +550,7 @@ function render(template_name, args) {
     var first_message_text = first_message.find(".message_content").text().trim();
     assert.equal(first_message_text, "This is message one.");
 
-    var starred_title = first_message.find(".star span").attr("title");
+    var starred_title = first_message.find(".star").attr("title");
     assert.equal(starred_title, "Unstar this message");
 }());
 

static/js/ui.js

@@ -222,7 +222,7 @@ exports.update_starred = function (message_id, starred) {
     // Avoid a full re-render, but update the star in each message
     // table in which it is visible.
     update_message_in_all_views(message_id, function update_row(row) {
-        var elt = row.find(".message_star");
+        var elt = row.find(".star");
         if (starred) {
             elt.addClass("icon-vector-star").removeClass("icon-vector-star-empty").removeClass("empty-star");
         } else {

static/styles/media.css

@@ -260,22 +260,17 @@
     }
 
     .message_controls {
-        right: -16px;
-        top: -2px;
+        width: 56px;
+        right: -10px;
+        top: 0px;
     }
 
     .message_hovered .message_controls {
-        width: 35px;
-        height: 20px;
-        background: rgba(255,255,255,0.8);
         z-index: 10;
-        border: 1px solid #e2e2e2;
-        right: -16px;
-        top: -2px;
     }
 
     .selected_message .message_controls {
-        right: -13px;
+        right: -10px;
     }
 
     .include-sender .message_controls {
@@ -291,17 +286,7 @@
     }
 
     .include-sender .message_controls {
-        right: 36px;
-    }
-
-    .star {
-        position: absolute;
-        right: 2px;
-    }
-
-    .info {
-        position: absolute;
-        right: 18px;
+        right: 40px;
     }
 
     .sender_name {
@@ -324,12 +309,8 @@
         top: 40px;
     }
 
-    .message_failed {
-        left: 0px;
-    }
-
     .message_content {
-        padding-right: 35px;
+        padding-right: 50px;
     }
 
 }

static/styles/zulip.css

@@ -540,7 +540,7 @@ td.pointer {
     padding: 1px;
     font-weight: 300;
     position: absolute;
-    right: -80px;
+    right: -105px;
     line-height: 20px;
     text-align: right;
     -webkit-transition: background-color 2.7s ease-in, color 2.7s ease-in;
@@ -557,7 +557,24 @@ td.pointer {
     display: inline-block;
     position: absolute;
     top: 2px;
-    right: -55px;
+    right: -63px;
+    z-index: 1;
+}
+
+.message_controls > div {
+    opacity: 0;
+    pointer-events: none;
+
+    transition: all 0.2s ease;
+}
+
+.messagebox:hover .message_controls > div {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.message_controls > div {
+    padding: 0px 1px;
 }
 
 .include-sender .message_controls {
@@ -592,11 +609,6 @@ td.pointer {
     margin-bottom: 10px;
 }
 
-.message_list .message_row:hover .message_time,
-.message_list .has_popover .message_time {
-    display: none;
-}
-
 .stream_label {
     display: inline-block;
     padding: 3px 4px 2px 4px;
@@ -982,14 +994,7 @@ just a temporary hack.
 .message_failed {
     font-weight: bold;
     color: red;
-    padding: 0px 1px 0px 1px;
     position: relative;
-    left: 29px;
-}
-
-.message_failed i {
-    margin-left: 2px;
-    margin-right: 2px;
 }
 
 a.message_label_clickable:hover {
@@ -1021,52 +1026,36 @@ a.message_label_clickable:hover {
 }
 
 .edit_content {
+    width: 12px;
     display: inline-block;
     position: relative;
-    left: 22px;
-    width: 0px;
-    height: 0px;
     color: #bbb;
 }
 
-.edit_content i {
-    position: absolute;
-    display: block;
-    top: -0.9em;
-    left: 0.4em;
-    border-radius: 1px;
-    padding: 1px 2px;
-}
-
 .edit_content:hover {
     cursor: pointer;
-    opacity: 1.0;
+    color: #0088CC;
 }
 
 .reactions_hover {
     display: inline-block;
     position: relative;
-    left: 22px;
-    width: 0px;
-    height: 0px;
     color: #bbb;
-    visibility: hidden;
 }
 
-.reactions_hover i {
-    position: absolute;
-    display: block;
-    top: -0.9em;
-    left: 0.4em;
-    border-radius: 1px;
-    padding: 1px 2px;
+.reactions_hover:hover {
+    color: #0088CC;
 }
 
 .message_hovered .reactions_hover,
-.has_reactions_popover .reactions_hover
- {
-    cursor: pointer;
-    visibility: visible;
+.has_reactions_popover .reactions_hover {
+    opacity: 1;
+}
+
+.message_hovered .info,
+.has_actions_popover .info,
+.message_hovered .empty-star {
+    opacity: 1;
 }
 
 /* Brighten text because of the dark background */
@@ -1107,19 +1096,11 @@ a.dark_background:hover,
     cursor: pointer;
 }
 
-.message_hovered .info,
-.has_actions_popover .info,
-.message_hovered .empty-star {
-    visibility: visible;
-}
-
 .info {
     display: inline-block;
     position: relative;
-    left: 3px;
     font-size: 15px;
     color: #bbb;
-    visibility: hidden;
 }
 
 .actions_hovered .actions_link {
@@ -1299,7 +1280,7 @@ blockquote p {
 }
 
 .messagebox-content {
-    padding: 4px 90px 1px 10px;
+    padding: 4px 115px 1px 10px;
 }
 
 .last_message .messagebox-content {
@@ -2209,14 +2190,17 @@ button.topic_edit_cancel {
 
 .star {
     display: inline-block;
-    opacity: 1;
     font-size: 14px;
     color: #2c8211;
 }
 
+.star:not(.empty-star) {
+    opacity: 1 !important;
+    pointer-events: all !important;
+}
+
 .empty-star {
     color: #bbb;
-    visibility: hidden;
 }
 
 .empty-star:hover {
@@ -2499,7 +2483,7 @@ button.topic_edit_cancel {
     padding: 0px 5px;
     display: inline-block;
     vertical-align: top;
-    max-width: calc(100% - 100px);
+    max-width: calc(100% - 115px);
     max-height: 70px;
     overflow: hidden;
 }

static/templates/single_message.handlebars

@@ -37,12 +37,8 @@
             {{/unless}}
           {{/if_and}}
           <div class="message_controls{{#status_message}} sender-status-controls{{/status_message}}">
-            <div class="star">
-              <span class="message_star {{#if msg/starred}}icon-vector-star{{else}}icon-vector-star-empty empty-star{{/if}}"
-                    title="{{#tr this}}{{#if msg/starred}}Unstar{{else}}Star{{/if}} this message{{/tr}}"></span>
-            </div>
             {{#if msg/sent_by_me}}
-            <span class="edit_content"></span>
+            <div class="edit_content"></div>
             {{else}}
             <div class="reactions_hover">
             <i class="icon-vector-smile reaction_button" data-msgid="{{msg/id}}"></i>
@@ -56,6 +52,8 @@
               <i class="icon-vector-pencil edit-failed-message" data-toggle="tooltip" title="{{t 'Not Delivered: Edit' }}"></i>
               <i class="icon-vector-remove-sign remove-failed-message" data-toggle="tooltip" title="{{t 'Not Delivered: Delete' }}"></i>
             </div>
+            <div class="star {{#if msg/starred}}icon-vector-star{{else}}icon-vector-star-empty{{/if}} {{#if msg/starred}}{{else}}empty-star{{/if}}" title="{{#tr this}}{{#if msg/starred}}Unstar{{else}}Star{{/if}} this message{{/tr}}">
+            </div>
           </div>
         </div>
         <div class="message_content">{{#unless status_message}}{{#if use_match_properties}}{{{msg/match_content}}}{{else}}{{{msg/content}}}{{/if}}{{/unless}}</div>