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

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

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>