self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00
Code Issues Releases Activity

feat(web): improve shared link management on mobile (#11720)

Browse Source 
* feat(web): improve shared link management on mobile

* fix format
This commit is contained in:
Michel Heusschen 2024-08-13 16:37:47 +02:00 committed by GitHub
parent 9837d60074
commit 276101ee82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 174 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/album-page/__tests__/album-cover.spec.ts
View File

@ -19,7 +19,7 @@ describe('AlbumCover component', () => {
const img = component.getByTestId('album-image') as HTMLImageElement;
expect(img.alt).toBe('someName');
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({ id: '123' });
});
@ -36,7 +36,7 @@ describe('AlbumCover component', () => {
const img = component.getByTestId('album-image') as HTMLImageElement;
expect(img.alt).toBe('unnamed_album');
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');
expect(img.getAttribute('src')).toStrictEqual(expect.any(String));
});
});

12
web/src/lib/components/album-page/album-cover.svelte
View File

@ -14,10 +14,8 @@
$: thumbnailUrl = album.albumThumbnailAssetId ? getAssetThumbnailUrl({ id: album.albumThumbnailAssetId }) : null;
</script>
<div class="relative aspect-square">
{#if thumbnailUrl}
<AssetCover {alt} class={className} src={thumbnailUrl} {preload} />
{:else}
<NoCover {alt} class={className} {preload} />
{/if}
</div>
{#if thumbnailUrl}
<AssetCover {alt} class={className} src={thumbnailUrl} {preload} />
{:else}
<NoCover {alt} class={className} {preload} />
{/if}

53
web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
View File

@ -32,6 +32,7 @@
* Additional classes to apply to the button.
*/
export let buttonClass: string | undefined = undefined;
export let hideContent = false;
let isOpen = false;
let contextMenuPosition = { x: 0, y: 0 };
@ -125,30 +126,32 @@
on:click={handleClick}
/>
</div>
<div
use:shortcuts={[
{
shortcut: { key: 'Tab' },
onShortcut: closeDropdown,
preventDefault: false,
},
{
shortcut: { key: 'Tab', shift: true },
onShortcut: closeDropdown,
preventDefault: false,
},
]}
>
<ContextMenu
{...contextMenuPosition}
{direction}
ariaActiveDescendant={$selectedIdStore}
ariaLabelledBy={buttonId}
bind:menuElement={menuContainer}
id={menuId}
isVisible={isOpen}
{#if isOpen || !hideContent}
<div
use:shortcuts={[
{
shortcut: { key: 'Tab' },
onShortcut: closeDropdown,
preventDefault: false,
},
{
shortcut: { key: 'Tab', shift: true },
onShortcut: closeDropdown,
preventDefault: false,
},
]}
>
<slot />
</ContextMenu>
</div>
<ContextMenu
{...contextMenuPosition}
{direction}
ariaActiveDescendant={$selectedIdStore}
ariaLabelledBy={buttonId}
bind:menuElement={menuContainer}
id={menuId}
isVisible={isOpen}
>
<slot />
</ContextMenu>
</div>
{/if}
</div>

22
web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte Normal file
View File

@ -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}

15
web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte Normal file
View File

@ -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}

15
web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte Normal file
View File

@ -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}

2
web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts
View File

@ -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');
});
});

2
web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts
View File

@ -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));
});

6
web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
View File

@ -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', () => {

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

@ -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'}

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

@ -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'}

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

@ -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}

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

@ -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>

2
web/src/lib/i18n/en.json
View File

@ -696,7 +696,6 @@
"getting_started": "Getting Started",
"go_back": "Go back",
"go_to_search": "Go to search",
"go_to_share_page": "Go to share page",
"group_albums_by": "Group albums by...",
"group_no": "No grouping",
"group_owner": "Group by owner",
@ -1078,6 +1077,7 @@
"shared_by_user": "Shared by {user}",
"shared_by_you": "Shared by you",
"shared_from_partner": "Photos from {partner}",
"shared_link_options": "Shared link options",
"shared_links": "Shared links",
"shared_photos_and_videos_count": "{assetCount, plural, other {# shared photos & videos.}}",
"shared_with_partner": "Shared with {partner}",

22
web/src/routes/(user)/sharing/sharedlinks/+page.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import {
@ -9,8 +8,6 @@
} from '$lib/components/shared-components/notification/notification';
import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
import { AppRoute } from '$lib/constants';
import { serverConfig } from '$lib/stores/server-config.store';
import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { getAllSharedLinks, removeSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
import { mdiArrowLeft } from '@mdi/js';
@ -53,35 +50,26 @@
await refresh();
editSharedLink = null;
};
const handleCopyLink = async (key: string) => {
await copyToClipboard(makeSharedLinkUrl($serverConfig.externalDomain, key));
};
</script>
<ControlAppBar backIcon={mdiArrowLeft} on:close={() => goto(AppRoute.SHARING)}>
<svelte:fragment slot="leading">{$t('shared_links')}</svelte:fragment>
</ControlAppBar>
<section class="mt-[120px] flex flex-col pb-[120px]">
<div class="m-auto mb-4 w-[50%] dark:text-immich-gray">
<section class="mt-[120px] flex flex-col pb-[120px] container max-w-screen-lg mx-auto px-3">
<div class="mb-4 dark:text-immich-gray">
<p>{$t('manage_shared_links')}</p>
</div>
{#if sharedLinks.length === 0}
<div
class="m-auto flex w-[50%] place-content-center place-items-center rounded-lg bg-gray-100 dark:bg-immich-dark-gray dark:text-immich-gray p-12"
class="flex place-content-center place-items-center rounded-lg bg-gray-100 dark:bg-immich-dark-gray dark:text-immich-gray p-12"
>
<p>{$t('you_dont_have_any_shared_links')}</p>
</div>
{:else}
<div class="m-auto flex w-[50%] flex-col">
<div class="flex flex-col">
{#each sharedLinks as link (link.id)}
<SharedLinkCard
{link}
on:delete={() => handleDeleteLink(link.id)}
on:edit={() => (editSharedLink = link)}
on:copy={() => handleCopyLink(link.key)}
/>
<SharedLinkCard {link} onDelete={() => handleDeleteLink(link.id)} onEdit={() => (editSharedLink = link)} />
{/each}
</div>
{/if}