Commit 9825d6e7 authored by JC Brand's avatar JC Brand

Use bootstrap dropdown to render the emoji picker

parent 8bddd0d7
...@@ -5227,12 +5227,14 @@ body.reset { ...@@ -5227,12 +5227,14 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff; background-color: #fff;
bottom: 100%; bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px; margin-bottom: 0;
margin: 0; min-width: 20rem;
position: absolute; position: absolute;
right: 0; } right: 0;
top: auto;
z-index: 1000; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
...@@ -5244,7 +5246,7 @@ body.reset { ...@@ -5244,7 +5246,7 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */ /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); } box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden; overflow: hidden;
...@@ -5275,6 +5277,11 @@ body.reset { ...@@ -5275,6 +5277,11 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex;
flex-direction: row;
justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
......
...@@ -5277,12 +5277,14 @@ body { ...@@ -5277,12 +5277,14 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff; background-color: #fff;
bottom: 100%; bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px; margin-bottom: 0;
margin: 0; min-width: 20rem;
position: absolute; position: absolute;
right: 0; } right: 0;
top: auto;
z-index: 1000; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
...@@ -5294,7 +5296,7 @@ body { ...@@ -5294,7 +5296,7 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */ /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); } box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden; overflow: hidden;
...@@ -5325,6 +5327,11 @@ body { ...@@ -5325,6 +5327,11 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex;
flex-direction: row;
justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
......
...@@ -375,12 +375,15 @@ ...@@ -375,12 +375,15 @@
} }
.toolbar-menu { .toolbar-menu {
background-color: #fff; background-color: #fff;
bottom: 100%; bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px; margin-bottom: 0;
margin: 0; min-width: 20rem;
position: absolute; position: absolute;
right: 0; right: 0;
top: auto;
z-index: $zindex-dropdown;
a { a {
color: $link-color; color: $link-color;
} }
...@@ -392,7 +395,7 @@ ...@@ -392,7 +395,7 @@
} }
&.emoji-toolbar { &.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */ /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
} }
&.emoji-toolbar { &.emoji-toolbar {
overflow: hidden; overflow: hidden;
...@@ -430,6 +433,14 @@ ...@@ -430,6 +433,14 @@
} }
&.toggle-smiley { &.toggle-smiley {
.emoji-toolbar { .emoji-toolbar {
.emoji-category-picker {
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.emoji-category-picker, .emoji-category-picker,
.emoji-skintone-picker { .emoji-skintone-picker {
li:hover { li:hover {
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
(function (root, factory) { (function (root, factory) {
define([ define([
"converse-core", "converse-core",
"converse-chatboxes",
"bootstrap", "bootstrap",
"emojione", "emojione",
"xss", "xss",
...@@ -25,11 +24,11 @@ ...@@ -25,11 +24,11 @@
"tpl!spinner", "tpl!spinner",
"tpl!spoiler_button", "tpl!spoiler_button",
"tpl!spoiler_message", "tpl!spoiler_message",
"tpl!toolbar" "tpl!toolbar",
"converse-chatboxes"
], factory); ], factory);
}(this, function ( }(this, function (
converse, converse,
dummy,
bootstrap, bootstrap,
emojione, emojione,
xss, xss,
...@@ -66,7 +65,7 @@ ...@@ -66,7 +65,7 @@
* *
* NB: These plugins need to have already been loaded via require.js. * NB: These plugins need to have already been loaded via require.js.
*/ */
dependencies: ["converse-chatboxes", "converse-disco"], dependencies: ["converse-chatboxes", "converse-disco", "converse-dropdown"],
overrides: { overrides: {
// Overrides mentioned here will be picked up by converse.js's // Overrides mentioned here will be picked up by converse.js's
...@@ -80,6 +79,8 @@ ...@@ -80,6 +79,8 @@
this.__super__.registerGlobalEventHandlers(); this.__super__.registerGlobalEventHandlers();
_converse.root.addEventListener( _converse.root.addEventListener(
'click', function (ev) { 'click', function (ev) {
// FIXME
return;
if (_.includes(ev.target.classList, 'toggle-toolbar-menu') || if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
_.includes(ev.target.classList, 'insert-emoji')) { _.includes(ev.target.classList, 'insert-emoji')) {
return; return;
...@@ -151,7 +152,7 @@ ...@@ -151,7 +152,7 @@
} }
}); });
_converse.EmojiPickerView = Backbone.NativeView.extend({ _converse.EmojiPickerView = Backbone.VDOMView.extend({
className: 'emoji-picker-container', className: 'emoji-picker-container',
events: { events: {
'click .emoji-category-picker li.emoji-category': 'chooseCategory', 'click .emoji-category-picker li.emoji-category': 'chooseCategory',
...@@ -161,11 +162,10 @@ ...@@ -161,11 +162,10 @@
initialize () { initialize () {
this.model.on('change:current_skintone', this.render, this); this.model.on('change:current_skintone', this.render, this);
this.model.on('change:current_category', this.render, this); this.model.on('change:current_category', this.render, this);
this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
}, },
render () { toHTML () {
var emojis_html = tpl_emojis( return tpl_emojis(
_.extend( _.extend(
this.model.toJSON(), { this.model.toJSON(), {
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode, 'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
...@@ -175,12 +175,6 @@ ...@@ -175,12 +175,6 @@
'shouldBeHidden': this.shouldBeHidden 'shouldBeHidden': this.shouldBeHidden
} }
)); ));
this.el.innerHTML = emojis_html;
_.forEach(this.el.querySelectorAll('.emoji-picker'), (el) => {
el.addEventListener('scroll', this.setScrollPosition.bind(this));
});
this.restoreScrollPosition();
return this;
}, },
shouldBeHidden (shortname, current_skintone, toned_emojis) { shouldBeHidden (shortname, current_skintone, toned_emojis) {
...@@ -200,20 +194,6 @@ ...@@ -200,20 +194,6 @@
return false; return false;
}, },
restoreScrollPosition () {
const current_picker = _.difference(
this.el.querySelectorAll('.emoji-picker'),
this.el.querySelectorAll('.emoji-picker.hidden')
);
if (current_picker.length === 1 && this.model.get('scroll_position')) {
current_picker[0].scrollTop = this.model.get('scroll_position');
}
},
setScrollPosition (ev) {
this.model.save('scroll_position', this.content);
},
chooseSkinTone (ev) { chooseSkinTone (ev) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
...@@ -1005,32 +985,12 @@ ...@@ -1005,32 +985,12 @@
}, },
toggleEmojiMenu (ev) { toggleEmojiMenu (ev) {
const dropdown_el = this.el.querySelector('.toggle-smiley.dropup'); if (_.isUndefined(this.dropdown)) {
const dropdown = new bootstrap.Dropdown(dropdown_el, true); this.renderEmojiPicker();
dropdown.toggle(); const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
return; this.dropdown = new bootstrap.Dropdown(dropdown_el, true);
this.dropdown.toggle();
if (u.hasClass('insert-emoji', ev.target)) {
return;
} }
if (!_.isUndefined(ev)) {
ev.stopPropagation();
if (ev.target.classList.contains('emoji-category-picker') ||
ev.target.classList.contains('emoji-skintone-picker') ||
ev.target.classList.contains('emoji-category')) {
return;
}
}
const elements = _.difference(
_converse.root.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el]
);
u.slideInAllElements(elements)
.then(_.partial(
u.slideToggleElement,
this.emoji_picker_view.el))
.then(this.focus.bind(this));
}, },
toggleCall (ev) { toggleCall (ev) {
...@@ -1139,7 +1099,6 @@ ...@@ -1139,7 +1099,6 @@
} }
this.setChatState(_converse.ACTIVE); this.setChatState(_converse.ACTIVE);
this.scrollDown(); this.scrollDown();
this.renderEmojiPicker();
if (focus) { if (focus) {
this.focus(); this.focus();
} }
......
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
'converse-core', 'converse-core',
'converse-disco', 'converse-disco',
'converse-dragresize', 'converse-dragresize',
'converse-dropdown',
'converse-fullscreen', 'converse-fullscreen',
'converse-headline', 'converse-headline',
'converse-mam', 'converse-mam',
......
{[ if (o.use_emoji) { ]} {[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown dropup"> <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o 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 toolbar-menu"></div>
<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) { ]}
......
<div class="emoji-picker-container">
{[ _.forEach(o.emojis_by_category, function (obj, category) { ]} {[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}"> <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}">
{[ _.forEach(o.emojis_by_category[category], function (emoji) { ]} {[ _.forEach(o.emojis_by_category[category], function (emoji) { ]}
...@@ -28,3 +29,4 @@ ...@@ -28,3 +29,4 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</div>
{[ if (o.use_emoji) { ]} {[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown"> <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o 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 toolbar-menu"></div>
<span class="emoji-picker dropdown-menu"></a>
</li> </li>
{[ } ]} {[ } ]}
{[ if (o.show_call_button) { ]} {[ if (o.show_call_button) { ]}
......
...@@ -321,6 +321,7 @@ ...@@ -321,6 +321,7 @@
steps = duration/17; // We assume 17ms per animation which is ~60FPS steps = duration/17; // We assume 17ms per animation which is ~60FPS
let height = original_height; let height = original_height;
debugger;
el.style.overflow = 'hidden'; el.style.overflow = 'hidden';
function draw () { function draw () {
......
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