diff --git a/app/js/directives.js b/app/js/directives.js index 0488f90f..e60b5923 100755 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1597,7 +1597,7 @@ angular.module('myApp.directives', ['myApp.filters']) onContentLoaded(function () { composer.checkAutocomplete(true); }); - if (emojiTooltip) { + if (emojiTooltip && Config.Mobile) { emojiTooltip.hide(); } }); diff --git a/app/js/message_composer.js b/app/js/message_composer.js index 8e7525e8..057a9eee 100644 --- a/app/js/message_composer.js +++ b/app/js/message_composer.js @@ -180,7 +180,7 @@ EmojiTooltip.prototype.onMouseEnter = function (triggerShow) { delete this.hideTimeout; } else if (triggerShow && !this.showTimeout) { - this.showTimeout = setTimeout(this.show.bind(this), 200); + this.showTimeout = setTimeout(this.show.bind(this), 100); } }; @@ -189,7 +189,7 @@ EmojiTooltip.prototype.onMouseLeave = function (triggerUnshow) { var self = this; this.hideTimeout = setTimeout(function () { self.hide(); - }, 400); + }, 600); } else if (triggerUnshow && this.showTimeout) { clearTimeout(this.showTimeout); @@ -218,12 +218,12 @@ EmojiTooltip.prototype.createTooltip = function () {
\ \
\ - \ - \ - \ - \ - \ - \ + \ + \ + \ + \ + \ + \
\ \
\ @@ -449,7 +449,7 @@ EmojiTooltip.prototype.updateStickersContents = function (force) { var scrollStickers = function () { var scrollTop = self.cat ? self.stickersetPositions[self.cat][0] : 0; - self.stickersScroller.scrollTo(scrollTop, force ? 0 : 100); + self.stickersScroller.scrollTo(scrollTop, force ? 0 : 200); } if (!force && self.stickersetPositions.length) { @@ -477,7 +477,7 @@ EmojiTooltip.prototype.updateStickersContents = function (force) { ); } if (!set.id) { - categoriesHtml.push(''); + categoriesHtml.push(''); } else { categoriesHtml.push(''); } @@ -602,6 +602,7 @@ EmojiTooltip.prototype.show = function () { }; EmojiTooltip.prototype.hide = function () { + return; if (this.tooltipEl) { this.tooltipEl.removeClass('composer_emoji_tooltip_shown'); this.btnEl.removeClass('composer_emoji_insert_btn_on'); @@ -1547,7 +1548,7 @@ Scroller.prototype.scrollTo = function (scrollTop, animation, cb) { if (animation > 0) { var self = this; this.isAnimatedScroll = true; - this.scrollable.animate({scrollTop: scrollTop}, function () { + this.scrollable.animate({scrollTop: scrollTop}, animation, function () { delete self.isAnimatedScroll; if (self.useNano) { $(self.scroller).nanoScroller({flash: true}); diff --git a/app/less/app.less b/app/less/app.less index 73f632df..8b97dc05 100644 --- a/app/less/app.less +++ b/app/less/app.less @@ -2419,14 +2419,12 @@ img.img_fullsize { -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1); box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1); - - // border-bottom: 1px solid #e5e5e5; - // border-color: rgba(0,0,0,0.1); + padding-top: 2px; } .composer_emoji_tooltip_tab { cursor: pointer; display: inline-block; - line-height: 35px; + line-height: 33px; text-align: center; width: 50%; text-transform: uppercase; @@ -2468,14 +2466,15 @@ img.img_fullsize { .composer_emoji_tooltip_tab_emoji_content & { width: 100%; - margin: 9px 0 12px; + margin: 0 0 3px; padding: 0 5px; line-height: 0; } .composer_emoji_tooltip_tab_stickers_content & { vertical-align: top; - padding: 2px 10px 2px; + padding: 0 5px; + margin: 0 0 3px; overflow-x: scroll; white-space: nowrap; position: relative; @@ -2484,23 +2483,16 @@ img.img_fullsize { display: none; } - .composer_emoji_tooltip_category_recent { - margin: 7px 10px 7px 7px; - } .composer_sticker_btn { - width: 42px; - height: 38px; - padding: 3px 5px; + width: 36px; + height: 34px; + padding: 3px 4px; vertical-align: top; - margin-right: 2px; - - &.active { - background: #f2f6fa; - } + margin: 4px 2px 0 0; } .composer_sticker_image { - max-width: 32px; - max-height: 32px; + max-width: 28px; + max-height: 28px; } } } @@ -2509,13 +2501,10 @@ img.img_fullsize { line-height: 0; color: white; display: inline-block; - width: 21px; - height: 21px; cursor: pointer; opacity: 0.3; - margin: 0 12px 0 12px; - - .image-2x('../img/icons/IconsetSmiles.png', 27px, 362px); + padding: 9px 12px; + // margin: 0 12px 0 12px; &:hover { opacity: 0.4; @@ -2526,29 +2515,37 @@ img.img_fullsize { } } +.composer_emoji_tooltip_category i { + display: inline-block; + width: 21px; + height: 21px; + + .image-2x('../img/icons/IconsetSmiles.png', 27px, 362px); +} + /* Recent */ .composer_emoji_tooltip_category_recent {background-position: -3px 0; } -.composer_emoji_tooltip_category_recent.active {background-position: -3px -31px; } +.active .composer_emoji_tooltip_category_recent {background-position: -3px -31px; } /* Smile */ .composer_emoji_tooltip_category_smile {background-position: -3px -62px; } -.composer_emoji_tooltip_category_smile.active {background-position: -3px -93px; } +.active .composer_emoji_tooltip_category_smile {background-position: -3px -93px; } /* Flower */ .composer_emoji_tooltip_category_flower {background-position: -3px -124px; } -.composer_emoji_tooltip_category_flower.active {background-position: -3px -155px; } +.active .composer_emoji_tooltip_category_flower {background-position: -3px -155px; } /* Bell */ .composer_emoji_tooltip_category_bell {background-position: -3px -184px; } -.composer_emoji_tooltip_category_bell.active {background-position: -3px -215px; } +.active .composer_emoji_tooltip_category_bell {background-position: -3px -215px; } /* Car */ .composer_emoji_tooltip_category_car {background-position: -3px -245px; } -.composer_emoji_tooltip_category_car.active {background-position: -3px -276px; } +.active .composer_emoji_tooltip_category_car {background-position: -3px -276px; } /* Grid */ .composer_emoji_tooltip_category_grid {background-position: -3px -304px; } -.composer_emoji_tooltip_category_grid.active {background-position: -3px -335px; } +.active .composer_emoji_tooltip_category_grid {background-position: -3px -335px; } .composer_emoji_tooltip_tabs_wrap { diff --git a/app/less/desktop.less b/app/less/desktop.less index 2be9acab..766dc106 100644 --- a/app/less/desktop.less +++ b/app/less/desktop.less @@ -500,6 +500,16 @@ } } +@media (max-width: 940px) { + .composer_emoji_tooltip { + margin-left: -245px; + + &_tail { + left: 90%; + } + } +} + .composer_dropdown_wrap .nano > .nano-pane { top: 3px; bottom: 3px; diff --git a/app/less/mobile.less b/app/less/mobile.less index fcc3f3c2..b5e2cdaf 100644 --- a/app/less/mobile.less +++ b/app/less/mobile.less @@ -1442,50 +1442,23 @@ a.im_message_fwd_author { .composer_emoji_tooltip { margin-left: 6px; - margin-top: -170px; - width: 262px; + margin-top: -230px; z-index: 10000; - padding: 5px 2px 5px 5px; - - - & &_content_wrap { - height: 106px; - } - - &_tabs { - margin-bottom: 3px; - } - - & &_content { - .composer_emoji_btn { - padding: 5px; - margin: -1px 0 0 -1px; - } - } - - &_tab { - margin: 0 5px; - } } .composer_emoji_tooltip .scroller_native_scrollable { - height: 106px; + height: 140px; } - -.icon-tooltip-tail { - display: none; +.composer_emoji_tooltip_tabs_wrap, +.composer_emoji_tooltip_tab_emoji_content, +.composer_emoji_tooltip_tab_stickers_content { + height: 182px; } -.composer_sticker { - &_btn { - width: 80px; - height: 80px; - padding: 3px; - } - &_image { - max-width: 64px; - max-height: 64px; - } + +.composer_emoji_tooltip_tail { + display: none; + left: 18px; } .composer_dropdown_wrap {