LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(js) Show loading progress for messages and cards

pull/210/head
Francis Lachapelle 2016-05-30 12:29:58 -04:00
parent c46a5f8df7
commit 5c2aedb3c9
11 changed files with 135 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
NEWS
View File

@ -5,6 +5,7 @@ Enhancements
- [web] expose all email addresses in autocompletion of message editor (#3443)
- [web] Gravatar service can now be disabled (#3600)
- [web] collapsable mail accounts (#3493)
- [web] show progress indicator when loading messages and cards
Bug fixes
- [web] fixed creation of chip on blur (sgTransformOnBlur directive)

9
UI/Templates/ContactsUI/UIxContactFoldersView.wox
View File

@ -411,17 +411,22 @@
<!-- selected avatar -->
<!-- </div> -->
<sg-avatar-image class="md-avatar"
ng-if="addressbook.notSelectedComponent(currentCard, 'vcard')"
ng-if="currentCard.$isCard()"
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query.value)"
sg-src="currentCard.photoURL"
size="40">
<!-- contact avatar -->
</sg-avatar-image>
<div class="md-avatar sg-avatar-list"
ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')">
ng-show="currentCard.$isList()">
<!-- list avatar -->
</div>
</div>
<div class="sg-progress-linear-bottom">
<md-progress-linear class="md-accent"
md-mode="indeterminate"
ng-show="currentCard.$isLoading()"><!-- progress --></md-progress-linear>
</div>
</md-list-item>
</md-list>
</md-virtual-repeat-container>

7
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@ -302,6 +302,11 @@
<md-icon class="ng-hide" ng-show="currentMessage.isforwarded">forward</md-icon>
<md-icon class="ng-hide" ng-show="currentMessage.hasattachment">attach_file</md-icon>
</div>
<div class="sg-progress-linear-bottom">
<md-progress-linear class="md-accent"
md-mode="indeterminate"
ng-show="currentMessage.$isLoading()"><!-- message loading progress --></md-progress-linear>
</div>
</md-list-item>
</md-list>
</md-virtual-repeat-container>
@ -309,7 +314,7 @@
ng-show="mailbox.service.selectedFolder.$isLoading">
<md-progress-circular class="md-accent"
md-mode="indeterminate"
md-diameter="32"><!-- progress --></md-progress-circular>
md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
</div>
<md-button class="md-fab md-fab-bottom-right md-accent"
label:aria-label="Write a new message"

4
UI/WebServerResources/js/Contacts/AddressBook.service.js
View File

@ -483,7 +483,7 @@
// Add new cards matching the search query
_.forEach(results, function(cardId, index) {
if (_.isUndefined(_.find(cards, _.bind(compareIds, cardId)))) {
var data = { id: cardId };
var data = { pid: addressbookId, id: cardId };
var card = new AddressBook.$Card(data, search);
cards.splice(index, 0, card);
}
@ -686,7 +686,7 @@
// Instanciate Card objects
_.reduce(_this.ids, function(cards, card, i) {
var data = { id: card };
var data = { pid: _this.id, id: card };
// Build map of ID <=> index
_this.idsMap[data.id] = i;

15
UI/WebServerResources/js/Contacts/AddressBookController.js
View File

@ -17,7 +17,6 @@
vm.selectCard = selectCard;
vm.toggleCardSelection = toggleCardSelection;
vm.newComponent = newComponent;
vm.notSelectedComponent = notSelectedComponent;
vm.unselectCards = unselectCards;
vm.confirmDeleteSelectedCards = confirmDeleteSelectedCards;
vm.copySelectedCards = copySelectedCards;
@ -79,10 +78,6 @@
}
}
function notSelectedComponent(currentCard, type) {
return (currentCard && currentCard.c_component == type && !currentCard.selected);
}
function unselectCards() {
_.forEach(vm.selectedFolder.$cards, function(card) {
card.selected = false;
@ -180,12 +175,10 @@
});
}
else {
promises.push(vm.selectedFolder.$getCard(card.id).then(function(card) {
return card.$futureCardData.then(function(data) {
_.forEach(data.refs, function(ref) {
if (ref.email.length)
recipients.push(ref.$shortFormat());
});
promises.push(card.$reload().then(function(card) {
_.forEach(card.refs, function(ref) {
if (ref.email.length)
recipients.push(ref.$shortFormat());
});
}));
}

43
UI/WebServerResources/js/Contacts/Card.service.js
View File

@ -70,9 +70,11 @@
}
angular.module('SOGo.ContactsUI')
.constant('sgCard_STATUS', {
NOT_LOADED: 0,
LOADING: 1,
LOADED: 2
NOT_LOADED: 0,
DELAYED_LOADING: 1,
LOADING: 2,
LOADED: 3,
DELAYED_MS: 300
})
.factory('Card', Card.$factory);
@ -164,6 +166,33 @@
});
};
/**
* @function $isLoading
* @memberof Card.prototype
* @returns true if the Card definition is still being retrieved from server after a specific delay
* @see sgCard_STATUS
*/
Card.prototype.$isLoading = function() {
return this.$loaded == Card.STATUS.LOADING;
};
/**
* @function $reload
* @memberof Message.prototype
* @desc Fetch the viewable message body along with other metadata such as the list of attachments.
* @returns a promise of the HTTP operation
*/
Card.prototype.$reload = function() {
var futureCardData;
if (this.$futureCardData)
return this;
futureCardData = Card.$$resource.fetch([this.pid, this.id].join('/'), 'view');
return this.$unwrap(futureCardData);
};
/**
* @function $save
* @memberof Card.prototype
@ -498,7 +527,11 @@
var _this = this;
// Card is not loaded yet
this.$loaded = Card.STATUS.LOADING;
this.$loaded = Card.STATUS.DELAYED_LOADING;
Card.$timeout(function() {
if (_this.$loaded != Card.STATUS.LOADED)
_this.$loaded = Card.STATUS.LOADING;
}, Card.STATUS.DELAYED_MS);
// Expose the promise
this.$futureCardData = futureCardData.then(function(data) {
@ -523,6 +556,8 @@
return _this;
});
return this.$futureCardData;
};
/**

37
UI/WebServerResources/js/Contacts/Contacts.app.js
View File

@ -64,7 +64,9 @@
},
resolve: {
stateCard: stateCard
}
},
onEnter: onEnterCard,
onExit: onExitCard
})
.state('app.addressbook.card.view', {
url: '/view',
@ -129,10 +131,37 @@
/**
* @ngInject
*/
stateCard.$inject = ['$stateParams', 'stateAddressbook'];
function stateCard($stateParams, stateAddressbook) {
stateCard.$inject = ['$state', '$stateParams', 'stateAddressbook'];
function stateCard($state, $stateParams, stateAddressbook) {
var card;
card = _.find(stateAddressbook.$cards, function(cardObject) {
return (cardObject.id == $stateParams.cardId);
});
if (card) {
return card.$reload();
}
else {
// Card not found
$state.go('app.addressbook');
}
}
/**
* @ngInject
*/
onEnterCard.$inject = ['$stateParams', 'stateAddressbook'];
function onEnterCard($stateParams, stateAddressbook) {
stateAddressbook.selectedCard = $stateParams.cardId;
return stateAddressbook.$getCard($stateParams.cardId);
}
/**
* @ngInject
*/
onExitCard.$inject = ['stateAddressbook'];
function onExitCard(stateMailbox) {
delete stateAddressbook.selectedCard;
}
/**

2
UI/WebServerResources/js/Mailer/Mailbox.service.js
View File

@ -600,7 +600,7 @@
* @return the index of the first deleted message
*/
Mailbox.prototype.$_deleteMessages = function(uids, messages) {
var _this = this, selectedMessages, selectedUIDs, unseen, firstIndex = this.$messages.length;
var _this = this, selectedUIDs, _$messages, unseen, firstIndex = this.$messages.length;
// Decrement the unseen count
unseen = _.filter(messages, function(message, i) { return !message.isread; });

8
UI/WebServerResources/js/Mailer/Mailer.app.js
View File

@ -61,13 +61,13 @@
controllerAs: 'viewer'
}
},
onEnter: onEnterMessage,
onExit: onExitMessage,
resolve: {
stateMailbox: stateVirtualMailboxOfMessage,
stateMessages: stateMessages,
stateMessage: stateMessage
}
},
onEnter: onEnterMessage,
onExit: onExitMessage
})
.state('mail.account.inbox', {
url: '/inbox',
@ -279,7 +279,7 @@
});
if (message) {
return message.$reload();
return message.$reload({useCache: true});
}
else {
// Message not found

32
UI/WebServerResources/js/Mailer/Message.service.js
View File

@ -39,8 +39,9 @@
* @desc The factory we'll use to register with Angular
* @returns the Message constructor
*/
Message.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'Gravatar', 'Resource', 'Preferences', function($q, $timeout, $log, Settings, Gravatar, Resource, Preferences) {
Message.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgMessage_STATUS', 'Gravatar', 'Resource', 'Preferences', function($q, $timeout, $log, Settings, Message_STATUS, Gravatar, Resource, Preferences) {
angular.extend(Message, {
STATUS: Message_STATUS,
$q: $q,
$timeout: $timeout,
$log: $log,
@ -72,6 +73,13 @@
angular.module('SOGo.MailerUI', ['SOGo.Common']);
}
angular.module('SOGo.MailerUI')
.constant('sgMessage_STATUS', {
NOT_LOADED: 0,
DELAYED_LOADING: 1,
LOADING: 2,
LOADED: 3,
DELAYED_MS: 300
})
.factory('Message', Message.$factory);
/**
@ -503,15 +511,29 @@
});
};
/**
* @function $isLoading
* @memberof Message.prototype
* @returns true if the Message content is still being retrieved from server after a specific delay
* @see sgMessage_STATUS
*/
Message.prototype.$isLoading = function() {
return this.$loaded == Message.STATUS.LOADING;
};
/**
* @function $reload
* @memberof Message.prototype
* @desc Fetch the viewable message body along with other metadata such as the list of attachments.
* @param {object} [options] - set {useCache: true} to use already fetched data
* @returns a promise of the HTTP operation
*/
Message.prototype.$reload = function(options) {
var futureMessageData;
if (options && options.useCache && this.$futureMessageData)
return this;
futureMessageData = Message.$$resource.fetch(this.$absolutePath(options), 'view');
return this.$unwrap(futureMessageData);
@ -638,6 +660,13 @@
Message.prototype.$unwrap = function(futureMessageData) {
var _this = this;
// Message is not loaded yet
this.$loaded = Message.STATUS.DELAYED_LOADING;
Message.$timeout(function() {
if (_this.$loaded != Message.STATUS.LOADED)
_this.$loaded = Message.STATUS.LOADING;
}, Message.STATUS.DELAYED_MS);
// Resolve and expose the promise
this.$futureMessageData = futureMessageData.then(function(data) {
// Calling $timeout will force Angular to refresh the view
@ -653,6 +682,7 @@
angular.extend(_this, data);
_this.$formatFullAddresses();
_this.$loadUnsafeContent = false;
_this.$loaded = Message.STATUS.LOADED;
return _this;
});
});

7
UI/WebServerResources/scss/components/progressLinear/progress-linear.scss
View File

@ -1,2 +1,9 @@
/// progressLinear.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
.sg-progress-linear-bottom {
bottom: 0;
left: 0;
position: absolute;
right: 0;
}