cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
15 changed files with 174 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}