add contacts popover

apps/comments/css/comments.css

@@ -54,7 +54,6 @@
 
 #commentsTabView .comment {
 	position: relative;
-	z-index: 1;
 	margin-bottom: 30px;
 }
 
@@ -108,6 +107,11 @@
 	vertical-align: middle;
 }
 
+#commentsTabView .authorRow>div.hidden {
+	display: none !important;
+}
+
+#commentsTabView .comments li .message .avatar-name-wrapper,
 #commentsTabView .comment .authorRow {
 	position: relative;
 }

apps/comments/js/commentstabview.js

@@ -232,6 +232,21 @@
 				var $this = $(this);
 				$this.avatar($this.attr('data-username'), 32);
 			});
+
+			var username = $el.find('.avatar').data('username');
+			if (username !== oc_current_user) {
+				$el.find('.authorRow .avatar, .authorRow .author').contactsMenu(
+					username, 0, $el.find('.authorRow'));
+			}
+
+			var message = $el.find('.message');
+			message.find('.avatar').each(function() {
+				var avatar = $(this);
+				var strong = $(this).next();
+				var appendTo = $(this).parent();
+
+				$.merge(avatar, strong).contactsMenu(avatar.data('user'), 0, appendTo);
+			});
 		},
 
 		/**
@@ -251,7 +266,10 @@
 
 				// escape possible regex characters in the name
 				mention = mention.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-				var displayName = avatar + ' <strong>'+ _.escape(mentions[i].mentionDisplayName)+'</strong>';
+				var displayName = ''
+					+ '<span class="avatar-name-wrapper">'
+					+ avatar + ' <strong>'+ _.escape(mentions[i].mentionDisplayName)+'</strong>'
+					+ '</span>';
 
 				// replace every mention either at the start of the input or after a whitespace
 				// followed by a non-word character.

apps/comments/tests/js/commentstabviewSpec.js

@@ -153,7 +153,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 			expect($comment.find('strong:first').text()).toEqual('Thane of Cawdor');
 
 			expect($comment.find('.avatar[data-user=banquo]').length).toEqual(1);
-			expect($comment.find('strong:last-child').text()).toEqual('Lord Banquo');
+			expect($comment.find('.avatar-name-wrapper:last-child strong').text()).toEqual('Lord Banquo');
 		});
 
 	});

core/Controller/ContactsMenuController.php

@@ -26,6 +26,7 @@
 
 use OC\Contacts\ContactsMenu\Manager;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
 use OCP\IUserSession;
@@ -59,4 +60,20 @@ public function index($filter = null) {
 		return $this->manager->getEntries($this->userSession->getUser(), $filter);
 	}
 
+	/**
+	 * @NoAdminRequired
+	 *
+	 * @param integer $shareType
+	 * @param string $shareWith
+	 * @return JSONResponse
+	 */
+	public function findOne($shareType, $shareWith) {
+		$contact = $this->manager->findOne($this->userSession->getUser(), $shareType, $shareWith);
+
+		if ($contact) {
+			return $contact;
+		} else {
+			return new JSONResponse([], Http::STATUS_NOT_FOUND);
+		}
+	}
 }

core/css/share.scss

@@ -87,6 +87,7 @@
 	list-style-type: none;
 	padding: 8px;
 	> li {
+		position: relative;
 		padding-top: 10px;
 		padding-bottom: 10px;
 		font-weight: bold;
@@ -103,6 +104,7 @@
 			padding: 3px 6px;
 		}
 	}
+
 	.shareOption {
 		white-space: nowrap;
 		display: inline-block;
@@ -159,6 +161,10 @@ a {
 	padding: 6px 4px;
 }
 
+.resharerInfoView.subView {
+	position: relative;
+}
+
 #defaultExpireMessage, .reshare {
 	/* fix shared by text going out of box */
 	white-space: normal;
@@ -185,6 +191,19 @@ a {
 	color: rgba($color-main-text, .4);
 }
 
+.contactsmenu-popover {
+	left: -8px;
+	right: auto;
+	padding: 3px 6px;
+	li.hidden {
+		display: none !important;
+	}
+	&:after {
+		left: 8px;
+		right: auto;
+	}
+}
+
 .popovermenu .datepicker {
     margin-left: 35px;
 }

core/js/core.json

@@ -20,6 +20,7 @@
 	"libraries": [
 		"jquery-showpassword.js",
 		"jquery.avatar.js",
+		"jquery.contactsmenu.js",
 		"placeholder.js"
 	],
 	"modules": [

core/js/jquery.contactsmenu.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2017 Georg Ehrke <oc.list@georgehrke.com>
+ * This file is licensed under the Affero General Public License version 3 or
+ * later.
+ * See the COPYING-README file.
+ */
+
+(function ($) {
+	var ENTRY = ''
+		+ '<li>'
+		+ '    <a href="{{hyperlink}}">'
+		+ '        {{#if icon}}<img src="{{icon}}">{{/if}}'
+		+ '        <span>{{title}}</span>'
+		+ '    </a>'
+		+ '</li>';
+
+	var LIST = ''
+		+ '<div class="menu popovermenu bubble hidden contactsmenu-popover">'
+		+ '    <ul>'
+		+ '        <li>'
+		+ '            <a>'
+		+ '                <span class="icon-loading-small"></span>'
+		+ '            </a>'
+		+ '        </li>'
+		+ '    </ul>'
+		+ '</div>';
+
+	$.fn.contactsMenu = function(shareWith, shareType, appendTo) {
+		// 0 - user, 4 - email, 6 - remote
+		var allowedTypes = [0, 4, 6];
+		if (allowedTypes.indexOf(shareType) === -1) {
+			return;
+		}
+
+		var $div = this;
+		appendTo.append(LIST);
+		var $list = appendTo.find('div.contactsmenu-popover');
+
+		$div.click(function() {
+			if (!$list.hasClass('hidden')) {
+				$list.addClass('hidden');
+				$list.hide();
+				return;
+			}
+
+			$list.removeClass('hidden');
+			$list.show();
+
+			if ($list.hasClass('loaded')) {
+				return;
+			}
+
+			$list.addClass('loaded');
+			$.ajax(OC.generateUrl('/contactsmenu/findOne'), {
+				method: 'POST',
+				data: {
+					shareType: shareType,
+					shareWith: shareWith
+				}
+			}).then(function(data) {
+				$list.find('ul').find('li').addClass('hidden');
+
+				var actions;
+				if (!data.topAction) {
+					actions = [{
+						hyperlink: '#',
+						title: t('core', 'No action available')
+					}];
+				} else {
+					actions = [data.topAction].concat(data.actions);
+				}
+
+				actions.forEach(function(action) {
+					var template = Handlebars.compile(ENTRY);
+					$list.find('ul').append(template(action));
+				});
+
+				if (actions.length === 0) {
+
+				}
+			}, function(jqXHR) {
+				$list.find('ul').find('li').addClass('hidden');
+
+				var title;
+				if (jqXHR.status === 404) {
+					title = t('core', 'No action available');
+				} else {
+					title = t('core', 'Error fetching contact actions');
+				}
+
+				var template = Handlebars.compile(ENTRY);
+				$list.find('ul').append(template({
+					hyperlink: '#',
+					title: title
+				}));
+			});
+		});
+
+		$(document).click(function(event) {
+			var clickedList = ($list.has(event.target).length > 0);
+			var clickedTarget = ($div.has(event.target).length > 0);
+
+			$div.each(function() {
+				if ($(this).is(event.target)) {
+					clickedTarget = true;
+				}
+			});
+
+			if (clickedList || clickedTarget) {
+				return;
+			}
+
+			$list.addClass('hidden');
+			$list.hide();
+		});
+	};
+}(jQuery));

core/js/merged-template-prepend.json

@@ -13,5 +13,6 @@
   "mimetypelist.js",
   "oc-backbone.js",
   "placeholder.js",
-  "jquery.avatar.js"
+  "jquery.avatar.js",
+  "jquery.contactsmenu.js"
 ]

core/js/sharedialogresharerinfoview.js

@@ -100,6 +100,11 @@
 				$this.avatar($this.data('username'), 32);
 			});
 
+			this.$el.find('.reshare').contactsMenu(
+				this.model.getReshareOwner(),
+				OC.Share.SHARE_TYPE_USER,
+				this.$el);
+
 			return this;
 		},
 

core/js/sharedialogshareelistview.js

@@ -26,7 +26,7 @@
 			'{{#each sharees}}' +
 				'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
 					'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" data-displayname="{{shareWithDisplayName}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
-					'<span class="has-tooltip username" title="{{shareWithTitle}}">{{shareWithDisplayName}}</span>' +
+					'<span class="username" title="{{shareWithTitle}}">{{shareWithDisplayName}}</span>' +
 					'<span class="sharingOptionsGroup">' +
 						'{{#if editPermissionPossible}}' +
 						'<span class="shareOption">' +
@@ -361,6 +361,15 @@
 				this.$('.has-tooltip').tooltip({
 					placement: 'bottom'
 				});
+
+				this.$('ul.shareWithList > li').each(function() {
+					var $this = $(this);
+
+					var shareWith = $this.data('share-with');
+					var shareType = $this.data('share-type');
+
+					$this.find('div.avatar, span.username').contactsMenu(shareWith, shareType, $this);
+				})
 			} else {
 				var permissionChangeShareId = parseInt(this._renderPermissionChange, 10);
 				var shareWithIndex = this.model.findShareWithIndex(permissionChangeShareId);
@@ -399,7 +408,7 @@
 				var shareId = parseInt(this._menuOpen, 10);
 				if(!_.isNaN(shareId)) {
 					var liSelector = 'li[data-share-id=' + shareId + ']';
-					OC.showMenu(null, this.$(liSelector + ' .popovermenu'));
+					OC.showMenu(null, this.$(liSelector + '.sharingOptionsGroup .popovermenu'));
 				}
 			}
 
@@ -476,7 +485,7 @@
 			event.stopPropagation();
 			var $element = $(event.target);
 			var $li = $element.closest('li[data-share-id]');
-			var $menu = $li.find('.popovermenu');
+			var $menu = $li.find('.sharingOptionsGroup .popovermenu');
 
 			OC.showMenu(null, $menu);
 			this._menuOpen = $li.data('share-id');