initial draft

app/js/message_composer.js

@@ -204,27 +204,26 @@ EmojiTooltip.prototype.createTooltip = function () {
   }
 
   var self = this;
-  this.tooltipEl = $('<div class="composer_emoji_tooltip noselect"><div class="composer_emoji_tooltip_tabs"></div><div class="composer_emoji_tooltip_content clearfix"></div><div class="composer_emoji_tooltip_footer"><a class="composer_emoji_tooltip_settings"></a></div><div class="composer_emoji_tooltip_tail"><i class="icon icon-tooltip-tail"></i></div></div>').appendTo(document.body);
+  this.tooltipEl = $('<div class="composer_emoji_tooltip noselect"><div class="composer_emoji_tooltip_tabs"><a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_emoji">Emoji</a><a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_stickers">Stickers</a><div class="composer_emoji_tooltip_tab_shadow"></div></div><div class="composer_emoji_tooltip_content clearfix"></div><div class="composer_emoji_tooltip_categories"></div><div class="composer_emoji_tooltip_stickers_categories"></div><div class="composer_emoji_tooltip_tail"><i class="icon icon-tooltip-tail"></i></div></div>').appendTo(document.body);
 
   this.tabsEl = $('.composer_emoji_tooltip_tabs', this.tooltipEl);
+  this.categoriesEl = $('.composer_emoji_tooltip_categories', this.tooltipEl);
   this.contentEl = $('.composer_emoji_tooltip_content', this.tooltipEl);
-  this.footerEl = $('.composer_emoji_tooltip_footer', this.tooltipEl);
-  this.settingsEl = $('.composer_emoji_tooltip_settings', this.tooltipEl);
 
-  angular.forEach(['recent', 'smile', 'flower', 'bell', 'car', 'grid', 'stickers'], function (tabName, tabIndex) {
-    var tab = $('<a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_' + tabName + '"></a>')
+  angular.forEach(['recent', 'smile', 'flower', 'bell', 'car', 'grid'], function (tabName, tabIndex) {
+    var tab = $('<a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_' + tabName + '"></a>')
       .on('mousedown', function (e) {
-        self.selectTab(tabIndex);
+        self.selectCategory(tabIndex);
         return cancelEvent(e);
       })
-      .appendTo(self.tabsEl);
+      .appendTo(self.categoriesEl);
 
     if (!Config.Navigator.touch) {
       tab.on('mouseenter mouseleave', function (e) {
-        clearTimeout(self.selectTabTimeout);
+        clearTimeout(self.selectCategoryTimeout);
         if (e.type == 'mouseenter') {
-          self.selectTabTimeout = setTimeout(function () {
-            self.selectTab(tabIndex);
+          self.selectCategoryTimeout = setTimeout(function () {
+            self.selectCategory(tabIndex);
           }, 300);
         }
       });
@@ -272,7 +271,7 @@ EmojiTooltip.prototype.createTooltip = function () {
     });
   }
 
-  this.selectTab(0);
+  this.selectCategory(0);
 
   $(window).on('resize', this.updatePosition.bind(this));
 
@@ -280,13 +279,13 @@ EmojiTooltip.prototype.createTooltip = function () {
 }
 
 
-EmojiTooltip.prototype.selectTab = function (tab) {
+EmojiTooltip.prototype.selectCategory = function (tab) {
   if (this.tab === tab && tab != 6) {
     return false;
   }
-  $('.active', this.tabsEl).removeClass('active');
+  $('.active', this.categoriesEl).removeClass('active');
   this.tab = tab;
-  $(this.tabsEl[0].childNodes[tab]).addClass('active');
+  $(this.categoriesEl[0].childNodes[tab]).addClass('active');
 
   this.updateTabContents();
 };
@@ -294,7 +293,7 @@ EmojiTooltip.prototype.selectTab = function (tab) {
 EmojiTooltip.prototype.updateTabContents = function () {
   var html = [];
   var self = this;
-  var iconSize = Config.Mobile ? 26 : 20;
+  var iconSize = 26;//Config.Mobile ? 26 : 20;
 
   var renderContent = function () {
     self.contentEl.html(html.join(''));
@@ -389,6 +388,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');

app/less/app.less

@@ -2370,7 +2370,7 @@ img.img_fullsize {
   display: none;
   position: absolute;
   z-index: 999;
-  width: 254px;
+  width: 284px;
   margin-left: -116px;
   margin-top: -245px;
 
@@ -2416,68 +2416,106 @@ img.img_fullsize {
 }
 
 .composer_emoji_tooltip_tabs {
+  border-bottom: 1px solid #e5e5e5;
+}
+.composer_emoji_tooltip_tab {
+  display: inline-block;
+  line-height: 36px;
+  text-align: center;
+  width: 50%;
+  text-transform: uppercase;
+  font-weight: bold;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+.composer_emoji_tooltip_tab_emoji,
+.composer_emoji_tooltip_tabs_stickers_active .composer_emoji_tooltip_tab_stickers {
+  color: #53a9ea;
+}
+.composer_emoji_tooltip_tabs_stickers_active .composer_emoji_tooltip_tab_emoji,
+.composer_emoji_tooltip_tab_stickers {
+  color: #999;
+}
+.composer_emoji_tooltip_tab_shadow {
+  width: 50%;
+  height: 2px;
+  background: #53a9ea;
+
+  .composer_emoji_tooltip_tabs_stickers_active & {
+    left: 50%;
+  }
+}
+
+.composer_emoji_tooltip_categories {
   width: 100%;
-  margin: 5px 0 2px;
+  margin: 9px 0 4px;
 }
 
-.composer_emoji_tooltip_tab {
+.composer_emoji_tooltip_category {
   line-height: 0;
   color: white;
   display: inline-block;
-  width: 24px;
-  height: 29px;
+  width: 21px;
+  height: 21px;
   cursor: pointer;
-  opacity: 0.7;
-  margin: 0 5px 0 4px;
+  opacity: 0.3;
+  margin: 0 12px 0 12px;
 
-  .image-2x('../img/icons/IconsetSmiles.png', 42px, 470px);
+  .image-2x('../img/icons/IconsetSmiles.png', 27px, 362px);
 
-  &.active {
+  &:hover {
+    opacity: 0.4;
+  }
+  &.active,
+  &.active:hover {
     opacity: 1;
   }
 }
 
 /* Recent */
-.composer_emoji_tooltip_tab_recent {background-position: -9px -306px; }
-.composer_emoji_tooltip_tab_recent.active {background-position: -9px -277px; }
+.composer_emoji_tooltip_category_recent {background-position: -3px 0; }
+.composer_emoji_tooltip_category_recent.active {background-position: -3px -31px; }
 
 /* Smile */
-.composer_emoji_tooltip_tab_smile {background-position: -9px -34px; }
-.composer_emoji_tooltip_tab_smile.active {background-position: -9px -5px; }
+.composer_emoji_tooltip_category_smile {background-position: -3px -62px; }
+.composer_emoji_tooltip_category_smile.active {background-position: -3px -93px; }
 
 /* Flower */
-.composer_emoji_tooltip_tab_flower {background-position: -9px -145px; }
-.composer_emoji_tooltip_tab_flower.active {background-position: -9px -118px; }
+.composer_emoji_tooltip_category_flower {background-position: -3px -124px; }
+.composer_emoji_tooltip_category_flower.active {background-position: -3px -155px; }
 
 /* Bell */
-.composer_emoji_tooltip_tab_bell {background-position: -9px -89px; }
-.composer_emoji_tooltip_tab_bell.active {background-position: -9px -61px; }
+.composer_emoji_tooltip_category_bell {background-position: -3px -186px; }
+.composer_emoji_tooltip_category_bell.active {background-position: -3px -217px; }
 
 /* Car */
-.composer_emoji_tooltip_tab_car {background-position: -9px -196px; }
-.composer_emoji_tooltip_tab_car.active {background-position: -9px -170px; }
+.composer_emoji_tooltip_category_car {background-position: -3px -245px; }
+.composer_emoji_tooltip_category_car.active {background-position: -3px -276px; }
 
 /* Grid */
-.composer_emoji_tooltip_tab_grid {background-position: -9px -248px; }
-.composer_emoji_tooltip_tab_grid.active {background-position: -9px -222px; }
+.composer_emoji_tooltip_category_grid {background-position: -3px -304px; }
+.composer_emoji_tooltip_category_grid.active {background-position: -3px -335px; }
 
-/* Stickers */
-.composer_emoji_tooltip_tab_stickers {background-position: -9px -361px; }
-.composer_emoji_tooltip_tab_stickers.active {background-position: -9px -333px; }
 
 .composer_emoji_tooltip .scroller_scrollable_container {
-  height: 174px;
+  height: 233px;
   position: relative;
 }
 
 .composer_emoji_tooltip_content {
+  padding-top: 10px;
   padding-right: 8px;
   outline: 0!important;
 }
 
 a.composer_emoji_btn {
   margin: 0 1px 0 0;
-  padding: 6px;
+  padding: 5px;
   display: block;
   float: left;
   border-radius: 2px;