diff options
| author | John Molakvoæ <skjnldsv@users.noreply.github.com> | 2017-09-21 15:00:24 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-09-21 15:00:24 +0200 |
| commit | f271d147d0d5eef35348222a6ef5fc74bc5cc946 (patch) | |
| tree | 48c2c796f03d55f8375cbf7f8b83817ec0ef4e03 | |
| parent | f34895414a349864cb1bb6d49438850964cad4ff (diff) | |
| parent | 8f7e303372f30c6060aaf402faa5d24b7fe6abb1 (diff) | |
Merge pull request #349 from nextcloud/loading-on-contact-switch
Add loading in details view on contact switch and initialisation
| -rw-r--r-- | css/_details.scss | 1 | ||||
| -rw-r--r-- | js/components/contactDetails/contactDetails_controller.js | 12 | ||||
| -rw-r--r-- | templates/contactDetails.html | 13 |
3 files changed, 19 insertions, 7 deletions
diff --git a/css/_details.scss b/css/_details.scss index 0230cc29..d51f6fca 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..333c2927 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() { @@ -21,11 +22,12 @@ angular.module('contactsApp') placeholderName : t('contacts', 'Name'), placeholderOrg : t('contacts', 'Organization'), placeholderTitle : t('contacts', 'Title'), - selectField : t('contacts', 'Add field ...'), + selectField : t('contacts', 'Add field …'), 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', 'Loading contacts …') }; 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> |