fix: remote share item icon in sharee search

owncloud · Mar 6, 2024 · a9ff453 · a9ff453
1 parent 0e986b7
commit a9ff453
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 89 deletions.
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -9,7 +9,7 @@
     <span
       class="oc-avatar-item"
       :style="{
-        backgroundColor: backgroundColor,
+        backgroundColor,
         '--icon-color': iconColor,
         '--width': avatarWidth
       }"
@@ -62,6 +62,14 @@ export default defineComponent({
       required: false,
       default: 'fill'
     },
+    /**
+     * Describes the size of the avatar icon e.g.(small)
+     */
+    iconSize: {
+      type: String,
+      required: false,
+      default: 'small'
+    },
     /**
      * Background color that should be used for the avatar. If empty
      * a random color will be picked
@@ -89,15 +97,6 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 30
-    },
-
-    /**
-     * Describes the size of the avatar icon e.g.(small)
-     */
-    iconSize: {
-      type: String,
-      required: false,
-      default: 'small'
     }
   },
 

diff --git a/...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -5,40 +5,25 @@
     :class="collaboratorClass"
   >
     <avatar-image
-      v-if="isUser || isSpaceUser"
+      v-if="isAnyUserShareType"
       class="oc-mr-s"
       :width="36"
       :userid="item.value.shareWith"
       :user-name="item.label"
     />
-    <oc-icon
-      v-else-if="isGuest"
-      key="avatar-guest"
-      class="oc-mr-s files-recipient-suggestion-avatar"
-      name="global"
-      size="large"
-      :accessible-label="$gettext('Guest')"
-    >
-    </oc-icon>
-    <oc-icon
-      v-else-if="isGroup || isSpaceGroup"
-      key="avatar-group"
-      class="oc-mr-s files-recipient-suggestion-avatar"
-      name="group"
-      size="large"
-      :accessible-label="$gettext('Group')"
-    />
-    <oc-icon
+    <oc-avatar-item
       v-else
-      key="avatar-generic-person"
-      class="oc-mr-s files-recipient-suggestion-avatar"
-      name="person"
-      size="large"
-      :accessible-label="$gettext('User')"
+      :width="36"
+      :name="shareTypeKey"
+      :icon="shareTypeIcon"
+      icon-size="large"
+      icon-color="var(--oc-color-text)"
+      background="transparent"
+      class="oc-mr-s"
     />
     <div class="files-collaborators-autocomplete-user-text oc-text-truncate">
       <span class="files-collaborators-autocomplete-username" v-text="item.label" />
-      <template v-if="!isUser && !isSpaceUser && !isGroup && !isSpaceGroup">
+      <template v-if="!isAnyPrimaryShareType">
         <span
           class="files-collaborators-autocomplete-share-type"
           v-text="`(${$gettext(shareType.label)})`"
@@ -66,35 +51,30 @@ export default {
     }
   },
 
-  data() {
-    return {
-      loading: false
-    }
-  },
-
   computed: {
     shareType() {
       return ShareTypes.getByValue(this.item.value.shareType)
     },
 
-    isUser() {
-      return this.shareType === ShareTypes.user
-    },
-
-    isSpaceUser() {
-      return this.shareType === ShareTypes.spaceUser
+    shareTypeIcon() {
+      return this.shareType.icon
     },
 
-    isGuest() {
-      return this.shareType === ShareTypes.guest
+    shareTypeKey() {
+      return this.shareType.key
     },
 
-    isGroup() {
-      return this.shareType === ShareTypes.group
+    isAnyUserShareType() {
+      return [ShareTypes.user.key, ShareTypes.spaceUser.key].includes(this.shareType.key)
     },
 
-    isSpaceGroup() {
-      return this.shareType === ShareTypes.spaceGroup
+    isAnyPrimaryShareType() {
+      return [
+        ShareTypes.user.key,
+        ShareTypes.spaceUser.key,
+        ShareTypes.group.key,
+        ShareTypes.spaceGroup.key
+      ].includes(this.shareType.key)
     },
 
     collaboratorClass() {
@@ -105,9 +85,6 @@ export default {
 </script>
 
 <style lang="scss">
-.vs__dropdown-option--highlight .files-recipient-suggestion-avatar svg {
-  fill: white !important;
-}
 .files-collaborators-autocomplete-additional-info {
   font-size: var(--oc-font-size-small);
 }

diff --git a/...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -146,8 +146,6 @@ import {
   SpacePeopleShareRoles
 } from '@ownclouders/web-client/src/helpers/share'
 import {
-  // FederatedConnection,
-  FederatedUser,
   useCapabilityStore,
   useClientService,
   useUserStore,
@@ -267,20 +265,9 @@ export default defineComponent({
       displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef))
     }
 
-    const federatedUsers = ref([] as FederatedUser[])
     onMounted(async () => {
       await nextTick()
       markInstance.value = new Mark('.mark-element')
-      // HACK: remove when federated users are returned from search
-      // try {
-      //   const { data: acceptedUsers } = await clientService.httpAuthenticated.get<
-      //     FederatedConnection[]
-      //   >('/sciencemesh/find-accepted-users')
-      //   federatedUsers.value = acceptedUsers
-      //   console.log('Federated users loaded', acceptedUsers)
-      // } catch (e) {
-      //   console.error(e)
-      // }
     })
 
     const accountType = ref('standard')
@@ -315,7 +302,6 @@ export default defineComponent({
       showContextMenuOnBtnClick,
       contextMenuButtonRef,
       notifyEnabled,
-      federatedUsers,
       createSharesConcurrentRequests,
       ...useMessages(),
       searchInProgress,
@@ -418,25 +404,7 @@ export default defineComponent({
         })
         const remotes = recipients.exact.remotes.concat(recipients.remotes)
 
-        // const federatedCollaborators = this.federatedUsers.map((u) => {
-        //   return {
-        //     label: u.display_name,
-        //     value: {
-        //       shareType: ShareTypes.remote.value,
-        //       shareWithUser: u.user_id,
-        //       shareWithProvider: u.idp,
-        //       shareWithAdditionalInfo: u.mail,
-        //       userType: 0
-        //     }
-        //   }
-        // })
-
-        this.autocompleteResults = [
-          ...users,
-          ...groups,
-          ...remotes
-          // ...federatedCollaborators
-        ].filter((collaborator) => {
+        this.autocompleteResults = [...users, ...groups, ...remotes].filter((collaborator) => {
           const selected = this.selectedCollaborators.find((selectedCollaborator) => {
             return (
               collaborator.value.shareWith === selectedCollaborator.value.shareWith &&