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

Improved mobile history layout

master
Igor Zhukov 10 years ago
parent
ff3bb02fa0
commit
4b3f3744a7
5 changed files with 102 additions and 116 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. 70
      app/css/app.css
  2. 67
      app/css/desktop.css
  3. 10
      app/css/mobile.css
  4. 20
      app/js/directives_mobile.js
  5. 51
      app/partials/mobile/im.html

70
app/css/app.css
Unescape View File

@ -1177,10 +1177,6 @@ a.im_dialog_selected .im_dialog_date {
.im_history_wrap {
/*overflow: hidden;*/
/*overflow-y: scroll;*/
}
.im_history_scrollable_wrap { .im_history_scrollable_wrap {
outline: none ! important; outline: none ! important;
-webkit-user-select: text; -webkit-user-select: text;
@ -1684,39 +1680,9 @@ img.im_message_document_thumb {
.im_content_message_wrap { .im_content_message_wrap {
margin: 8px 0px 8px 16px margin: 8px 0px 8px 16px
} }
.icon-message-status {
background: #43A4DB;
border: 0;
display: block;
width: 10px;
height: 10px;
border-radius: 7px;
position: absolute;
margin-left: -26px;
margin-top: 13px;
opacity: 0;
}
.im_message_unread .icon-message-status {
opacity: 1.0;
}
.im_message_pending .icon-message-status {
opacity: 0.5;
}
.im_message_error_btn { .im_message_error_btn {
display: none; display: none;
} }
.im_message_error .im_message_error_btn {
display: inline;
}
.im_message_error_btn .icon-message-status {
background: #da564d;
opacity: 0.85;
}
.im_message_error_btn .icon-message-status:hover {
opacity: 1;
}
.im_message_date, .im_message_date,
.im_message_fwd_date { .im_message_fwd_date {
color: #adadad; color: #adadad;
@ -1725,42 +1691,6 @@ img.im_message_document_thumb {
} }
@media (max-width: 900px) {
/* Status ticks */
.icon-message-status,
.im_message_error_btn,
.icon-message-status-tick {
display: none;
}
.im_message_out .icon-message-status-tick {
display: inline-block;
width: 16px;
height: 10px;
background: url(../img/icons/Checks2_2x.png);
background-size: 16px 10px;
top: 2px;
position: relative;
}
.is_1x .im_message_out .icon-message-status-tick {
background-image: url(../img/icons/Checks2_1x.png);
}
.im_message_pending .icon-message-status-tick {
display: none;
}
.im_message_unread .icon-message-status-tick {
background: url(../img/icons/Checks1_2x.png);
background-size: 16px 10px;
}
.is_1x .im_message_unread .icon-message-status-tick {
background-image: url(../img/icons/Checks1_1x.png);
}
.im_message_date {
padding: 0;
}
}
div.im_message_author, div.im_message_author,
div.im_message_body { div.im_message_body {
display: block; display: block;

67
app/css/desktop.css
Unescape View File

@ -150,4 +150,71 @@
-moz-border-radius : 2px; -moz-border-radius : 2px;
-webkit-border-radius : 2px; -webkit-border-radius : 2px;
border-radius : 2px; border-radius : 2px;
}
.icon-message-status {
background: #43A4DB;
border: 0;
display: block;
width: 10px;
height: 10px;
border-radius: 7px;
position: absolute;
margin-left: -26px;
margin-top: 13px;
opacity: 0;
}
.im_message_unread .icon-message-status {
opacity: 1.0;
}
.im_message_pending .icon-message-status {
opacity: 0.5;
}
.im_message_error .im_message_error_btn {
display: inline;
}
.im_message_error_btn .icon-message-status {
background: #da564d;
opacity: 0.85;
}
.im_message_error_btn .icon-message-status:hover {
opacity: 1;
}
@media (max-width: 900px) {
/* Status ticks */
.icon-message-status,
.im_message_error_btn,
.icon-message-status-tick {
display: none;
}
.im_message_out .icon-message-status-tick {
display: inline-block;
width: 16px;
height: 10px;
background: url(../img/icons/Checks2_2x.png);
background-size: 16px 10px;
top: 2px;
position: relative;
}
.is_1x .im_message_out .icon-message-status-tick {
background-image: url(../img/icons/Checks2_1x.png);
}
.im_message_pending .icon-message-status-tick {
display: none;
}
.im_message_unread .icon-message-status-tick {
background: url(../img/icons/Checks1_2x.png);
background-size: 16px 10px;
}
.is_1x .im_message_unread .icon-message-status-tick {
background-image: url(../img/icons/Checks1_1x.png);
}
.im_message_date {
padding: 0;
}
} }

10
app/css/mobile.css
Unescape View File

@ -506,12 +506,18 @@ img.im_message_video_thumb,
.im_send_panel_wrap { .im_send_panel_wrap {
padding: 10px 0 12px; padding: 10px 0 12px;
} }
.icon-select-tick { .im_history_scrollable_wrap {
margin: 10px 0 0 -24px overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
} }
.im_history { .im_history {
position: static; position: static;
} }
.icon-select-tick {
margin: 10px 0 0 -24px
}
.im_message_wrap { .im_message_wrap {
padding: 0 8px; padding: 0 8px;
} }

20
app/js/directives_mobile.js
Unescape View File

@ -126,16 +126,6 @@ angular.module('myApp.directives')
onContentLoaded(function () { onContentLoaded(function () {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
}); });
$(historyWrap).nanoScroller({preventPageScrolling: true, tabIndex: -1, iOSNativeScrolling: true});
var updateScroller = function (delay) {
// console.trace('scroller update', delay);
$timeout(function () {
if (!$(scrollableWrap).hasClass('im_history_to_bottom')) {
$(historyWrap).nanoScroller();
}
}, delay || 0);
}
var transform = false, var transform = false,
trs = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'], trs = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
@ -172,7 +162,6 @@ angular.module('myApp.directives')
$(historyMessagesEl).removeClass('im_history_appending'); $(historyMessagesEl).removeClass('im_history_appending');
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
$(historyMessagesEl).css(transform, 'translate(0px, ' + (scrollableWrap.scrollHeight - wasH) + 'px)'); $(historyMessagesEl).css(transform, 'translate(0px, ' + (scrollableWrap.scrollHeight - wasH) + 'px)');
$(historyWrap).nanoScroller();
var styles = {}; var styles = {};
styles[transform] = 'translate(0px, 0px)'; styles[transform] = 'translate(0px, 0px)';
$(historyMessagesEl).addClass('im_history_appending'); $(historyMessagesEl).addClass('im_history_appending');
@ -193,17 +182,16 @@ angular.module('myApp.directives')
function changeScroll () { function changeScroll () {
var unreadSplit, focusMessage; var unreadSplit, focusMessage;
if (focusMessage = $('.im_message_focus', scrollableWrap)[0]) { if (focusMessage = $('.im_message_focus:visible', scrollableWrap)[0]) {
scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - Math.floor(scrollableWrap.clientHeight / 2) + 26); scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - Math.floor(scrollableWrap.clientHeight / 2) + 26);
atBottom = false; atBottom = false;
} else if (unreadSplit = $('.im_message_unread_split', scrollableWrap)[0]) { } else if (unreadSplit = $('.im_message_unread_split:visible', scrollableWrap)[0]) {
scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52); scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);
atBottom = false; atBottom = false;
} else { } else {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
atBottom = true; atBottom = true;
} }
updateScroller();
$timeout(function () { $timeout(function () {
$(scrollableWrap).trigger('scroll'); $(scrollableWrap).trigger('scroll');
}); });
@ -229,7 +217,6 @@ angular.module('myApp.directives')
$scope.$on('ui_history_focus', function () { $scope.$on('ui_history_focus', function () {
if (!atBottom) { if (!atBottom) {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
atBottom = true; atBottom = true;
} }
}); });
@ -353,10 +340,8 @@ angular.module('myApp.directives')
if (atBottom) { if (atBottom) {
onContentLoaded(function () { onContentLoaded(function () {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
}); });
} }
updateScroller(100);
} }
function updateBottomizer () { function updateBottomizer () {
@ -369,7 +354,6 @@ angular.module('myApp.directives')
if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) { if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) {
$(historyMessagesEl).css({marginTop: marginTop}); $(historyMessagesEl).css({marginTop: marginTop});
} }
$(historyWrap).nanoScroller();
} }
$($window).on('resize', updateSizes); $($window).on('resize', updateSizes);

51
app/partials/mobile/im.html
Unescape View File

@ -130,38 +130,37 @@
</div> </div>
<div class="im_history_wrap nano"> <div class="im_history_wrap im_history_scrollable_wrap">
<div class="im_history_scrollable_wrap nano-content"> <div class="im_history_scrollable">
<div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}">
<div class="im_history_scrollable"> <div ng-if="state.empty" class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true">
<div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}"> <span ng-switch-when="true">Loading history<span my-loading-dots></span></span>
<div ng-if="!history.length" class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true"> <span ng-switch-default>No messages here yet...</span>
<span ng-switch-when="true">Loading history<span my-loading-dots></span></span>
<span ng-switch-default>No messages here yet...</span>
</div>
<div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}">
<div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div>
</div>
</div> </div>
<div class="im_history_typing_wrap"> <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_typing" ng-show="historyState.typing.length > 0 &amp;&amp; !historyFilter.mediaType" ng-switch="historyState.typing.length"> <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in peerHistory.messages"></div>
<span ng-switch-when="1">
<a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a> is typing<span my-loading-dots></span>
</span>
<span ng-switch-when="2">
<a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a> and <a class="im_history_typing_author" my-user-link="historyState.typing[1]"></a> are typing<span my-loading-dots></span>
</span>
<span ng-switch-default>
<a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a>, <a class="im_history_typing_author" my-user-link="historyState.typing[1]"></a> and {{historyState.typing.length - 2}} more are typing<span my-loading-dots></span>
</span>
</div> </div>
</div> </div>
</div> </div>
<div class="im_history_typing_wrap">
<div class="im_history_typing" ng-show="historyState.typing.length > 0 &amp;&amp; !historyFilter.mediaType" ng-switch="historyState.typing.length">
<span ng-switch-when="1">
<a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a> is typing<span my-loading-dots></span>
</span>
<span ng-switch-when="2">
<a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a> and <a class="im_history_typing_author" my-user-link="historyState.typing[1]"></a> are typing<span my-loading-dots></span>
</span>
<span ng-switch-default>
<a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a>, <a class="im_history_typing_author" my-user-link="historyState.typing[1]"></a> and {{historyState.typing.length - 2}} more are typing<span my-loading-dots></span>
</span>
</div>
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save