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
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
|
||||
import type { SharedLinkResponseDto } from '@immich/sdk';
|
||||
import { mdiContentCopy } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let link: SharedLinkResponseDto;
|
||||
export let menuItem = false;
|
||||
|
||||
const handleCopy = async () => {
|
||||
await copyToClipboard(makeSharedLinkUrl($serverConfig.externalDomain, link.key));
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if menuItem}
|
||||
<MenuOption text={$t('copy_link')} icon={mdiContentCopy} onClick={handleCopy} />
|
||||
{:else}
|
||||
<CircleIconButton title={$t('copy_link')} icon={mdiContentCopy} on:click={handleCopy} />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import { mdiDelete } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let menuItem = false;
|
||||
export let onDelete: () => void;
|
||||
</script>
|
||||
|
||||
{#if menuItem}
|
||||
<MenuOption text={$t('delete_link')} icon={mdiDelete} onClick={onDelete} />
|
||||
{:else}
|
||||
<CircleIconButton title={$t('delete_link')} icon={mdiDelete} on:click={onDelete} />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import { mdiCircleEditOutline } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let menuItem = false;
|
||||
export let onEdit: () => void;
|
||||
</script>
|
||||
|
||||
{#if menuItem}
|
||||
<MenuOption text={$t('edit_link')} icon={mdiCircleEditOutline} onClick={onEdit} />
|
||||
{:else}
|
||||
<CircleIconButton title={$t('edit_link')} icon={mdiCircleEditOutline} on:click={onEdit} />
|
||||
{/if}
|
||||
|
|
@ -13,6 +13,6 @@ describe('AssetCover component', () => {
|
|||
expect(img.alt).toBe('123');
|
||||
expect(img.getAttribute('src')).toBe('wee');
|
||||
expect(img.getAttribute('loading')).toBe('eager');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ describe('NoCover component', () => {
|
|||
});
|
||||
const img = component.getByTestId('album-image') as HTMLImageElement;
|
||||
expect(img.alt).toBe('123');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
|
||||
expect(img.getAttribute('loading')).toBe('eager');
|
||||
expect(img.src).toStrictEqual(expect.any(String));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ describe('ShareCover component', () => {
|
|||
const img = component.getByTestId('album-image') as HTMLImageElement;
|
||||
expect(img.alt).toBe('123');
|
||||
expect(img.getAttribute('loading')).toBe('lazy');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover text');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
|
||||
});
|
||||
|
||||
it('renders an image when the shared link is an individual share', () => {
|
||||
|
|
@ -30,7 +30,7 @@ describe('ShareCover component', () => {
|
|||
const img = component.getByTestId('album-image') as HTMLImageElement;
|
||||
expect(img.alt).toBe('individual_share');
|
||||
expect(img.getAttribute('loading')).toBe('lazy');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover text');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
|
||||
expect(img.getAttribute('src')).toBe('/asdf');
|
||||
expect(getAssetThumbnailUrl).toHaveBeenCalledWith('someId');
|
||||
});
|
||||
|
|
@ -44,7 +44,7 @@ describe('ShareCover component', () => {
|
|||
const img = component.getByTestId('album-image') as HTMLImageElement;
|
||||
expect(img.alt).toBe('unnamed_share');
|
||||
expect(img.getAttribute('loading')).toBe('lazy');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover text');
|
||||
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
|
||||
});
|
||||
|
||||
it('renders fallback image when asset is not resized', () => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<img
|
||||
{alt}
|
||||
class="z-0 rounded-xl object-cover {className}"
|
||||
class="z-0 rounded-xl object-cover aspect-square {className}"
|
||||
data-testid="album-image"
|
||||
draggable="false"
|
||||
loading={preload ? 'eager' : 'lazy'}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<enhanced:img
|
||||
{alt}
|
||||
class="z-0 rounded-xl object-cover {className}"
|
||||
class="z-0 rounded-xl object-cover aspect-square {className}"
|
||||
data-testid="album-image"
|
||||
draggable="false"
|
||||
loading={preload ? 'eager' : 'lazy'}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class="relative aspect-square shrink-0">
|
||||
<div class="relative shrink-0">
|
||||
{#if link?.album}
|
||||
<AlbumCover album={link.album} class={className} {preload} />
|
||||
{:else if link.assets[0]?.resized}
|
||||
|
|
|
|||
|
|
@ -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