self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): search page navigation and asset select (#2191)

Browse Source
This commit is contained in:
Michel Heusschen 2023-04-06 19:50:44 +02:00 committed by GitHub
parent d7c1005a50
commit b03ce897c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -9,6 +9,7 @@
export let assets: AssetResponseDto[];
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
export let selectedAssets: Set<AssetResponseDto> = new Set();
export let disableAssetSelect = false;
let isShowAssetViewer = false;
@ -96,6 +97,7 @@
<Thumbnail
{asset}
{thumbnailSize}
readonly={disableAssetSelect}
publicSharedKey={sharedLink?.key}
format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}

6
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View File

@ -8,10 +8,6 @@
export let value = '';
export let grayTheme: boolean;
// Replace state to immediately go back to previous page, instead
// of having to go through every search query.
export let replaceHistoryState = false;
let showBigSearchBar = false;
$: showClearIcon = value.length > 0;
@ -33,7 +29,7 @@
clip: clipSearch
});
goto(`${AppRoute.SEARCH}?${params}`, { replaceState: replaceHistoryState });
goto(`${AppRoute.SEARCH}?${params}`);
}
const saveSearchTerm = (saveValue: string) => {

20
web/src/routes/(user)/search/+page.svelte
View File

@ -6,15 +6,29 @@
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { afterNavigate, goto } from '$app/navigation';
export let data: PageData;
// The GalleryViewer pushes it's own history state, which causes weird
// behavior for history.back(). To prevent that we store the previous page
// manually and navigate back to that.
let previousRoute = '/explore';
afterNavigate(({ from }) => {
// Prevent setting previousRoute to the current page.
if (from && from.route.id !== $page.route.id) {
previousRoute = from.url.href;
}
});
$: term = $page.url.searchParams.get('q') || data.term || '';
</script>
<section>
<ControlAppBar on:close-button-click={() => history.back()} backIcon={ArrowLeft}>
<ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
<div class="w-full max-w-2xl flex-1 pl-4">
<SearchBar grayTheme={false} value={term} replaceHistoryState={true} />
<SearchBar grayTheme={false} value={term} />
</div>
</ControlAppBar>
</section>
@ -24,7 +38,7 @@
<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
{#if data.results?.assets?.items.length > 0}
<div class="pl-4">
<GalleryViewer assets={data.results.assets.items} />
<GalleryViewer assets={data.results.assets.items} disableAssetSelect />
</div>
{:else}
<div