Browse Source

Improved message users perf

master
Igor Zhukov 10 years ago
parent
commit
91988aa087
  1. 5
      app/css/app.css
  2. 4
      app/css/app_mobile.css
  3. 54
      app/js/controllers.js
  4. 20
      app/js/directives.js
  5. 19
      app/js/services.js
  6. 4
      app/partials/chat_modal.html
  7. 19
      app/partials/im.html
  8. 6
      app/partials/message_attach_contact.html

5
app/css/app.css

@ -1321,6 +1321,11 @@ a.im_dialog_selected .im_dialog_date {
margin: 0 auto; margin: 0 auto;
padding: 0 77px 0 77px; padding: 0 77px 0 77px;
} }
.im_history_typing a.im_history_typing_author {
color: #999;
font-weight: bold;
}
.im_message_unread_split { .im_message_unread_split {
background: #f4f4f4; background: #f4f4f4;

4
app/css/app_mobile.css

@ -153,7 +153,7 @@ html {
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a { .tg_page_head .navbar-inverse .navbar-quick-nav > li > a {
padding-left: 15px; padding-left: 15px;
padding: 6px 10px 2px 25px; padding: 6px 10px 2px 28px;
color: #b9cfe3; color: #b9cfe3;
font-size: 13px; font-size: 13px;
height: 46px; height: 46px;
@ -166,7 +166,7 @@ html {
} }
.navbar-quick-nav .icon-back { .navbar-quick-nav .icon-back {
position: absolute; position: absolute;
margin-left: -15px; margin-left: -18px;
margin-top: 10px; margin-top: 10px;
} }
.navbar-quick-nav h4 { .navbar-quick-nav h4 {

54
app/js/controllers.js

@ -233,6 +233,7 @@ angular.module('myApp.controllers', [])
$scope.search = {}; $scope.search = {};
$scope.historyFilter = {mediaType: false}; $scope.historyFilter = {mediaType: false};
$scope.historyPeer = {}; $scope.historyPeer = {};
$scope.historyState = {selectActions: false, typing: []};
$scope.openSettings = function () { $scope.openSettings = function () {
$modal.open({ $modal.open({
@ -637,9 +638,8 @@ angular.module('myApp.controllers', [])
$scope.skippedHistory = false; $scope.skippedHistory = false;
$scope.selectedMsgs = {}; $scope.selectedMsgs = {};
$scope.selectedCount = 0; $scope.selectedCount = 0;
$scope.selectActions = false; $scope.historyState.selectActions = false;
$scope.missedCount = 0; $scope.missedCount = 0;
$scope.typing = {};
$scope.state = {}; $scope.state = {};
$scope.toggleMessage = toggleMessage; $scope.toggleMessage = toggleMessage;
@ -721,7 +721,7 @@ angular.module('myApp.controllers', [])
}); });
if (preload) { if (preload) {
$scope.typing = {}; $scope.historyState.typing.splice();
$scope.$broadcast('ui_peer_change'); $scope.$broadcast('ui_peer_change');
$scope.$broadcast('ui_history_change'); $scope.$broadcast('ui_history_change');
safeReplaceObject($scope.state, {loaded: true}); safeReplaceObject($scope.state, {loaded: true});
@ -900,7 +900,7 @@ angular.module('myApp.controllers', [])
$scope.$broadcast('ui_selection_clear'); $scope.$broadcast('ui_selection_clear');
} }
if (!$scope.selectActions && !$(target).hasClass('icon-select-tick') && !$(target).hasClass('im_content_message_select_area')) { if (!$scope.historyState.selectActions && !$(target).hasClass('icon-select-tick') && !$(target).hasClass('im_content_message_select_area')) {
return false; return false;
} }
@ -909,7 +909,7 @@ angular.module('myApp.controllers', [])
delete $scope.selectedMsgs[messageID]; delete $scope.selectedMsgs[messageID];
$scope.selectedCount--; $scope.selectedCount--;
if (!$scope.selectedCount) { if (!$scope.selectedCount) {
$scope.selectActions = false; $scope.historyState.selectActions = false;
$scope.$broadcast('ui_panel_update'); $scope.$broadcast('ui_panel_update');
} }
} else { } else {
@ -940,8 +940,8 @@ angular.module('myApp.controllers', [])
$scope.selectedMsgs[messageID] = true; $scope.selectedMsgs[messageID] = true;
$scope.selectedCount++; $scope.selectedCount++;
if (!$scope.selectActions) { if (!$scope.historyState.selectActions) {
$scope.selectActions = true; $scope.historyState.selectActions = true;
$scope.$broadcast('ui_panel_update'); $scope.$broadcast('ui_panel_update');
} }
} }
@ -950,7 +950,7 @@ angular.module('myApp.controllers', [])
function selectedCancel (noBroadcast) { function selectedCancel (noBroadcast) {
$scope.selectedMsgs = {}; $scope.selectedMsgs = {};
$scope.selectedCount = 0; $scope.selectedCount = 0;
$scope.selectActions = false; $scope.historyState.selectActions = false;
lastSelectID = false; lastSelectID = false;
if (!noBroadcast) { if (!noBroadcast) {
$scope.$broadcast('ui_panel_update'); $scope.$broadcast('ui_panel_update');
@ -997,10 +997,10 @@ angular.module('myApp.controllers', [])
} }
function toggleEdit () { function toggleEdit () {
if ($scope.selectActions) { if ($scope.historyState.selectActions) {
selectedCancel(); selectedCancel();
} else { } else {
$scope.selectActions = true; $scope.historyState.selectActions = true;
$scope.$broadcast('ui_panel_update'); $scope.$broadcast('ui_panel_update');
} }
} }
@ -1023,11 +1023,9 @@ angular.module('myApp.controllers', [])
} }
} }
var typingTimeouts = {};
$scope.$on('history_update', angular.noop); $scope.$on('history_update', angular.noop);
var typingTimeouts = {};
$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 ($scope.historyFilter.mediaType || $scope.skippedHistory) { if ($scope.historyFilter.mediaType || $scope.skippedHistory) {
@ -1042,7 +1040,7 @@ angular.module('myApp.controllers', [])
// console.trace(); // console.trace();
$scope.history.push(AppMessagesManager.wrapForHistory(addedMessage.messageID)); $scope.history.push(AppMessagesManager.wrapForHistory(addedMessage.messageID));
AppMessagesManager.regroupWrappedHistory($scope.history, -3); AppMessagesManager.regroupWrappedHistory($scope.history, -3);
$scope.typing = {}; $scope.historyState.typing.splice();
$scope.$broadcast('ui_history_append_new', {my: addedMessage.my}); $scope.$broadcast('ui_history_append_new', {my: addedMessage.my});
if (addedMessage.my) { if (addedMessage.my) {
delete $scope.historyUnreadAfter; delete $scope.historyUnreadAfter;
@ -1084,28 +1082,24 @@ angular.module('myApp.controllers', [])
}); });
$scope.$on('apiUpdate', function (e, update) { $scope.$on('apiUpdate', function (e, update) {
// console.log('on apiUpdate inline', update);
switch (update._) { switch (update._) {
case 'updateUserTyping': case 'updateUserTyping':
if (update.user_id == $scope.curDialog.peerID && AppUsersManager.hasUser(update.user_id)) {
$scope.typing = {user: AppUsersManager.getUser(update.user_id)};
$timeout.cancel(typingTimeouts[update.user_id]);
typingTimeouts[update.user_id] = $timeout(function () {
$scope.typing = {};
}, 6000);
}
break;
case 'updateChatUserTyping': case 'updateChatUserTyping':
if (-update.chat_id == $scope.curDialog.peerID && AppUsersManager.hasUser(update.user_id)) { if (AppUsersManager.hasUser(update.user_id) &&
$scope.typing = {user: AppUsersManager.getUser(update.user_id)}; $scope.curDialog.peerID == (update._ == 'updateUserTyping'
? update.user_id
: -update.chat_id
)) {
if ($scope.historyState.typing.indexOf(update.user_id) == -1) {
$scope.historyState.typing.push(update.user_id);
}
$timeout.cancel(typingTimeouts[update.user_id]); $timeout.cancel(typingTimeouts[update.user_id]);
typingTimeouts[update.user_id] = $timeout(function () { typingTimeouts[update.user_id] = $timeout(function () {
$scope.typing = {}; var pos = $scope.historyState.typing.indexOf(update.user_id);
if (pos !== -1) {
$scope.historyState.typing.splice(pos, 1);
}
}, 6000); }, 6000);
} }
break; break;

20
app/js/directives.js

@ -1554,7 +1554,7 @@ angular.module('myApp.directives', ['myApp.filters'])
}) })
.directive('myUserLink', function ($window, $timeout, $rootScope, AppUsersManager) { .directive('myUserLink', function ($timeout, $rootScope, AppUsersManager) {
return { return {
link: link link: link
@ -1576,8 +1576,24 @@ angular.module('myApp.directives', ['myApp.filters'])
} }
}) })
.directive('myUserStatus', function ($filter, AppUsersManager) {
.directive('myUserPhotolink', function ($window, $timeout, $rootScope, AppUsersManager) { var statusFilter = $filter('userStatus');
return {
link: link
};
function link($scope, element, attrs) {
var userID = $scope.$eval(attrs.myUserStatus),
user = AppUsersManager.getUser(userID);
element.html(statusFilter(user));
}
})
.directive('myUserPhotolink', function ($rootScope, AppUsersManager) {
return { return {
link: link, link: link,

19
app/js/services.js

@ -467,7 +467,6 @@ angular.module('myApp.services', [])
MtpApiManager.getUserID().then(function (myID) { MtpApiManager.getUserID().then(function (myID) {
angular.forEach(chatFull.participants.participants, function(participant){ angular.forEach(chatFull.participants.participants, function(participant){
participant.user = AppUsersManager.getUser(participant.user_id); participant.user = AppUsersManager.getUser(participant.user_id);
participant.userPhoto = AppUsersManager.getUserPhoto(participant.user_id, 'User');
participant.inviter = AppUsersManager.getUser(participant.inviter_id); participant.inviter = AppUsersManager.getUser(participant.inviter_id);
participant.canKick = myID != participant.user_id && (myID == chatFull.participants.admin_id || myID == participant.inviter_id); participant.canKick = myID != participant.user_id && (myID == chatFull.participants.admin_id || myID == participant.inviter_id);
}); });
@ -1741,14 +1740,6 @@ angular.module('myApp.services', [])
message.media.progress = messagesStorage[msgID].media.progress; message.media.progress = messagesStorage[msgID].media.progress;
} }
message.fromUser = AppUsersManager.getUser(message.from_id);
message.fromPhoto = AppUsersManager.getUserPhoto(message.from_id, 'User');
if (message._ == 'messageForwarded') {
message.fwdUser = AppUsersManager.getUser(message.fwd_from_id);
message.fwdPhoto = AppUsersManager.getUserPhoto(message.fwd_from_id, 'User');
}
if (message.media) { if (message.media) {
switch (message.media._) { switch (message.media._) {
case 'messageMediaPhoto': case 'messageMediaPhoto':
@ -1774,11 +1765,6 @@ angular.module('myApp.services', [])
); );
break; break;
} }
if (message.media.user_id) {
message.media.user = AppUsersManager.getUser(message.media.user_id);
message.media.userPhoto = AppUsersManager.getUserPhoto(message.media.user_id, 'User');
}
} }
else if (message.action) { else if (message.action) {
switch (message.action._) { switch (message.action._) {
@ -1791,11 +1777,6 @@ angular.module('myApp.services', [])
message.action.rTitle = RichTextProcessor.wrapRichText(message.action.title, {noLinks: true, noLinebreaks: true}) || 'DELETED'; message.action.rTitle = RichTextProcessor.wrapRichText(message.action.title, {noLinks: true, noLinebreaks: true}) || 'DELETED';
break; break;
} }
if (message.action.user_id) {
message.action.user = AppUsersManager.getUser(message.action.user_id);
message.action.userPhoto = AppUsersManager.getUserPhoto(message.action.user_id, 'User');
}
} }
if (message.message && message.message.length) { if (message.message && message.message.length) {

4
app/partials/chat_modal.html

@ -86,9 +86,9 @@
<a class="chat_modal_participant_photo pull-left" my-user-photolink="participant.user_id" img-class="chat_modal_participant_photo" status="true"></a> <a class="chat_modal_participant_photo pull-left" my-user-photolink="participant.user_id" img-class="chat_modal_participant_photo" status="true"></a>
<div class="chat_modal_participant_name"> <div class="chat_modal_participant_name">
<a my-user-link="participant.user.id"></a> <a my-user-link="participant.user_id"></a>
</div> </div>
<div class="chat_modal_participant_status" ng-bind="participant.user | userStatus"></div> <div class="chat_modal_participant_status" my-user-status="participant.user_id"></div>
</div> </div>
</div> </div>

19
app/partials/im.html

@ -156,7 +156,7 @@
<div class="im_history_scrollable_wrap nano-content"> <div class="im_history_scrollable_wrap nano-content">
<div class="im_history_scrollable"> <div class="im_history_scrollable">
<div class="im_history" ng-class="{im_history_selectable: selectActions}"> <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"> <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-when="true">Loading history<span my-loading-dots></span></span>
<span ng-switch-default>No messages here yet...</span> <span ng-switch-default>No messages here yet...</span>
@ -168,8 +168,17 @@
</div> </div>
<div class="im_history_typing_wrap"> <div class="im_history_typing_wrap">
<div class="im_history_typing" ng-show="typing.user &amp;&amp; !historyFilter.mediaType">
<strong class="im_history_typing_author" ng-bind-html="typing.user.rFullName"></strong> 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 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>
@ -181,7 +190,7 @@
<div class="im_bottom_panel_wrap"> <div class="im_bottom_panel_wrap">
<div class="im_edit_panel_wrap clearfix" ng-show="selectActions"> <div class="im_edit_panel_wrap clearfix" ng-show="historyState.selectActions">
<div class="im_edit_panel_border"></div> <div class="im_edit_panel_border"></div>
<a class="im_edit_flush_link" ng-click="selectedFlush()" ng-switch="historyPeer.id > 0"> <a class="im_edit_flush_link" ng-click="selectedFlush()" ng-switch="historyPeer.id > 0">
<span ng-switch-when="true">Delete Chat</span> <span ng-switch-when="true">Delete Chat</span>
@ -197,7 +206,7 @@
</div> </div>
</div> </div>
<div class="im_send_panel_wrap" ng-hide="selectActions"> <div class="im_send_panel_wrap" ng-hide="historyState.selectActions">
<div class="im_send_form_wrap1"> <div class="im_send_form_wrap1">

6
app/partials/message_attach_contact.html

@ -1,7 +1,7 @@
<div> <div>
<a class="im_message_contact_photo pull-left" my-user-photolink="historyMessage.media.user.id" img-class="im_message_contact_photo"></a> <a class="im_message_contact_photo pull-left" my-user-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo"></a>
<div class="im_message_contact_name" ng-switch="historyMessage.media.user.id > 0"> <div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
<a ng-switch-when="true" my-user-link="historyMessage.media.user.id"></a> <a ng-switch-when="true" my-user-link="historyMessage.media.user_id"></a>
<span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span> <span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span>
</div> </div>
<div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div> <div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div>

Loading…
Cancel
Save