tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/lib/components/album-page/album-card.svelte
View File

@ -1,13 +1,12 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { locale } from '$lib/stores/preferences.store';
import { user } from '$lib/stores/user.store';
import type { AlbumResponseDto } from '@immich/sdk';
import { mdiDotsVertical } from '@mdi/js';
import { getContextMenuPosition, type ContextMenuPosition } from '$lib/utils/context-menu';
import { getShortDateRange } from '$lib/utils/date-time';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let album: AlbumResponseDto;
export let showOwner = false;
@ -33,9 +32,15 @@
class="absolute right-6 top-6 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
data-testid="context-button-parent"
>
<IconButton color="transparent-primary" title="Show album options" on:click={showAlbumContextMenu}>
<Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
</IconButton>
<CircleIconButton
color="light"
title="Show album options"
icon={mdiDotsVertical}
size="20"
padding="2"
class="icon-white-drop-shadow"
on:click={showAlbumContextMenu}
/>
</div>
{/if}

8
web/src/lib/components/elements/buttons/circle-icon-button.svelte
View File

@ -2,6 +2,7 @@
import Icon from '$lib/components/elements/icon.svelte';
type Color = 'transparent' | 'light' | 'dark' | 'gray' | 'primary' | 'opaque';
export let type: 'button' | 'submit' | 'reset' = 'button';
export let icon: string;
export let color: Color = 'transparent';
export let title: string;
@ -9,6 +10,10 @@
export let size = '24';
export let hideMobile = false;
export let buttonSize: string | undefined = undefined;
/**
* viewBox attribute for the SVG icon.
*/
export let viewBox: string | undefined = undefined;
/**
* Override the default styling of the button for specific use cases, such as the icon color.
@ -32,10 +37,11 @@
<button
{title}
{type}
style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''}
class="flex place-content-center place-items-center rounded-full {colorClass} p-{padding} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
on:click
>
<Icon path={icon} {size} ariaLabel={title} color="currentColor" />
<Icon path={icon} {size} ariaLabel={title} {viewBox} color="currentColor" />
</button>

14
web/src/lib/components/elements/buttons/icon-button.svelte
View File

@ -1,14 +0,0 @@
<script lang="ts" context="module">
export type Color = 'transparent-primary' | 'transparent-gray' | 'overlay-primary';
</script>
<script lang="ts">
import Button from './button.svelte';
export let color: Color = 'transparent-primary';
export let title: string | undefined = undefined;
</script>
<Button size="icon" {color} {title} shadow={false} rounded="full" on:click>
<slot />
</Button>

25
web/src/lib/components/faces-page/people-card.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute, QueryParameter } from '$lib/constants';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { getContextMenuPosition } from '$lib/utils/context-menu';
@ -13,10 +12,10 @@
} from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import IconButton from '../elements/buttons/icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import Portal from '../shared-components/portal/portal.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let person: PersonResponseDto;
export let preload = false;
@ -73,17 +72,17 @@
{/if}
</a>
<button
class="absolute right-2 top-2"
on:click|stopPropagation|preventDefault={showMenu}
class:hidden={!showVerticalDots}
data-testid="context-button-parent"
id={`icon-${person.id}`}
>
<IconButton color="transparent-primary">
<Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
</IconButton>
</button>
<div class="absolute right-2 top-2" class:hidden={!showVerticalDots}>
<CircleIconButton
color="light"
icon={mdiDotsVertical}
title="Show person options"
size="20"
padding="2"
class="icon-white-drop-shadow"
on:click={showMenu}
/>
</div>
</div>
{#if showContextMenu}

4
web/src/lib/components/faces-page/show-hide.svelte
View File

@ -2,11 +2,11 @@
import { fly } from 'svelte/transition';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { quintOut } from 'svelte/easing';
import IconButton from '../elements/buttons/icon-button.svelte';
import { createEventDispatcher } from 'svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
import { locale } from '$lib/stores/preferences.store';
import Button from '$lib/components/elements/buttons/button.svelte';
const dispatch = createEventDispatcher<{
close: void;
@ -45,7 +45,7 @@
/>
</div>
{#if !showLoadingSpinner}
<IconButton on:click={() => dispatch('done')}>Done</IconButton>
<Button on:click={() => dispatch('done')} size="sm" rounded="lg">Done</Button>
{:else}
<LoadingSpinner />
{/if}

6
web/src/lib/components/shared-components/combobox.svelte
View File

@ -14,11 +14,11 @@
import Icon from '$lib/components/elements/icon.svelte';
import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
import { createEventDispatcher, tick } from 'svelte';
import IconButton from '../elements/buttons/icon-button.svelte';
import type { FormEventHandler } from 'svelte/elements';
import { shortcuts } from '$lib/utils/shortcut';
import { clickOutside } from '$lib/utils/click-outside';
import { focusOutside } from '$lib/utils/focus-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
/**
* Unique identifier for the combobox.
@ -199,9 +199,7 @@
class:pointer-events-none={!selectedOption}
>
{#if selectedOption}
<IconButton color="transparent-gray" on:click={onClear} title="Clear value">
<Icon path={mdiClose} ariaLabel="Clear value" />
</IconButton>
<CircleIconButton on:click={onClear} title="Clear value" icon={mdiClose} size="16" padding="2" />
{:else if !isOpen}
<Icon path={mdiUnfoldMoreHorizontal} ariaHidden={true} />
{/if}

10
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
@ -18,6 +17,7 @@
import ThemeButton from '../theme-button.svelte';
import UserAvatar from '../user-avatar.svelte';
import AccountInfoPanel from './account-info-panel.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let showUploadButton = true;
@ -58,12 +58,8 @@
<section class="flex place-items-center justify-end gap-4 max-sm:w-full">
{#if $featureFlags.search}
<a href={AppRoute.SEARCH} id="search-button" class="pl-4 sm:hidden">
<IconButton title="Search">
<div class="flex gap-2">
<Icon path={mdiMagnify} size="1.5em" />
</div>
</IconButton>
<a href={AppRoute.SEARCH} id="search-button" class="ml-4 sm:hidden">
<CircleIconButton title="Go to search" icon={mdiMagnify} />
</a>
{/if}

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}

14
web/src/lib/components/shared-components/theme-button.svelte
View File

@ -1,17 +1,13 @@
<script lang="ts">
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
import IconButton from '../elements/buttons/icon-button.svelte';
import Icon from '../elements/icon.svelte';
$: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
$: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
</script>
{#if !$colorTheme.system}
<IconButton on:click={handleToggleTheme} title="Toggle theme">
{#if $colorTheme.value === Theme.LIGHT}
<Icon path={moonPath} viewBox={sunViewBox} class="h-6 w-6" />
{:else}
<Icon path={sunPath} viewBox={moonViewBox} class="h-6 w-6" />
{/if}
</IconButton>
<CircleIconButton title="Toggle theme" {icon} {viewBox} on:click={handleToggleTheme} />
{/if}

6
web/src/routes/(user)/people/+page.svelte
View File

@ -3,7 +3,6 @@
import { page } from '$app/stores';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
@ -41,6 +40,7 @@
import type { PageData } from './$types';
import { locale } from '$lib/stores/preferences.store';
import { clearQueryParam } from '$lib/utils/navigation';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
export let data: PageData;
@ -429,12 +429,12 @@
/>
</div>
</div>
<IconButton on:click={() => (selectHidden = !selectHidden)}>
<LinkButton on:click={() => (selectHidden = !selectHidden)}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<Icon path={mdiEyeOutline} size="18" />
<p class="ml-2">Show & hide people</p>
</div>
</IconButton>
</LinkButton>
</div>
{/if}
</svelte:fragment>

11
web/src/routes/(user)/user-settings/+page.svelte
View File

@ -1,11 +1,10 @@
<script lang="ts">
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
import { mdiKeyboard } from '@mdi/js';
import type { PageData } from './$types';
import Icon from '$lib/components/elements/icon.svelte';
import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let data: PageData;
export let isShowKeyboardShortcut = false;
@ -13,9 +12,11 @@
<UserPageLayout title={data.meta.title}>
<svelte:fragment slot="buttons">
<IconButton on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}>
<Icon path={mdiKeyboard} />
</IconButton>
<CircleIconButton
icon={mdiKeyboard}
title="Show keyboard shortcuts"
on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
/>
</svelte:fragment>
<section class="mx-4 flex place-content-center">
<div class="w-full max-w-3xl">