Browse Source

Improved mobile history layout

master
Igor Zhukov 10 years ago
parent
commit
4b3f3744a7
  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. 13
      app/partials/mobile/im.html

70
app/css/app.css

@ -1177,10 +1177,6 @@ a.im_dialog_selected .im_dialog_date { @@ -1177,10 +1177,6 @@ a.im_dialog_selected .im_dialog_date {
.im_history_wrap {
/*overflow: hidden;*/
/*overflow-y: scroll;*/
}
.im_history_scrollable_wrap {
outline: none ! important;
-webkit-user-select: text;
@ -1684,39 +1680,9 @@ img.im_message_document_thumb { @@ -1684,39 +1680,9 @@ img.im_message_document_thumb {
.im_content_message_wrap {
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 {
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_fwd_date {
color: #adadad;
@ -1725,42 +1691,6 @@ img.im_message_document_thumb { @@ -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_body {
display: block;

67
app/css/desktop.css

@ -151,3 +151,70 @@ @@ -151,3 +151,70 @@
-webkit-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

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

20
app/js/directives_mobile.js

@ -126,16 +126,6 @@ angular.module('myApp.directives') @@ -126,16 +126,6 @@ angular.module('myApp.directives')
onContentLoaded(function () {
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,
trs = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
@ -172,7 +162,6 @@ angular.module('myApp.directives') @@ -172,7 +162,6 @@ angular.module('myApp.directives')
$(historyMessagesEl).removeClass('im_history_appending');
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
$(historyMessagesEl).css(transform, 'translate(0px, ' + (scrollableWrap.scrollHeight - wasH) + 'px)');
$(historyWrap).nanoScroller();
var styles = {};
styles[transform] = 'translate(0px, 0px)';
$(historyMessagesEl).addClass('im_history_appending');
@ -193,17 +182,16 @@ angular.module('myApp.directives') @@ -193,17 +182,16 @@ angular.module('myApp.directives')
function changeScroll () {
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);
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);
atBottom = false;
} else {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
atBottom = true;
}
updateScroller();
$timeout(function () {
$(scrollableWrap).trigger('scroll');
});
@ -229,7 +217,6 @@ angular.module('myApp.directives') @@ -229,7 +217,6 @@ angular.module('myApp.directives')
$scope.$on('ui_history_focus', function () {
if (!atBottom) {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
atBottom = true;
}
});
@ -353,10 +340,8 @@ angular.module('myApp.directives') @@ -353,10 +340,8 @@ angular.module('myApp.directives')
if (atBottom) {
onContentLoaded(function () {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
});
}
updateScroller(100);
}
function updateBottomizer () {
@ -369,7 +354,6 @@ angular.module('myApp.directives') @@ -369,7 +354,6 @@ angular.module('myApp.directives')
if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) {
$(historyMessagesEl).css({marginTop: marginTop});
}
$(historyWrap).nanoScroller();
}
$($window).on('resize', updateSizes);

13
app/partials/mobile/im.html

@ -130,20 +130,21 @@ @@ -130,20 +130,21 @@
</div>
<div class="im_history_wrap nano">
<div class="im_history_scrollable_wrap nano-content">
<div class="im_history_wrap im_history_scrollable_wrap">
<div class="im_history_scrollable">
<div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}">
<div ng-if="!history.length" class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true">
<div ng-if="state.empty" class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true">
<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 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>
</div>
<div class="im_history_typing_wrap">
@ -165,8 +166,6 @@ @@ -165,8 +166,6 @@
</div>
</div>
<div class="im_bottom_panel_wrap">
<div class="im_edit_panel_wrap clearfix" ng-show="historyState.selectActions">

Loading…
Cancel
Save