cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(web): migrate CircleIconButton to @immich/ui IconButton (#18486)

Browse Source 
* remove import and referenced file

* first pass at replacing all CircleIconButtons

* fix linting issues

* fix combobox formatting issues

* fix button context menu coloring

* remove circle icon button from search history box

* use theme switcher from UI lib

* dark mode force the asset viewer icons

* fix forced dark mode icons

* dark mode memory viewer icons

* fix: back button in memory viewer

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Brandon Wees
2025-06-02 09:47:23 -05:00
committed by GitHub
parent d544053c67
commit a02e1f5e7c
75 changed files with 822 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+52 -21
View File
@@ -9,7 +9,6 @@
import AlbumTitle from '$lib/components/album-page/album-title.svelte';
import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
@@ -70,7 +69,7 @@
updateAlbumInfo,
type AlbumUserAddDto,
} from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, IconButton } from '@immich/ui';
import {
mdiArrowLeft,
mdiCogOutline,
@@ -494,10 +493,11 @@
<div class="my-3 flex gap-x-1">
<!-- link -->
{#if album.hasSharedLink && isOwned}
<CircleIconButton
title={$t('create_link_to_share')}
color="gray"
size="20"
<IconButton
aria-label={$t('create_link_to_share')}
color="secondary"
size="medium"
shape="round"
icon={mdiLink}
onclick={handleShareLink}
/>
@@ -517,22 +517,24 @@
<!-- display ellipsis if there are readonly users too -->
{#if albumHasViewers}
<CircleIconButton
title={$t('view_all_users')}
color="gray"
size="20"
<IconButton
shape="round"
aria-label={$t('view_all_users')}
color="secondary"
size="medium"
icon={mdiDotsVertical}
onclick={handleEditUsers}
/>
{/if}
{#if isOwned}
<CircleIconButton
color="gray"
size="20"
<IconButton
shape="round"
color="secondary"
size="medium"
icon={mdiPlus}
onclick={handleShare}
title={$t('add_more_users')}
aria-label={$t('add_more_users')}
/>
{/if}
</div>
@@ -629,11 +631,14 @@
{#if viewMode === AlbumPageViewMode.VIEW}
<ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}>
{#snippet trailing()}
<CastButton whiteHover />
<CastButton />
{#if isEditor}
<CircleIconButton
title={$t('add_photos')}
<IconButton
variant="ghost"
shape="round"
color="secondary"
aria-label={$t('add_photos')}
onclick={async () => {
assetStore.suspendTransitions = true;
viewMode = AlbumPageViewMode.SELECT_ASSETS;
@@ -648,7 +653,14 @@
{/if}
{#if isOwned}
<CircleIconButton title={$t('share')} onclick={handleShare} icon={mdiShareVariantOutline} />
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$t('share')}
onclick={handleShare}
icon={mdiShareVariantOutline}
/>
{/if}
{#if $featureFlags.loaded && $featureFlags.map}
@@ -656,12 +668,31 @@
{/if}
{#if album.assetCount > 0}
<CircleIconButton title={$t('slideshow')} onclick={handleStartSlideshow} icon={mdiPresentationPlay} />
<CircleIconButton title={$t('download')} onclick={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$t('slideshow')}
onclick={handleStartSlideshow}
icon={mdiPresentationPlay}
/>
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$t('download')}
onclick={handleDownloadAlbum}
icon={mdiFolderDownloadOutline}
/>
{/if}
{#if isOwned}
<ButtonContextMenu icon={mdiDotsVertical} title={$t('album_options')} offset={{ x: 175, y: 25 }}>
<ButtonContextMenu
icon={mdiDotsVertical}
title={$t('album_options')}
color="secondary"
offset={{ x: 175, y: 25 }}
>
{#if album.assetCount > 0}
<MenuOption
icon={mdiImageOutline}
web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+9 -2
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { afterNavigate, goto, invalidateAll } from '$app/navigation';
import { page } from '$app/stores';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -30,6 +29,7 @@
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { IconButton } from '@immich/ui';
import { mdiDotsVertical, mdiFolder, mdiFolderHome, mdiFolderOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -135,7 +135,14 @@
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CreateSharedLink />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAllAssets} />
<IconButton
shape="round"
color="secondary"
variant="ghost"
aria-label={$t('select_all')}
icon={mdiSelectAll}
onclick={handleSelectAllAssets}
/>
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum onAddToAlbum={() => cancelMultiselect(assetInteraction)} />
<AddToAlbum onAddToAlbum={() => cancelMultiselect(assetInteraction)} shared />
web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+17 -3
View File
@@ -3,7 +3,6 @@
import { page } from '$app/state';
import { shortcut } from '$lib/actions/shortcut';
import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
@@ -45,6 +44,7 @@
searchSmart,
type SmartSearchDto,
} from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
import { tick } from 'svelte';
import { t } from 'svelte-i18n';
@@ -269,7 +269,14 @@
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CreateSharedLink />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
<IconButton
shape="round"
color="secondary"
variant="ghost"
aria-label={$t('select_all')}
icon={mdiSelectAll}
onclick={handleSelectAll}
/>
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum {onAddToAlbum} />
<AddToAlbum shared {onAddToAlbum} />
@@ -401,7 +408,14 @@
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CreateSharedLink />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
<IconButton
shape="round"
color="secondary"
variant="ghost"
aria-label={$t('select_all')}
icon={mdiSelectAll}
onclick={handleSelectAll}
/>
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum {onAddToAlbum} />
<AddToAlbum shared {onAddToAlbum} />
web/src/routes/(user)/user-settings/+page.svelte
+6 -4
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
import { Container } from '@immich/ui';
import { Container, IconButton } from '@immich/ui';
import { mdiKeyboard } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@@ -18,9 +17,12 @@
<UserPageLayout title={data.meta.title}>
{#snippet buttons()}
<CircleIconButton
<IconButton
shape="round"
color="secondary"
variant="ghost"
icon={mdiKeyboard}
title={$t('show_keyboard_shortcuts')}
aria-label={$t('show_keyboard_shortcuts')}
onclick={() => modalManager.show(ShortcutsModal, {})}
/>
{/snippet}
web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+6 -5
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import {
NotificationType,
@@ -194,11 +193,13 @@
<div class="text-sm dark:text-white">
<p>{$t('duplicates_description')}</p>
</div>
<CircleIconButton
<IconButton
shape="round"
variant="ghost"
color="secondary"
icon={mdiInformationOutline}
title={$t('deduplication_info')}
size="16"
padding="2"
aria-label={$t('deduplication_info')}
size="small"
onclick={() => modalManager.show(DuplicatesInformationModal, {})}
/>
</div>
web/src/routes/admin/library-management/+page.svelte
+2 -1
View File
@@ -329,9 +329,10 @@
align="top-right"
direction="left"
color="primary"
size="16"
size="medium"
icon={mdiDotsVertical}
title={$t('library_options')}
variant="filled"
>
<MenuOption onClick={() => onScanClicked(library)} text={$t('scan_library')} />
<hr />