Browse Source

Added new unread

master
Igor Zhukov 11 years ago
parent
commit
4d04810428
  1. 12
      app/css/app.css
  2. 57
      app/js/controllers.js
  3. 44
      app/js/directives.js
  4. 59
      app/js/services.js
  5. 9
      app/partials/im.html
  6. 6
      app/partials/message.html

12
app/css/app.css

@ -956,6 +956,18 @@ a.tg_radio_on:hover i.icon-radio {
opacity: 1; 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 { .im_dialogs_tabs {
padding: 4px 0; padding: 4px 0;
position: relative; position: relative;

57
app/js/controllers.js

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

44
app/js/directives.js

@ -29,7 +29,7 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
}) })
.directive('myDialogs', function ($modalStack) { .directive('myDialogs', function ($modalStack, $transition) {
return { return {
link: link link: link
@ -40,6 +40,7 @@ angular.module('myApp.directives', ['myApp.filters'])
var dialogsWrap = $('.im_dialogs_wrap', element)[0], var dialogsWrap = $('.im_dialogs_wrap', element)[0],
scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0], scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
searchField = $('.im_dialogs_search_field', element)[0], searchField = $('.im_dialogs_search_field', element)[0],
tabsWrap = $('.im_dialogs_tabs_wrap', element)[0],
searchFocused = false; 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) { function onKeyDown(e) {
if (!searchFocused && $modalStack.getTop()) { if (!searchFocused && $modalStack.getTop()) {
return true; 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) { .directive('myDialogsList', function($window, $timeout) {
return { return {
link: link link: link,
scope: true
}; };
@ -172,6 +190,7 @@ angular.module('myApp.directives', ['myApp.filters'])
scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0], scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
headWrap = $('.tg_page_head')[0], headWrap = $('.tg_page_head')[0],
footer = $('.im_page_footer')[0], footer = $('.im_page_footer')[0],
hasTabs = false,
moreNotified = false; moreNotified = false;
onContentLoaded(function () { onContentLoaded(function () {
@ -186,6 +205,11 @@ angular.module('myApp.directives', ['myApp.filters'])
$scope.$on('ui_dialogs_prepend', updateScroller); $scope.$on('ui_dialogs_prepend', updateScroller);
$scope.$on('ui_dialogs_tabs', function (e, newHasTabs) {
hasTabs = newHasTabs;
updateSizes();
})
$scope.$on('ui_dialogs_append', function () { $scope.$on('ui_dialogs_append', function () {
onContentLoaded(function () { onContentLoaded(function () {
@ -235,7 +259,7 @@ angular.module('myApp.directives', ['myApp.filters'])
footer = $('.im_page_footer')[0]; footer = $('.im_page_footer')[0];
} }
$(element).css({ $(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(); updateScroller();
@ -398,7 +422,7 @@ angular.module('myApp.directives', ['myApp.filters'])
var unreadSplit, focusMessage; var unreadSplit, focusMessage;
if (focusMessage = $('.im_message_focus', scrollableWrap)[0]) { 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; atBottom = false;
} else if (unreadSplit = $('.im_message_unread_split', scrollableWrap)[0]) { } else if (unreadSplit = $('.im_message_unread_split', scrollableWrap)[0]) {
scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52); scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);

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

9
app/partials/im.html

@ -4,7 +4,7 @@
<div class="im_page_split clearfix"> <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="im_dialogs_panel">
<div class="dropdown im_dialogs_panel_dropdown pull-right"> <div class="dropdown im_dialogs_panel_dropdown pull-right">
<a class="dropdown-toggle"> <a class="dropdown-toggle">
@ -24,7 +24,7 @@
<a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a> <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
</div> </div>
<div class="im_dialogs_tabs_wrap" ng-show="search.query.length"> <div class="im_dialogs_tabs_wrap">
<div class="im_dialogs_tabs clearfix"> <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 = false">Conversations</a>
<a href="" class="im_dialogs_tab" ng-class="{active: search.messages}" ng-click="search.messages = true">Messages</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> <li><a ng-click="toggleMedia('audio')">Voice messages</a></li>
</ul> </ul>
</div> </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> <strong class="im_history_panel_return_count" ng-show="missedCount > 0" ng-bind="'+' + missedCount"></strong>
</a> </a>

6
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>
<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)"> <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)">

Loading…
Cancel
Save