mirror of
https://github.com/immich-app/immich.git
synced 2024-12-24 10:37:28 +02:00
fix(web): focus & clear individual search term (#3452)
This commit is contained in:
parent
7147486b6a
commit
2d83ac4125
@ -43,7 +43,7 @@
|
||||
<div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 z-[100] w-full bg-transparent">
|
||||
<div
|
||||
id="asset-selection-app-bar"
|
||||
class={`grid grid-cols-3 justify-between ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
|
||||
class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[20%_60%_20%] lg:grid-cols-3 ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
|
||||
forceDark && 'bg-immich-dark-gray text-white'
|
||||
}`}
|
||||
>
|
||||
|
@ -9,10 +9,12 @@
|
||||
export let value = '';
|
||||
export let grayTheme: boolean;
|
||||
|
||||
let input: HTMLInputElement;
|
||||
|
||||
let showBigSearchBar = false;
|
||||
$: showClearIcon = value.length > 0;
|
||||
|
||||
function onSearch(saveSearch: boolean) {
|
||||
function onSearch() {
|
||||
let clipSearch = 'true';
|
||||
let searchValue = value;
|
||||
|
||||
@ -21,18 +23,23 @@
|
||||
searchValue = value.slice(2);
|
||||
}
|
||||
|
||||
if (saveSearch) {
|
||||
saveSearchTerm(value);
|
||||
}
|
||||
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchValue);
|
||||
saveSearchTerm(searchValue);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
q: searchValue,
|
||||
clip: clipSearch,
|
||||
});
|
||||
|
||||
showBigSearchBar = false;
|
||||
goto(`${AppRoute.SEARCH}?${params}`);
|
||||
}
|
||||
|
||||
const clearSearchTerm = (searchTerm: string) => {
|
||||
input.focus();
|
||||
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchTerm);
|
||||
};
|
||||
|
||||
const saveSearchTerm = (saveValue: string) => {
|
||||
$savedSearchTerms = [saveValue, ...$savedSearchTerms];
|
||||
|
||||
@ -41,7 +48,8 @@
|
||||
}
|
||||
};
|
||||
|
||||
const clearSearchTerm = () => {
|
||||
const clearAllSearchTerms = () => {
|
||||
input.focus();
|
||||
$savedSearchTerms = [];
|
||||
};
|
||||
|
||||
@ -56,19 +64,21 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<button class="w-full" use:clickOutside on:outclick={onFocusOut} on:click={onFocusIn}>
|
||||
<button class="w-full" use:clickOutside on:outclick={onFocusOut}>
|
||||
<form
|
||||
draggable="false"
|
||||
autocomplete="off"
|
||||
class="relative select-text text-sm"
|
||||
action={AppRoute.SEARCH}
|
||||
on:reset={() => (value = '')}
|
||||
on:submit|preventDefault={() => onSearch(true)}
|
||||
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 class="dark:text-immich-dark-fg/75">
|
||||
<button class="flex items-center">
|
||||
<Magnify size="1.5em" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
@ -83,6 +93,8 @@
|
||||
required
|
||||
pattern="^(?!m:$).*$"
|
||||
bind:value
|
||||
bind:this={input}
|
||||
on:click={onFocusIn}
|
||||
/>
|
||||
</label>
|
||||
{#if showClearIcon}
|
||||
@ -111,28 +123,39 @@
|
||||
</div>
|
||||
|
||||
{#if $savedSearchTerms.length > 0}
|
||||
<div class="flex justify-between px-5 pt-5 text-xs">
|
||||
<div class="flex items-center justify-between px-5 pt-5 text-xs">
|
||||
<p>RECENT SEARCHES</p>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
|
||||
on:click={clearSearchTerm}>Clear all</button
|
||||
>
|
||||
<div class="flex w-18 items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
|
||||
on:click={clearAllSearchTerms}>Clear all</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each $savedSearchTerms as savedSearchTerm, i (i)}
|
||||
<button
|
||||
type="button"
|
||||
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={() => {
|
||||
value = savedSearchTerm;
|
||||
onSearch(false);
|
||||
}}
|
||||
<div
|
||||
class="flex w-full items-center justify-between text-xs text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
|
||||
>
|
||||
<Magnify size="1.5em" />
|
||||
{savedSearchTerm}
|
||||
</button>
|
||||
<div class="relative w-full items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex w-full cursor-pointer gap-3 py-3 pl-5"
|
||||
on:click={() => {
|
||||
value = savedSearchTerm;
|
||||
onSearch();
|
||||
}}
|
||||
>
|
||||
<Magnify size="1.5em" />
|
||||
{savedSearchTerm}
|
||||
</button>
|
||||
<div class="absolute right-5 top-0 items-center justify-center py-3">
|
||||
<button type="button" on:click={() => clearSearchTerm(savedSearchTerm)}><Close size="18" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
@ -85,7 +85,7 @@
|
||||
</AssetSelectControlBar>
|
||||
{:else}
|
||||
<ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
|
||||
<div class="w-full max-w-2xl flex-1 pl-4">
|
||||
<div class="w-full flex-1 pl-4">
|
||||
<SearchBar grayTheme={false} value={term} />
|
||||
</div>
|
||||
</ControlAppBar>
|
||||
|
Loading…
Reference in New Issue
Block a user