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 = $('').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;