mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-19 02:06:38 +00:00
style: letter avatars for members, drop row hover, round partner rows
Use letter-initial avatars in the Members table (matching pending invites) and drop the unused photo/UserAvatar path. Remove the hover highlight on member and pending-invite rows. Give partner-node rows a 4px radius by painting the hover/selected background on the cells with rounded end caps (table rows can't render border-radius directly). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<TableRow :data-testid="`member-row-${member.id}`" class="group">
|
||||
<TableRow
|
||||
:data-testid="`member-row-${member.id}`"
|
||||
class="group hover:bg-transparent"
|
||||
>
|
||||
<TableCell>
|
||||
<div class="flex items-center gap-3">
|
||||
<UserAvatar
|
||||
class="size-8"
|
||||
:photo-url="isCurrentUser ? photoUrl : undefined"
|
||||
:pt:icon:class="{ 'text-xl!': !isCurrentUser || !photoUrl }"
|
||||
/>
|
||||
<span
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
|
||||
>
|
||||
<span class="text-sm font-bold text-base-foreground">
|
||||
{{ initial }}
|
||||
</span>
|
||||
</span>
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<span class="text-sm text-base-foreground">
|
||||
{{ member.name }}
|
||||
@@ -57,7 +62,6 @@ import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import DropdownMenu from '@/components/common/DropdownMenu.vue'
|
||||
import UserAvatar from '@/components/common/UserAvatar.vue'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import TableCell from '@/components/ui/table/TableCell.vue'
|
||||
import TableRow from '@/components/ui/table/TableRow.vue'
|
||||
@@ -74,7 +78,6 @@ const {
|
||||
} = defineProps<{
|
||||
member: WorkspaceMember
|
||||
isCurrentUser: boolean
|
||||
photoUrl?: string
|
||||
canManageMembers?: boolean
|
||||
isOriginalOwner?: boolean
|
||||
menuItems?: MenuItem[]
|
||||
@@ -82,6 +85,10 @@ const {
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const initial = computed(() =>
|
||||
(member.name || member.email).charAt(0).toUpperCase()
|
||||
)
|
||||
|
||||
// The creator and the current user can't be managed from their own row.
|
||||
const showMenu = computed(
|
||||
() => canManageMembers && !isCurrentUser && !isOriginalOwner
|
||||
|
||||
@@ -113,7 +113,6 @@
|
||||
v-if="isPersonalWorkspace"
|
||||
:member="personalWorkspaceMember"
|
||||
:is-current-user="true"
|
||||
:photo-url="userPhotoUrl ?? undefined"
|
||||
/>
|
||||
<template v-else>
|
||||
<MemberTableRow
|
||||
@@ -121,9 +120,6 @@
|
||||
:key="member.id"
|
||||
:member="member"
|
||||
:is-current-user="isCurrentUser(member)"
|
||||
:photo-url="
|
||||
isCurrentUser(member) ? (userPhotoUrl ?? undefined) : undefined
|
||||
"
|
||||
:can-manage-members="permissions.canManageMembers"
|
||||
:is-original-owner="isOriginalOwner(member)"
|
||||
:menu-items="memberMenus.get(member.id)"
|
||||
@@ -257,7 +253,6 @@ const {
|
||||
pendingInvites,
|
||||
permissions,
|
||||
uiConfig,
|
||||
userPhotoUrl,
|
||||
showOutOfCreditsBanner,
|
||||
creditResetDate,
|
||||
dismissOutOfCreditsBanner,
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
v-for="node in filteredNodes"
|
||||
:key="node.id"
|
||||
:data-state="selectedIds.has(node.id) ? 'selected' : undefined"
|
||||
class="group cursor-pointer"
|
||||
class="group cursor-pointer hover:bg-transparent data-[state=selected]:bg-transparent [&:hover>td]:bg-secondary-background/50 [&>td]:transition-colors [&>td:first-child]:rounded-l [&>td:last-child]:rounded-r [&[data-state=selected]>td]:bg-secondary-background/50"
|
||||
@click="toggleSelection(node.id)"
|
||||
>
|
||||
<TableCell>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<TableRow :data-testid="`invite-row-${invite.id}`" class="group">
|
||||
<TableRow
|
||||
:data-testid="`invite-row-${invite.id}`"
|
||||
class="group hover:bg-transparent"
|
||||
>
|
||||
<TableCell>
|
||||
<div class="flex items-center gap-3">
|
||||
<span
|
||||
|
||||
Reference in New Issue
Block a user