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

initial draft

master
Igor Zhukov 9 years ago
parent
ed17c098de
commit
cb1ea18671
4 changed files with 79 additions and 41 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. BIN
      app/img/icons/IconsetSmiles.png
  2. BIN
      app/img/icons/IconsetSmiles_2x.png
  3. 30
      app/js/message_composer.js
  4. 90
      app/less/app.less

BIN
app/img/icons/IconsetSmiles.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
app/img/icons/IconsetSmiles_2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

30
app/js/message_composer.js
Unescape View File

@ -204,27 +204,26 @@ EmojiTooltip.prototype.createTooltip = function () {
} }
var self = this; 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.tabsEl = $('.composer_emoji_tooltip_tabs', this.tooltipEl);
this.categoriesEl = $('.composer_emoji_tooltip_categories', this.tooltipEl);
this.contentEl = $('.composer_emoji_tooltip_content', 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) { angular.forEach(['recent', 'smile', 'flower', 'bell', 'car', 'grid'], function (tabName, tabIndex) {
var tab = $('<a class="composer_emoji_tooltip_tab composer_emoji_tooltip_tab_' + tabName + '"></a>') var tab = $('<a class="composer_emoji_tooltip_category composer_emoji_tooltip_category_' + tabName + '"></a>')
.on('mousedown', function (e) { .on('mousedown', function (e) {
self.selectTab(tabIndex); self.selectCategory(tabIndex);
return cancelEvent(e); return cancelEvent(e);
}) })
.appendTo(self.tabsEl); .appendTo(self.categoriesEl);
if (!Config.Navigator.touch) { if (!Config.Navigator.touch) {
tab.on('mouseenter mouseleave', function (e) { tab.on('mouseenter mouseleave', function (e) {
clearTimeout(self.selectTabTimeout); clearTimeout(self.selectCategoryTimeout);
if (e.type == 'mouseenter') { if (e.type == 'mouseenter') {
self.selectTabTimeout = setTimeout(function () { self.selectCategoryTimeout = setTimeout(function () {
self.selectTab(tabIndex); self.selectCategory(tabIndex);
}, 300); }, 300);
} }
}); });
@ -272,7 +271,7 @@ EmojiTooltip.prototype.createTooltip = function () {
}); });
} }
this.selectTab(0); this.selectCategory(0);
$(window).on('resize', this.updatePosition.bind(this)); $(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) { if (this.tab === tab && tab != 6) {
return false; return false;
} }
$('.active', this.tabsEl).removeClass('active'); $('.active', this.categoriesEl).removeClass('active');
this.tab = tab; this.tab = tab;
$(this.tabsEl[0].childNodes[tab]).addClass('active'); $(this.categoriesEl[0].childNodes[tab]).addClass('active');
this.updateTabContents(); this.updateTabContents();
}; };
@ -294,7 +293,7 @@ EmojiTooltip.prototype.selectTab = function (tab) {
EmojiTooltip.prototype.updateTabContents = function () { EmojiTooltip.prototype.updateTabContents = function () {
var html = []; var html = [];
var self = this; var self = this;
var iconSize = Config.Mobile ? 26 : 20; var iconSize = 26;//Config.Mobile ? 26 : 20;
var renderContent = function () { var renderContent = function () {
self.contentEl.html(html.join('')); self.contentEl.html(html.join(''));
@ -389,6 +388,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');

90
app/less/app.less
Unescape View File

@ -2370,7 +2370,7 @@ img.img_fullsize {
display: none; display: none;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
width: 254px; width: 284px;
margin-left: -116px; margin-left: -116px;
margin-top: -245px; margin-top: -245px;
@ -2416,68 +2416,106 @@ img.img_fullsize {
} }
.composer_emoji_tooltip_tabs { .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%; width: 100%;
margin: 5px 0 2px; margin: 9px 0 4px;
} }
.composer_emoji_tooltip_tab { .composer_emoji_tooltip_category {
line-height: 0; line-height: 0;
color: white; color: white;
display: inline-block; display: inline-block;
width: 24px; width: 21px;
height: 29px; height: 21px;
cursor: pointer; cursor: pointer;
opacity: 0.7; opacity: 0.3;
margin: 0 5px 0 4px; 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; opacity: 1;
} }
} }
/* Recent */ /* Recent */
.composer_emoji_tooltip_tab_recent {background-position: -9px -306px; } .composer_emoji_tooltip_category_recent {background-position: -3px 0; }
.composer_emoji_tooltip_tab_recent.active {background-position: -9px -277px; } .composer_emoji_tooltip_category_recent.active {background-position: -3px -31px; }
/* Smile */ /* Smile */
.composer_emoji_tooltip_tab_smile {background-position: -9px -34px; } .composer_emoji_tooltip_category_smile {background-position: -3px -62px; }
.composer_emoji_tooltip_tab_smile.active {background-position: -9px -5px; } .composer_emoji_tooltip_category_smile.active {background-position: -3px -93px; }
/* Flower */ /* Flower */
.composer_emoji_tooltip_tab_flower {background-position: -9px -145px; } .composer_emoji_tooltip_category_flower {background-position: -3px -124px; }
.composer_emoji_tooltip_tab_flower.active {background-position: -9px -118px; } .composer_emoji_tooltip_category_flower.active {background-position: -3px -155px; }
/* Bell */ /* Bell */
.composer_emoji_tooltip_tab_bell {background-position: -9px -89px; } .composer_emoji_tooltip_category_bell {background-position: -3px -186px; }
.composer_emoji_tooltip_tab_bell.active {background-position: -9px -61px; } .composer_emoji_tooltip_category_bell.active {background-position: -3px -217px; }
/* Car */ /* Car */
.composer_emoji_tooltip_tab_car {background-position: -9px -196px; } .composer_emoji_tooltip_category_car {background-position: -3px -245px; }
.composer_emoji_tooltip_tab_car.active {background-position: -9px -170px; } .composer_emoji_tooltip_category_car.active {background-position: -3px -276px; }
/* Grid */ /* Grid */
.composer_emoji_tooltip_tab_grid {background-position: -9px -248px; } .composer_emoji_tooltip_category_grid {background-position: -3px -304px; }
.composer_emoji_tooltip_tab_grid.active {background-position: -9px -222px; } .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 { .composer_emoji_tooltip .scroller_scrollable_container {
height: 174px; height: 233px;
position: relative; position: relative;
} }
.composer_emoji_tooltip_content { .composer_emoji_tooltip_content {
padding-top: 10px;
padding-right: 8px; padding-right: 8px;
outline: 0!important; outline: 0!important;
} }
a.composer_emoji_btn { a.composer_emoji_btn {
margin: 0 1px 0 0; margin: 0 1px 0 0;
padding: 6px; padding: 5px;
display: block; display: block;
float: left; float: left;
border-radius: 2px; border-radius: 2px;

Write Preview
Loading…
Cancel
Save