Improved emoji tooltip

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

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 () {
           <div class="composer_emoji_tooltip_content composer_emoji_tooltip_content_emoji clearfix"></div>\
         </div>\
         <div class="composer_emoji_tooltip_categories">\
-          <a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_recent active" data-category="0"></a>\
-          <a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_smile" data-category="1"></a>\
-          <a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_flower" data-category="2"></a>\
-          <a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_bell" data-category="3"></a>\
-          <a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_car" data-category="4"></a>\
-          <a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_grid" data-category="5"></a>\
+          <a class="composer_emoji_tooltip_category active" data-category="0"><i class="composer_emoji_tooltip_category_recent"></i></a>\
+          <a class="composer_emoji_tooltip_category" data-category="1"><i class="composer_emoji_tooltip_category_smile"></i></a>\
+          <a class="composer_emoji_tooltip_category" data-category="2"><i class="composer_emoji_tooltip_category_flower"></i></a>\
+          <a class="composer_emoji_tooltip_category" data-category="3"><i class="composer_emoji_tooltip_category_bell"></i></a>\
+          <a class="composer_emoji_tooltip_category" data-category="4"><i class="composer_emoji_tooltip_category_car"></i></a>\
+          <a class="composer_emoji_tooltip_category" data-category="5"><i class="composer_emoji_tooltip_category_grid"></i></a>\
         </div>\
       </div>\
       <div class="composer_emoji_tooltip_tab_stickers_content">\
@@ -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('<a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_recent" data-category="0"></a>');
+        categoriesHtml.push('<a class="composer_emoji_tooltip_category active" data-category="0"><i class="composer_emoji_tooltip_category_recent"></i></a>');
       } else {
         categoriesHtml.push('<a class="composer_sticker_btn" data-sticker="' + set.docIDs[0] + '" data-category="' + i + '"></a>');
       }
@@ -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});

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 {

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;

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 {