Some work on showing emoji in a dropdown

src/converse-chatview.js

@@ -10,6 +10,7 @@
     define([
             "converse-core",
             "converse-chatboxes",
+            "bootstrap",
             "emojione",
             "xss",
             "tpl!action",
@@ -29,6 +30,7 @@
 }(this, function (
             converse,
             dummy,
+            bootstrap,
             emojione,
             xss,
             tpl_action,
@@ -150,7 +152,7 @@
             });
 
             _converse.EmojiPickerView = Backbone.NativeView.extend({
-                className: 'emoji-picker-container toolbar-menu collapsed',
+                className: 'emoji-picker-container',
                 events: {
                     'click .emoji-category-picker li.emoji-category': 'chooseCategory',
                     'click .emoji-skintone-picker li.emoji-skintone': 'chooseSkinTone'
@@ -1003,6 +1005,12 @@
                 },
 
                 toggleEmojiMenu (ev) {
+                    const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
+                    const dropdown = new bootstrap.Dropdown(dropdown_el, true);
+                    dropdown.toggle();
+                    return;
+
+
                     if (u.hasClass('insert-emoji', ev.target)) {
                         return;
                     }

src/converse-muc-views.js

@@ -11,7 +11,6 @@
 (function (root, factory) {
     define([
         "converse-core",
-        "bootstrap",
         "emojione",
         "tpl!add_chatroom_modal",
         "tpl!chatarea",
@@ -38,7 +37,6 @@
     ], factory);
 }(this, function (
     converse,
-    bootstrap,
     emojione,
     tpl_add_chatroom_modal,
     tpl_chatarea,

src/templates/chatroom_toolbar.html

@@ -1,6 +1,10 @@
 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a>
-    <span class="emoji-picker"></span>
+<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown dropup">
+    <a class="btn dropdown-toggle" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
+    <div class="emoji-picker dropdown-menu"
+         style="top: auto; bottom: 2em; height: 10em; overflow-y: scroll"
+        
+        ></div>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}

src/templates/toolbar.html

@@ -1,6 +1,7 @@
 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a>
-    <span class="emoji-picker"></span>
+<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown">
+    <a class="btn dropdown-toggle" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
+    <span class="emoji-picker dropdown-menu"></a>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}