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

* feat(web): improve shared link management on mobile * fix format
2024-08-13 16:37:47 +02:00
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}