Improved emoji tooltip
This commit is contained in:
Igor Zhukov
parent
a208dca350
commit
ef3e608d49
@ -1597,7 +1597,7 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
onContentLoaded(function () {
|
||||
composer.checkAutocomplete(true);
|
||||
});
|
||||
if (emojiTooltip) {
|
||||
if (emojiTooltip && Config.Mobile) {
|
||||
emojiTooltip.hide();
|
||||
}
|
||||
});
|
||||
|
||||
@ -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});
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
.composer_emoji_tooltip_tabs_wrap,
|
||||
.composer_emoji_tooltip_tab_emoji_content,
|
||||
.composer_emoji_tooltip_tab_stickers_content {
|
||||
height: 182px;
|
||||
}
|
||||
|
||||
.icon-tooltip-tail {
|
||||
|
||||
.composer_emoji_tooltip_tail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.composer_sticker {
|
||||
&_btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 3px;
|
||||
}
|
||||
&_image {
|
||||
max-width: 64px;
|
||||
max-height: 64px;
|
||||
}
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.composer_dropdown_wrap {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user