From e6b51cb54c40e887bf39c72f21c6ecaf47ecb265 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20M=C3=BCller?=
 <DeepDiver1975@users.noreply.github.com>
Date: Thu, 6 Oct 2016 17:12:10 +0200
Subject: [PATCH] [9.2] Show avatar in share drop down (#25976)

* Show avatar in share drop down

* Fix share autocomplete vertical align with avatar

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
---
 core/css/share.css         | 13 +++++++++++++
 core/js/sharedialogview.js | 23 ++++++++++++++---------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/core/css/share.css b/core/css/share.css
index 6ccb82a09f..042c4ddf2a 100644
--- a/core/css/share.css
+++ b/core/css/share.css
@@ -50,6 +50,19 @@
 	height: 32px;
 }
 
+.share-autocomplete-item {
+	display: flex;
+}
+.share-autocomplete-item .autocomplete-item-text {
+	margin-left: 10px;
+	margin-right: 10px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	line-height: 32px;
+	vertical-align: middle;
+}
+
 #shareWithList {
 	list-style-type:none;
 	padding:8px;
diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
index 2c60f216ef..2bcd1fdb24 100644
--- a/core/js/sharedialogview.js
+++ b/core/js/sharedialogview.js
@@ -251,7 +251,7 @@
 		},
 
 		autocompleteRenderItem: function(ul, item) {
-			var insert = $("<a>");
+
 			var text = item.label;
 			if (item.value.shareType === OC.Share.SHARE_TYPE_GROUP) {
 				text = t('core', '{sharee} (group)', {
@@ -269,15 +269,20 @@
 					});
 				}
 			}
-			insert.text(text);
-			insert.attr('title', item.value.shareWith);
-			if(item.value.shareType === OC.Share.SHARE_TYPE_GROUP) {
-				insert = insert.wrapInner('<strong></strong>');
+			var insert = $("<div class='share-autocomplete-item'/>");
+			var avatar = $("<div class='avatardiv'></div>").appendTo(insert);
+			if (item.value.shareType === OC.Share.SHARE_TYPE_USER) {
+				avatar.avatar(item.value.shareWith, 32, undefined, undefined, undefined, item.label);
+			} else {
+				avatar.imageplaceholder(text, undefined, 32);
 			}
-			insert.tooltip({
-				placement: 'bottom',
-				container: 'body'
-			});
+
+			$("<div class='autocomplete-item-text'></div>")
+				.text(text)
+				.appendTo(insert);
+			insert.attr('title', item.value.shareWith);
+			insert = $("<a>")
+				.append(insert);
 			return $("<li>")
 				.addClass((item.value.shareType === OC.Share.SHARE_TYPE_GROUP) ? 'group' : 'user')
 				.append(insert)