superrob1500
/
mirror-immich
mirror of https://github.com/immich-app/immich
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(web): shared link card tweaks (#24192)

pull/23352/head
Jason Rasmussen 2025-11-25 20:35:21 -05:00 committed by GitHub
parent 2d5ec528d5
commit 13104d49cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
View File

@ -15,7 +15,7 @@
let { sharedLink, preload = false, class: className = '' }: Props = $props();
</script>
<div class="relative shrink-0 size-24">
<div class="relative shrink-0 size-22">
{#if sharedLink?.album}
<AlbumCover album={sharedLink.album} class={className} {preload} />
{:else if sharedLink.assets[0]}

72
web/src/lib/components/sharedlinks-page/shared-link-card.svelte
View File

@ -2,11 +2,10 @@
import ActionButton from '$lib/components/ActionButton.svelte';
import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
import { AppRoute } from '$lib/constants';
import Badge from '$lib/elements/Badge.svelte';
import { getSharedLinkActions } from '$lib/services/shared-link.service';
import { locale } from '$lib/stores/preferences.store';
import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
import { ContextMenuButton, MenuItemType } from '@immich/ui';
import { Badge, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
import { DateTime, type ToRelativeUnit } from 'luxon';
import { t } from 'svelte-i18n';
@ -45,53 +44,50 @@
>
<ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />
<div class="flex flex-col justify-between">
<div class="info-top">
<div class="font-mono text-xs font-semibold text-gray-500 dark:text-gray-400">
{#if isExpired}
<p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
{:else if expiresAt}
<p>
{$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
</p>
{:else}
<p>{$t('expires_date', { values: { date: '∞' } })}</p>
{/if}
</div>
<div class="flex flex-col gap-2">
<Text size="large" color="primary" class="flex place-items-center gap-2 break-all">
{#if sharedLink.type === SharedLinkType.Album}
{sharedLink.album?.albumName}
{:else if sharedLink.type === SharedLinkType.Individual}
{$t('individual_share')}
{/if}
</Text>
<div class="text-sm pb-2">
<p class="flex place-items-center gap-2 text-primary break-all uppercase">
{#if sharedLink.type === SharedLinkType.Album}
{sharedLink.album?.albumName}
{:else if sharedLink.type === SharedLinkType.Individual}
{$t('individual_share')}
{/if}
</p>
<p class="text-sm">{sharedLink.description ?? ''}</p>
</div>
</div>
<div class="flex flex-wrap gap-2 text-xl">
{#if sharedLink.allowUpload}
<Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
<div class="flex flex-wrap gap-1">
{#if isExpired}
<Badge size="small" color="danger">{$t('expired')}</Badge>
{:else if expiresAt}
<Badge size="small" color="secondary">
{$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
</Badge>
{:else}
<Badge size="small" color="secondary">{$t('expires_date', { values: { date: '∞' } })}</Badge>
{/if}
{#if sharedLink.allowDownload}
<Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
{#if sharedLink.slug}
<Badge size="small" color="secondary">{$t('custom_url')}</Badge>
{/if}
{#if sharedLink.allowUpload}
<Badge size="small" color="secondary">{$t('upload')}</Badge>
{/if}
{#if sharedLink.showMetadata && sharedLink.allowDownload}
<Badge size="small" color="secondary">{$t('download')}</Badge>
{/if}
{#if sharedLink.showMetadata}
<Badge rounded="full"><span class="uppercase text-xs px-1">{$t('exif')}</span></Badge>
<Badge size="small" color="secondary">{$t('exif')}</Badge>
{/if}
{#if sharedLink.password}
<Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
{/if}
{#if sharedLink.slug}
<Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
<Badge size="small" color="secondary">{$t('password')}</Badge>
{/if}
</div>
{#if sharedLink.description}
<Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
{/if}
</div>
</svelte:element>
<div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">

6
web/src/lib/services/shared-link.service.ts
View File

@ -17,19 +17,19 @@ import {
type SharedLinkResponseDto,
} from '@immich/sdk';
import { modalManager, toastManager, type ActionItem } from '@immich/ui';
import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiQrcode } from '@mdi/js';
import { mdiContentCopy, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
import type { MessageFormatter } from 'svelte-i18n';
export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
const Edit: ActionItem = {
title: $t('edit_link'),
icon: mdiCircleEditOutline,
icon: mdiPencilOutline,
onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
};
const Delete: ActionItem = {
title: $t('delete_link'),
icon: mdiDelete,
icon: mdiTrashCanOutline,
color: 'danger',
onAction: () => void handleDeleteSharedLink(sharedLink),
};