From 276101ee82ef61e285e1da8fdafcc29bc7f64f39 Mon Sep 17 00:00:00 2001 From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Date: Tue, 13 Aug 2024 16:37:47 +0200 Subject: [PATCH] feat(web): improve shared link management on mobile (#11720) * feat(web): improve shared link management on mobile * fix format --- .../album-page/__tests__/album-cover.spec.ts | 4 +- .../components/album-page/album-cover.svelte | 12 +- .../context-menu/button-context-menu.svelte | 53 +++---- .../actions/shared-link-copy.svelte | 22 +++ .../actions/shared-link-delete.svelte | 15 ++ .../actions/shared-link-edit.svelte | 15 ++ .../covers/__tests__/asset-cover.spec.ts | 2 +- .../covers/__tests__/no-cover.spec.ts | 2 +- .../covers/__tests__/share-cover.spec.ts | 6 +- .../covers/asset-cover.svelte | 2 +- .../sharedlinks-page/covers/no-cover.svelte | 2 +- .../covers/share-cover.svelte | 2 +- .../sharedlinks-page/shared-link-card.svelte | 134 ++++++++++-------- web/src/lib/i18n/en.json | 2 +- .../(user)/sharing/sharedlinks/+page.svelte | 22 +-- 15 files changed, 174 insertions(+), 121 deletions(-) create mode 100644 web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte create mode 100644 web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte create mode 100644 web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte diff --git a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts b/web/src/lib/components/album-page/__tests__/album-cover.spec.ts index 1688283116dce..ec4878cd15044 100644 --- a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts +++ b/web/src/lib/components/album-page/__tests__/album-cover.spec.ts @@ -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)); }); }); diff --git a/web/src/lib/components/album-page/album-cover.svelte b/web/src/lib/components/album-page/album-cover.svelte index d6afba0a8b4c4..d0444f35990e2 100644 --- a/web/src/lib/components/album-page/album-cover.svelte +++ b/web/src/lib/components/album-page/album-cover.svelte @@ -14,10 +14,8 @@ $: thumbnailUrl = album.albumThumbnailAssetId ? getAssetThumbnailUrl({ id: album.albumThumbnailAssetId }) : null; -
- {#if thumbnailUrl} - - {:else} - - {/if} -
+{#if thumbnailUrl} + +{:else} + +{/if} diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte index 8e6a1fd4fd0b9..f1ee93cc50726 100644 --- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte +++ b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte @@ -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} /> -
- - - -
+ + + + + {/if} diff --git a/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte b/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte new file mode 100644 index 0000000000000..f955d8479a293 --- /dev/null +++ b/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte @@ -0,0 +1,22 @@ + + +{#if menuItem} + +{:else} + +{/if} diff --git a/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte b/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte new file mode 100644 index 0000000000000..d458d5d77aced --- /dev/null +++ b/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte @@ -0,0 +1,15 @@ + + +{#if menuItem} + +{:else} + +{/if} diff --git a/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte b/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte new file mode 100644 index 0000000000000..49c610563218c --- /dev/null +++ b/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte @@ -0,0 +1,15 @@ + + +{#if menuItem} + +{:else} + +{/if} diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts index a7a2c85f8aaff..a7a4a069d315b 100644 --- a/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts +++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts @@ -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'); }); }); diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts index 3dc7d56791da7..bdf0b8878c406 100644 --- a/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts +++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts @@ -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)); }); diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts index c14b618dceb8a..1f1fa65cf8361 100644 --- a/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts +++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts @@ -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', () => { diff --git a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte index b0cd2dfdd5bf4..b8335be6b0632 100644 --- a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte +++ b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte @@ -8,7 +8,7 @@ -
+
{#if link?.album} {:else if link.assets[0]?.resized} diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte index 6f375ded48869..40e95ad27a1e6 100644 --- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte +++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte @@ -1,23 +1,20 @@
- + + -
-
-
- {#if isExpired} -

{$t('expired')}

- {:else if expiresAt} -

- {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })} -

- {:else} -

{$t('expires_date', { values: { date: '∞' } })}

- {/if} -
- -
-
- {#if link.type === SharedLinkType.Album} +
+
+
+ {#if isExpired} +

{$t('expired')}

+ {:else if expiresAt}

- {link.album?.albumName.toUpperCase()} + {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}

- {:else if link.type === SharedLinkType.Individual} -

{$t('individual_share').toUpperCase()}

- {/if} - - {#if !isExpired} - - - + {:else} +

{$t('expires_date', { values: { date: '∞' } })}

{/if}
-

{link.description ?? ''}

+
+

+ {#if link.type === SharedLinkType.Album} + {link.album?.albumName} + {:else if link.type === SharedLinkType.Individual} + {$t('individual_share')} + {/if} +

+ +

{link.description ?? ''}

+
+
+ +
+ {#if link.allowUpload} + {$t('upload')} + {/if} + + {#if link.allowDownload} + {$t('download')} + {/if} + + {#if link.showMetadata} + {$t('exif').toUpperCase()} + {/if} + + {#if link.password} + {$t('password')} + {/if}
+ -
- {#if link.allowUpload} - {$t('upload')} - {/if} - - {#if link.allowDownload} - {$t('download')} - {/if} - - {#if link.showMetadata} - {$t('exif').toUpperCase()} - {/if} - - {#if link.password} - {$t('password')} - {/if} +
+ -
-
-
- dispatch('delete')} /> - dispatch('edit')} /> - dispatch('copy')} /> +
+ + + + +
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json index 8c08114feb42d..6796ae3a71e66 100644 --- a/web/src/lib/i18n/en.json +++ b/web/src/lib/i18n/en.json @@ -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}", diff --git a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte index 09d3d2d400e44..5e934143dff2a 100644 --- a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte +++ b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte @@ -1,6 +1,5 @@ goto(AppRoute.SHARING)}> {$t('shared_links')} -
-
+
+

{$t('manage_shared_links')}

{#if sharedLinks.length === 0}

{$t('you_dont_have_any_shared_links')}

{:else} -
+
{#each sharedLinks as link (link.id)} - handleDeleteLink(link.id)} - on:edit={() => (editSharedLink = link)} - on:copy={() => handleCopyLink(link.key)} - /> + handleDeleteLink(link.id)} onEdit={() => (editSharedLink = link)} /> {/each}
{/if}