fixes #35098 - use a multi line approach to display share autocomplete

owncloud · May 31, 2019 · 1cf1fef · 1cf1fef
1 parent 7b2016f
commit 1cf1fef
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/core/css/share.css b/core/css/share.css
@@ -69,14 +69,18 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	line-height: 32px;
 	vertical-align: middle;
 }
 
 .share-autocomplete-item .autocomplete-item-displayname {
 	margin-right: 5px;
 }
 
+.share-autocomplete-item .autocomplete-item-typeInfo {
+	font-size: smaller;
+	font-style: italic;
+}
+
 .share-autocomplete-item .avatardiv {
 	flex-shrink: 0;
 }

diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
@@ -53,8 +53,9 @@
 					'{{/if}}' +
 					'<div class="autocomplete-item-text">' +
 						'<span class="autocomplete-item-displayname">{{displayName}}</span>' +
+						'<br/><span class="autocomplete-item-typeInfo">{{typeInfo}}</span>' +
 						'{{#if additionalInfo}}' +
-						'<span class="autocomplete-item-additional-info">({{additionalInfo}})</span>' +
+						'<br/><span class="autocomplete-item-additional-info">({{additionalInfo}})</span>' +
 						'{{/if}}' +
 					'</div>' +
 				'</div>' +
@@ -310,27 +311,28 @@
 		autocompleteRenderItem: function(ul, item) {
 
 			var text = item.label;
+			var typeInfo = t('core', 'User');
 			if (item.value.shareType === OC.Share.SHARE_TYPE_GROUP) {
-				text = t('core', '{sharee} (group)', {
-					sharee: text
-				}, null, {escape: false});
-			} else if (item.value.shareType === OC.Share.SHARE_TYPE_REMOTE) {
+				typeInfo = t('core', 'Group');
+			}
+			if (item.value.shareType === OC.Share.SHARE_TYPE_GUEST) {
+				typeInfo = t('core', 'Guest');
+			}
+			if (item.value.shareType === OC.Share.SHARE_TYPE_REMOTE) {
 				if (item.value.server) {
-					text = t('core', '{sharee} (at {server})', {
-						sharee: text,
+					typeInfo = t('core', 'At {server}', {
 						server: item.value.server
 					});
 				} else {
-					text = t('core', '{sharee} (federated)', {
-						sharee: text
-					});
+					typeInfo = t('core', 'Federated');
 				}
 			}
 
 			var template = this._getAutocompleteItemTemplate();
 			var $el = $(template({
 				showAvatar: this.configModel.areAvatarsEnabled(),
 				displayName: text,
+				typeInfo: typeInfo,
 				additionalInfo: item.value.shareWithAdditionalInfo,
 				shareTypeClass: (item.value.shareType === OC.Share.SHARE_TYPE_GROUP) ? 'group' : 'user'
 			}));