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

Improved mobile scrollers

Browse Source
This commit is contained in:
Igor Zhukov 2014-09-15 23:24:19 +04:00
parent 6679bb3811
commit 5880113b70
12 changed files with 294 additions and 476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/css/app.css
View File

@ -231,12 +231,6 @@ input[type="number"] {
line-height: 20px;
}
.navbar-peer-wrap {
display: none;
}
.navbar-toggle-wrap {
display: none;
}
.tg_page_head .navbar-menu .navbar-nav.navbar-right {
margin-right: 0;
}
@ -825,29 +819,7 @@ a.tg_radio_on:hover i.icon-radio {
}
.im_dialogs_col .nano > .nano-pane {
background : rgba(0,0,0,0.0);
width : 12px;
right: 0px;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
/*-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
transition : .2s;*/
-webkit-transition : none;
-moz-transition : none;
-o-transition : none;
transition : none;
}
.im_dialogs_col .nano > .nano-pane > .nano-slider {
background: #A5B1B9;
margin: 0 5px;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
}
.im_dialogs_panel {
padding: 12px 12px 6px;
@ -1190,7 +1162,10 @@ a.im_dialog_selected .im_dialog_date {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.im_history_to_bottom {
overflow: hidden;
position: relative;
}
.im_history_to_bottom .im_history_scrollable {
position: absolute;
bottom: 0;
@ -1892,10 +1867,6 @@ textarea.im_message_field {
background-position: -10px -36px;
opacity: 1;
}
.im_head_attach {
display: none;
}
.im_attach_input,
.im_media_attach_input {
cursor: pointer;
@ -2358,16 +2329,6 @@ img.chat_modal_participant_photo {
}
.emoji-menu .nano > .nano-pane {
background : rgba(255,255,255,0.0);
right: -2px;
}
.emoji-menu .nano > .nano-pane > .nano-slider {
background: #d1d1d1;
margin: 0 3px 0 4px;
}
.error_modal_window .modal-dialog {
max-width: 350px;
}
@ -2727,11 +2688,7 @@ a:hover .icon-twitter {
opacity: 1;
}
.contacts_modal_col {
margin-right: -17px;
}
.contacts_scrollable_wrap {
padding: 0 17px 0 0;
outline: none ! important;
}
.contacts_modal_contacts_empty {
@ -3206,27 +3163,6 @@ ce671b orange
padding: 14px 0;
}
.countries_modal_col .nano > .nano-pane {
background : rgba(3,36,64,0.08);
width : 3px;
right: 6px;
top: 0;
-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
transition : .2s;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
}
.countries_modal_col .nano > .nano-pane > .nano-slider {
background : rgba(3,46,79,0.22);
margin: 0;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
}
.countries_scrollable_wrap a.countries_modal_country {
clear: both;

60
app/css/desktop.css
View File

@ -54,6 +54,36 @@
opacity : 0.99;
}
.emoji-menu .nano > .nano-pane {
background : rgba(255,255,255,0.0);
right: -2px;
}
.emoji-menu .nano > .nano-pane > .nano-slider {
background: #d1d1d1;
margin: 0 3px 0 4px;
}
.countries_modal_col .nano > .nano-pane {
background : rgba(3,36,64,0.08);
width : 3px;
right: 6px;
top: 0;
-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
transition : .2s;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
}
.countries_modal_col .nano > .nano-pane > .nano-slider {
background : rgba(3,46,79,0.22);
margin: 0;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
}
.im_page_wrap {
@ -99,6 +129,29 @@
.im_dialogs_scrollable_wrap {
padding: 0 19px 0 12px;
}
.im_dialogs_col .nano > .nano-pane {
background : rgba(0,0,0,0.0);
width : 12px;
right: 0px;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
/*-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
transition : .2s;*/
-webkit-transition : none;
-moz-transition : none;
-o-transition : none;
transition : none;
}
.im_dialogs_col .nano > .nano-pane > .nano-slider {
background: #A5B1B9;
margin: 0 5px;
-moz-border-radius : 0;
-webkit-border-radius : 0;
border-radius : 0;
}
.im_history_col_wrap {
float: left;
@ -124,7 +177,6 @@
-o-transition : none;
transition : none;
}
.contacts_modal_col .nano > .nano-pane {
width: 6px;
right: 7px;
@ -137,6 +189,12 @@
.im_dialogs_modal_col .im_dialogs_scrollable_wrap {
padding: 0 12px 0 12px;
}
.contacts_modal_col {
margin-right: -17px;
}
.contacts_scrollable_wrap {
padding: 0 17px 0 0;
}
.im_history_col .nano > .nano-pane {
top: 10px;

81
app/css/mobile.css
View File

@ -38,7 +38,7 @@ html {
}
.tg_page_head .navbar-inverse .navbar-toggle:hover,
.tg_page_head .navbar-inverse .navbar-toggle:active,
/*.tg_page_head .navbar-inverse .navbar-toggle:active,*/
.tg_page_head .navbar-inverse .navbar-toggle:focus,
.tg_page_head .navbar-inverse .open .navbar-toggle {
background-color: rgba(0,0,0,0.1);
@ -158,8 +158,8 @@ html {
font-size: 13px;
height: 46px;
}
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover,
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active {
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover/*,
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active*/ {
background-color: rgba(0,0,0,0.1);
}
.navbar-quick-nav .icon-back {
@ -281,6 +281,12 @@ html {
text-align: center;
}
.mobile_scrollable_wrap {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.login_form_wrap {
border-radius: 0;
@ -506,10 +512,10 @@ img.im_message_video_thumb,
.im_send_panel_wrap {
padding: 10px 0 12px;
}
.im_history_scrollable_wrap {
.im_history_scrollable_wrap.im_history_to_bottom {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
}
.im_history {
position: static;
@ -746,19 +752,6 @@ a.im_message_from_photo {
padding: 5px 0;
margin: 0;
}
.im_history_col .nano > .nano-pane {
top: 3px;
right: 3px;
width: 6px;
}
.im_history_col .nano > .nano-pane > .nano-slider,
.contacts_modal_col .nano > .nano-pane > .nano-slider,
.im_dialogs_modal_col .nano > .nano-pane > .nano-slider {
background : rgba(3,46,79,0.22);
border-radius: 3px;
margin: 0;
}
.im_dialogs_col_wrap {
@ -783,9 +776,6 @@ a.im_message_from_photo {
.im_dialogs_col {
}
.im_dialogs_scrollable_wrap {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.im_dialogs_panel {
@ -1196,58 +1186,17 @@ a.mobile_modal_action .tg_checkbox_label {
padding: 5px;
}
.im_head_attach {
display: block;
float: right;
cursor: pointer;
overflow: hidden;
position: relative;
margin: 5px 0 5px 5px;
height: 34px;
border-radius: 4px;
padding: 3px 7px;
border: 1px solid #497495;
}
.navbar_peer_not_selected .im_head_attach {
display: none;
}
.im_head_attach:active {
background-color: rgba(255,255,255,0.1);
}
.im_head_attach .icon-paperclip {
display: inline-block;
width: 21px;
height: 22px;
vertical-align: text-top;
opacity: 0.8;
background: url(../img/icons/MobileIcons_2x.png) 0 -30px no-repeat;
background-size: 21px 52px;
}
.is_1x .im_head_attach .icon-paperclip {
background-image: url(../img/icons/MobileIcons_1x.png);
}
.im_head_attach:active .icon-paperclip {
opacity: 1;
}
.contacts_modal_search {
padding: 3px 0 12px;
}
.contacts_modal_col {
margin-right: -12px;
}
.contacts_scrollable_wrap {
padding-right: 12px;
}
.contacts_modal_col .nano > .nano-pane {
width: 6px;
right: 5px;
margin: 0 -9px;
}
.contacts_modal_members_list a.contacts_modal_contact {
padding: 8px 0;
padding: 8px 9px;
border-radius: 0;
border-bottom: 1px solid #e0e0e0;
border-bottom: 1px solid #eee;
}
.contacts_modal_members_list li.contacts_modal_contact_wrap {
margin: 0;

194
app/js/directives_mobile.js
View File

@ -89,7 +89,7 @@ angular.module('myApp.directives')
}
$(element).css({
height: $($window).height() -
(headWrap ? headWrap.offsetHeight : 44) -
(headWrap ? headWrap.offsetHeight : 46) -
(panelWrap ? panelWrap.offsetHeight : 58) -
parseInt($(dialogsColWrap).css('paddingBottom') || 0)
});
@ -112,10 +112,8 @@ angular.module('myApp.directives')
function link ($scope, element, attrs) {
var historyWrap = $('.im_history_wrap', element)[0],
historyMessagesEl = $('.im_history_messages', element)[0],
historyEl = $('.im_history', element)[0],
scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
scrollable = $('.im_history_scrollable', element)[0],
panelWrap = $('.im_history_panel_wrap', element)[0],
bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0],
sendFormWrap = $('.im_send_form_wrap', element)[0],
headWrap = $('.tg_page_head')[0],
@ -127,82 +125,58 @@ angular.module('myApp.directives')
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
});
var transform = false,
trs = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
i;
for (i = 0; i < trs.length; i++) {
if (trs[i] in historyMessagesEl.style) {
transform = trs[i];
break;
}
}
var animated = transform ? true : false,
curAnimation = false;
$scope.$on('ui_history_append_new', function (e, options) {
if (!atBottom && !options.my) {
return;
}
var curAnimated = animated &&
!$rootScope.idle.isIDLE &&
historyMessagesEl.clientHeight > 0,
wasH;
if (curAnimated) {
wasH = scrollableWrap.scrollHeight;
} else {
$(scrollable).css({bottom: 0});
$(scrollableWrap).addClass('im_history_to_bottom');
}
var pr = parseInt($(scrollableWrap).css('paddingRight'))
$(scrollableWrap).addClass('im_history_to_bottom');
$(scrollable).css({bottom: 0, marginLeft: -Math.ceil(pr / 2)});
onContentLoaded(function () {
if (curAnimated) {
curAnimation = true;
$(historyMessagesEl).removeClass('im_history_appending');
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
$(historyMessagesEl).css(transform, 'translate(0px, ' + (scrollableWrap.scrollHeight - wasH) + 'px)');
var styles = {};
styles[transform] = 'translate(0px, 0px)';
$(historyMessagesEl).addClass('im_history_appending');
$transition($(historyMessagesEl), styles).then(function () {
curAnimation = false;
$(historyMessagesEl).removeClass('im_history_appending');
updateBottomizer();
});
} else {
$(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: ''});
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateBottomizer();
}
$(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: '', marginLeft: ''});
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateBottomizer();
});
});
function changeScroll () {
var unreadSplit, focusMessage;
// console.trace('change scroll');
if (focusMessage = $('.im_message_focus:visible', scrollableWrap)[0]) {
scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - Math.floor(scrollableWrap.clientHeight / 2) + 26);
var ch = scrollableWrap.clientHeight,
st = scrollableWrap.scrollTop,
ot = focusMessage.offsetTop,
h = focusMessage.clientHeight;
if (!st || st + ch < ot || st > ot + h) {
scrollableWrap.scrollTop = Math.max(0, ot - Math.floor(ch / 2) + 26);
}
atBottom = false;
} else if (unreadSplit = $('.im_message_unread_split:visible', scrollableWrap)[0]) {
// console.log('change scroll unread', unreadSplit.offsetTop);
scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);
atBottom = false;
} else {
// console.log('change scroll bottom');
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
atBottom = true;
}
$timeout(function () {
$(scrollableWrap).trigger('scroll');
scrollTopInitial = scrollableWrap.scrollTop;
});
};
$scope.$on('ui_history_change', function () {
var pr = parseInt($(scrollableWrap).css('paddingRight'))
$(scrollableWrap).addClass('im_history_to_bottom');
$(scrollable).css({bottom: 0});
$(scrollable).css({bottom: 0, marginLeft: -Math.ceil(pr / 2)});
onContentLoaded(function () {
$(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: ''});
$(scrollable).css({bottom: '', marginLeft: ''});
updateSizes(true);
moreNotified = false;
lessNotified = false;
@ -227,14 +201,18 @@ angular.module('myApp.directives')
pr = parseInt($(scrollableWrap).css('paddingRight')),
ch = scrollableWrap.clientHeight;
$(scrollable).css({marginBottom: -(sh - st - ch - 4), marginLeft: -Math.ceil(pr / 2)});
$(scrollableWrap).addClass('im_history_to_bottom');
scrollableWrap.scrollHeight; // Some strange Chrome bug workaround
$(scrollable).css({bottom: -(sh - st - ch), marginLeft: -Math.ceil(pr / 2)});
var upd = function () {
$(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: '', marginLeft: ''});
scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh;
$(scrollable).css({marginBottom: '', marginLeft: ''});
if (scrollTopInitial >= 0) {
changeScroll();
} else {
scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh;
}
updateBottomizer();
moreNotified = false;
@ -259,6 +237,10 @@ angular.module('myApp.directives')
updateBottomizer();
lessNotified = false;
if (scrollTopInitial >= 0) {
changeScroll();
}
$timeout(function () {
if (scrollableWrap.scrollHeight != sh) {
$(scrollableWrap).trigger('scroll');
@ -293,23 +275,26 @@ angular.module('myApp.directives')
$scope.$on('ui_editor_resize', updateSizes);
$scope.$on('ui_height', function () {
onContentLoaded(updateSizes);
// updateSizes();
});
var atBottom = true;
var atBottom = true,
scrollTopInitial = -1;
$(scrollableWrap).on('scroll', function (e) {
if (!element.is(':visible') ||
$(scrollableWrap).hasClass('im_history_to_bottom') ||
curAnimation) {
$(scrollableWrap).hasClass('im_history_to_bottom')) {
return;
}
atBottom = scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight;
var st = scrollableWrap.scrollTop;
atBottom = st >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight;
if (scrollTopInitial >= 0 && scrollTopInitial != st) {
scrollTopInitial = -1;
}
if (!moreNotified && scrollableWrap.scrollTop <= 300) {
if (!moreNotified && st <= 300) {
moreNotified = true;
$scope.$emit('history_need_more');
}
else if (!lessNotified && scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
else if (!lessNotified && st >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
lessNotified = true;
$scope.$emit('history_need_less');
}
@ -328,7 +313,7 @@ angular.module('myApp.directives')
if (!headWrap || !headWrap.offsetHeight) {
headWrap = $('.tg_page_head')[0];
}
var historyH = $($window).height() - panelWrap.offsetHeight - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44);
var historyH = $($window).height() - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 46);
$(historyWrap).css({
height: historyH
});
@ -345,11 +330,11 @@ angular.module('myApp.directives')
}
function updateBottomizer () {
return;
$(historyMessagesEl).css({marginTop: 0});
var marginTop = scrollableWrap.offsetHeight
- historyMessagesEl.offsetHeight
- 20
- (Config.Mobile ? 0 : 49);
- 20;
if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) {
$(historyMessagesEl).css({marginTop: marginTop});
@ -362,4 +347,87 @@ angular.module('myApp.directives')
onContentLoaded(updateSizes);
}
})
.directive('myContactsListMobile', function($window, $timeout) {
return {
link: link
};
function link ($scope, element, attrs) {
var searchWrap = $('.contacts_modal_search')[0],
panelWrap = $('.contacts_modal_panel')[0];
function updateSizes () {
$(element).css({
height: $($window).height() -
(panelWrap && panelWrap.offsetHeight || 0) -
(searchWrap && searchWrap.offsetHeight || 0) -
64
});
}
$($window).on('resize', updateSizes);
$scope.$on('contacts_change', function () {
onContentLoaded(updateSizes)
});
onContentLoaded(updateSizes);
};
})
.directive('myCountriesListMobile', function($window, $timeout) {
return {
link: link
};
function link ($scope, element, attrs) {
var searchWrap = $('.countries_modal_search')[0],
panelWrap = $('.countries_modal_panel')[0];
function updateSizes () {
$(element).css({
height: $($window).height()
- (panelWrap && panelWrap.offsetHeight || 0)
- (searchWrap && searchWrap.offsetHeight || 0)
- (46 + 18)
});
}
$($window).on('resize', updateSizes);
onContentLoaded(updateSizes);
};
})
.directive('myInfiniteScrollerMobile', function () {
return {
link: link,
scope: true
};
function link($scope, element, attrs) {
var scrollableWrap = element[0],
moreNotified = false;
$(scrollableWrap).on('scroll', function (e) {
if (!element.is(':visible')) return;
if (!moreNotified &&
scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
moreNotified = true;
$scope.$apply(function () {
$scope.slice.limit += ($scope.slice.limitDelta || 20);
});
onContentLoaded(function () {
moreNotified = false;
});
}
});
};
})

104
app/partials/desktop/head.html
View File

@ -2,112 +2,8 @@
<div class="navbar navbar-static-top navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline, navbar_history_select: historyState.selectActions}">
<div class="container">
<a class="navbar-peer-wrap" ng-click="showPeerInfo()">
<img
my-load-thumb
watch="true"
thumb="historyPeer.photo"
/>
</a>
<div class="navbar-toggle-wrap dropdown">
<a class="dropdown-toggle navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul ng-if="!curDialog.peer &amp;&amp; isLoggedIn" class="dropdown-menu">
<li><a ng-click="openGroup()">New Group</a></li>
<li><a ng-click="importContact()">New Contact</a></li>
<li><a ng-click="openContacts()">Contacts</a></li>
<li><a ng-click="openSettings()">Settings</a></li>
<li><a ng-click="logOut()">Log Out</a></li>
</ul>
<ul ng-if="curDialog.peer &amp;&amp; isLoggedIn" class="dropdown-menu">
<li><a ng-click="toggleEdit()">Edit messages</a></li>
<li ng-if="!historyFilter.mediaType" class="divider"></li>
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('photos')">Photos</a></li>
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('video')">Videos</a></li>
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('documents')">Documents</a></li>
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')">Voice notes</a></li>
</ul>
<ul ng-if="!isLoggedIn" class="dropdown-menu">
<li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
</ul>
</div>
<a ng-if="isLoggedIn" class="navbar-search-wrap" ng-click="toggleSearch()">
<i class="icon-search"></i>
</a>
<div class="navbar-header">
<a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a>
<div ng-show="curDialog.peer" ng-switch="curDialog.peer &amp;&amp; historyFilter.mediaType.length > 0">
<ul ng-switch-when="true" class="nav navbar-nav navbar-quick-nav">
<li>
<a ng-click="toggleMedia()" class="navbar-quick-media-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title" ng-switch="historyFilter.mediaType">
<h4 ng-switch-when="photos">Photos</h4>
<h4 ng-switch-when="video">Videos</h4>
<h4 ng-switch-when="documents">Documents</h4>
<h4 ng-switch-when="audio">Voice messages</h4>
</div>
</a>
</li>
</ul>
<div ng-switch-default ng-switch="historyState.selectActions">
<ul ng-switch-when="true" class="nav navbar-navbar navbar-quick-nav navbar-history-edit">
<li class="navbar-quick-right">
<a ng-click="toggleEdit()">Cancel</a>
</li>
<li class="navbar-quick-left">
<a ng-click="selectedFlush()">Clear All</a>
</li>
<li class="navbar-quick-title">Edit</li>
</ul>
<ul ng-switch-default class="nav navbar-nav navbar-quick-nav" ng-switch="historyPeer.id > 0">
<li ng-switch-when="true">
<a href="#/im" class="navbar-quick-profile-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title">
<h4 ng-bind-html="historyPeer.data.rFullName"></h4>
<small ng-switch="historyState.typing.length">
<span ng-switch-when="1" class="status_online">
typing<span my-loading-dots></span>
</span>
<span ng-switch-default my-user-status="historyPeer.id"></span>
</small>
</div>
</a>
</li>
<li ng-switch-default>
<a href="#/im" class="navbar-quick-group-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title">
<h4 ng-bind-html="historyPeer.data.rTitle"></h4>
<small ng-switch="historyState.typing.length">
<ng-pluralize ng-switch-when="0" count="historyPeer.data.participants_count"
when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
</ng-pluralize>
<span ng-switch-when="1" class="status_online">
<span my-user-link="historyState.typing[0]" short="true"></span> is typing<span my-loading-dots></span>
</span>
<span ng-switch-when="2" class="status_online">
<span my-user-link="historyState.typing[0]" short="true"></span>, <span my-user-link="historyState.typing[1]" short="true"></span><span my-loading-dots></span>
</span>
<span ng-switch-default class="status_online">
<span my-user-link="historyState.typing[0]" short="true"></span>+{{historyState.typing.length - 1}}<span my-loading-dots></span>
</span>
</small>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar-menu" ng-switch="offline">

30
app/partials/mobile/contacts_modal.html
View File

@ -48,30 +48,22 @@
</div>
<div my-contacts-list class="contacts_modal_col">
<div class="contacts_modal_col contacts_wrap contacts_scrollable_wrap mobile_scrollable_wrap" my-contacts-list-mobile my-infinite-scroller-mobile>
<ul class="contacts_modal_members_list nav nav-pills nav-stacked">
<div class="contacts_wrap nano" my-infinite-scroller>
<div class="contacts_scrollable_wrap nano-content">
<li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
<a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)">
<ul class="contacts_modal_members_list nav nav-pills nav-stacked">
<i ng-if="multiSelect" class="icon icon-contact-tick"></i>
<li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
<a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)">
<div class="contacts_modal_contact_photo pull-left" my-user-photolink="contact.userID" status="true" img-class="contacts_modal_contact_photo"></div>
<div class="contacts_modal_contact_name" ng-bind-html="contact.user.rFullName"></div>
<div class="contacts_modal_contact_status" my-user-status="::contact.userID"></div>
<i ng-if="multiSelect" class="icon icon-contact-tick"></i>
<div class="contacts_modal_contact_photo pull-left" my-user-photolink="contact.userID" status="true" img-class="contacts_modal_contact_photo"></div>
<div class="contacts_modal_contact_name" ng-bind-html="contact.user.rFullName"></div>
<div class="contacts_modal_contact_status" my-user-status="::contact.userID"></div>
</a>
</li>
</ul>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>

26
app/partials/mobile/country_select_modal.html
View File

@ -30,25 +30,17 @@
<a class="countries_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
</div>
<div class="countries_modal_col" my-countries-list>
<div class="countries_modal_col countries_wrap countries_scrollable_wrap" my-countries-list-mobile my-infinite-scroller-mobile>
<ul class="countries_modal_members_list nav nav-pills nav-stacked">
<div class="countries_wrap nano" my-infinite-scroller>
<div class="countries_scrollable_wrap nano-content">
<ul class="countries_modal_members_list nav nav-pills nav-stacked">
<li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
<a class="countries_modal_country" ng-click="$close(country)">
<span class="countries_modal_country_code pull-right" ng-bind="country.code"></span>
<span class="countries_modal_country_name" ng-bind="country.name"></span>
</a>
</li>
</ul>
</div>
</div>
<li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
<a class="countries_modal_country" ng-click="$close(country)">
<span class="countries_modal_country_code pull-right" ng-bind="country.code"></span>
<span class="countries_modal_country_name" ng-bind="country.name"></span>
</a>
</li>
</ul>
</div>
</div>

2
app/partials/mobile/edit_contact_modal.html
View File

@ -9,7 +9,7 @@
<h4>Edit contact</h4>
<div class="form-group">
<span class="form-control uneditable-input disabled" disabled ng-bind="importContact.phone | phoneNumber"></span>
<span class="form-control uneditable-input input-sm disabled" disabled ng-bind="importContact.phone | phoneNumber"></span>
</div>
<div class="form-group">
<input class="form-control input-sm" my-focused type="text" placeholder="First name" ng-model="importContact.first_name"/>

7
app/partials/mobile/head.html
View File

@ -118,13 +118,6 @@
<li ng-show="offlineConnecting"><span class="navbar-offline-text">Connecting<span my-loading-dots></span></span></li>
</ul>
<ul ng-switch-default class="nav navbar-nav navbar-right">
<li ng-if="isLoggedIn &amp;&amp; !isEmpty.contacts"><a href="" ng-click="openContacts()">Contacts</a></li>
<li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
<li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log Out</a></li>
<li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
</ul>
</div>
</div>

64
app/partials/mobile/im.html
View File

@ -19,7 +19,7 @@
</div>
</div>
<div my-dialogs-list-mobile class="im_dialogs_col im_dialogs_scrollable_wrap">
<div my-dialogs-list-mobile class="im_dialogs_col im_dialogs_scrollable_wrap mobile_scrollable_wrap">
<div class="im_dialogs_empty_wrap" ng-if="isEmpty.contacts">
<h3 class="im_dialogs_empty_header">No contacts yet</h3>
@ -65,13 +65,6 @@
</div>
<div class="im_history_col_wrap" ng-controller="AppImHistoryController">
<div ng-show="state.notSelected">
<div class="im_history_no_dialogs_wrap">
<h3 class="im_dialogs_empty_header">Get started</h3>
<p class="im_dialogs_empty_lead">Welcome to Telegram Web. You can always set your profile photo and change your name in Settings.</p>
<button type="button" class="btn btn-primary btn-sm" ng-click="openSettings()">Open Settings</button>
</div>
</div>
<div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.35" padding="true">
Loading history<span my-loading-dots></span>
</div>
@ -79,58 +72,7 @@
<div ng-show="state.loaded">
<div my-history-mobile class="im_history_col">
<div class="im_history_panel_wrap">
<div class="im_history_panel clearfix" ng-controller="AppImPanelController">
<div class="im_history_panel_title">
<a class="im_history_panel_info_link pull-right" ng-click="showPeerInfo()">Info</a>
<a class="im_history_panel_edit_link pull-right" ng-click="toggleEdit()">Edit</a>
<div class="dropdown im_history_panel_media_dropdown pull-right">
<a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a>
<ul class="dropdown-menu">
<li><a ng-click="toggleMedia('photos')">Photos</a></li>
<li><a ng-click="toggleMedia('video')">Videos</a></li>
<li><a ng-click="toggleMedia('documents')">Documents</a></li>
<li><a ng-click="toggleMedia('audio')">Voice messages</a></li>
</ul>
</div>
<a ng-show="historyFilter.mediaType.length || skippedHistory" class="im_history_panel_return_link pull-right" ng-click="returnToRecent()" ng-switch="skippedHistory">
<span ng-switch-when="true">Show recent messages</span>
<span ng-switch-default>Show all messages</span>
<strong class="im_history_panel_return_count" ng-show="missedCount > 0" ng-bind="'+' + missedCount"></strong>
</a>
<div ng-switch="historyFilter.mediaType">
<h4 ng-switch-when="photos">Photos</h4>
<h4 ng-switch-when="video">Videos</h4>
<h4 ng-switch-when="documents">Documents</h4>
<h4 ng-switch-when="audio">Voice messages</h4>
<h4 ng-switch-default ng-switch="historyPeer.id > 0" ng-click="showPeerInfo()">
<div ng-switch-when="true">
<span ng-bind-html="historyPeer.data.rFullName"></span>
<small class="im_peer_online" my-user-status="historyPeer.id"></small>
</div>
<div ng-switch-default>
<span ng-bind-html="historyPeer.data.rTitle"></span>
<small class="im_chat_users">
<ng-pluralize count="historyPeer.data.participants_count"
when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
</ng-pluralize>
</small>
</div>
</h4>
</div>
</div>
</div>
</div>
<div class="im_history_wrap im_history_scrollable_wrap">
<div class="im_history_wrap im_history_scrollable_wrap mobile_scrollable_wrap">
<div class="im_history_scrollable">
<div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}">
@ -140,7 +82,7 @@
</div>
<div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}">
<div ng-show="peerHistory.peerID == historyPeer.id" ng-repeat="peerHistory in peerHistories">
<div class="im_history_messages_peer" ng-show="peerHistory.peerID == historyPeer.id" ng-repeat="peerHistory in peerHistories">
<div class="im_history_message_wrap" my-message ng-repeat="historyMessage in peerHistory.messages"></div>
</div>
</div>

60
app/partials/mobile/peer_select.html
View File

@ -32,41 +32,37 @@
<div class="im_dialogs_modal_col_wrap" ng-controller="AppImDialogsController" my-dialogs>
<div class="im_dialogs_panel">
<div class="im_dialogs_search">
<input my-focused class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="search.query"/>
<input my-focused class="form-control im_dialogs_search_field no_outline" type="search" placeholder="Search" ng-model="search.query"/>
<a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
</div>
</div>
<div my-dialogs-list modal="true" class="im_dialogs_modal_col">
<div class="im_dialogs_wrap nano">
<div class="im_dialogs_scrollable_wrap nano-content">
<ul class="nav nav-pills nav-stacked">
<li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.peerID"></li>
</ul>
<div class="im_dialogs_contacts_wrap" ng-show="contacts.length > 0">
<h5>Contacts</h5>
<ul class="nav nav-pills nav-stacked">
<li class="im_dialog_wrap" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: curDialog.peerID == contact.userID}">
<a class="im_dialog" ng-click="dialogSelect(contact.peerString)">
<div class="im_dialog_photo pull-left">
<img
class="im_dialog_photo"
my-load-thumb
thumb="contact.userPhoto"
/>
</div>
<div class="im_dialog_message_wrap">
<div class="im_dialog_peer">
<span class="im_dialog_user" ng-bind-html="contact.user.rFullName"></span>
</div>
<div class="im_dialog_message">
<span class="im_dialog_message_text" my-user-status="::contact.userID"></span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div my-dialogs-list-mobile modal="true" class="im_dialogs_modal_col im_dialogs_scrollable_wrap mobile_scrollable_wrap">
<ul class="nav nav-pills nav-stacked">
<li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.peerID"></li>
</ul>
<div class="im_dialogs_contacts_wrap" ng-show="contacts.length > 0">
<h5>Contacts</h5>
<ul class="nav nav-pills nav-stacked">
<li class="im_dialog_wrap" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: curDialog.peerID == contact.userID}">
<a class="im_dialog" ng-click="dialogSelect(contact.peerString)">
<div class="im_dialog_photo pull-left">
<img
class="im_dialog_photo"
my-load-thumb
thumb="contact.userPhoto"
/>
</div>
<div class="im_dialog_message_wrap">
<div class="im_dialog_peer">
<span class="im_dialog_user" ng-bind-html="contact.user.rFullName"></span>
</div>
<div class="im_dialog_message">
<span class="im_dialog_message_text" my-user-status="::contact.userID"></span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>

68
app/partials/mobile/phonebook_modal.html
View File

@ -37,45 +37,41 @@
</div>
<div my-contacts-list class="contacts_modal_col">
<div class="contacts_wrap nano" my-infinite-scroller>
<div class="contacts_scrollable_wrap nano-content" ng-switch="contactsEmpty">
<div ng-switch-when="true" class="contacts_modal_contacts_empty" my-vertical-position="0.2" padding="true">
Your phonebook is empty.
</div>
<ul ng-switch-default class="contacts_modal_members_list nav nav-pills nav-stacked">
<li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | limitTo: slice.limit track by contact.id" ng-class="{active: selectedContacts[contact.id]}">
<a class="contacts_modal_contact" ng-click="contactSelect(contact.id)">
<i ng-if="multiSelect" class="icon icon-contact-tick"></i>
<div class="contacts_modal_contact_photo pull-left">
<img
class="contacts_modal_contact_photo"
ng-src="{{contact.photo}}"
/>
</div>
<div class="contacts_modal_contact_name">
<span ng-bind="contact.first_name"></span>
<span ng-bind="contact.last_name"></span>
</div>
<div class="contacts_modal_contact_status" ng-repeat="phone in contact.phones">
<span ng-bind="phone | phoneNumber"></span>
</div>
</a>
</li>
</ul>
<div class="contacts_modal_col contacts_wrap contacts_scrollable_wrap mobile_scrollable_wrap" my-contacts-list-mobile my-infinite-scroller-mobile>
<div ng-switch="contactsEmpty">
<div ng-switch-when="true" class="contacts_modal_contacts_empty" my-vertical-position="0.2" padding="true">
Your phonebook is empty.
</div>
</div>
<ul ng-switch-default class="contacts_modal_members_list nav nav-pills nav-stacked">
<li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | limitTo: slice.limit track by contact.id" ng-class="{active: selectedContacts[contact.id]}">
<a class="contacts_modal_contact" ng-click="contactSelect(contact.id)">
<i ng-if="multiSelect" class="icon icon-contact-tick"></i>
<div class="contacts_modal_contact_photo pull-left">
<img
class="contacts_modal_contact_photo"
ng-src="{{contact.photo}}"
/>
</div>
<div class="contacts_modal_contact_name">
<span ng-bind="contact.first_name"></span>
<span ng-bind="contact.last_name"></span>
</div>
<div class="contacts_modal_contact_status" ng-repeat="phone in contact.phones">
<span ng-bind="phone | phoneNumber"></span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>