src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show avatar in Focused list for compact density and above

Browse Source
This commit is contained in:
Linus Rath
2026-05-11 16:23:15 +02:00
parent 1d09f5a623
commit 4bce80b8ba
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/email-list-item.tsx
+4 -4
View File
@@ -129,8 +129,8 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }} style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
> >
<div <div
className={cn('px-4', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')} className={cn('px-4', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }} style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
> >
{/* Checkbox - only visible when in selection mode */} {/* Checkbox - only visible when in selection mode */}
{selectedEmailIds.size > 0 && ( {selectedEmailIds.size > 0 && (
@@ -161,11 +161,11 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
)} )}
{/* Avatar */} {/* Avatar */}
{!isFocusedMailLayout && density !== 'extra-compact' && ( {density !== 'extra-compact' && (
<Avatar <Avatar
name={sender?.name} name={sender?.name}
email={sender?.email} email={sender?.email}
size="md" size={isFocusedMailLayout ? "sm" : "md"}
className="flex-shrink-0 shadow-sm" className="flex-shrink-0 shadow-sm"
disableImages={hideJunkAvatarImages} disableImages={hideJunkAvatarImages}
/> />
components/email/email-list.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export function EmailList({
const estimateSize = useCallback(() => { const estimateSize = useCallback(() => {
if (isFocusedMailLayout) { if (isFocusedMailLayout) {
return { 'extra-compact': 32, compact: 40, regular: 46, comfortable: 54 }[density]; return { 'extra-compact': 28, compact: 40, regular: 56, comfortable: 64 }[density];
} }
const base = { 'extra-compact': 32, compact: 60, regular: 84, comfortable: 104 }[density]; const base = { 'extra-compact': 32, compact: 60, regular: 84, comfortable: 104 }[density];
return (showPreview && density !== 'extra-compact') ? base + 36 : base; return (showPreview && density !== 'extra-compact') ? base + 36 : base;
components/email/thread-list-item.tsx
+8 -8
View File
@@ -149,8 +149,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }} style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
> >
<div <div
className={cn('px-3', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')} className={cn('px-3', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }} style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
> >
{/* Checkbox - only visible when in selection mode */} {/* Checkbox - only visible when in selection mode */}
{selectedEmailIds.size > 0 && ( {selectedEmailIds.size > 0 && (
@@ -179,11 +179,11 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
</div> </div>
)} )}
{!isFocusedMailLayout && density !== 'extra-compact' && ( {density !== 'extra-compact' && (
<Avatar <Avatar
name={sender?.name} name={sender?.name}
email={sender?.email} email={sender?.email}
size="md" size={isFocusedMailLayout ? "sm" : "md"}
className="flex-shrink-0 shadow-sm" className="flex-shrink-0 shadow-sm"
disableImages={hideJunkAvatarImages} disableImages={hideJunkAvatarImages}
/> />
@@ -508,8 +508,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }} style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
> >
<div <div
className={cn('px-3', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')} className={cn('px-3', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }} style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
> >
{/* Checkbox for thread selection - only visible when in selection mode */} {/* Checkbox for thread selection - only visible when in selection mode */}
{selectedEmailIds.size > 0 && ( {selectedEmailIds.size > 0 && (
@@ -564,11 +564,11 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
</div> </div>
)} )}
{!isFocusedMailLayout && density !== 'extra-compact' && ( {density !== 'extra-compact' && (
<Avatar <Avatar
name={avatarPerson?.name} name={avatarPerson?.name}
email={avatarPerson?.email} email={avatarPerson?.email}
size="md" size={isFocusedMailLayout ? "sm" : "md"}
className="flex-shrink-0 shadow-sm" className="flex-shrink-0 shadow-sm"
disableImages={hideJunkAvatarImages} disableImages={hideJunkAvatarImages}
/> />