diff --git a/app/css/desktop.css b/app/css/desktop.css index baad58d8..a6b17f6a 100644 --- a/app/css/desktop.css +++ b/app/css/desktop.css @@ -635,6 +635,8 @@ a.footer_link.active:active { border-radius: 0; float: right; min-width: 0; + margin-top: 5px; + margin-left: 10px; width: auto; padding: 0; font-weight: bold; @@ -644,6 +646,25 @@ a.footer_link.active:active { background: inherit; } +.im_emoji_quick_select_area { + display: block; + height: 30px; + overflow: hidden; + max-width: 210px; +} + +.im_emoji_quick_select_area a { + display: inline-block; + padding: 5px; +} + +.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, @@ -795,6 +816,7 @@ a.footer_link.active:active { .im_send_panel_wrap { max-width: 554px; + padding-bottom: 23px; } .im_send_form { max-width: 382px; @@ -873,7 +895,7 @@ a.im_panel_peer_photo .peer_initials { } .im_send_field_wrap { - margin-bottom: 20px; + margin-bottom: 15px; } .emoji-wysiwyg-editor, .im_message_field { @@ -904,7 +926,7 @@ a.im_panel_peer_photo .peer_initials { width: 18px; height: 17px; margin-right: 28px; - margin-top: 1px; + margin-top: 6px; } .icon-paperclip { @@ -938,6 +960,8 @@ a.im_panel_peer_photo .peer_initials { width: 20px; height: 18px; + margin-top: 5px; + margin-right: 25px; } diff --git a/app/js/directives.js b/app/js/directives.js index 3988b3be..a9177214 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1061,9 +1061,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]; diff --git a/app/partials/desktop/im.html b/app/partials/desktop/im.html index f7dd8133..ec05f189 100644 --- a/app/partials/desktop/im.html +++ b/app/partials/desktop/im.html @@ -182,6 +182,8 @@
+ +
@@ -192,7 +194,8 @@
- +
+
diff --git a/app/vendor/jquery.emojiarea/jquery.emojiarea.js b/app/vendor/jquery.emojiarea/jquery.emojiarea.js index 6f269f4c..7ccb073a 100644 --- a/app/vendor/jquery.emojiarea/jquery.emojiarea.js +++ b/app/vendor/jquery.emojiarea/jquery.emojiarea.js @@ -172,7 +172,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 || defaultRecentEmojis || []; @@ -189,6 +189,14 @@ } ConfigStorage.set({emojis_recent: curEmojis}); + + if (menu) { + menu.updateRecentTab(curEmojis); + } + + if (quickSelect) { + quickSelect.load(0); + } }) }; /*! MODIFICATION END */ @@ -204,6 +212,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() { @@ -275,7 +288,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'); }; @@ -394,7 +407,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(); @@ -597,12 +610,12 @@ if (path.length && path.charAt(path.length - 1) !== '/') { path += '/'; } - + /*! MODIFICATION: Following function was added by Igor Zhukov, in order to add scrollbars to EmojiMenu */ var updateItems = function () { self.$items.html(html.join('')); - if (!Config.Mobile) { + if (!Config.Mobile && self.$itemsWrap) { setTimeout(function () { self.$itemsWrap.nanoScroller(); }, 100); @@ -680,4 +693,21 @@ }; })(); -})(jQuery, window, document); \ No newline at end of file + 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);