immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-19 09:13:14 +03:00
Code Issues Packages Projects Releases 17 Wiki Activity

refactor: replace link-button component with immich-ui buttons (#15374)

Browse Source 
* refactor: replace link-button component with immich-ui buttons

* minor styling tweak

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2025-01-16 11:03:04 -05:00
committed by GitHub
parent 378bd3c993
commit 3a2bf91889
16 changed files with 385 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/lib/components/elements/buttons/link-button.svelte
View File

@@ -1,25 +0,0 @@
<script lang="ts" module>
export type Color = 'transparent-primary' | 'transparent-gray';
</script>
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import type { Snippet } from 'svelte';
interface Props {
href?: string;
color?: Color;
children?: Snippet;
onclick?: (e: MouseEvent) => void;
title?: string;
disabled?: boolean;
fullwidth?: boolean;
class?: string;
}
let { color = 'transparent-gray', children, ...rest }: Props = $props();
</script>
<Button size="link" {color} shadow={false} rounded="lg" {...rest}>
{@render children?.()}
</Button>

26
web/src/lib/components/elements/dropdown.svelte
View File

@@ -11,14 +11,12 @@
</script>
<script lang="ts" generics="T">
import Icon from './icon.svelte';
import { mdiCheck } from '@mdi/js';
import { isEqual } from 'lodash-es';
import LinkButton from './buttons/link-button.svelte';
import { clickOutside } from '$lib/actions/click-outside';
import { Button, Text } from '@immich/ui';
import { mdiCheck } from '@mdi/js';
import { isEqual } from 'lodash-es';
import { fly } from 'svelte/transition';
import Icon from './icon.svelte';
interface Props {
class?: string;
@@ -82,14 +80,12 @@
<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}>
<!-- BUTTON TITLE -->
<LinkButton onclick={() => (showMenu = true)} fullwidth {title}>
<div class="flex place-items-center gap-2 text-sm">
{#if renderedSelectedOption?.icon}
<Icon path={renderedSelectedOption.icon} size="18" />
{/if}
<p class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</p>
</div>
</LinkButton>
<Button onclick={() => (showMenu = true)} fullWidth {title} variant="ghost" color="secondary" size="small">
{#if renderedSelectedOption?.icon}
<Icon path={renderedSelectedOption.icon} />
{/if}
<Text class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</Text>
</Button>
<!-- DROP DOWN MENU -->
{#if showMenu}
@@ -108,7 +104,7 @@
>
{#if isEqual(selectedOption, option)}
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiCheck} size="18" />
<Icon path={mdiCheck} />
</div>
<p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
{renderedOption.title}