diff options
| -rw-r--r-- | css/_settings.scss | 26 | ||||
| -rw-r--r-- | js/components/addressBookList/addressBookList_controller.js | 6 | ||||
| -rw-r--r-- | templates/addressBookList.html | 13 |
3 files changed, 31 insertions, 14 deletions
diff --git a/css/_settings.scss b/css/_settings.scss index e49ac6be..e277b538 100644 --- a/css/_settings.scss +++ b/css/_settings.scss @@ -3,15 +3,12 @@ } .addressBookList form { - position: relative; width: 100%; + display: inline-flex; } -ul.addressBookList > li { - padding: 6px 0; - display: flex; - align-items: center; - flex-wrap: wrap; +.addressBookList form input.ng-invalid-pattern { + border-color: $color-error !important; } ul.addressBookList > li { @@ -21,6 +18,14 @@ ul.addressBookList > li { flex-wrap: wrap; } +ul.addressBookList > li.newAddressBookContainer { + position: initial !important; +} + +ul.addressBookList > li.newAddressBookContainer .tooltip { + width: 175px; +} + ul.addressBook-share-list { margin-top: 8px; margin-bottom: 12px; @@ -71,8 +76,7 @@ ul.addressBookList li .action > a { addressBookList input[type='submit'].inline-button, addressBookList input[type='button'].inline-button { position: absolute; - right: 0; - top: 0; + right: 14px; padding: 6px 15px; background-color: transparent; border: none; @@ -124,6 +128,12 @@ div.addressBookShares ul.dropdown-menu li > a { line-height: 30px !important; } +ul.dropdown-menu li { + width: 100%; + padding: 3px 7px 4px; + cursor: pointer; +} + ul.dropdown-menu li.active { background: nc-darken($color-main-background, 6%); } diff --git a/js/components/addressBookList/addressBookList_controller.js b/js/components/addressBookList/addressBookList_controller.js index 1cf5ed77..092f9f0b 100644 --- a/js/components/addressBookList/addressBookList_controller.js +++ b/js/components/addressBookList/addressBookList_controller.js @@ -4,6 +4,7 @@ angular.module('contactsApp') ctrl.loading = true; ctrl.openedMenu = false; + ctrl.addressBookRegex = /^[a-zA-Z0-9À-ÿ\s-_.!?#|()]+$/i; AddressBookService.getAll().then(function(addressBooks) { ctrl.addressBooks = addressBooks; @@ -19,7 +20,8 @@ angular.module('contactsApp') }); ctrl.t = { - addressBookName : t('contacts', 'Address book name') + addressBookName : t('contacts', 'Address book name'), + regexError : t('contacts', 'Only these special characters are allowed: -_.!?#|()') }; ctrl.createAddressBook = function() { @@ -29,6 +31,8 @@ angular.module('contactsApp') ctrl.addressBooks.push(addressBook); $scope.$apply(); }); + }).catch(function() { + OC.Notification.showTemporary(t('contacts', 'Address book could not be created.')); }); } }; diff --git a/templates/addressBookList.html b/templates/addressBookList.html index 4a9b0738..2ddfd3d4 100644 --- a/templates/addressBookList.html +++ b/templates/addressBookList.html @@ -1,12 +1,15 @@ <i ng-show="ctrl.loading" style="display: block" class="icon-loading-small"></i> <ul class="addressBookList"> <li ng-repeat="addressBook in ctrl.addressBooks" addressbook data="addressBook" list="ctrl.addressBooks"></li> - <li> - <form ng-submit="ctrl.createAddressBook()"> + <li class="newAddressBookContainer"> + <form ng-submit="ctrl.createAddressBook()" name="newAddressBookForm"> <input id="newList" placeholder="{{ctrl.t.addressBookName}}" class="newAddressBookInput" - ng-model="ctrl.newAddressBookName" type="text" - autocomplete="off" autocorrect="off" spellcheck="false" /> - <input type="submit" value="" class="newAddressBookSubmit inline-button icon-confirm action pull-right" /> + ng-model="ctrl.newAddressBookName" type="text" ng-minlength="1" + autocomplete="off" autocorrect="off" spellcheck="false" tooltip-enable="!newAddressBookForm.$pristine" + required ng-pattern="ctrl.addressBookRegex" tooltip-is-open="newAddressBookForm.$invalid && !newAddressBookForm.$error.required" tooltip-trigger="none" + tooltip-placement="top" uib-tooltip="{{ctrl.t.regexError}}" /> + <input type="submit" value="" class="newAddressBookSubmit inline-button icon-confirm action pull-right" + ng-disabled="newAddressBookForm.$invalid || newAddressBookForm.$pristine" /> </form> </li> </ul> |