feat: restyle autocomplete item (#9273)

owncloud · Jun 19, 2023 · 1e5e55e · 1e5e55e
1 parent 22385ce
commit 1e5e55e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/changelog/unreleased/enhancement-restyle-sharees b/changelog/unreleased/enhancement-restyle-sharees
@@ -0,0 +1,6 @@
+Enhancement: Restyle possible sharees
+
+We've restyled the list of sharee suggestions when sharing files and folders.
+
+https://github.com/owncloud/web/issues/9216
+https://github.com/owncloud/web/pull/9273
diff --git a/...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -38,12 +38,17 @@
     />
     <div class="files-collaborators-autocomplete-user-text oc-text-truncate">
       <span class="files-collaborators-autocomplete-username" v-text="item.label" />
-      <span
+      <template v-if="!isUser && !isSpaceUser && !isGroup && !isSpaceGroup">
+        <span
+          class="files-collaborators-autocomplete-share-type"
+          v-text="`(${$gettext(shareType.label)})`"
+        />
+      </template>
+      <div
         v-if="item.value.shareWithAdditionalInfo"
         class="files-collaborators-autocomplete-additional-info"
-        v-text="`(${item.value.shareWithAdditionalInfo})`"
+        v-text="`${item.value.shareWithAdditionalInfo}`"
       />
-      <div class="files-collaborators-autocomplete-share-type" v-text="$gettext(shareType.label)" />
     </div>
   </div>
 </template>
@@ -103,4 +108,7 @@ export default {
 .vs__dropdown-option--highlight .files-recipient-suggestion-avatar svg {
   fill: white !important;
 }
+.files-collaborators-autocomplete-additional-info {
+  font-size: var(--oc-font-size-small);
+}
 </style>
diff --git a/.../unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts b/.../unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
@@ -61,16 +61,25 @@ describe('AutocompleteItem component', () => {
     it('shows additional information when set', () => {
       const { wrapper } = createWrapper({ shareWithAdditionalInfo: 'some text' })
       expect(wrapper.find('.files-collaborators-autocomplete-additional-info').text()).toEqual(
-        '(some text)'
+        'some text'
       )
     })
     it('does not show additional information when not set', () => {
       const { wrapper } = createWrapper({ shareWithAdditionalInfo: undefined })
       expect(wrapper.find('.files-collaborators-autocomplete-additional-info').exists()).toBeFalsy()
     })
-    it('shows the share type', () => {
-      const { wrapper } = createWrapper({ shareType: ShareTypes.user.value })
-      expect(wrapper.find('.files-collaborators-autocomplete-share-type').text()).toEqual('User')
+    it.each([
+      ShareTypes.user.value,
+      ShareTypes.spaceUser.value,
+      ShareTypes.group.value,
+      ShareTypes.spaceGroup.value
+    ])('hides share type for users and groups', (shareType: number) => {
+      const { wrapper } = createWrapper({ shareType })
+      expect(wrapper.find('.files-collaborators-autocomplete-share-type').exists()).toBeFalsy()
+    })
+    it('shows share type for guests', () => {
+      const { wrapper } = createWrapper({ shareType: ShareTypes.guest.value })
+      expect(wrapper.find('.files-collaborators-autocomplete-share-type').text()).toEqual('(Guest)')
     })
   })
 })