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

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 385 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

90
web/src/lib/components/album-page/albums-controls.svelte
View file

@ -1,15 +1,30 @@
<script lang="ts">
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
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,
AlbumSortBy,
AlbumGroupBy,
AlbumSortBy,
AlbumViewMode,
albumViewSettings,
SortOrder,
} from '$lib/stores/preferences.store';
import {
type AlbumGroupOptionMetadata,
type AlbumSortOptionMetadata,
collapseAllAlbumGroups,
createAlbumAndRedirect,
expandAllAlbumGroups,
findFilterOption,
findGroupOptionMetadata,
findSortOptionMetadata,
getSelectedAlbumGroupOption,
groupOptionsMetadata,
sortOptionsMetadata,
} from '$lib/utils/album-utils';
import { Button, IconButton, Text } from '@immich/ui';
import {
mdiArrowDownThin,
mdiArrowUpThin,
@ -22,21 +37,8 @@
mdiUnfoldMoreHorizontal,
mdiViewGridOutline,
} from '@mdi/js';
import {
type AlbumGroupOptionMetadata,
type AlbumSortOptionMetadata,
findGroupOptionMetadata,
findFilterOption,
findSortOptionMetadata,
getSelectedAlbumGroupOption,
groupOptionsMetadata,
sortOptionsMetadata,
} from '$lib/utils/album-utils';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import GroupTab from '$lib/components/elements/group-tab.svelte';
import { createAlbumAndRedirect, collapseAllAlbumGroups, expandAllAlbumGroups } from '$lib/utils/album-utils';
import { fly } from 'svelte/transition';
import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition';
interface Props {
albumGroups: string[];
@ -127,12 +129,10 @@
</div>
<!-- Create Album -->
<LinkButton onclick={() => createAlbumAndRedirect()}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiPlusBoxOutline} size="18" />
<p class="hidden md:block">{$t('create_album')}</p>
</div>
</LinkButton>
<Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
<Icon path={mdiPlusBoxOutline} />
<p class="hidden md:block">{$t('create_album')}</p>
</Button>
<!-- Sort Albums -->
<Dropdown
@ -164,34 +164,38 @@
<!-- Expand Album Groups -->
<div class="hidden xl:flex gap-0">
<div class="block">
<LinkButton title={$t('expand_all')} onclick={() => expandAllAlbumGroups()}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiUnfoldMoreHorizontal} size="18" />
</div>
</LinkButton>
<IconButton
title={$t('expand_all')}
onclick={() => expandAllAlbumGroups()}
variant="ghost"
color="secondary"
shape="round"
icon={mdiUnfoldMoreHorizontal}
/>
</div>
<!-- Collapse Album Groups -->
<div class="block">
<LinkButton title={$t('collapse_all')} onclick={() => collapseAllAlbumGroups(albumGroups)}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiUnfoldLessHorizontal} size="18" />
</div>
</LinkButton>
<IconButton
title={$t('collapse_all')}
onclick={() => collapseAllAlbumGroups(albumGroups)}
variant="ghost"
color="secondary"
shape="round"
icon={mdiUnfoldLessHorizontal}
/>
</div>
</div>
</span>
{/if}
<!-- Cover/List Display Toggle -->
<LinkButton onclick={() => handleChangeListMode()}>
<div class="flex place-items-center gap-2 text-sm">
{#if $albumViewSettings.view === AlbumViewMode.List}
<Icon path={mdiViewGridOutline} size="18" />
<p class="hidden md:block">{$t('covers')}</p>
{:else}
<Icon path={mdiFormatListBulletedSquare} size="18" />
<p class="hidden md:block">{$t('list')}</p>
{/if}
</div>
</LinkButton>
<Button onclick={() => handleChangeListMode()} size="small" variant="ghost" color="secondary">
{#if $albumViewSettings.view === AlbumViewMode.List}
<Icon path={mdiViewGridOutline} />
<Text class="hidden md:block">{$t('covers')}</Text>
{:else}
<Icon path={mdiFormatListBulletedSquare} size="18" />
<Text class="hidden md:block">{$t('list')}</Text>
{/if}
</Button>