From 4d5aa3ddc9e603d2216738f3dffa59ec09ffd830 Mon Sep 17 00:00:00 2001 From: Brock Whittaker Date: Thu, 23 Feb 2017 14:33:57 -0800 Subject: [PATCH] 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 | 2 +- static/js/ui.js | 2 +- static/styles/media.css | 31 ++------ static/styles/zulip.css | 92 +++++++++------------- static/templates/single_message.handlebars | 8 +- 5 files changed, 49 insertions(+), 86 deletions(-) diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js index 08f8feeae7..3a859eae41 100644 --- a/frontend_tests/node_tests/templates.js +++ b/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"); }()); diff --git a/static/js/ui.js b/static/js/ui.js index 14e56e7299..5a39120f58 100644 --- a/static/js/ui.js +++ b/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 { diff --git a/static/styles/media.css b/static/styles/media.css index b8ac6558df..81a5dbc807 100644 --- a/static/styles/media.css +++ b/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; } } diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 69dd24eff5..78df840277 100644 --- a/static/styles/zulip.css +++ b/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; } diff --git a/static/templates/single_message.handlebars b/static/templates/single_message.handlebars index 31b639b19e..d5e316b483 100644 --- a/static/templates/single_message.handlebars +++ b/static/templates/single_message.handlebars @@ -37,12 +37,8 @@ {{/unless}} {{/if_and}}
-
- -
{{#if msg/sent_by_me}} - +
{{else}}
@@ -56,6 +52,8 @@
+
+
{{#unless status_message}}{{#if use_match_properties}}{{{msg/match_content}}}{{else}}{{{msg/content}}}{{/if}}{{/unless}}