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

Improved emoji tooltip

master
Igor Zhukov 9 years ago
parent
a208dca350
commit
ef3e608d49
5 changed files with 60 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/js/directives.js
  2. 23
      app/js/message_composer.js
  3. 57
      app/less/app.less
  4. 10
      app/less/desktop.less
  5. 45
      app/less/mobile.less

2
app/js/directives.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

45
app/less/mobile.less
Unescape 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 { .composer_emoji_tooltip .scroller_native_scrollable {
margin: 0 5px; height: 140px;
} }
.composer_emoji_tooltip_tabs_wrap,
.composer_emoji_tooltip_tab_emoji_content,
.composer_emoji_tooltip_tab_stickers_content {
height: 182px;
} }
.composer_emoji_tooltip .scroller_native_scrollable {
height: 106px;
}
.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 {

Write Preview
Loading…
Cancel
Save