r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Improved emoji tooltip

Browse Source
This commit is contained in:
Igor Zhukov 2015-10-13 21:35:55 +02:00
parent a208dca350
commit ef3e608d49
5 changed files with 60 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/js/directives.js
View File

@ -1597,7 +1597,7 @@ angular.module('myApp.directives', ['myApp.filters'])
onContentLoaded(function () { onContentLoaded(function () {
composer.checkAutocomplete(true); composer.checkAutocomplete(true);
}); });
if (emojiTooltip) { if (emojiTooltip && Config.Mobile) {
emojiTooltip.hide(); emojiTooltip.hide();
} }
}); });

23
app/js/message_composer.js
View File

@ -180,7 +180,7 @@ EmojiTooltip.prototype.onMouseEnter = function (triggerShow) {
delete this.hideTimeout; delete this.hideTimeout;
} }
else if (triggerShow && !this.showTimeout) { 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; var self = this;
this.hideTimeout = setTimeout(function () { this.hideTimeout = setTimeout(function () {
self.hide(); self.hide();
}, 400); }, 600);
} }
else if (triggerUnshow && this.showTimeout) { else if (triggerUnshow && this.showTimeout) {
clearTimeout(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 class="composer_emoji_tooltip_content composer_emoji_tooltip_content_emoji clearfix"></div>\
</div>\ </div>\
<div class="composer_emoji_tooltip_categories">\ <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 active" data-category="0"><i class="composer_emoji_tooltip_category_recent"></i></a>\
<a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_smile" data-category="1"></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 composer_emoji_tooltip_category_flower" data-category="2"></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 composer_emoji_tooltip_category_bell" data-category="3"></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 composer_emoji_tooltip_category_car" data-category="4"></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 composer_emoji_tooltip_category_grid" data-category="5"></a>\ <a class="composer_emoji_tooltip_category" data-category="5"><i class="composer_emoji_tooltip_category_grid"></i></a>\
</div>\ </div>\
</div>\ </div>\
<div class="composer_emoji_tooltip_tab_stickers_content">\ <div class="composer_emoji_tooltip_tab_stickers_content">\
@ -449,7 +449,7 @@ EmojiTooltip.prototype.updateStickersContents = function (force) {
var scrollStickers = function () { var scrollStickers = function () {
var scrollTop = self.cat ? self.stickersetPositions[self.cat][0] : 0; 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) { if (!force && self.stickersetPositions.length) {
@ -477,7 +477,7 @@ EmojiTooltip.prototype.updateStickersContents = function (force) {
); );
} }
if (!set.id) { 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 { } else {
categoriesHtml.push('<a class="composer_sticker_btn" data-sticker="' + set.docIDs[0] + '" data-category="' + i + '"></a>'); 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 () { EmojiTooltip.prototype.hide = function () {
return;
if (this.tooltipEl) { if (this.tooltipEl) {
this.tooltipEl.removeClass('composer_emoji_tooltip_shown'); this.tooltipEl.removeClass('composer_emoji_tooltip_shown');
this.btnEl.removeClass('composer_emoji_insert_btn_on'); this.btnEl.removeClass('composer_emoji_insert_btn_on');
@ -1547,7 +1548,7 @@ Scroller.prototype.scrollTo = function (scrollTop, animation, cb) {
if (animation > 0) { if (animation > 0) {
var self = this; var self = this;
this.isAnimatedScroll = true; this.isAnimatedScroll = true;
this.scrollable.animate({scrollTop: scrollTop}, function () { this.scrollable.animate({scrollTop: scrollTop}, animation, function () {
delete self.isAnimatedScroll; delete self.isAnimatedScroll;
if (self.useNano) { if (self.useNano) {
$(self.scroller).nanoScroller({flash: true}); $(self.scroller).nanoScroller({flash: true});

57
app/less/app.less
View File

@ -2419,14 +2419,12 @@ img.img_fullsize {
-webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1); -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); -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); box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
padding-top: 2px;
// border-bottom: 1px solid #e5e5e5;
// border-color: rgba(0,0,0,0.1);
} }
.composer_emoji_tooltip_tab { .composer_emoji_tooltip_tab {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
line-height: 35px; line-height: 33px;
text-align: center; text-align: center;
width: 50%; width: 50%;
text-transform: uppercase; text-transform: uppercase;
@ -2468,14 +2466,15 @@ img.img_fullsize {
.composer_emoji_tooltip_tab_emoji_content & { .composer_emoji_tooltip_tab_emoji_content & {
width: 100%; width: 100%;
margin: 9px 0 12px; margin: 0 0 3px;
padding: 0 5px; padding: 0 5px;
line-height: 0; line-height: 0;
} }
.composer_emoji_tooltip_tab_stickers_content & { .composer_emoji_tooltip_tab_stickers_content & {
vertical-align: top; vertical-align: top;
padding: 2px 10px 2px; padding: 0 5px;
margin: 0 0 3px;
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
@ -2484,23 +2483,16 @@ img.img_fullsize {
display: none; display: none;
} }
.composer_emoji_tooltip_category_recent {
margin: 7px 10px 7px 7px;
}
.composer_sticker_btn { .composer_sticker_btn {
width: 42px; width: 36px;
height: 38px; height: 34px;
padding: 3px 5px; padding: 3px 4px;
vertical-align: top; vertical-align: top;
margin-right: 2px; margin: 4px 2px 0 0;
&.active {
background: #f2f6fa;
}
} }
.composer_sticker_image { .composer_sticker_image {
max-width: 32px; max-width: 28px;
max-height: 32px; max-height: 28px;
} }
} }
} }
@ -2509,13 +2501,10 @@ img.img_fullsize {
line-height: 0; line-height: 0;
color: white; color: white;
display: inline-block; display: inline-block;
width: 21px;
height: 21px;
cursor: pointer; cursor: pointer;
opacity: 0.3; opacity: 0.3;
margin: 0 12px 0 12px; padding: 9px 12px;
// margin: 0 12px 0 12px;
.image-2x('../img/icons/IconsetSmiles.png', 27px, 362px);
&:hover { &:hover {
opacity: 0.4; 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 */ /* Recent */
.composer_emoji_tooltip_category_recent {background-position: -3px 0; } .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 */ /* Smile */
.composer_emoji_tooltip_category_smile {background-position: -3px -62px; } .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 */ /* Flower */
.composer_emoji_tooltip_category_flower {background-position: -3px -124px; } .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 */ /* Bell */
.composer_emoji_tooltip_category_bell {background-position: -3px -184px; } .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 */ /* Car */
.composer_emoji_tooltip_category_car {background-position: -3px -245px; } .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 */ /* Grid */
.composer_emoji_tooltip_category_grid {background-position: -3px -304px; } .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 { .composer_emoji_tooltip_tabs_wrap {

10
app/less/desktop.less
View File

@ -500,6 +500,16 @@
} }
} }
@media (max-width: 940px) {
.composer_emoji_tooltip {
margin-left: -245px;
&_tail {
left: 90%;
}
}
}
.composer_dropdown_wrap .nano > .nano-pane { .composer_dropdown_wrap .nano > .nano-pane {
top: 3px; top: 3px;
bottom: 3px; bottom: 3px;

47
app/less/mobile.less
View File

@ -1442,50 +1442,23 @@ a.im_message_fwd_author {
.composer_emoji_tooltip { .composer_emoji_tooltip {
margin-left: 6px; margin-left: 6px;
margin-top: -170px; margin-top: -230px;
width: 262px;
z-index: 10000; 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 { .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; display: none;
} left: 18px;
.composer_sticker {
&_btn {
width: 80px;
height: 80px;
padding: 3px;
}
&_image {
max-width: 64px;
max-height: 64px;
}
} }
.composer_dropdown_wrap { .composer_dropdown_wrap {