initial draft
This commit is contained in:
Igor Zhukov
parent
ed17c098de
commit
cb1ea18671
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 7.7 KiB |
@ -204,27 +204,26 @@ EmojiTooltip.prototype.createTooltip = function () {
|
||||
}
|
||||
|
||||
var self = this;
|
||||
this.tooltipEl = $('<div class="composer_emoji_tooltip noselect"><div class="composer_emoji_tooltip_tabs"></div><div class="composer_emoji_tooltip_content clearfix"></div><div class="composer_emoji_tooltip_footer"><a class="composer_emoji_tooltip_settings"></a></div><div class="composer_emoji_tooltip_tail"><i class="icon icon-tooltip-tail"></i></div></div>').appendTo(document.body);
|
||||
this.tooltipEl = $('<div class="composer_emoji_tooltip noselect"><div class="composer_emoji_tooltip_tabs"><a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_emoji">Emoji</a><a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_stickers">Stickers</a><div class="composer_emoji_tooltip_tab_shadow"></div></div><div class="composer_emoji_tooltip_content clearfix"></div><div class="composer_emoji_tooltip_categories"></div><div class="composer_emoji_tooltip_stickers_categories"></div><div class="composer_emoji_tooltip_tail"><i class="icon icon-tooltip-tail"></i></div></div>').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 = $('<a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_' + tabName + '"></a>')
|
||||
angular.forEach(['recent', 'smile', 'flower', 'bell', 'car', 'grid'], function (tabName, tabIndex) {
|
||||
var tab = $('<a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_' + tabName + '"></a>')
|
||||
.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');
|
||||
|
||||
@ -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 {
|
||||
width: 100%;
|
||||
margin: 5px 0 2px;
|
||||
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_tab {
|
||||
.composer_emoji_tooltip_categories {
|
||||
width: 100%;
|
||||
margin: 9px 0 4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user