diff --git a/app/css/app.css b/app/css/app.css
index 363fc95f..b8c8f2d0 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -2036,11 +2036,17 @@ img.img_fullsize {
.composer_emoji_tooltip_tab_stickers {background-position: -9px -361px; }
.composer_emoji_tooltip_tab_stickers.active {background-position: -9px -333px; }
-.composer_emoji_tooltip_content {
- position: relative;
+
+.nano.composer_emoji_tooltip_content_wrap {
height: 174px;
- overflow: hidden;
- overflow-y: auto;
+ position: relative;
+}
+.composer_emoji_tooltip_content {
+ /*position: relative;*/
+ /*overflow: hidden;
+ overflow-y: auto;*/
+ padding-right: 8px;
+ outline: 0!important;
}
@@ -2146,8 +2152,8 @@ a.composer_emoji_btn:hover {
line-height: 20px;
}
.composer_sticker_btn {
- width: 70px;
- height: 70px;
+ width: 67px;
+ height: 67px;
display: block;
display: inline-block;
text-align: center;
diff --git a/app/css/desktop.css b/app/css/desktop.css
index af5534f8..ac190f4d 100644
--- a/app/css/desktop.css
+++ b/app/css/desktop.css
@@ -408,11 +408,11 @@
opacity : 0.99;
}
-.emoji-menu .nano > .nano-pane {
+.composer_emoji_tooltip .nano > .nano-pane {
background : rgba(255,255,255,0.0);
right: -2px;
}
-.emoji-menu .nano > .nano-pane > .nano-slider {
+.composer_emoji_tooltip .nano > .nano-pane > .nano-slider {
background: #d1d1d1;
margin: 0 3px 0 4px;
}
diff --git a/app/js/lib/utils.js b/app/js/lib/utils.js
index 570a6b92..8d2f66a1 100644
--- a/app/js/lib/utils.js
+++ b/app/js/lib/utils.js
@@ -348,13 +348,6 @@ function versionCompare (ver1, ver2) {
var badCharsRe = /[`~!@#$%^&*()\-_=+\[\]\\|{}'";:\/?.>,<\s]+/g,
trimRe = /^\s+|\s$/g;
- return {
- createIndex: createIndex,
- indexObject: indexObject,
- cleanSearchText: cleanSearchText,
- search: search
- };
-
function createIndex () {
return {
shortIndexes: {},
diff --git a/app/js/message_composer.js b/app/js/message_composer.js
index e1064baa..4929e64b 100644
--- a/app/js/message_composer.js
+++ b/app/js/message_composer.js
@@ -191,9 +191,10 @@ EmojiTooltip.prototype.createTooltip = function () {
}
var self = this;
- this.tooltipEl = $('
').appendTo(document.body);
+ this.tooltipEl = $('').appendTo(document.body);
this.tabsEl = $('.composer_emoji_tooltip_tabs', this.tooltip);
+ this.contentWrapEl = $('.composer_emoji_tooltip_content_wrap', this.tooltip);
this.contentEl = $('.composer_emoji_tooltip_content', this.tooltip);
this.footerEl = $('.composer_emoji_tooltip_footer', this.tooltip);
this.settingsEl = $('.composer_emoji_tooltip_settings', this.tooltip);
@@ -215,6 +216,10 @@ EmojiTooltip.prototype.createTooltip = function () {
.appendTo(self.tabsEl);
});
+ if (!Config.Mobile) {
+ this.contentWrapEl.nanoScroller({preventPageScrolling: true, tabIndex: -1});
+ }
+
this.contentEl.on('mousedown', function (e) {
e = e.originalEvent || e;
var target = $(e.target), code, sticker;
@@ -265,6 +270,16 @@ EmojiTooltip.prototype.updateTabContents = function (tab) {
var self = this;
var iconSize = Config.Mobile ? 26 : 20;
+ var renderContent = function () {
+ self.contentEl.html(html.join(''));
+
+ if (!Config.Mobile) {
+ setTimeout(function () {
+ self.contentWrapEl.nanoScroller();
+ }, 100);
+ }
+ }
+
if (this.tab == 6) { // Stickers
var renderStickers = function (stickers) {
var sticker, i;
@@ -273,7 +288,7 @@ EmojiTooltip.prototype.updateTabContents = function (tab) {
sticker = stickers[i];
html.push('');
}
- self.contentEl.html(html.join(''));
+ renderContent();
};
this.getStickers(renderStickers);
}
@@ -291,7 +306,7 @@ EmojiTooltip.prototype.updateTabContents = function (tab) {
y = iconSize * Math.floor(i / totalColumns);
html.push('');
}
- this.contentEl.html(html.join(''));
+ renderContent();
}
else {
EmojiHelper.getPopularEmoji(function (popularEmoji) {
@@ -310,7 +325,7 @@ EmojiTooltip.prototype.updateTabContents = function (tab) {
html.push('');
}
}
- self.contentEl.html(html.join(''));
+ renderContent();
});
}
};
@@ -590,25 +605,38 @@ MessageComposer.prototype.checkAutocomplete = function () {
value = value.substr(0, pos);
- var matches = value.match(/:([A-Za-z_0-z\+-]*)$/);
- if (matches/* && !this.richTextareaEl*/) {
+ var matches = value.match(/(?:\s|^):([A-Za-z0-9\-\+\*_]*)$/);
+ if (matches) {
if (this.previousQuery == matches[0]) {
return;
}
this.previousQuery = matches[0];
var query = SearchIndexManager.cleanSearchText(matches[1]);
- if (query.length) {
- var found = EmojiHelper.searchEmojis(query);
- if (found.length) {
- this.showEmojiSuggestions(found);
+ EmojiHelper.getPopularEmoji((function (popular) {
+ if (query.length) {
+ var found = EmojiHelper.searchEmojis(query);
+ if (found.length) {
+ var popularFound = [],
+ code, pos;
+ for (var i = 0, len = popular.length; i < len; i++) {
+ code = popular[i].code;
+ pos = found.indexOf(code);
+ if (pos >= 0) {
+ popularFound.push(code);
+ found.splice(pos, 1);
+ if (!found.length) {
+ break;
+ }
+ }
+ }
+ this.showEmojiSuggestions(popularFound.concat(found));
+ } else {
+ this.hideSuggestions();
+ }
} else {
- this.hideSuggestions();
+ this.showEmojiSuggestions(popular);
}
- } else {
- EmojiHelper.getPopularEmoji((function (found) {
- this.showEmojiSuggestions(found);
- }).bind(this));
- }
+ }).bind(this));
}
else {
delete this.previousQuery;
@@ -771,7 +799,9 @@ MessageComposer.prototype.getRichHtml = function (text) {
MessageComposer.prototype.focus = function () {
if (this.richTextareaEl) {
- setRichFocus(this.richTextareaEl[0]);
+ setZeroTimeout((function () {
+ setRichFocus(this.richTextareaEl[0]);
+ }).bind(this));
} else {
setFieldSelection(this.textareaEl[0]);
}