Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

emoji_picker: Change reaction popover's base element. 

Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
This commit is contained in:
Harshit Bansal 2017-09-07 14:44:59 +05:30 committed by Tim Abbott
parent 16885ef0a7
commit afba03f84e
4 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/js/emoji_picker.js
View File

@ -618,7 +618,7 @@ exports.register_click_handlers = function () {
emoji_picker.toggle_emoji_popover(this); emoji_picker.toggle_emoji_popover(this);
}); });
$("#main_div").on("click", ".reactions_hover, .reaction_button", function (e) { $("#main_div").on("click", ".reaction_button", function (e) {
e.stopPropagation(); e.stopPropagation();
var message_id = rows.get_message_id(this); var message_id = rows.get_message_id(this);
@ -634,7 +634,8 @@ exports.register_click_handlers = function () {
// message wasn't sent by us and thus the .reaction_hover // message wasn't sent by us and thus the .reaction_hover
// element is not present, we use the message's // element is not present, we use the message's
// .icon-vector-chevron-down element as the base for the popover. // .icon-vector-chevron-down element as the base for the popover.
emoji_picker.toggle_emoji_popover($(".selected_message .icon-vector-chevron-down")[0], msgid); var elem = $(".selected_message .actions_hover")[0];
emoji_picker.toggle_emoji_popover(elem, msgid);
}); });
$("body").on("click", ".emoji-popover-tab-item", function (e) { $("body").on("click", ".emoji-popover-tab-item", function (e) {

4
static/js/hotkey.js
View File

@ -17,9 +17,9 @@ function focus_in_empty_compose() {
function open_reactions() { function open_reactions() {
var message = current_msg_list.selected_message(); var message = current_msg_list.selected_message();
var target = $(current_msg_list.selected_row()).find(".icon-vector-chevron-down")[0]; var target = $(current_msg_list.selected_row()).find(".actions_hover")[0];
if (!message.sent_by_me) { if (!message.sent_by_me) {
target = $(current_msg_list.selected_row()).find(".icon-vector-smile")[0]; target = $(current_msg_list.selected_row()).find(".reaction_button")[0];
} }
emoji_picker.toggle_emoji_popover(target, current_msg_list.selected_id()); emoji_picker.toggle_emoji_popover(target, current_msg_list.selected_id());
return true; return true;

9
static/styles/zulip.css
View File

@ -1189,21 +1189,16 @@ a.message_label_clickable:hover {
color: hsl(200, 100%, 40%); color: hsl(200, 100%, 40%);
} }
.reactions_hover { .message_controls > .reaction_button {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: hsl(0, 0%, 73%); color: hsl(0, 0%, 73%);
} }
.reactions_hover:hover { .message_controls > .reaction_button:hover {
color: hsl(200, 100%, 40%); color: hsl(200, 100%, 40%);
} }
.message_hovered .reactions_hover,
.has_emoji_popover .reactions_hover {
opacity: 1;
}
.message_hovered .info, .message_hovered .info,
.has_actions_popover .info, .has_actions_popover .info,
.message_hovered .empty-star { .message_hovered .empty-star {

4
static/templates/single_message.handlebars
View File

@ -44,8 +44,8 @@
{{#if msg/sent_by_me}} {{#if msg/sent_by_me}}
<div class="edit_content"></div> <div class="edit_content"></div>
{{else}} {{else}}
<div class="reactions_hover"> <div class="reaction_button">
<i class="icon-vector-smile reaction_button" title="{{#tr this}}Add emoji reaction{{/tr}} (:)"></i> <i class="icon-vector-smile" title="{{#tr this}}Add emoji reaction{{/tr}} (:)"></i>
</div> </div>
{{/if}} {{/if}}
<div class="info actions_hover"> <div class="info actions_hover">