github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): always show search type button (#27043)

Browse Source 
* fix(web): always show search type button

* fix(web): formatting fixes

* fix(web): search-type-button inactive styling outline/secondary

* chore: styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Vogeluff
2026-04-03 17:37:03 +02:00
committed by GitHub
parent a19b7148e5
commit 95ef60628c
1 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/shared-components/search-bar/search-bar.svelte
+38 -34
View File
@@ -184,6 +184,7 @@
localStorage.setItem('searchQueryType', type); localStorage.setItem('searchQueryType', type);
currentSearchType = type; currentSearchType = type;
showSearchTypeDropdown = false; showSearchTypeDropdown = false;
input?.focus();
}; };
const onsubmit = (event: Event) => { const onsubmit = (event: Event) => {
@@ -306,43 +307,46 @@
/> />
</div> </div>
{#if searchStore.isSearchEnabled} <div
<div id={searchTypeId}
id={searchTypeId} class="absolute inset-y-0 flex items-center end-16"
class="absolute inset-y-0 flex items-center end-16" class:max-md:hidden={value}
class:max-md:hidden={value} class:end-28={value.length > 0}
class:end-28={value.length > 0} >
> <div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
<div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}> <Button
<Button shape="round"
class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs hover:opacity-80 transition-opacity cursor-pointer" variant={searchStore.isSearchEnabled ? 'filled' : 'outline'}
onclick={toggleSearchTypeDropdown} color={searchStore.isSearchEnabled ? 'primary' : 'secondary'}
aria-expanded={showSearchTypeDropdown} class="px-3 py-1 text-xs {searchStore.isSearchEnabled
aria-haspopup="listbox" ? 'border border-transparent'
> : 'border border-secondary/5 text-muted hover:text-dark font-light'}"
{getSearchTypeText()} onclick={toggleSearchTypeDropdown}
</Button> aria-expanded={showSearchTypeDropdown}
aria-haspopup="listbox"
>
{getSearchTypeText()}
</Button>
{#if showSearchTypeDropdown} {#if showSearchTypeDropdown}
<div <div
class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999" class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
> >
{#each searchTypes as searchType (searchType.value)} {#each searchTypes as searchType (searchType.value)}
<button <button
type="button" type="button"
tabindex="0" tabindex="0"
class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
{currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}" {currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}"
onclick={() => selectSearchType(searchType.value)} onclick={() => selectSearchType(searchType.value)}
> >
{searchType.label()} {searchType.label()}
</button> </button>
{/each} {/each}
</div> </div>
{/if} {/if}
</div>
</div> </div>
{/if} </div>
{#if showClearIcon} {#if showClearIcon}
<div class="absolute inset-y-0 end-0 flex items-center pe-2"> <div class="absolute inset-y-0 end-0 flex items-center pe-2">