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

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

68
web/src/lib/components/memory-page/memory-viewer.svelte
View file

@ -4,7 +4,6 @@
import { intersectionObserver } from '$lib/actions/intersection-observer';
import { resizeObserver } from '$lib/actions/resize-observer';
import { shortcuts } from '$lib/actions/shortcut';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
@ -314,14 +313,21 @@
/>
{#if assetInteraction.selectionActive}
<div class="sticky top-0 z-1">
<div class="sticky top-0 z-1 dark">
<AssetSelectControlBar
forceDark
assets={assetInteraction.selectedAssets}
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 />
@ -362,8 +368,11 @@
{/snippet}
<div class="flex place-content-center place-items-center gap-2 overflow-hidden">
<CircleIconButton
title={paused ? $t('play_memories') : $t('pause_memories')}
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={paused ? $t('play_memories') : $t('pause_memories')}
icon={paused ? mdiPlay : mdiPause}
onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
class="hover:text-black"
@ -381,8 +390,11 @@
{(current.assetIndex + 1).toLocaleString($locale)}/{current.memory.assets.length.toLocaleString($locale)}
</p>
</div>
<CircleIconButton
title={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
icon={$videoViewerMuted ? mdiVolumeOff : mdiVolumeHigh}
onclick={() => ($videoViewerMuted = !$videoViewerMuted)}
/>
@ -400,7 +412,14 @@
onclick={() => memoryWrapper?.scrollIntoView({ behavior: 'smooth' })}
disabled={!galleryInView}
>
<CircleIconButton title={$t('hide_gallery')} icon={mdiChevronUp} color="light" onclick={() => {}} />
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$t('hide_gallery')}
icon={mdiChevronUp}
onclick={() => {}}
/>
</button>
</div>
{/if}
@ -476,7 +495,7 @@
{/key}
<div
class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2"
class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2 dark"
class:opacity-0={galleryInView}
class:opacity-100={!galleryInView}
>
@ -488,7 +507,7 @@
color="secondary"
aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
onclick={() => handleSaveMemory()}
class="text-white dark:text-white w-[48px] h-[48px]"
class="w-[48px] h-[48px]"
/>
<!-- <IconButton
icon={mdiShareVariantOutline}
@ -500,13 +519,11 @@
/> -->
<ButtonContextMenu
icon={mdiDotsVertical}
padding="3"
title={$t('menu')}
onclick={() => handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
direction="left"
size="20"
size="medium"
align="bottom-right"
class="text-white dark:text-white"
>
<MenuOption onClick={() => handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
<MenuOption
@ -526,17 +543,18 @@
color="secondary"
variant="ghost"
shape="round"
class="text-white dark:text-white"
/>
</div>
</div>
<!-- CONTROL BUTTONS -->
{#if current.previous}
<div class="absolute top-1/2 start-0 ms-4">
<CircleIconButton
title={$t('previous_memory')}
<IconButton
shape="round"
aria-label={$t('previous_memory')}
icon={mdiChevronLeft}
color="dark"
variant="ghost"
color="secondary"
onclick={handlePreviousAsset}
/>
</div>
@ -544,10 +562,12 @@
{#if current.next}
<div class="absolute top-1/2 end-0 me-4">
<CircleIconButton
title={$t('next_memory')}
<IconButton
shape="round"
aria-label={$t('next_memory')}
icon={mdiChevronRight}
color="dark"
variant="ghost"
color="secondary"
onclick={handleNextAsset}
/>
</div>
@ -615,10 +635,12 @@
class:opacity-0={galleryInView}
class:opacity-100={!galleryInView}
>
<CircleIconButton
title={$t('show_gallery')}
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$t('show_gallery')}
icon={mdiChevronDown}
color="light"
onclick={() => memoryGallery?.scrollIntoView({ behavior: 'smooth' })}
/>
</div>