Added new unread

app/css/app.css

@@ -956,6 +956,18 @@ a.tg_radio_on:hover i.icon-radio {
   opacity: 1;
 }
 
+.im_dialogs_tabs_wrap {
+  overflow: hidden;
+  height: 0;
+  -webkit-transition    : height ease-out 0.3s;
+  -moz-transition       : height ease-out 0.3s;
+  -o-transition         : height ease-out 0.3s;
+  transition            : height ease-out 0.3s;
+}
+.im_dialogs_tabs_wrap.shown {
+  height: 38px;
+}
+
 .im_dialogs_tabs {
   padding: 4px 0;
   position: relative;

app/js/controllers.js

@@ -216,7 +216,7 @@ angular.module('myApp.controllers', [])
 
     $scope.$on('history_focus', function (e, peerData) {
       $modalStack.dismissAll();
-      if (peerData.peerString == $scope.curDialog.peer && !peerData.messageID) {
+      if (peerData.peerString == $scope.curDialog.peer && peerData.messageID == $scope.curDialog.messageID) {
         $scope.$broadcast('ui_history_focus');
       } else {
         $location.url('/im?p=' + peerData.peerString + (peerData.messageID ? '&m=' + peerData.messageID : ''));
@@ -543,6 +543,7 @@ angular.module('myApp.controllers', [])
 
     $scope.history = [];
     $scope.mediaType = false;
+    $scope.skippedHistory = false;
     $scope.selectedMsgs = {};
     $scope.selectedCount = 0;
     $scope.selectActions = false;
@@ -557,6 +558,7 @@ angular.module('myApp.controllers', [])
     $scope.selectedFlush = selectedFlush;
     $scope.toggleEdit = toggleEdit;
     $scope.toggleMedia = toggleMedia;
+    $scope.returnToRecent = returnToRecent;
     $scope.showPeerInfo = showPeerInfo;
 
     var peerID,
@@ -703,7 +705,7 @@ angular.module('myApp.controllers', [])
         } else {
           minID = 0;
         }
-        hasLess = minID > 0;
+        $scope.skippedHistory = hasLess = minID > 0;
       });
     }
 
@@ -737,9 +739,11 @@ angular.module('myApp.controllers', [])
       });
     };
 
-    function loadHistory () {
+    function loadHistory (forceRecent) {
+      $scope.missedCount = 0;
+
       hasMore = false;
-      hasLess = false;
+      $scope.skippedHistory = hasLess = false;
       maxID = 0;
       minID = 0;
 
@@ -750,6 +754,9 @@ angular.module('myApp.controllers', [])
         limit = 5;
         backLimit = 5;
       }
+      else if (forceRecent) {
+        limit = 10;
+      }
 
       var curJump = ++jump,
           inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]},
@@ -762,12 +769,12 @@ angular.module('myApp.controllers', [])
       getMessagesPromise.then(function (historyResult) {
         if (curJump != jump) return;
 
-        minID = maxID && historyResult.history.indexOf(maxID)>= backLimit - 1
+        minID = (historyResult.unreadSkip || maxID && historyResult.history.indexOf(maxID) >= backLimit - 1)
                   ? historyResult.history[0]
                   : 0;
         maxID = historyResult.history[historyResult.history.length - 1];
 
-        hasLess = minID > 0;
+        $scope.skippedHistory = hasLess = minID > 0;
         hasMore = historyResult.count === null ||
                   historyResult.history.length && historyResult.history.length < historyResult.count;
 
@@ -782,13 +789,10 @@ angular.module('myApp.controllers', [])
 
         updateHistoryGroups();
 
-        if (historyResult.unreadLimit) {
+        if (historyResult.unreadOffset) {
-          $scope.historyUnread = {
+          $scope.historyUnreadAfter = historyResult.history[historyResult.unreadOffset - 1];
-            beforeID: historyResult.history[historyResult.unreadLimit - 1],
-            count: historyResult.unreadLimit
-          };
         } else {
-          $scope.historyUnread = {};
+          $scope.historyUnreadAfter = {};
         }
 
         $scope.historyFocus = $scope.curDialog.messageID || 0;
@@ -924,14 +928,23 @@ angular.module('myApp.controllers', [])
     }
 
     function toggleMedia (mediaType) {
-      if (mediaType) {
-        $scope.missedCount = 0;
-      }
       $scope.mediaType = mediaType || false;
       $scope.history = [];
       loadHistory();
     }
 
+    function returnToRecent () {
+      if ($scope.mediaType) {
+        toggleMedia();
+      } else {
+        if ($scope.curDialog.messageID) {
+          $rootScope.$broadcast('history_focus', {peerString: $scope.curDialog.peer});
+        } else {
+          loadHistory(true);
+        }
+      }
+    }
+
     function showPeerInfo () {
       if ($scope.curDialog.peerID > 0) {
         $rootScope.openUser($scope.curDialog.peerID)
@@ -947,17 +960,9 @@ angular.module('myApp.controllers', [])
 
     $scope.$on('history_append', function (e, addedMessage) {
       if (addedMessage.peerID == $scope.curDialog.peerID) {
-        if (minID) {
+        if ($scope.mediaType || $scope.skippedHistory) {
           if (addedMessage.my) {
-            $rootScope.$broadcast('history_focus', {peerString: $scope.curDialog.peer});
+            returnToRecent();
-          } else {
-            $scope.missedCount++;
-          }
-          return;
-        }
-        if ($scope.mediaType) {
-          if (addedMessage.my) {
-            toggleMedia();
           } else {
             $scope.missedCount++;
           }
@@ -973,8 +978,6 @@ angular.module('myApp.controllers', [])
           $scope.historyUnread = {};
         }
 
-        offset++;
-
         // console.log('append check', $rootScope.idle.isIDLE, addedMessage.peerID, $scope.curDialog.peerID);
         if (!$rootScope.idle.isIDLE) {
           $timeout(function () {

app/js/directives.js

@@ -29,7 +29,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
   })
 
-  .directive('myDialogs', function ($modalStack) {
+  .directive('myDialogs', function ($modalStack, $transition) {
 
     return {
       link: link
@@ -40,6 +40,7 @@ angular.module('myApp.directives', ['myApp.filters'])
       var dialogsWrap = $('.im_dialogs_wrap', element)[0],
           scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
           searchField = $('.im_dialogs_search_field', element)[0],
+          tabsWrap = $('.im_dialogs_tabs_wrap', element)[0],
           searchFocused = false;
 
 
@@ -51,6 +52,28 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
       });
 
+      attrs.$observe('hasTabs', function (newValue) {
+        newValue = newValue == 'true';
+        if (newValue) {
+          $scope.$broadcast('ui_dialogs_tabs', true);
+        }
+        var trigger = function () {
+          $(tabsWrap)[newValue ? 'addClass' : 'removeClass']('shown');
+        }
+        $transition($(tabsWrap), trigger).then(function () {
+          if (!newValue) {
+            $scope.$broadcast('ui_dialogs_tabs', false);
+          }
+        });
+      });
+
+      $(document).on('keydown', onKeyDown);
+
+      $scope.$on('$destroy', function () {
+        $(document).off('keydown', onKeyDown);
+      });
+
+
       function onKeyDown(e) {
         if (!searchFocused && $modalStack.getTop()) {
           return true;
@@ -149,12 +172,6 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
       }
 
-      $(document).on('keydown', onKeyDown);
-
-      $scope.$on('$destroy', function () {
-        $(document).off('keydown', onKeyDown);
-      });
-
     }
 
 
@@ -163,7 +180,8 @@ angular.module('myApp.directives', ['myApp.filters'])
   .directive('myDialogsList', function($window, $timeout) {
 
     return {
-      link: link
+      link: link,
+      scope: true
     };
 
 
@@ -172,6 +190,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
           headWrap = $('.tg_page_head')[0],
           footer = $('.im_page_footer')[0],
+          hasTabs = false,
           moreNotified = false;
 
       onContentLoaded(function () {
@@ -186,6 +205,11 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $scope.$on('ui_dialogs_prepend', updateScroller);
 
+      $scope.$on('ui_dialogs_tabs', function (e, newHasTabs) {
+        hasTabs = newHasTabs;
+        updateSizes();
+      })
+
 
       $scope.$on('ui_dialogs_append', function () {
         onContentLoaded(function () {
@@ -235,7 +259,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           footer = $('.im_page_footer')[0];
         }
         $(element).css({
-          height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - 72
+          height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - (hasTabs ? 38 : 0) - 68
         });
 
         updateScroller();
@@ -398,7 +422,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         var unreadSplit, focusMessage;
 
         if (focusMessage = $('.im_message_focus', scrollableWrap)[0]) {
-          scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - 52);
+          scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - Math.floor(scrollableWrap.clientHeight / 2) + 26);
           atBottom = false;
         } else if (unreadSplit = $('.im_message_unread_split', scrollableWrap)[0]) {
           scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);

app/js/services.js

@@ -900,15 +900,11 @@ angular.module('myApp.services', [])
     });
   }
 
-  function requestHistory (inputPeer, maxID, limit, backLimit) {
+  function requestHistory (inputPeer, maxID, limit, offset) {
-    maxID = maxID || 0;
-    limit = limit || 0;
-    backLimit = backLimit || 0;
-
     return MtpApiManager.invokeApi('messages.getHistory', {
       peer: inputPeer,
-      offset: -backLimit,
+      offset: offset || 0,
-      limit: limit + backLimit,
+      limit: limit || 0,
       max_id: maxID || 0
     }).then(function (historyResult) {
       AppUsersManager.saveApiUsers(historyResult.users);
@@ -920,7 +916,7 @@ angular.module('myApp.services', [])
   }
 
   function fillHistoryStorage (inputPeer, maxID, fullLimit, historyStorage) {
-    console.log('fill history storage', inputPeer, maxID, fullLimit, angular.copy(historyStorage));
+    // console.log('fill history storage', inputPeer, maxID, fullLimit, angular.copy(historyStorage));
     return requestHistory (inputPeer, maxID, fullLimit).then(function (historyResult) {
       historyStorage.count = historyResult.count || historyResult.messages.length;
 
@@ -953,6 +949,9 @@ angular.module('myApp.services', [])
     var peerID = AppPeersManager.getPeerID(inputPeer),
         historyStorage = historiesStorage[peerID],
         offset = 0,
+        offsetNotFound = false,
+        unreadOffset = false,
+        unreadSkip = false,
         resultPending = [];
 
     if (historyStorage === undefined) {
@@ -962,24 +961,31 @@ angular.module('myApp.services', [])
       resultPending = historyStorage.pending.slice();
     }
 
-    var unreadLimit = false;
     if (!limit && !maxID) {
       var foundDialog = getDialogByPeerID(peerID);
       if (foundDialog && foundDialog[0] && foundDialog[0].unread_count > 1) {
-        unreadLimit = Math.min(1000, foundDialog[0].unread_count);
+        var unreadCount = foundDialog[0].unread_count;
-        limit = unreadLimit;
+        if (unreadSkip = (unreadCount > 50)) {
+          limit = 10;
+          unreadOffset = 6;
+          offset = unreadCount - unreadOffset;
+        } else {
+          limit = Math.max(10, unreadCount + 2);
+          unreadOffset = unreadCount;
+        }
       }
     }
-
+    else if (maxID > 0) {
-    if (maxID > 0) {
+      offsetNotFound = true;
       for (offset = 0; offset < historyStorage.history.length; offset++) {
         if (maxID > historyStorage.history[offset]) {
+          offsetNotFound = false;
           break;
         }
       }
     }
 
-    if (historyStorage.count !== null && historyStorage.history.length == historyStorage.count ||
+    if (!offsetNotFound && historyStorage.count !== null && historyStorage.history.length == historyStorage.count ||
       historyStorage.history.length >= offset + (limit || 1)
     ) {
       if (backLimit) {
@@ -993,19 +999,24 @@ angular.module('myApp.services', [])
       return $q.when({
         count: historyStorage.count,
         history: resultPending.concat(historyStorage.history.slice(offset, offset + limit)),
-        unreadLimit: unreadLimit
+        unreadOffset: unreadOffset,
+        unreadSkip: unreadSkip
       });
     }
 
-    if (unreadLimit) {
+    if (!backLimit && !limit) {
-      limit = Math.max(20, unreadLimit + 2);
-    }
-    else if (!backLimit && !limit) {
       limit = 20;
     }
+    if (offsetNotFound) {
+      offset = 0;
+    }
 
-    if (backLimit || maxID && historyStorage.history.indexOf(maxID) == -1) {
+    if (backLimit || unreadSkip || maxID && historyStorage.history.indexOf(maxID) == -1) {
-      return requestHistory(inputPeer, maxID, limit, backLimit).then(function (historyResult) {
+      if (backLimit) {
+        offset = -backLimit;
+        limit += backLimit;
+      }
+      return requestHistory(inputPeer, maxID, limit, offset).then(function (historyResult) {
         historyStorage.count = historyResult.count || historyResult.messages.length;
 
         var history = [];
@@ -1016,7 +1027,8 @@ angular.module('myApp.services', [])
         return {
           count: historyStorage.count,
           history: resultPending.concat(history),
-          unreadLimit: unreadLimit
+          unreadOffset: unreadOffset,
+          unreadSkip: unreadSkip
         };
       })
     }
@@ -1034,7 +1046,8 @@ angular.module('myApp.services', [])
       return {
         count: historyStorage.count,
         history: resultPending.concat(historyStorage.history.slice(offset, offset + limit)),
-        unreadLimit: unreadLimit
+        unreadOffset: unreadOffset,
+        unreadSkip: unreadSkip
       };
     });
   }

app/partials/im.html

@@ -4,7 +4,7 @@
 
   <div class="im_page_split clearfix">
 
-    <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs>
+    <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}">
       <div class="im_dialogs_panel">
         <div class="dropdown im_dialogs_panel_dropdown pull-right">
           <a class="dropdown-toggle">
@@ -24,7 +24,7 @@
           <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
         </div>
 
-        <div class="im_dialogs_tabs_wrap" ng-show="search.query.length">
+        <div class="im_dialogs_tabs_wrap">
           <div class="im_dialogs_tabs clearfix">
             <a href="" class="im_dialogs_tab" ng-class="{active: !search.messages}" ng-click="search.messages = false">Conversations</a>
             <a href="" class="im_dialogs_tab" ng-class="{active: search.messages}" ng-click="search.messages = true">Messages</a>
@@ -117,8 +117,9 @@
                     <li><a ng-click="toggleMedia('audio')">Voice messages</a></li>
                   </ul>
                 </div>
-                <a ng-show="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()">
+                <a ng-show="mediaType !== false || skippedHistory" class="im_history_panel_return_link pull-right" ng-click="returnToRecent()" ng-switch="skippedHistory">
-                  Show all messages
+                  <span ng-switch-when="true">Show recent messages</span>
+                  <span ng-switch-default>Show all messages</span>
                   <strong class="im_history_panel_return_count" ng-show="missedCount > 0" ng-bind="'+' + missedCount"></strong>
                 </a>
 

app/partials/message.html

@@ -1,7 +1,5 @@
-<div class="im_message_unread_split" bo-if="historyUnread.beforeID == historyMessage.id" ng-show="historyUnread.beforeID == historyMessage.id">
+<div class="im_message_unread_split" bo-if="historyUnreadAfter == historyMessage.id" ng-show="historyUnreadAfter == historyMessage.id">
-  <ng-pluralize count="historyUnread.count"
+  Unread messages
-                   when="{'one': '1 unread message', 'other': '{} unread messages'}">
-  </ng-pluralize>
 </div>
 
 <div class="im_message_outer_wrap" ng-class="[ selectedMsgs[historyMessage.id] &amp;&amp; 'im_message_selected', historyMessage.grouped &amp;&amp; ('im_message_grouped' + historyMessage.grouped) , historyFocus == historyMessage.id &amp;&amp; 'im_message_focus']" ng-click="toggleMessage(historyMessage.id, $event)">