helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(web): asset interaction (#14662)

Browse source 
* refactor(web): asset interaction

* feedback
This commit is contained in:
Michel Heusschen 2024-12-14 19:30:33 +01:00 • committed by GitHub
parent 525840b040
commit b5022d80d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 375 additions and 367 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web/src/lib/components/share-page/individual-shared-viewer.svelte
View file

@ -15,11 +15,11 @@
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import type { Viewport } from '$lib/stores/assets.store';
import { t } from 'svelte-i18n';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
sharedLink: SharedLinkResponseDto;
@ -29,12 +29,10 @@
let { sharedLink = $bindable(), isOwned }: Props = $props();
const viewport: Viewport = $state({ width: 0, height: 0 });
const assetInteractionStore = createAssetInteractionStore();
const { selectedAssets } = assetInteractionStore;
const assetInteraction = new AssetInteraction();
let innerWidth: number = $state(0);
let assets = $derived(sharedLink.assets);
let isMultiSelectionMode = $derived($selectedAssets.size > 0);
dragAndDropFilesStore.subscribe((value) => {
if (value.isDragging && value.files.length > 0) {
@ -73,15 +71,18 @@
};
const handleSelectAll = () => {
assetInteractionStore.selectAssets(assets);
assetInteraction.selectAssets(assets);
};
</script>
<svelte:window bind:innerWidth />
<section class="bg-immich-bg dark:bg-immich-dark-bg">
{#if isMultiSelectionMode}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => cancelMultiselect(assetInteractionStore)}>
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
{#if sharedLink?.allowDownload}
<DownloadAction filename="immich-shared.zip" />
@ -112,6 +113,6 @@
</ControlAppBar>
{/if}
<section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
<GalleryViewer {assets} {assetInteractionStore} {viewport} />
<GalleryViewer {assets} {assetInteraction} {viewport} />
</section>
</section>