Merge pull request #550 from nextcloud/fix-issue-354

Introduced 3-dot-menu in top right for Download and Delete

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>