feat(shares): restore userVignette
This commit is contained in:
@@ -54,6 +54,7 @@
|
|||||||
import EmptyState from '$lib/components/EmptyState.svelte';
|
import EmptyState from '$lib/components/EmptyState.svelte';
|
||||||
import SkeletonList from '$lib/components/SkeletonList.svelte';
|
import SkeletonList from '$lib/components/SkeletonList.svelte';
|
||||||
import ListToolbar from '$lib/components/ListToolbar.svelte';
|
import ListToolbar from '$lib/components/ListToolbar.svelte';
|
||||||
|
import UserVignette from '$lib/components/UserVignette.svelte';
|
||||||
import VirtualList from '$lib/components/VirtualList.svelte';
|
import VirtualList from '$lib/components/VirtualList.svelte';
|
||||||
import { t } from '$lib/i18n/index.svelte';
|
import { t } from '$lib/i18n/index.svelte';
|
||||||
import { files as filesStore } from '$lib/stores/files.svelte';
|
import { files as filesStore } from '$lib/stores/files.svelte';
|
||||||
@@ -329,12 +330,14 @@
|
|||||||
</div>
|
</div>
|
||||||
{#if showOwner}
|
{#if showOwner}
|
||||||
<div class="owner-cell">
|
<div class="owner-cell">
|
||||||
<span class="rl-vignette">
|
{#if entry.ownerId}
|
||||||
<span class="rl-vignette__avatar" aria-hidden="true"
|
<UserVignette
|
||||||
>{(entry.ownerName ?? '?').slice(0, 1).toUpperCase()}</span
|
userId={entry.ownerId}
|
||||||
>
|
fallbackLabel={entry.ownerName ?? undefined}
|
||||||
<span class="rl-vignette__name">{entry.ownerName ?? entry.ownerId ?? ''}</span>
|
/>
|
||||||
</span>
|
{:else}
|
||||||
|
<span class="owner-cell__placeholder">{entry.ownerName ?? '—'}</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if showPath}<div class="path-cell">{entry.path ?? ''}</div>{/if}
|
{#if showPath}<div class="path-cell">{entry.path ?? ''}</div>{/if}
|
||||||
@@ -570,28 +573,7 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rl-vignette {
|
.owner-cell__placeholder {
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-2);
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rl-vignette__avatar {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--color-accent-bg-sm);
|
|
||||||
color: var(--color-accent-text);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-weight: var(--weight-semibold);
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rl-vignette__name {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -22,9 +22,13 @@
|
|||||||
name: it.resource.name,
|
name: it.resource.name,
|
||||||
kind: it.resource_type,
|
kind: it.resource_type,
|
||||||
iconClass: it.resource.icon_class,
|
iconClass: it.resource.icon_class,
|
||||||
path: it.granted_by
|
// The sharer becomes the "owner" surface — ResourceList renders
|
||||||
? t('shared_with_me.from', { who: it.granted_by }, 'Shared by {{who}}')
|
// `<UserVignette userId>` (avatar / name / external badge),
|
||||||
: it.resource.path,
|
// resolved lazily via `/api/users/{id}`. `path` keeps the
|
||||||
|
// resource's real location so the row still shows where it
|
||||||
|
// lives, not a translated string.
|
||||||
|
ownerId: it.granted_by ?? null,
|
||||||
|
path: it.resource.path,
|
||||||
size: it.resource_type === 'file' ? (it.resource as FileItem).size : null,
|
size: it.resource_type === 'file' ? (it.resource as FileItem).size : null,
|
||||||
date: it.granted_at
|
date: it.granted_at
|
||||||
})
|
})
|
||||||
@@ -79,6 +83,7 @@
|
|||||||
{error}
|
{error}
|
||||||
emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')}
|
emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')}
|
||||||
hasMore={!!cursor}
|
hasMore={!!cursor}
|
||||||
|
showOwner={true}
|
||||||
onloadmore={() => load(false)}
|
onloadmore={() => load(false)}
|
||||||
onopen={open}
|
onopen={open}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
import Icon from '$lib/icons/Icon.svelte';
|
import Icon from '$lib/icons/Icon.svelte';
|
||||||
import ListToolbar from '$lib/components/ListToolbar.svelte';
|
import ListToolbar from '$lib/components/ListToolbar.svelte';
|
||||||
import ShareDialog from '$lib/components/ShareDialog.svelte';
|
import ShareDialog from '$lib/components/ShareDialog.svelte';
|
||||||
|
import UserVignette from '$lib/components/UserVignette.svelte';
|
||||||
import { t } from '$lib/i18n/index.svelte';
|
import { t } from '$lib/i18n/index.svelte';
|
||||||
import { ui } from '$lib/stores/ui.svelte';
|
import { ui } from '$lib/stores/ui.svelte';
|
||||||
import { iconNameFromClass } from '$lib/utils/display';
|
import { iconNameFromClass } from '$lib/utils/display';
|
||||||
@@ -388,12 +389,17 @@
|
|||||||
<Icon name="pencil-alt" />
|
<Icon name="pencil-alt" />
|
||||||
{t('myshares.editSharing', 'Edit sharing')}
|
{t('myshares.editSharing', 'Edit sharing')}
|
||||||
</button>
|
</button>
|
||||||
|
{:else if lane.header.kind === 'user'}
|
||||||
|
<span class="ms-lane__subject">
|
||||||
|
<UserVignette
|
||||||
|
userId={lane.header.id}
|
||||||
|
fallbackLabel={resolveLabel('user', lane.header.id)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="ms-lane__subject">
|
<span class="ms-lane__subject">
|
||||||
<Icon
|
<Icon
|
||||||
name={lane.header.kind === 'user'
|
name={lane.header.kind === 'group'
|
||||||
? 'user'
|
|
||||||
: lane.header.kind === 'group'
|
|
||||||
? 'user-group'
|
? 'user-group'
|
||||||
: lane.header.kind === 'linkPassword'
|
: lane.header.kind === 'linkPassword'
|
||||||
? 'lock'
|
? 'lock'
|
||||||
@@ -416,8 +422,10 @@
|
|||||||
<span class="ms-row__name">{item.resource.name}</span>
|
<span class="ms-row__name">{item.resource.name}</span>
|
||||||
</button>
|
</button>
|
||||||
{:else if grant.subject_type === 'user'}
|
{:else if grant.subject_type === 'user'}
|
||||||
<Icon name="user" />
|
<UserVignette
|
||||||
<span class="ms-row__name">{resolveLabel('user', grant.subject_id)}</span>
|
userId={grant.subject_id}
|
||||||
|
fallbackLabel={resolveLabel('user', grant.subject_id)}
|
||||||
|
/>
|
||||||
{:else if grant.subject_type === 'group'}
|
{:else if grant.subject_type === 'group'}
|
||||||
<Icon name="user-group" />
|
<Icon name="user-group" />
|
||||||
<span class="ms-row__name">{resolveLabel('group', grant.subject_id)}</span>
|
<span class="ms-row__name">{resolveLabel('group', grant.subject_id)}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user