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
Split 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 { @@ -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
Unescape View File

@ -150,4 +150,71 @@ @@ -150,4 +150,71 @@
-moz-border-radius : 2px;
-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
Unescape View File

@ -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
Unescape View File

@ -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);

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

@ -130,38 +130,37 @@ @@ -130,38 +130,37 @@
</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 ng-if="!history.length" 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>
<div class="im_history_scrollable">
<div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}">
<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_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 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_message_wrap" my-message ng-repeat="historyMessage in peerHistory.messages"></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>

Write Preview
Loading…
Cancel
Save