feat(web): improve search bar + add to search page (#1957)
* feat(web): improve search bar + add to search page * fix back button routing
This commit is contained in:
Michel Heusschen
GitHub
parent
8857d0b8df
commit
f52e076cb3
5 changed files with 155 additions and 109 deletions
|
|
@ -56,7 +56,9 @@
|
|||
<slot name="leading" />
|
||||
</div>
|
||||
|
||||
<div class="flex place-items-center gap-1 mr-4 ">
|
||||
<slot />
|
||||
|
||||
<div class="flex place-items-center gap-1 mr-4">
|
||||
<slot name="trailing" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
import { AppRoute } from '../../../constants';
|
||||
import AccountInfoPanel from './account-info-panel.svelte';
|
||||
import ImmichLogo from '../immich-logo.svelte';
|
||||
import SearchBar from '../search-bar/search-bar.svelte';
|
||||
export let user: UserResponseDto;
|
||||
export let shouldShowUploadButton = true;
|
||||
export let term = '';
|
||||
|
||||
let shouldShowAccountInfo = false;
|
||||
|
||||
|
|
@ -36,100 +36,94 @@
|
|||
|
||||
goto(data.redirectUri || '/auth/login?autoLaunch=0');
|
||||
};
|
||||
|
||||
const onSearch = () => {
|
||||
goto(`/search?q=${term}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<section
|
||||
id="dashboard-navbar"
|
||||
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
|
||||
>
|
||||
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
|
||||
<div
|
||||
class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2"
|
||||
>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="flex gap-2 place-items-center hover:cursor-pointer"
|
||||
href="/photos"
|
||||
class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
|
||||
href={AppRoute.PHOTOS}
|
||||
>
|
||||
<ImmichLogo height="35" width="35" />
|
||||
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
|
||||
IMMICH
|
||||
</h1>
|
||||
</a>
|
||||
<form class="flex-1 ml-24" autocomplete="off" on:submit|preventDefault={onSearch}>
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
|
||||
placeholder="Search"
|
||||
required
|
||||
bind:value={term}
|
||||
/>
|
||||
</form>
|
||||
<section class="flex gap-4 place-items-center">
|
||||
<ThemeButton />
|
||||
|
||||
{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
|
||||
<button
|
||||
in:fly={{ x: 50, duration: 250 }}
|
||||
on:click={() => dispatch('uploadClicked')}
|
||||
class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<TrayArrowUp size="20" />
|
||||
<span> Upload </span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if user.isAdmin}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
|
||||
<button
|
||||
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
|
||||
$page.url.pathname.includes('/admin') &&
|
||||
'text-immich-primary dark:immich-dark-primary underline'
|
||||
}`}>Administration</button
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
on:mouseover={() => (shouldShowAccountInfo = true)}
|
||||
on:focus={() => (shouldShowAccountInfo = true)}
|
||||
on:mouseleave={() => (shouldShowAccountInfo = false)}
|
||||
on:click={showAccountInfoPanel}
|
||||
on:keydown={showAccountInfoPanel}
|
||||
>
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
||||
>
|
||||
{#if user.profileImagePath}
|
||||
<img
|
||||
transition:fade={{ duration: 100 }}
|
||||
class:hidden={showProfilePictureFallback}
|
||||
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
|
||||
draggable="false"
|
||||
on:load={() => (showProfilePictureFallback = false)}
|
||||
/>
|
||||
{/if}
|
||||
{#if showProfilePictureFallback}
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if shouldShowAccountInfo}
|
||||
<div
|
||||
in:fade={{ delay: 500, duration: 150 }}
|
||||
out:fade={{ delay: 200, duration: 150 }}
|
||||
class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
|
||||
>
|
||||
<p>{user.firstName} {user.lastName}</p>
|
||||
<p>{user.email}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex justify-between gap-16 pr-6">
|
||||
<div class="w-full max-w-5xl flex-1 pl-4">
|
||||
<SearchBar grayTheme={true} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex gap-4 place-items-center">
|
||||
<ThemeButton />
|
||||
|
||||
{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
|
||||
<button
|
||||
in:fly={{ x: 50, duration: 250 }}
|
||||
on:click={() => dispatch('uploadClicked')}
|
||||
class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<TrayArrowUp size="20" />
|
||||
<span> Upload </span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if user.isAdmin}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
|
||||
<button
|
||||
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
|
||||
$page.url.pathname.includes('/admin') &&
|
||||
'text-immich-primary dark:immich-dark-primary underline'
|
||||
}`}>Administration</button
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
on:mouseover={() => (shouldShowAccountInfo = true)}
|
||||
on:focus={() => (shouldShowAccountInfo = true)}
|
||||
on:mouseleave={() => (shouldShowAccountInfo = false)}
|
||||
on:click={showAccountInfoPanel}
|
||||
on:keydown={showAccountInfoPanel}
|
||||
>
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
||||
>
|
||||
{#if user.profileImagePath}
|
||||
<img
|
||||
transition:fade={{ duration: 100 }}
|
||||
class:hidden={showProfilePictureFallback}
|
||||
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
|
||||
draggable="false"
|
||||
on:load={() => (showProfilePictureFallback = false)}
|
||||
/>
|
||||
{/if}
|
||||
{#if showProfilePictureFallback}
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if shouldShowAccountInfo}
|
||||
<div
|
||||
in:fade={{ delay: 500, duration: 150 }}
|
||||
out:fade={{ delay: 200, duration: 150 }}
|
||||
class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
|
||||
>
|
||||
<p>{user.firstName} {user.lastName}</p>
|
||||
<p>{user.email}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if shouldShowAccountInfoPanel}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<script lang="ts">
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import Magnify from 'svelte-material-icons/Magnify.svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
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;
|
||||
|
||||
$: showClearIcon = value.length > 0;
|
||||
|
||||
function onSearch() {
|
||||
const params = new URLSearchParams({
|
||||
q: value
|
||||
});
|
||||
|
||||
goto(`${AppRoute.SEARCH}?${params}`, { replaceState: replaceHistoryState });
|
||||
}
|
||||
</script>
|
||||
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="relative text-base"
|
||||
action={AppRoute.SEARCH}
|
||||
on:reset={() => (value = '')}
|
||||
on:submit|preventDefault={onSearch}
|
||||
>
|
||||
<label>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-6">
|
||||
<div class="pointer-events-none dark:text-immich-dark-fg/75">
|
||||
<Magnify size="1.5em" />
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
class="w-full rounded-3xl bg-gray-200 {grayTheme
|
||||
? 'dark:bg-immich-dark-gray'
|
||||
: 'dark:bg-immich-dark-bg'} text-immich-fg/75 dark:text-immich-dark-fg px-14 py-4"
|
||||
placeholder="Search"
|
||||
required
|
||||
bind:value
|
||||
/>
|
||||
</label>
|
||||
{#if showClearIcon}
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-4">
|
||||
<button
|
||||
type="reset"
|
||||
class="dark:text-immich-dark-fg/75 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 rounded-full p-2 active:bg-immich-primary/10 dark:active:bg-immich-dark-primary/[.35]"
|
||||
>
|
||||
<Close size="1.5em" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
|
|
@ -12,5 +12,7 @@ export enum AppRoute {
|
|||
PHOTOS = '/photos',
|
||||
EXPLORE = '/explore',
|
||||
SHARING = '/sharing',
|
||||
SEARCH = '/search',
|
||||
|
||||
AUTH_LOGIN = '/auth/login'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,44 +5,33 @@
|
|||
import type { PageData } from './$types';
|
||||
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
|
||||
import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
const term = $page.url.searchParams.get('q') || data.term || '';
|
||||
|
||||
let goBackRoute = '/explore';
|
||||
afterNavigate((r) => {
|
||||
if (r.from) {
|
||||
goBackRoute = r.from.url.href;
|
||||
}
|
||||
});
|
||||
$: term = $page.url.searchParams.get('q') || data.term || '';
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<ControlAppBar on:close-button-click={() => goto(goBackRoute)} backIcon={ArrowLeft}>
|
||||
<svelte:fragment slot="leading">
|
||||
<p class="text-xl capitalize">
|
||||
Search
|
||||
{#if term}
|
||||
- {term}
|
||||
{/if}
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
<ControlAppBar on:close-button-click={() => history.back()} backIcon={ArrowLeft}>
|
||||
<div class="w-full max-w-2xl flex-1 pl-4">
|
||||
<SearchBar grayTheme={false} value={term} replaceHistoryState={true} />
|
||||
</div>
|
||||
</ControlAppBar>
|
||||
</section>
|
||||
|
||||
<section class="relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<section class="overflow-y-auto relative immich-scrollbar">
|
||||
<section
|
||||
id="search-content"
|
||||
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
{#if data.results?.assets?.items.length != 0}
|
||||
<GalleryViewer assets={data.results.assets.items} />
|
||||
<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} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full text-center dark:text-white ">
|
||||
<div class="mt-60 flex flex-col place-content-center place-items-center">
|
||||
<ImageOffOutline size="56" />
|
||||
<div
|
||||
class="flex items-center place-content-center w-full min-h-[calc(100vh_-_11rem)] dark:text-white"
|
||||
>
|
||||
<div class="flex flex-col content-center items-center text-center">
|
||||
<ImageOffOutline size="3.5em" />
|
||||
<p class="font-medium text-3xl mt-5">No results</p>
|
||||
<p class="text-base font-normal">Try a synonym or more general keyword</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue