From 4b3f3744a728de7e91ffd1895342d4575e9e7623 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Mon, 15 Sep 2014 19:56:28 +0400 Subject: [PATCH] Improved mobile history layout --- app/css/app.css | 70 ------------------------------------- app/css/desktop.css | 67 +++++++++++++++++++++++++++++++++++ app/css/mobile.css | 10 ++++-- app/js/directives_mobile.js | 20 ++--------- app/partials/mobile/im.html | 51 +++++++++++++-------------- 5 files changed, 102 insertions(+), 116 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index 07e3367a..bc163257 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -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 { .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 { } -@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; diff --git a/app/css/desktop.css b/app/css/desktop.css index dcc86ff6..0ae380b2 100644 --- a/app/css/desktop.css +++ b/app/css/desktop.css @@ -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; + } } \ No newline at end of file diff --git a/app/css/mobile.css b/app/css/mobile.css index 70655f0e..98107881 100644 --- a/app/css/mobile.css +++ b/app/css/mobile.css @@ -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; } diff --git a/app/js/directives_mobile.js b/app/js/directives_mobile.js index fad0ca7b..d20dec94 100644 --- a/app/js/directives_mobile.js +++ b/app/js/directives_mobile.js @@ -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') $(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') 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') $scope.$on('ui_history_focus', function () { if (!atBottom) { scrollableWrap.scrollTop = scrollableWrap.scrollHeight; - updateScroller(); atBottom = true; } }); @@ -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') if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) { $(historyMessagesEl).css({marginTop: marginTop}); } - $(historyWrap).nanoScroller(); } $($window).on('resize', updateSizes); diff --git a/app/partials/mobile/im.html b/app/partials/mobile/im.html index 0141fd8e..54036d94 100644 --- a/app/partials/mobile/im.html +++ b/app/partials/mobile/im.html @@ -130,38 +130,37 @@ -
+
-
- -
-
-
- Loading history - No messages here yet... -
- -
-
-
+
+
+
+ Loading history + No messages here yet...
-
- -
- - is typing - - - and are typing - - - , and {{historyState.typing.length - 2}} more are typing - +
+
+
-
+
+ +
+ +
+ + is typing + + + and are typing + + + , and {{historyState.typing.length - 2}} more are typing + +
+