Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2026-04-06 01:02:06 -04: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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View File

@ -184,6 +184,7 @@
localStorage.setItem('searchQueryType', type);
currentSearchType = type;
showSearchTypeDropdown = false;
input?.focus();
};
const onsubmit = (event: Event) => {
@ -306,43 +307,46 @@
/>
</div>
{#if searchStore.isSearchEnabled}
<div
id={searchTypeId}
class="absolute inset-y-0 flex items-center end-16"
class:max-md:hidden={value}
class:end-28={value.length > 0}
>
<div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
<Button
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"
onclick={toggleSearchTypeDropdown}
aria-expanded={showSearchTypeDropdown}
aria-haspopup="listbox"
>
{getSearchTypeText()}
</Button>
<div
id={searchTypeId}
class="absolute inset-y-0 flex items-center end-16"
class:max-md:hidden={value}
class:end-28={value.length > 0}
>
<div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
<Button
shape="round"
variant={searchStore.isSearchEnabled ? 'filled' : 'outline'}
color={searchStore.isSearchEnabled ? 'primary' : 'secondary'}
class="px-3 py-1 text-xs {searchStore.isSearchEnabled
? 'border border-transparent'
: 'border border-secondary/5 text-muted hover:text-dark font-light'}"
onclick={toggleSearchTypeDropdown}
aria-expanded={showSearchTypeDropdown}
aria-haspopup="listbox"
>
{getSearchTypeText()}
</Button>
{#if showSearchTypeDropdown}
<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"
>
{#each searchTypes as searchType (searchType.value)}
<button
type="button"
tabindex="0"
class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
{#if showSearchTypeDropdown}
<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"
>
{#each searchTypes as searchType (searchType.value)}
<button
type="button"
tabindex="0"
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' : ''}"
onclick={() => selectSearchType(searchType.value)}
>
{searchType.label()}
</button>
{/each}
</div>
{/if}
</div>
onclick={() => selectSearchType(searchType.value)}
>
{searchType.label()}
</button>
{/each}
</div>
{/if}
</div>
{/if}
</div>
{#if showClearIcon}
<div class="absolute inset-y-0 end-0 flex items-center pe-2">