1 files changed, 21 insertions, 18 deletions

diff --git a/core/js/share.js b/core/js/share.js
index 659d719788d..25d59b46fb4 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -203,18 +203,19 @@ OC.Share = _.extend(OC.Share || {}, {
 	 * @param {String} remoteAddress full remote share
 	 * @return {String} HTML code to display
 	 */
-	_formatRemoteShare: function(remoteAddress) {
+	_formatRemoteShare: function(remoteAddress, message) {
 		var parts = this._REMOTE_OWNER_REGEXP.exec(remoteAddress);
 		if (!parts) {
-			// display as is, most likely to be a simple owner name
-			return escapeHTML(remoteAddress);
+			// display avatar of the user
+			var avatar = '<span class="avatar" data-userName="' + escapeHTML(remoteAddress) + '" title="' + message + " " + escapeHTML(remoteAddress) + '"></span>';
+			var hidden = '<span class="hidden-visually">' + message + ' ' + escapeHTML(remoteAddress) + '</span> ';
+			return avatar + hidden;
 		}
 
 		var userName = parts[1];
 		var userDomain = parts[3];
 		var server = parts[4];
-		var dir = parts[6];
-		var tooltip = userName;
+		var tooltip = message + ' ' + userName;
 		if (userDomain) {
 			tooltip += '@' + userDomain;
 		}
@@ -230,7 +231,7 @@ OC.Share = _.extend(OC.Share || {}, {
 		if (userDomain) {
 			html += '<span class="userDomain">@' + escapeHTML(userDomain) + '</span>';
 		}
-		html += '</span>';
+		html += '</span> ';
 		return html;
 	},
 	/**
@@ -243,7 +244,7 @@ OC.Share = _.extend(OC.Share || {}, {
 	_formatShareList: function(recipients) {
 		var _parent = this;
 		return $.map(recipients, function(recipient) {
-			recipient = _parent._formatRemoteShare(recipient);
+			recipient = _parent._formatRemoteShare(recipient, t('core', 'Shared with'));
 			return recipient;
 		});
 	},
@@ -259,8 +260,7 @@ OC.Share = _.extend(OC.Share || {}, {
 		var action = $tr.find('.fileactions .action[data-action="Share"]');
 		var type = $tr.data('type');
 		var icon = action.find('.icon');
-		var message;
-		var recipients;
+		var message, recipients, avatars;
 		var owner = $tr.attr('data-share-owner');
 		var shareFolderIcon;
 		var iconClass = 'icon-shared';
@@ -294,20 +294,23 @@ OC.Share = _.extend(OC.Share || {}, {
 			recipients = $tr.attr('data-share-recipients');
 			action.addClass('shared-style');
 
-			message = t('core', 'Shared');
+			avatars = '<span>' + t('core', 'Shared') + '</span>';
 			// even if reshared, only show "Shared by"
 			if (owner) {
-				message = this._formatRemoteShare(owner);
+				message = t('core', 'Shared by');
+				avatars = this._formatRemoteShare(owner, message);
+			} else if (recipients) {
+				avatars = this._formatShareList(recipients.split(', ')).join('');
 			}
-			else if (recipients) {
-				message = t('core', 'Shared with {recipients}', {recipients: this._formatShareList(recipients.split(", ")).join(", ")}, 0, {escape: false});
-			}
-			action.html('<span> ' + message + '</span>').prepend(icon);
+			action.html(avatars).prepend(icon);
+
 			if (owner || recipients) {
-				action.find('.remoteAddress').tooltip({placement: 'top'});
+				var avatarElement = action.find('.avatar');
+				avatarElement.avatar(avatarElement.data('username'), 32);
+
+				action.find('.icon-shared + span').tooltip({placement: 'top'});
 			}
-		}
-		else {
+		} else {
 			action.html('<span class="hidden-visually">' + t('core', 'Shared') + '</span>').prepend(icon);
 		}
 		if (hasLink) {