Commit 8bddd0d7 authored by JC Brand's avatar JC Brand

Some work on showing emoji in a dropdown

parent 40f45554
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
define([ define([
"converse-core", "converse-core",
"converse-chatboxes", "converse-chatboxes",
"bootstrap",
"emojione", "emojione",
"xss", "xss",
"tpl!action", "tpl!action",
...@@ -29,6 +30,7 @@ ...@@ -29,6 +30,7 @@
}(this, function ( }(this, function (
converse, converse,
dummy, dummy,
bootstrap,
emojione, emojione,
xss, xss,
tpl_action, tpl_action,
...@@ -150,7 +152,7 @@ ...@@ -150,7 +152,7 @@
}); });
_converse.EmojiPickerView = Backbone.NativeView.extend({ _converse.EmojiPickerView = Backbone.NativeView.extend({
className: 'emoji-picker-container toolbar-menu collapsed', className: 'emoji-picker-container',
events: { events: {
'click .emoji-category-picker li.emoji-category': 'chooseCategory', 'click .emoji-category-picker li.emoji-category': 'chooseCategory',
'click .emoji-skintone-picker li.emoji-skintone': 'chooseSkinTone' 'click .emoji-skintone-picker li.emoji-skintone': 'chooseSkinTone'
...@@ -1003,6 +1005,12 @@ ...@@ -1003,6 +1005,12 @@
}, },
toggleEmojiMenu (ev) { 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)) { if (u.hasClass('insert-emoji', ev.target)) {
return; return;
} }
......
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
(function (root, factory) { (function (root, factory) {
define([ define([
"converse-core", "converse-core",
"bootstrap",
"emojione", "emojione",
"tpl!add_chatroom_modal", "tpl!add_chatroom_modal",
"tpl!chatarea", "tpl!chatarea",
...@@ -38,7 +37,6 @@ ...@@ -38,7 +37,6 @@
], factory); ], factory);
}(this, function ( }(this, function (
converse, converse,
bootstrap,
emojione, emojione,
tpl_add_chatroom_modal, tpl_add_chatroom_modal,
tpl_chatarea, tpl_chatarea,
......
{[ if (o.use_emoji) { ]} {[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a> <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown dropup">
<span class="emoji-picker"></span> <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> </li>
{[ } ]} {[ } ]}
{[ if (o.show_call_button) { ]} {[ if (o.show_call_button) { ]}
......
{[ if (o.use_emoji) { ]} {[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a> <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown">
<span class="emoji-picker"></span> <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> </li>
{[ } ]} {[ } ]}
{[ if (o.show_call_button) { ]} {[ if (o.show_call_button) { ]}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment