diff options
-rw-r--r-- | css/_details.scss | 24 | ||||
-rw-r--r-- | js/components/contactDetails/contactDetails_controller.js | 17 | ||||
-rw-r--r-- | templates/contactDetails.html | 29 |
3 files changed, 46 insertions, 24 deletions
diff --git a/css/_details.scss b/css/_details.scss index 5a57775e..777ea4a9 100644 --- a/css/_details.scss +++ b/css/_details.scss @@ -68,9 +68,11 @@ width: 100%; } -.contactdetails__header #details-actions { - display: flex; - flex-shrink: 0; +.contactdetails__header #details-actions div.icon-more-white { + cursor: pointer; + padding: 14px; + width: 44px; + height: 44px; } .contactdetails__header #contact-failed-save { @@ -107,22 +109,6 @@ opacity: .8; } -.contactdetails__header #details-actions a, -.contactdetails__header #details-actions button { - padding: 15px; - background-color: transparent; - border: none; - opacity: .5; - margin: 3px; -} - -.contactdetails__header #details-actions a:hover, -.contactdetails__header #details-actions button:hover, -.contactdetails__header #details-actions a:focus, -.contactdetails__header #details-actions button:focus { - opacity: .7; -} - avatar { position: relative; height: 75px; diff --git a/js/components/contactDetails/contactDetails_controller.js b/js/components/contactDetails/contactDetails_controller.js index 0ead69ee..7b273992 100644 --- a/js/components/contactDetails/contactDetails_controller.js +++ b/js/components/contactDetails/contactDetails_controller.js @@ -98,4 +98,21 @@ angular.module('contactsApp') ctrl.updateContact = function() { ContactService.queueUpdate(ctrl.contact); }; + + ctrl.closeMenus = function() { + ctrl.openedMenu = false; + }; + + ctrl.openMenu = function(index) { + ctrl.closeMenus(); + ctrl.openedMenu = index; + }; + + ctrl.toggleMenu = function(index) { + if (ctrl.openedMenu === index) { + ctrl.closeMenus(); + } else { + ctrl.openMenu(index); + } + }; }); diff --git a/templates/contactDetails.html b/templates/contactDetails.html index b8a44d08..84460f82 100644 --- a/templates/contactDetails.html +++ b/templates/contactDetails.html @@ -34,11 +34,30 @@ </div> </div> <div id="details-actions"> - <button id="contact-failed-save" ng-click="ctrl.updateContact()" class="icon-checkmark-white" ng-if="ctrl.contact.failedProps.length>0" title="{{ctrl.t.save}}"></button> - <a href="{{ctrl.contact.data.url}}" id="contact-export-link" - class="icon-download-white" title="{{ctrl.t.download}}" - download="{{ ctrl.contact.readableFilename() }}"></a> - <button ng-click="ctrl.deleteContact()" ng-if="!ctrl.addressBook.readOnly" class="icon-delete-white" title="{{ctrl.t.delete}}"></button> + <div class="icon-more-white openMenuButton" ng-click="ctrl.toggleMenu('options')"> + </div> + <div class="popovermenu bubble menu" + ng-class="{open: ctrl.openedMenu === 'options'}" + click-outside="ctrl.closeMenus()" + outside-if-not="openMenuButton,popovermenu"> + <ul> + <li ng-if="ctrl.contact.failedProps.length>0"> + <a id="contact-failed-save" ng-click="ctrl.updateContact()" uib-tooltip="Contact failed to save please update" class="icon-checkmark"> + <span>Update</span> + </a> + </li> + <li> + <a href="{{ctrl.contact.data.url}}" id="contact-export-link" download="{{ ctrl.contact.readableFilename() }}" class="icon-download"> + <span>Download</span> + </a> + </li> + <li ng-if="!ctrl.addressBook.readOnly"> + <a ng-click="ctrl.deleteContact()" class="icon-delete"> + <span>Delete</span> + </a> + </li> + </ul> + </div> </div> </header> <section> |