Improved mobile history layout

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;

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;
+  }
 }

app/css/mobile.css

@@ -506,12 +506,18 @@ img.im_message_video_thumb,
 .im_send_panel_wrap {
   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 {
   position: static;
 }
+
+.icon-select-tick {
+  margin: 10px 0 0 -24px
+}
 .im_message_wrap {
   padding: 0 8px;
 }

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

app/partials/mobile/im.html

@@ -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="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_scrollable">
+                  <div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}">
-                  <div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}">
+                    <div ng-show="peerHistory.peerID == historyPeer.id" ng-repeat="peerHistory in peerHistories">
-                    <div ng-if="!history.length"  class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true">
+                      <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in peerHistory.messages"></div>
-                      <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 class="im_history_typing_wrap">
+                </div>
 
-                    <div class="im_history_typing" ng-show="historyState.typing.length > 0 &amp;&amp; !historyFilter.mediaType" ng-switch="historyState.typing.length">
+                <div class="im_history_typing_wrap">
-                      <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>
+                  <div class="im_history_typing" ng-show="historyState.typing.length > 0 &amp;&amp; !historyFilter.mediaType" ng-switch="historyState.typing.length">
-                      </span>
+                    <span ng-switch-when="1">
-                      <span ng-switch-when="2">
+                      <a class="im_history_typing_author" my-user-link="historyState.typing[0]"></a> is typing<span my-loading-dots></span>
-                        <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>
+                    <span ng-switch-when="2">
-                      <span ng-switch-default>
+                      <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>
-                        <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>
-                      </span>
+                    <span ng-switch-default>
-                    </div>
+                      <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>