Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-28 00:59:18 -05:00
Code Issues Activity

fix(web): clickable items in the searchbar (#3441)

Browse source
This commit is contained in:
martin 2023-07-28 05:06:42 +02:00 • committed by GitHub
parent fe9ef1a3ea
commit 13b2b2fc4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 76 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store'; import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { clickOutside } from '$lib/utils/click-outside';
export let value = ''; export let value = '';
export let grayTheme: boolean; export let grayTheme: boolean;
@ -55,85 +56,85 @@
}; };
</script> </script>
<form <button class="w-full" use:clickOutside on:outclick={onFocusOut} on:click={onFocusIn}>
draggable="false" <form
autocomplete="off" draggable="false"
class="relative text-sm" autocomplete="off"
action={AppRoute.SEARCH} class="relative select-text text-sm"
on:reset={() => (value = '')} action={AppRoute.SEARCH}
on:submit|preventDefault={() => onSearch(true)} on:reset={() => (value = '')}
on:focusin={onFocusIn} on:submit|preventDefault={() => onSearch(true)}
on:focusout={onFocusOut} >
> <label>
<label> <div class="absolute inset-y-0 left-0 flex items-center pl-6">
<div class="absolute inset-y-0 left-0 flex items-center pl-6"> <div class="pointer-events-none dark:text-immich-dark-fg/75">
<div class="pointer-events-none dark:text-immich-dark-fg/75"> <Magnify size="1.5em" />
<Magnify size="1.5em" /> </div>
</div> </div>
</div> <input
<input type="text"
type="text" name="q"
name="q" class="w-full transition-all {grayTheme
class="w-full transition-all {grayTheme ? 'dark:bg-immich-dark-gray'
? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showBigSearchBar
: 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showBigSearchBar ? 'rounded-t-3xl border border-gray-200 bg-white dark:border-gray-800'
? 'rounded-t-3xl border border-gray-200 bg-white dark:border-gray-800' : 'rounded-3xl border border-transparent bg-gray-200'}"
: 'rounded-3xl border border-transparent bg-gray-200'}" placeholder="Search your photos"
placeholder="Search your photos" required
required pattern="^(?!m:$).*$"
pattern="^(?!m:$).*$" bind:value
bind:value />
/> </label>
</label> {#if showClearIcon}
{#if showClearIcon} <div class="absolute inset-y-0 right-0 flex items-center pr-4">
<div class="absolute inset-y-0 right-0 flex items-center pr-4"> <button
<button type="reset"
type="reset" class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]" >
<Close size="1.5em" />
</button>
</div>
{/if}
{#if showBigSearchBar}
<div
transition:fly={{ y: 25, duration: 250 }}
class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
> >
<Close size="1.5em" /> <div class="flex px-5 pt-5 text-left text-xs">
</button> <p>
</div> Smart search is enabled by default, to search for metadata use the syntax <span
{/if} class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
>m:your-search-term</span
>
</p>
</div>
{#if showBigSearchBar} {#if $savedSearchTerms.length > 0}
<div <div class="flex justify-between px-5 pt-5 text-xs">
transition:fly={{ y: 25, duration: 250 }} <p>RECENT SEARCHES</p>
class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300" <button
> type="button"
<div class="px-5 pt-5 text-xs"> class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
<p> on:click={clearSearchTerm}>Clear all</button
Smart search is enabled by default, to search for metadata use the syntax <span >
class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary" </div>
>m:your-search-term</span {/if}
>
</p>
</div>
{#if $savedSearchTerms.length > 0} {#each $savedSearchTerms as savedSearchTerm, i (i)}
<div class="flex justify-between px-5 pt-5 text-xs">
<p>RECENT SEARCHES</p>
<button <button
type="button" type="button"
class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary" class="flex w-full cursor-pointer gap-3 px-5 py-3 text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
on:click={clearSearchTerm}>Clear all</button on:click={() => {
value = savedSearchTerm;
onSearch(false);
}}
> >
</div> <Magnify size="1.5em" />
{/if} {savedSearchTerm}
</button>
{#each $savedSearchTerms as savedSearchTerm, i (i)} {/each}
<button </div>
type="button" {/if}
class="flex w-full cursor-pointer gap-3 px-5 py-3 text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10" </form>
on:click={() => { </button>
value = savedSearchTerm;
onSearch(false);
}}
>
<Magnify size="1.5em" />
{savedSearchTerm}
</button>
{/each}
</div>
{/if}
</form>