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}