public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-24 11:20:40 +09:00
Code Issues Actions 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
11 changed files with 84 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>