[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>

diff --git a/core/css/share.css b/core/css/share.css
index 6ccb82a09fff3fccfa10c163a365a8f4693bd8b8..042c4ddf2aeca7e762848d385a8dff18f63cc24e 100644 (file)
--- 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 2c60f216ef948c5fc01dd684d2af5bdcec6b82a4..2bcd1fdb2416b2f29daeb314ad231b543017a22d 100644 (file)
--- 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)