c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-01 15:11:21 +01:00
Code Releases Activity

feat(web): improve search bar + add to search page (#1957)

Browse source 
* feat(web): improve search bar + add to search page

* fix back button routing
This commit is contained in:
Michel Heusschen 2023-03-06 15:31:58 +01:00 • committed by GitHub
parent 8857d0b8df
commit f52e076cb3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 155 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/shared-components/control-app-bar.svelte
View file

@ -56,7 +56,9 @@
<slot name="leading" /> <slot name="leading" />
</div> </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" /> <slot name="trailing" />
</div> </div>
</div> </div>

154
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -9,9 +9,9 @@
import { AppRoute } from '../../../constants'; import { AppRoute } from '../../../constants';
import AccountInfoPanel from './account-info-panel.svelte'; import AccountInfoPanel from './account-info-panel.svelte';
import ImmichLogo from '../immich-logo.svelte'; import ImmichLogo from '../immich-logo.svelte';
import SearchBar from '../search-bar/search-bar.svelte';
export let user: UserResponseDto; export let user: UserResponseDto;
export let shouldShowUploadButton = true; export let shouldShowUploadButton = true;
export let term = '';
let shouldShowAccountInfo = false; let shouldShowAccountInfo = false;
@ -36,100 +36,94 @@
goto(data.redirectUri || '/auth/login?autoLaunch=0'); goto(data.redirectUri || '/auth/login?autoLaunch=0');
}; };
const onSearch = () => {
goto(`/search?q=${term}`);
};
</script> </script>
<section <section
id="dashboard-navbar" id="dashboard-navbar"
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm" 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 <a
data-sveltekit-preload-data="hover" data-sveltekit-preload-data="hover"
class="flex gap-2 place-items-center hover:cursor-pointer" class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
href="/photos" href={AppRoute.PHOTOS}
> >
<ImmichLogo height="35" width="35" /> <ImmichLogo height="35" width="35" />
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary"> <h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
IMMICH IMMICH
</h1> </h1>
</a> </a>
<form class="flex-1 ml-24" autocomplete="off" on:submit|preventDefault={onSearch}> <div class="flex justify-between gap-16 pr-6">
<input <div class="w-full max-w-5xl flex-1 pl-4">
type="text" <SearchBar grayTheme={true} />
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> </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> </div>
{#if shouldShowAccountInfoPanel} {#if shouldShowAccountInfoPanel}

59
web/src/lib/components/shared-components/search-bar/search-bar.svelte Normal file
View file

@ -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>

2
web/src/lib/constants.ts
View file

@ -12,5 +12,7 @@ export enum AppRoute {
PHOTOS = '/photos', PHOTOS = '/photos',
EXPLORE = '/explore', EXPLORE = '/explore',
SHARING = '/sharing', SHARING = '/sharing',
SEARCH = '/search',
AUTH_LOGIN = '/auth/login' AUTH_LOGIN = '/auth/login'
} }

45
web/src/routes/(user)/search/+page.svelte
View file

@ -5,44 +5,33 @@
import type { PageData } from './$types'; import type { PageData } from './$types';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte'; import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.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; export let data: PageData;
const term = $page.url.searchParams.get('q') || data.term || ''; $: term = $page.url.searchParams.get('q') || data.term || '';
let goBackRoute = '/explore';
afterNavigate((r) => {
if (r.from) {
goBackRoute = r.from.url.href;
}
});
</script> </script>
<section> <section>
<ControlAppBar on:close-button-click={() => goto(goBackRoute)} backIcon={ArrowLeft}> <ControlAppBar on:close-button-click={() => history.back()} backIcon={ArrowLeft}>
<svelte:fragment slot="leading"> <div class="w-full max-w-2xl flex-1 pl-4">
<p class="text-xl capitalize"> <SearchBar grayTheme={false} value={term} replaceHistoryState={true} />
Search </div>
{#if term}
- {term}
{/if}
</p>
</svelte:fragment>
</ControlAppBar> </ControlAppBar>
</section> </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 class="overflow-y-auto relative immich-scrollbar">
<section <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
id="search-content" {#if data.results?.assets?.items.length > 0}
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg" <div class="pl-4">
> <GalleryViewer assets={data.results.assets.items} />
{#if data.results?.assets?.items.length != 0} </div>
<GalleryViewer assets={data.results.assets.items} />
{:else} {:else}
<div class="w-full text-center dark:text-white "> <div
<div class="mt-60 flex flex-col place-content-center place-items-center"> class="flex items-center place-content-center w-full min-h-[calc(100vh_-_11rem)] dark:text-white"
<ImageOffOutline size="56" /> >
<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="font-medium text-3xl mt-5">No results</p>
<p class="text-base font-normal">Try a synonym or more general keyword</p> <p class="text-base font-normal">Try a synonym or more general keyword</p>
</div> </div>