From a88ca9fafcb1717f2e79c31e2df8a6b1b4b5155f Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Wed, 17 May 2017 09:22:38 -0700
Subject: [PATCH] emoji-reactions: Fix reactions to not break inline-block
 display.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 static/js/reactions.js      | 17 +++++++++--------
 static/styles/reactions.css | 11 +++++++----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/static/js/reactions.js b/static/js/reactions.js
index 57470752b2..91cd59e226 100644
--- a/static/js/reactions.js
+++ b/static/js/reactions.js
@@ -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();
 }
diff --git a/static/styles/reactions.css b/static/styles/reactions.css
index 778505b7e8..648271c71b 100644
--- a/static/styles/reactions.css
+++ b/static/styles/reactions.css
@@ -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;