diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index ef05a4640..c6656a06e 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -332,7 +332,7 @@ } .toolbar-menu { background-color: #fff; - bottom: 2rem; + bottom: 1.7rem; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); height: auto; margin-bottom: 0; diff --git a/src/converse-emoji-views.js b/src/converse-emoji-views.js index aaf63267e..28c22d28c 100644 --- a/src/converse-emoji-views.js +++ b/src/converse-emoji-views.js @@ -116,7 +116,7 @@ converse.plugins.add('converse-emoji-views', { }, initialize () { - this.debouncedFilter = _.debounce(input => this.filter(input), 100); + this.debouncedFilter = _.debounce(input => this.filter(input), 50); this.model.on('change:query', this.render, this); this.model.on('change:current_skintone', this.render, this); this.model.on('change:current_category', () => { @@ -156,9 +156,8 @@ converse.plugins.add('converse-emoji-views', { if (match) { // XXX: Ideally we would set `query` on the model and // then let the view re-render, instead of doing it - // manually here. Unfortunately this doesn't work, the - // value gets set on the HTML element, but is not - // visible to the new user. + // manually here. Snabbdom supports setting properties, + // Backbone.VDOMView doesn't. ev.target.value = match; this.filter(ev.target); } @@ -167,6 +166,7 @@ converse.plugins.add('converse-emoji-views', { ev.stopPropagation(); if (_converse.emoji_shortnames.includes(ev.target.value)) { this.chatview.insertIntoTextArea(ev.target.value); + this.chatview.emoji_dropdown.toggle(); // XXX: See above ev.target.value = ''; this.filter(ev.target); @@ -222,7 +222,10 @@ converse.plugins.add('converse-emoji-views', { ev.stopPropagation(); const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target; const category = target.getAttribute("data-category").trim(); - this.model.save({'current_category': category}); + // XXX: See above + const input = this.el.querySelector('.emoji-search'); + input.value = ''; + this.model.save({'current_category': category, 'query': undefined}); }, setScrollPosition () { @@ -236,11 +239,12 @@ converse.plugins.add('converse-emoji-views', { ev.preventDefault(); ev.stopPropagation(); const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target; + this.chatview.insertIntoTextArea(target.getAttribute('data-emoji')); + this.chatview.emoji_dropdown.toggle(); // XXX: See above const input = this.el.querySelector('.emoji-search'); input.value = ''; this.filter(input); - this.chatview.insertIntoTextArea(target.getAttribute('data-emoji')); } });