diff --git a/app/img/icons/IconsetSmiles.png b/app/img/icons/IconsetSmiles.png index 128f3608..7ee73406 100644 Binary files a/app/img/icons/IconsetSmiles.png and b/app/img/icons/IconsetSmiles.png differ diff --git a/app/img/icons/IconsetSmiles_2x.png b/app/img/icons/IconsetSmiles_2x.png index d6594207..b05da5ed 100644 Binary files a/app/img/icons/IconsetSmiles_2x.png and b/app/img/icons/IconsetSmiles_2x.png differ diff --git a/app/js/message_composer.js b/app/js/message_composer.js index c53d0469..b903a290 100644 --- a/app/js/message_composer.js +++ b/app/js/message_composer.js @@ -204,27 +204,26 @@ EmojiTooltip.prototype.createTooltip = function () { } var self = this; - this.tooltipEl = $('
').appendTo(document.body); + this.tooltipEl = $('
EmojiStickers
').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 = $('') + angular.forEach(['recent', 'smile', 'flower', 'bell', 'car', 'grid'], function (tabName, tabIndex) { + var tab = $('') .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'); diff --git a/app/less/app.less b/app/less/app.less index 99b15555..7ef51abd 100644 --- a/app/less/app.less +++ b/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;