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

fix(web): reset select all button state on escape press (#13600)

Browse Source 
* factor out cancel multiselect state logic to utils

* use cancel multiselct helper in album page

* use cancel multiselct helper in album-viewer component

* use cancel multiselct helper in asset-grid component

* remove unused to fix lint
This commit is contained in:
Darrel 2024-10-21 02:11:00 +08:00 committed by GitHub
parent ee0130a58b
commit 45517ab7ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/album-page/album-viewer.svelte
View File

@ -6,7 +6,7 @@
import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk'; import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store'; import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store'; import { AssetStore } from '$lib/stores/assets.store';
import { downloadAlbum } from '$lib/utils/asset-utils'; import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import DownloadAction from '../photos-page/actions/download-action.svelte'; import DownloadAction from '../photos-page/actions/download-action.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte'; import AssetGrid from '../photos-page/asset-grid.svelte';
@ -49,7 +49,7 @@
shortcut: { key: 'Escape' }, shortcut: { key: 'Escape' },
onShortcut: () => { onShortcut: () => {
if (!$showAssetViewer && $isMultiSelectState) { if (!$showAssetViewer && $isMultiSelectState) {
assetInteractionStore.clearMultiselect(); cancelMultiselect(assetInteractionStore);
} }
}, },
}} }}

5
web/src/lib/components/photos-page/actions/select-all-assets.svelte
View File

@ -3,7 +3,7 @@
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store'; import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets.store'; import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets.store';
import { mdiSelectAll, mdiSelectRemove } from '@mdi/js'; import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
import { selectAllAssets } from '$lib/utils/asset-utils'; import { selectAllAssets, cancelMultiselect } from '$lib/utils/asset-utils';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
export let assetStore: AssetStore; export let assetStore: AssetStore;
@ -14,8 +14,7 @@
}; };
const handleCancel = () => { const handleCancel = () => {
$isSelectingAllAssets = false; cancelMultiselect(assetInteractionStore);
assetInteractionStore.clearMultiselect();
}; };
</script> </script>

13
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -5,19 +5,13 @@
import { AppRoute, AssetAction } from '$lib/constants'; import { AppRoute, AssetAction } from '$lib/constants';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store'; import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { import { AssetBucket, AssetStore, type BucketListener, type ViewportXY } from '$lib/stores/assets.store';
AssetBucket,
AssetStore,
isSelectingAllAssets,
type BucketListener,
type ViewportXY,
} from '$lib/stores/assets.store';
import { locale, showDeleteModal } from '$lib/stores/preferences.store'; import { locale, showDeleteModal } from '$lib/stores/preferences.store';
import { isSearchEnabled } from '$lib/stores/search.store'; import { isSearchEnabled } from '$lib/stores/search.store';
import { featureFlags } from '$lib/stores/server-config.store'; import { featureFlags } from '$lib/stores/server-config.store';
import { handlePromiseError } from '$lib/utils'; import { handlePromiseError } from '$lib/utils';
import { deleteAssets } from '$lib/utils/actions'; import { deleteAssets } from '$lib/utils/actions';
import { archiveAssets, selectAllAssets, stackAssets } from '$lib/utils/asset-utils'; import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
import { navigate } from '$lib/utils/navigation'; import { navigate } from '$lib/utils/navigation';
import { import {
formatGroupTitle, formatGroupTitle,
@ -589,8 +583,7 @@
let shiftKeyIsDown = false; let shiftKeyIsDown = false;
const deselectAllAssets = () => { const deselectAllAssets = () => {
$isSelectingAllAssets = false; cancelMultiselect(assetInteractionStore);
assetInteractionStore.clearMultiselect();
}; };
const onKeyDown = (event: KeyboardEvent) => { const onKeyDown = (event: KeyboardEvent) => {

5
web/src/lib/utils/asset-utils.ts
View File

@ -467,6 +467,11 @@ export const selectAllAssets = async (assetStore: AssetStore, assetInteractionSt
} }
}; };
export const cancelMultiselect = (assetInteractionStore: AssetInteractionStore) => {
isSelectingAllAssets.set(false);
assetInteractionStore.clearMultiselect();
};
export const toggleArchive = async (asset: AssetResponseDto) => { export const toggleArchive = async (asset: AssetResponseDto) => {
const $t = get(t); const $t = get(t);
try { try {

4
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -40,7 +40,7 @@
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store'; import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { preferences, user } from '$lib/stores/user.store'; import { preferences, user } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils'; import { handlePromiseError } from '$lib/utils';
import { downloadAlbum } from '$lib/utils/asset-utils'; import { downloadAlbum, cancelMultiselect } from '$lib/utils/asset-utils';
import { openFileUploadDialog } from '$lib/utils/file-uploader'; import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { import {
@ -270,7 +270,7 @@
return; return;
} }
if ($isMultiSelectState) { if ($isMultiSelectState) {
assetInteractionStore.clearMultiselect(); cancelMultiselect(assetInteractionStore);
return; return;
} }
await goto(backUrl); await goto(backUrl);