helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web,a11y): replace IconButton with CircleIconButton (#9153)

Browse source 
* feat(web,a11y): replace IconButton with CircleIconButton

* wip: cleanup

* wip: bring back viewbox

* fix: add label to search bar
This commit is contained in:
Ben 2024-04-29 21:17:22 +00:00 • committed by GitHub
parent 0c9bf2835d
commit 72ce81f0c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 84 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,9 @@
<script lang="ts">
import { AppRoute } from '$lib/constants';
import Icon from '$lib/components/elements/icon.svelte';
import { goto } from '$app/navigation';
import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
import { clickOutside } from '$lib/utils/click-outside';
import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import SearchHistoryBox from './search-history-box.svelte';
import SearchFilterBox from './search-filter-box.svelte';
import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
@ -13,6 +11,7 @@
import { handlePromiseError } from '$lib/utils';
import { shortcuts } from '$lib/utils/shortcut';
import { focusOutside } from '$lib/utils/focus-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let value = '';
export let grayTheme: boolean;
@ -103,54 +102,41 @@
on:reset={() => (value = '')}
on:submit|preventDefault={onSubmit}
>
<label>
<div class="absolute inset-y-0 left-0 flex items-center pl-6">
<div class="dark:text-immich-dark-fg/75">
<button class="flex items-center">
<Icon ariaLabel="search" path={mdiMagnify} size="1.5em" />
</button>
</div>
</div>
<input
type="text"
name="q"
class="w-full {grayTheme
? 'dark:bg-immich-dark-gray'
: 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {(showHistory &&
$savedSearchTerms.length > 0) ||
showFilter
? 'rounded-t-3xl border border-gray-200 bg-white dark:border-gray-800'
: 'rounded-3xl border border-transparent bg-gray-200'}"
placeholder="Search your photos"
required
pattern="^(?!m:$).*$"
bind:value
bind:this={input}
on:click={onFocusIn}
on:focus={onFocusIn}
disabled={showFilter}
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
]}
/>
<div class="absolute inset-y-0 left-0 flex items-center pl-2">
<CircleIconButton type="submit" title="Search" icon={mdiMagnify} size="20" />
</div>
<label for="main-search-bar" class="sr-only">Search your photos</label>
<input
type="text"
name="q"
id="main-search-bar"
class="w-full {grayTheme
? 'dark:bg-immich-dark-gray'
: 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {(showHistory &&
$savedSearchTerms.length > 0) ||
showFilter
? 'rounded-t-3xl border border-gray-200 bg-white dark:border-gray-800'
: 'rounded-3xl border border-transparent bg-gray-200'}"
placeholder="Search your photos"
required
pattern="^(?!m:$).*$"
bind:value
bind:this={input}
on:click={onFocusIn}
on:focus={onFocusIn}
disabled={showFilter}
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
]}
/>
<div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">
<div class="dark:text-immich-dark-fg/75">
<IconButton on:click={onFilterClick} title="Show search options">
<Icon path={mdiTune} size="1.5em" />
</IconButton>
</div>
</div>
</label>
<div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-2'} flex items-center pl-6 transition-all">
<CircleIconButton title="Show search options" icon={mdiTune} on:click={onFilterClick} size="20" />
</div>
{#if showClearIcon}
<div class="absolute inset-y-0 right-0 flex items-center pr-4">
<button
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]"
>
<Icon ariaLabel="clear" path={mdiClose} size="1.5em" />
</button>
<div class="absolute inset-y-0 right-0 flex items-center pr-2">
<CircleIconButton type="reset" icon={mdiClose} title="Clear" size="20" />
</div>
{/if}