diff options
author | Jessica Greene <jessica0greene@gmail.com> | 2018-04-26 22:36:32 +0200 |
---|---|---|
committer | Jessica Greene <jessica0greene@gmail.com> | 2018-04-26 22:36:32 +0200 |
commit | 1ff655f9af14c0f47d0aa8740968b386e5fa8805 (patch) | |
tree | 93024638f1ca057890d649af6559d4d0951d0010 | |
parent | 0c1a1269004ac4cb4c9b6e14539e40c4a3b70b36 (diff) |
Introduced 3-dot-menu in top right for Download and Delete
-rw-r--r-- | css/_details.scss | 18 | ||||
-rw-r--r-- | js/components/contactDetails/contactDetails_controller.js | 17 | ||||
-rw-r--r-- | templates/contactDetails.html | 33 |
3 files changed, 47 insertions, 21 deletions
diff --git a/css/_details.scss b/css/_details.scss index 5a57775e..77620591 100644 --- a/css/_details.scss +++ b/css/_details.scss @@ -71,6 +71,8 @@ .contactdetails__header #details-actions { display: flex; flex-shrink: 0; + padding: 14px; + width: 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..9891e84e 100644 --- a/templates/contactDetails.html +++ b/templates/contactDetails.html @@ -34,11 +34,34 @@ </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> + <span class="icon-more-white openMenuButton" ng-click="ctrl.toggleMenu('options')"> + </span> + <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"> + <span class="icon-checkmark"></span> + <span>Update</span> + </a> + </li> + <li> + <a href="{{ctrl.contact.data.url}}" id="contact-export-link" + download="{{ ctrl.contact.readableFilename() }}"> + <span class="icon-download"></span> + <span>Download</span> + </a> + </li> + <li ng-if="!ctrl.addressBook.readOnly"> + <a ng-click="ctrl.deleteContact()"> + <span class="icon-delete"></span> + <span>Delete</span> + </a> + </li> + </ul> + </div> </div> </header> <section> |