Browse Source

Close #290: show recently used emojis under input area

master
Roman Anasal 10 years ago
parent
commit
467ff80de6
  1. 21
      app/css/desktop.css
  2. 3
      app/js/directives.js
  3. 6
      app/partials/desktop/im.html
  4. 34
      app/vendor/jquery.emojiarea/jquery.emojiarea.js

21
app/css/desktop.css

@ -383,6 +383,27 @@ a.footer_lang_link.active:active { @@ -383,6 +383,27 @@ a.footer_lang_link.active:active {
min-width: 60px;
}
.im_emoji_quick_select_area {
display: block;
height: 30px;
overflow: hidden;
padding: 0 5px;
}
.im_emoji_quick_select_area a {
display: inline-block;
margin: 3px 0;
padding: 2px;
}
.im_emoji_quick_select_area a:hover {
background-color: #edf2f5;
}
.im_emoji_quick_select_area a .label {
display: none;
}
.im_message_selected .im_message_date,
.im_message_selected .im_message_document_size,
.im_message_selected .im_message_audio_duration,

3
app/js/directives.js

@ -882,9 +882,10 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -882,9 +882,10 @@ angular.module('myApp.directives', ['myApp.filters'])
fileSelects = $('input', element),
dropbox = $('.im_send_dropbox_wrap', element)[0],
emojiButton = $('.im_emoji_btn', element)[0],
emojiQuickSelect = !Config.Mobile ? $('.im_emoji_quick_select_area', element)[0] : false,
editorElement = messageField,
dragStarted, dragTimeout,
emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true}),
emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true, quickSelect: emojiQuickSelect}),
emojiMenu = $('.emoji-menu', element)[0],
submitBtn = $('.im_submit', element)[0],
richTextarea = $('.emoji-wysiwyg-editor', element)[0];

6
app/partials/desktop/im.html

@ -250,9 +250,13 @@ @@ -250,9 +250,13 @@
<i class="icon icon-emoji"></i>
</div>
<button type="submit" class="btn btn-success im_submit">
<button type="submit" class="btn btn-success im_submit pull-left">
<span class="im_submit_text" my-i18n="im_submit_message"></span>
</button>
<div class="im_emoji_quick_select_area">
</div>
</form>
</div>

34
app/vendor/jquery.emojiarea/jquery.emojiarea.js vendored

@ -171,7 +171,7 @@ @@ -171,7 +171,7 @@
/*! MODIFICATION START
This function was added by Igor Zhukov to save recent used emojis.
*/
util.emojiInserted = function (emojiKey, menu) {
util.emojiInserted = function (emojiKey, menu, quickSelect) {
ConfigStorage.get('emojis_recent', function (curEmojis) {
curEmojis = curEmojis || [];
@ -192,6 +192,10 @@ @@ -192,6 +192,10 @@
if (menu) {
menu.updateRecentTab(curEmojis);
}
if (quickSelect) {
quickSelect.load(0);
}
})
};
/*! MODIFICATION END */
@ -207,6 +211,11 @@ @@ -207,6 +211,11 @@
this.$editor.on('blur', function() { self.hasFocus = false; });
this.setupButton();
if (this.options.quickSelect) {
var $items = $(this.options.quickSelect);
this.quickSelect = new EmojiQuickSelectArea(self, $items);
}
};
EmojiArea.prototype.setupButton = function() {
@ -278,7 +287,7 @@ @@ -278,7 +287,7 @@
if (!$.emojiarea.icons.hasOwnProperty(emoji)) return;
util.insertAtCursor(emoji, this.$textarea[0]);
/* MODIFICATION: Following line was added by Igor Zhukov, in order to save recent emojis */
util.emojiInserted(emoji, this.menu);
util.emojiInserted(emoji, this.menu, this.quickSelect);
this.$textarea.trigger('change');
};
@ -397,7 +406,7 @@ @@ -397,7 +406,7 @@
/*! MODIFICATION END */
/* MODIFICATION: Following line was added by Igor Zhukov, in order to save recent emojis */
util.emojiInserted(emoji, this.menu);
util.emojiInserted(emoji, this.menu, this.quickSelect);
this.onChange();
@ -611,7 +620,7 @@ @@ -611,7 +620,7 @@
var updateItems = function () {
self.$items.html(html.join(''));
if (!Config.Mobile) {
if (!Config.Mobile && self.$itemsWrap) {
setTimeout(function () {
self.$itemsWrap.nanoScroller();
}, 100);
@ -707,4 +716,21 @@ @@ -707,4 +716,21 @@
};
})();
var EmojiQuickSelectArea = function(emojiarea, $items) {
var self = this;
this.emojiarea = emojiarea;
this.$items = $items;
this.load(0);
this.$items.on('click', 'a', function(e) {
var emoji = $('.label', $(this)).text();
self.onItemSelected(emoji);
e.stopPropagation();
return false;
});
};
util.extend(EmojiQuickSelectArea.prototype, EmojiMenu.prototype);
})(jQuery, window, document);
Loading…
Cancel
Save