Improvements to User search autocomplete listing look and feel

To better distinguish between name, username, email
pascalwengerter · Jun 1, 2023 · d04a7ae · d04a7ae
1 parent b6e42b6
commit d04a7ae
Showing 1 changed file with 28 additions and 8 deletions.
diff --git a/...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -7,7 +7,7 @@
     <avatar-image
       v-if="isUser || isSpaceUser"
       class="oc-mr-s"
-      :width="36"
+      :width="32"
       :userid="item.value.shareWith"
       :user-name="item.label"
     />
@@ -36,14 +36,13 @@
       size="large"
       :accessible-label="$gettext('User')"
     />
-    <div class="files-collaborators-autocomplete-user-text oc-text-truncate">
-      <span class="files-collaborators-autocomplete-username" v-text="item.label" />
-      <span
-        v-if="item.value.shareWithAdditionalInfo"
-        class="files-collaborators-autocomplete-additional-info"
-        v-text="`(${item.value.shareWithAdditionalInfo})`"
+    <div class="files-collaborators-autocomplete-user-text oc-text-truncate flex-column">
+      <div class="files-collaborators-autocomplete-username" v-text="item.label" />
+      <div
+        v-if="additionalInfo"
+        class="files-collaborators-autocomplete-additional-info small"
+        v-text="additionalInfo"
       />
-      <div class="files-collaborators-autocomplete-share-type" v-text="$gettext(shareType.label)" />
     </div>
   </div>
 </template>
@@ -68,6 +67,20 @@ export default {
   },
 
   computed: {
+    additionalInfo() {
+      if (!this.item.value.shareWithAdditionalInfo) {
+        return null
+      }
+      const infoPieces = this.item.value.shareWithAdditionalInfo.split(' ')
+      if (!this.isUser) {
+        return this.shareType.label
+      }
+      if (!infoPieces[1] || infoPieces[1] === '()') {
+        return infoPieces[0]
+      }
+      return `${infoPieces[0]} - ${infoPieces[1].slice(1, -1)}`
+    },
+
     shareType() {
       return ShareTypes.getByValue(this.item.value.shareType)
     },
@@ -103,4 +116,11 @@ export default {
 .vs__dropdown-option--highlight .files-recipient-suggestion-avatar svg {
   fill: white !important;
 }
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+.small {
+  font-size: 0.85rem;
+}
 </style>