Feat: Tooltips on avatars (#3243)

specklesystems · Oct 10, 2024 · 6cb2761 · 6cb2761
1 parent 1fba35a
commit 6cb2761
Show file tree

Hide file tree

Showing 10 changed files with 13 additions and 10 deletions.
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -4,7 +4,7 @@
       <MenuButton :id="menuButtonId" v-slot="{ open: userOpen }">
         <span class="sr-only">Open user menu</span>
         <div class="flex items-center gap-1 p-0.5 hover:bg-highlight-2 rounded">
-          <UserAvatar :user="activeUser" />
+          <UserAvatar hide-tooltip :user="activeUser" />
           <ChevronDownIcon :class="userOpen ? 'rotate-180' : ''" class="h-3 w-3" />
         </div>
       </MenuButton>

diff --git a/packages/frontend-2/components/project/page/settings/collaborators/Row.vue b/packages/frontend-2/components/project/page/settings/collaborators/Row.vue
@@ -2,7 +2,7 @@
   <div
     class="bg-foundation flex items-center gap-2 py-2 px-3 border-t border-x last:border-b border-outline-3 first:rounded-t-lg last:rounded-b-lg"
   >
-    <UserAvatar :user="collaborator.user" />
+    <UserAvatar hide-tooltip :user="collaborator.user" />
     <div class="flex flex-col grow">
       <span class="truncate text-body-xs">{{ collaborator.title }}</span>
       <span

diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -32,7 +32,7 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="isUser(item)" :user="item" />
+          <UserAvatar v-if="isUser(item)" hide-tooltip :user="item" />
           <span class="truncate">
             {{ isUser(item) ? item.name : '' }}
           </span>

diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -33,7 +33,7 @@
 
       <template #invitedBy="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="isInvite(item)" :user="item.invitedBy" />
+          <UserAvatar v-if="isInvite(item)" hide-tooltip :user="item.invitedBy" />
           <span class="truncate">
             {{ isInvite(item) ? item.invitedBy.name : '' }}
           </span>

diff --git a/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue b/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
@@ -25,7 +25,7 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar :user="item.user" />
+          <UserAvatar hide-tooltip :user="item.user" />
           <span class="truncate text-body-xs text-foreground">
             {{ item.user.name }}
           </span>

diff --git a/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue b/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
@@ -29,13 +29,13 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="item.user" :user="item.user" />
+          <UserAvatar v-if="item.user" hide-tooltip :user="item.user" />
           <span class="truncate text-body-xs text-foreground">{{ item.title }}</span>
         </div>
       </template>
       <template #invitedBy="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar :user="item.invitedBy" />
+          <UserAvatar hide-tooltip :user="item.invitedBy" />
           <span class="truncate text-body-xs text-foreground">
             {{ item.invitedBy.name }}
           </span>

diff --git a/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue b/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
@@ -29,7 +29,7 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar :user="item" />
+          <UserAvatar hide-tooltip :user="item" />
           <span class="truncate text-body-xs text-foreground">{{ item.name }}</span>
           <div
             v-if="

diff --git a/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue b/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
@@ -6,7 +6,7 @@
     </div> -->
     <div class="xxx-bg-foundation sm:rounded-xl p-4 sm:pb-2 w-full relative">
       <div class="flex items-center space-x-1">
-        <UserAvatar :user="comment.author" class="mr-1" />
+        <UserAvatar :user="comment.author" hide-tooltip class="mr-1" />
         <span class="grow truncate text-xs sm:text-sm font-medium">
           {{ comment.author.name }}
         </span>

diff --git a/packages/frontend-2/components/workspace/invite/dialog/UserRow.vue b/packages/frontend-2/components/workspace/invite/dialog/UserRow.vue
@@ -3,7 +3,7 @@
     class="flex px-4 py-3 items-center space-x-2 justify-between border-b last:border-0 border-outline-3"
   >
     <div class="flex items-center space-x-2 flex-1 truncate">
-      <UserAvatar :user="user" />
+      <UserAvatar hide-tooltip :user="user" />
       <div
         v-if="
           user.workspaceDomainPolicyCompliant === false &&

diff --git a/packages/ui-components/src/components/user/Avatar.vue b/packages/ui-components/src/components/user/Avatar.vue
@@ -12,11 +12,13 @@
     <slot>
       <div
         v-if="user?.avatar"
+        v-tippy="!hideTooltip ? props.user?.name : undefined"
         class="h-full w-full bg-cover bg-center bg-no-repeat"
         :style="{ backgroundImage: `url('${user.avatar}')` }"
       />
       <div
         v-else-if="initials"
+        v-tippy="!hideTooltip ? props.user?.name : undefined"
         class="flex h-full w-full select-none items-center justify-center"
       >
         {{ initials }}
@@ -41,6 +43,7 @@ const props = withDefaults(
     active?: boolean
     noBorder?: boolean
     noBg?: boolean
+    hideTooltip?: boolean
   }>(),
   {
     size: 'base',