From bb7b9342e299d711d7aa86f8212f43f8c4158d9c Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Fri, 6 Feb 2015 00:05:32 +0300 Subject: [PATCH] Improved emoji suggestions Added scroller to composer emoji tooltip --- app/css/app.css | 18 +++++++---- app/css/desktop.css | 4 +-- app/js/lib/utils.js | 7 ----- app/js/message_composer.js | 64 ++++++++++++++++++++++++++++---------- 4 files changed, 61 insertions(+), 32 deletions(-) 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]); }