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

emoji-reactions: Fix reactions to not break inline-block display. 

This fixes the reactions to not break a new line by changing them from
a weird combination of “float: left” and “display: block” (inlined), to
just “display: inline-block”.

With fixes from Harshit Bansal for an issue with using the hotkeys in
a filtered popover.

Fixes: #4818.
This commit is contained in:
Brock Whittaker 2017-05-17 09:22:38 -07:00 committed by Tim Abbott
parent bc15085098
commit a88ca9fafc
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/js/reactions.js
View File

@ -97,7 +97,7 @@ var reaction_show_list = []; // local reaction_show_list
exports.render_reaction_show_list = function () {
var reaction_list = $(".emoji-popover-emoji");
reaction_show_list = reaction_list.filter(function () {
return this.style.display === "block" || this.style.display === "";
return $(this).css('display') === "inline-block";
}).toArray();
};
@ -106,14 +106,15 @@ function filter_emojis() {
var search_term = elt.val().trim().toLowerCase();
var reaction_list = $(".emoji-popover-emoji");
if (search_term !== '') {
reaction_list.filter(function () {
return this.title.indexOf(search_term) === -1;
}).css("display", "none");
reaction_list.filter(function () {
return this.title.indexOf(search_term) !== -1;
}).css("display", "block");
reaction_list.each(function () {
if (this.title.indexOf(search_term) === -1) {
this.classList.add("hide");
} else {
this.classList.remove("hide");
}
});
} else {
reaction_list.css("display", "block");
reaction_list.removeClass("hide");
}
exports.render_reaction_show_list();
}

11
static/styles/reactions.css
View File

@ -151,14 +151,17 @@
}
.emoji-popover-emoji {
float: left;
margin: 0.1em;
padding: 0.3em;
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border: 1px solid white;
border-radius: 0.5em;
}
.emoji-popover-emoji.hide {
display: none;
}
.emoji-popover .reacted {
background-color: #eef7fa;
border-color: #add8e6;