mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): improve shared link management on mobile (#11720)
* feat(web): improve shared link management on mobile * fix format
This commit is contained in:
Michel Heusschen
GitHub
parent
9837d60074
commit
276101ee82
15 changed files with 174 additions and 121 deletions
|
|
@ -1,23 +1,20 @@
|
|||
<script lang="ts">
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
|
||||
import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiOpenInNew } from '@mdi/js';
|
||||
import { DateTime, type ToRelativeUnit } from 'luxon';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import SharedLinkDelete from '$lib/components/sharedlinks-page/actions/shared-link-delete.svelte';
|
||||
import SharedLinkEdit from '$lib/components/sharedlinks-page/actions/shared-link-edit.svelte';
|
||||
import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import { mdiDotsVertical } from '@mdi/js';
|
||||
|
||||
export let link: SharedLinkResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
delete: void;
|
||||
copy: void;
|
||||
edit: void;
|
||||
}>();
|
||||
export let onDelete: () => void;
|
||||
export let onEdit: () => void;
|
||||
|
||||
let now = DateTime.now();
|
||||
$: expiresAt = link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined;
|
||||
|
|
@ -37,69 +34,84 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="flex w-full gap-4 border-b border-gray-200 py-4 transition-all hover:border-immich-primary dark:border-gray-600 dark:text-immich-gray dark:hover:border-immich-dark-primary"
|
||||
class="flex w-full border-b border-gray-200 transition-all hover:border-immich-primary dark:border-gray-600 dark:text-immich-gray dark:hover:border-immich-dark-primary"
|
||||
>
|
||||
<ShareCover class="size-24 transition-all duration-300 hover:shadow-lg" {link} />
|
||||
<svelte:element
|
||||
this={isExpired ? 'div' : 'a'}
|
||||
href={isExpired ? undefined : `${AppRoute.SHARE}/${link.key}`}
|
||||
class="flex gap-4 w-full py-4"
|
||||
>
|
||||
<ShareCover class="size-24 transition-all duration-300 hover:shadow-lg" {link} />
|
||||
|
||||
<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="text-sm">
|
||||
<div class="flex place-items-center gap-2 text-immich-primary dark:text-immich-dark-primary">
|
||||
{#if link.type === SharedLinkType.Album}
|
||||
<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>
|
||||
{link.album?.albumName.toUpperCase()}
|
||||
{$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
|
||||
</p>
|
||||
{:else if link.type === SharedLinkType.Individual}
|
||||
<p>{$t('individual_share').toUpperCase()}</p>
|
||||
{/if}
|
||||
|
||||
{#if !isExpired}
|
||||
<a href="{AppRoute.SHARE}/{link.key}" title={$t('go_to_share_page')}>
|
||||
<Icon path={mdiOpenInNew} />
|
||||
</a>
|
||||
{:else}
|
||||
<p>{$t('expires_date', { values: { date: '∞' } })}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p class="text-sm">{link.description ?? ''}</p>
|
||||
<div class="text-sm pb-2">
|
||||
<p
|
||||
class="flex place-items-center gap-2 text-immich-primary dark:text-immich-dark-primary break-all uppercase"
|
||||
>
|
||||
{#if link.type === SharedLinkType.Album}
|
||||
{link.album?.albumName}
|
||||
{:else if link.type === SharedLinkType.Individual}
|
||||
{$t('individual_share')}
|
||||
{/if}
|
||||
</p>
|
||||
|
||||
<p class="text-sm">{link.description ?? ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 text-xl">
|
||||
{#if link.allowUpload}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.allowDownload}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.showMetadata}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('exif').toUpperCase()}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.password}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</svelte:element>
|
||||
|
||||
<div class="info-bottom flex gap-4 text-xl">
|
||||
{#if link.allowUpload}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.allowDownload}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.showMetadata}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('exif').toUpperCase()}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.password}
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
|
||||
{/if}
|
||||
<div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
|
||||
<div class="sm:flex hidden">
|
||||
<SharedLinkEdit {onEdit} />
|
||||
<SharedLinkCopy {link} />
|
||||
<SharedLinkDelete {onDelete} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-auto flex-col place-content-center place-items-end text-right">
|
||||
<div class="flex">
|
||||
<CircleIconButton title={$t('delete_link')} icon={mdiDelete} on:click={() => dispatch('delete')} />
|
||||
<CircleIconButton title={$t('edit_link')} icon={mdiCircleEditOutline} on:click={() => dispatch('edit')} />
|
||||
<CircleIconButton title={$t('copy_link')} icon={mdiContentCopy} on:click={() => dispatch('copy')} />
|
||||
<div class="sm:hidden">
|
||||
<ButtonContextMenu
|
||||
color="transparent"
|
||||
title={$t('shared_link_options')}
|
||||
icon={mdiDotsVertical}
|
||||
size="24"
|
||||
padding="3"
|
||||
hideContent
|
||||
>
|
||||
<SharedLinkEdit menuItem {onEdit} />
|
||||
<SharedLinkCopy menuItem {link} />
|
||||
<SharedLinkDelete menuItem {onDelete} />
|
||||
</ButtonContextMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue