diff options
-rw-r--r-- | css/public/style.css | 4 | ||||
-rw-r--r-- | js/components/addressBook/addressBook_controller.js | 12 | ||||
-rw-r--r-- | js/components/select_directive.js | 23 | ||||
-rw-r--r-- | templates/addressBook.html | 14 |
4 files changed, 51 insertions, 2 deletions
diff --git a/css/public/style.css b/css/public/style.css index f5764886..640a2c11 100644 --- a/css/public/style.css +++ b/css/public/style.css @@ -314,6 +314,10 @@ avatar.failed { } /* addressbook settings */ +input.renameAddressBookInput { + width: calc(100% - 32px) !important; +} + ul.addressBookList > li { padding: 6px 0; display: flex; diff --git a/js/components/addressBook/addressBook_controller.js b/js/components/addressBook/addressBook_controller.js index 405b691c..fbfc106c 100644 --- a/js/components/addressBook/addressBook_controller.js +++ b/js/components/addressBook/addressBook_controller.js @@ -8,12 +8,15 @@ angular.module('contactsApp') clickToCopy: t('contacts', 'Click to copy the URL into your clipboard'), shareAddressbook: t('contacts', 'Toggle share'), deleteAddressbook: t('contacts', 'Delete'), + renameAddressbook: t('contacts', 'Rename'), shareInputPlaceHolder: t('contacts', 'Share with users or groups'), delete: t('contacts', 'Delete'), canEdit: t('contacts', 'can edit'), close: t('contacts', 'Close') }; + ctrl.editing = false; + ctrl.tooltipIsOpen = false; ctrl.tooltipTitle = ctrl.t.clickToCopy; ctrl.showInputUrl = false; @@ -39,6 +42,15 @@ angular.module('contactsApp') $('#addressBookUrl_'+ctrl.addressBook.ctag).select(); }; + ctrl.renameAddressBook = function() { + AddressBookService.rename(ctrl.addressBook, ctrl.addressBook.displayName); + ctrl.editing = false; + }; + + ctrl.edit = function() { + ctrl.editing = true; + }; + /* globals oc_config */ function compareVersion(version1, version2) { for (var i = 0; i < Math.max(version1.length, version2.length); i++) { diff --git a/js/components/select_directive.js b/js/components/select_directive.js new file mode 100644 index 00000000..3e60d170 --- /dev/null +++ b/js/components/select_directive.js @@ -0,0 +1,23 @@ +angular.module('contactsApp') +.directive('selectExpression', function ($timeout) { + return { + restrict: 'A', + link: { + post: function postLink(scope, element, attrs) { + scope.$watch(attrs.selectExpression, function () { + if (attrs.selectExpression) { + if (scope.$eval(attrs.selectExpression)) { + $timeout(function () { + if (element.is('input')) { + element.select(); + } else { + element.find('input').select(); + } + }, 100); //need some delay to work with ng-disabled + } + } + }); + } + } + }; +}); diff --git a/templates/addressBook.html b/templates/addressBook.html index 73c2aca1..eb34218e 100644 --- a/templates/addressBook.html +++ b/templates/addressBook.html @@ -1,5 +1,9 @@ -<span class="addressBookName" title="{{ctrl.addressBook.displayName}}">{{ctrl.addressBook.displayName}}</span> -<span class="utils"> +<form ng-submit="ctrl.renameAddressBook()" ng-show="ctrl.editing"> + <input select-expression="ctrl.editing" placeholder="{{ctrl.t.addressBookName}}" class="renameAddressBookInput" ng-model="ctrl.addressBook.displayName" type="text" /> + <input type="submit" value="" class="renameAddressBookSubmit icon-confirm action pull-right" /> +</form> +<span class="addressBookName" title="{{ctrl.addressBook.displayName}}" ng-hide="ctrl.editing">{{ctrl.addressBook.displayName}}</span> +<span class="utils" ng-hide="ctrl.editing"> <span class="action"> <span class="addressbooklist-icon icon-shared" @@ -34,6 +38,12 @@ <span>{{ctrl.t.download}}</span> </a> </li> + <li> + <button ng-click="ctrl.edit()"> + <span class="icon icon-rename"></span> + <span>{{ctrl.t.renameAddressbook}}</span> + </button> + </li> <li ng-if="ctrl.list.length > 1"> <button ng-click="ctrl.deleteAddressBook()"> <span class="icon icon-delete"></span> |