[9.2] Show avatar in share drop down (#25976)

* Show avatar in share drop down * Fix share autocomplete vertical align with avatar
owncloud · Oct 6, 2016 · 9fd9a01 · 9fd9a01
1 parent 9baf2a8
commit 9fd9a01
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -249,7 +249,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)', {
@@ -267,15 +267,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)