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);