diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2017-08-09 14:41:24 +0200 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2017-08-09 14:41:24 +0200 |
| commit | 37286ac317e5717f3f0ece4f98dc5dc07dacae55 (patch) | |
| tree | 13553d63dccd342acb0b7598b4c3bfb830cda7de | |
| parent | dc071da35a6a4b72417e2062170443d024657cb4 (diff) | |
Better importing design
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
| -rw-r--r-- | css/public/style.css | 7 | ||||
| -rw-r--r-- | js/components/contactImport/contactImport_controller.js | 2 | ||||
| -rw-r--r-- | js/components/contactImport/contactImport_directive.js | 6 | ||||
| -rw-r--r-- | templates/contactImport.html | 2 |
4 files changed, 14 insertions, 3 deletions
diff --git a/css/public/style.css b/css/public/style.css index 1bd544c4..448402ae 100644 --- a/css/public/style.css +++ b/css/public/style.css @@ -468,6 +468,7 @@ li.calendar-share-item span.shareeIdentifier { opacity: 0.5; } +/* Contact import */ #app-settings-content #upload.button { width: 100%; padding: 7px 10px; @@ -475,9 +476,13 @@ li.calendar-share-item span.shareeIdentifier { background-position: 10px center; text-align: left; margin: 0; - display: block; + display: inline-flex; margin-bottom: 0; border-radius: 3px 3px 0 0; + justify-content: space-between; +} +#app-settings-content #upload.button::after { + left: 17px; /* half the padding */ } contactimport .select2-container { diff --git a/js/components/contactImport/contactImport_controller.js b/js/components/contactImport/contactImport_controller.js index c93952ac..51ccf34f 100644 --- a/js/components/contactImport/contactImport_controller.js +++ b/js/components/contactImport/contactImport_controller.js @@ -11,6 +11,8 @@ angular.module('contactsApp') ctrl.import = ContactService.import.bind(ContactService); ctrl.loading = true; ctrl.importText = ctrl.t.importText; + ctrl.status = ''; + ctrl.loadingClass = 'icon-upload'; AddressBookService.getAll().then(function(addressBooks) { ctrl.addressBooks = addressBooks; diff --git a/js/components/contactImport/contactImport_directive.js b/js/components/contactImport/contactImport_directive.js index 30e16f07..7b36c25f 100644 --- a/js/components/contactImport/contactImport_directive.js +++ b/js/components/contactImport/contactImport_directive.js @@ -12,8 +12,12 @@ angular.module('contactsApp') ContactService.import.call(ContactService, reader.result, file.type, ctrl.selectedAddressBook, function (progress) { if (progress === 1) { ctrl.importText = ctrl.t.importText; + ctrl.status = ''; + ctrl.loadingClass = 'icon-upload'; } else { - ctrl.importText = ctrl.t.importingText + ' ' + parseInt(Math.floor(progress * 100)) + '%'; + ctrl.importText = ctrl.t.importingText; + ctrl.status = parseInt(Math.floor(progress * 100)) + '%'; + ctrl.loadingClass = 'icon-loading-small'; } }); }); diff --git a/templates/contactImport.html b/templates/contactImport.html index a0f7f180..dfdeb439 100644 --- a/templates/contactImport.html +++ b/templates/contactImport.html @@ -1,5 +1,5 @@ <input type="file" id="contact-import" class="hidden-visually" multiple/> -<label for="contact-import" class="icon-upload button" id="upload">{{ctrl.importText}}</label> +<label for="contact-import" class="button {{ctrl.loadingClass}}" id="upload">{{ctrl.importText}}<span class="import-perc">{{ctrl.status}}</span></label> <ui-select ng-model="ctrl.selectedAddressBook" ng-disabled="ctrl.addressBooks.length < 2" theme="select2" class="form-control" title="{{ctrl.t.selectAddressbook}}" uis-open-close="ctrl.stopHideMenu(isOpen)" ng-class="{'icon-loading-small': ctrl.loading}"> |