refactor: ui icon buttons (#15531)

This commit is contained in:
Jason Rasmussen 2025-01-22 16:44:59 -05:00 committed by GitHub
parent 1f19a65d1a
commit 78464a4ba3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 163 additions and 146 deletions

View file

@ -1,7 +1,6 @@
<script lang="ts">
import Dropdown from '$lib/components/elements/dropdown.svelte';
import GroupTab from '$lib/components/elements/group-tab.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import {
AlbumFilter,
@ -129,8 +128,13 @@
</div>
<!-- Create Album -->
<Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
<Icon path={mdiPlusBoxOutline} />
<Button
leadingIcon={mdiPlusBoxOutline}
onclick={() => createAlbumAndRedirect()}
size="small"
variant="ghost"
color="secondary"
>
<p class="hidden md:block">{$t('create_album')}</p>
</Button>
@ -190,12 +194,24 @@
{/if}
<!-- Cover/List Display Toggle -->
<Button onclick={() => handleChangeListMode()} size="small" variant="ghost" color="secondary">
{#if $albumViewSettings.view === AlbumViewMode.List}
<Icon path={mdiViewGridOutline} />
{#if $albumViewSettings.view === AlbumViewMode.List}
<Button
leadingIcon={mdiViewGridOutline}
onclick={() => handleChangeListMode()}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('covers')}</Text>
{:else}
<Icon path={mdiFormatListBulletedSquare} size="18" />
</Button>
{:else}
<Button
leadingIcon={mdiFormatListBulletedSquare}
onclick={() => handleChangeListMode()}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('list')}</Text>
{/if}
</Button>
</Button>
{/if}

View file

@ -3,7 +3,6 @@
import { clickOutside } from '$lib/actions/click-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
@ -99,11 +98,13 @@
</div>
{#if !page.url.pathname.includes('/admin') && showUploadButton}
<Button onclick={onUploadClick} class="hidden lg:block" variant="ghost" color="secondary">
<div class="flex gap-2">
<Icon path={mdiTrayArrowUp} size="1.5em" />
<span>{$t('upload')}</span>
</div>
<Button
leadingIcon={mdiTrayArrowUp}
onclick={onUploadClick}
class="hidden lg:flex"
variant="ghost"
color="secondary"
>{$t('upload')}
</Button>
<CircleIconButton
onclick={onUploadClick}