Improved mobile history layout

2014-09-15 19:56:28 +04:00 · 2014-09-15 19:56:28 +04:00 · 4b3f3744a7
commit 4b3f3744a7
parent ff3bb02fa0
5 changed files with 101 additions and 115 deletions
--- 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;
--- 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;
+  }
 }
--- 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;
 }
--- 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);
--- a/app/partials/mobile/im.html
+++ b/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" 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 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 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">
-                      <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 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>