diff options
-rw-r--r-- | css/_details.scss | 1 | ||||
-rw-r--r-- | js/components/contactDetails/contactDetails_controller.js | 10 | ||||
-rw-r--r-- | templates/contactDetails.html | 13 |
3 files changed, 18 insertions, 6 deletions
diff --git a/css/_details.scss b/css/_details.scss index 33da128d..3594944c 100644 --- a/css/_details.scss +++ b/css/_details.scss @@ -1,6 +1,7 @@ .contact-details-wrapper { position: relative; background: $color-main-background; + min-height: 100%; } .wrapper-show { diff --git a/js/components/contactDetails/contactDetails_controller.js b/js/components/contactDetails/contactDetails_controller.js index ca64648d..1a368cc2 100644 --- a/js/components/contactDetails/contactDetails_controller.js +++ b/js/components/contactDetails/contactDetails_controller.js @@ -3,7 +3,8 @@ angular.module('contactsApp') var ctrl = this; - ctrl.loading = true; + ctrl.init = true; + ctrl.loading = false; ctrl.show = false; ctrl.clearContact = function() { @@ -25,7 +26,8 @@ angular.module('contactsApp') download : t('contacts', 'Download'), delete : t('contacts', 'Delete'), save : t('contacts', 'Save changes'), - addressBook : t('contacts', 'Address book') + addressBook : t('contacts', 'Address book'), + loading : t('contacts', 'Waiting for the contact list to load...') }; ctrl.fieldDefinitions = vCardPropertiesService.fieldDefinitions; @@ -41,7 +43,7 @@ angular.module('contactsApp') return book.displayName === ctrl.contact.addressBookId; }); } - ctrl.loading = false; + ctrl.init = false; // Start watching for ctrl.uid when we have addressBooks, as they are needed for fetching // full details. $scope.$watch('ctrl.uid', function(newValue) { @@ -56,6 +58,7 @@ angular.module('contactsApp') $('#app-navigation-toggle').removeClass('showdetails'); return; } + ctrl.loading = true; ContactService.getById(ctrl.addressBooks, uid).then(function(contact) { if (angular.isUndefined(contact)) { ctrl.clearContact(); @@ -63,6 +66,7 @@ angular.module('contactsApp') } ctrl.contact = contact; ctrl.show = true; + ctrl.loading = false; $('#app-navigation-toggle').addClass('showdetails'); ctrl.addressBook = _.find(ctrl.addressBooks, function(book) { diff --git a/templates/contactDetails.html b/templates/contactDetails.html index 568610c8..92131b92 100644 --- a/templates/contactDetails.html +++ b/templates/contactDetails.html @@ -1,11 +1,18 @@ -<div class="contact-details-wrapper wrapper-show" ng-class="{'mobile-show':ctrl.show}"> +<div class="contact-details-wrapper wrapper-show" + ng-class="{'mobile-show': ctrl.show, 'icon-loading': ctrl.loading}"> <div id="app-navigation-toggle-back" class="details-back icon-download" ng-click="ctrl.clearContact()"></div> - <div ng-if="ctrl.contact===undefined && !ctrl.loading"> - <div id="emptycontent" class=""> + <div ng-if="ctrl.contact===undefined && !ctrl.loading && !ctrl.init"> + <div id="emptycontent"> <div class="icon-contacts-dark"></div> <h2>{{ctrl.t.noContacts}}</h2> </div> </div> + <div ng-if="ctrl.init"> + <div id="emptycontent"> + <div class="icon-contacts-dark"></div> + <h2>{{ctrl.t.loading}}</h2> + </div> + </div> <div ng-if="ctrl.contact!==undefined"> <header class="contactdetails__header" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}"> <avatar data="ctrl.contact" ng-class="{'avatar--missing': ctrl.contact.photo()===undefined}"></avatar> |