From c3aeb6c497e31c64a413a54dc29276c5958b8065 Mon Sep 17 00:00:00 2001 From: Arno <46051866+arnolicious@users.noreply.github.com> Date: Sun, 25 May 2025 21:38:13 +0200 Subject: [PATCH] chore: refactor slide-show-settings modal (#18570) * chore: refactor slide-show-settings modal * fix: dropdown getting clipped in modals * Revert "fix: dropdown getting clipped in modals" This reverts commit 0120932a49f4768e1abb09d3bb2ee63b770ed767. * fix: changed to show method --- .../components/asset-viewer/slideshow-bar.svelte | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte index d9f3f50eb9a..f641394b702 100644 --- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte +++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte @@ -3,6 +3,7 @@ import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte'; import SlideshowSettings from '$lib/components/slideshow-settings.svelte'; import { ProgressBarStatus } from '$lib/constants'; + import { modalManager } from '$lib/managers/modal-manager.svelte'; import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store'; import { IconButton } from '@immich/ui'; import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js'; @@ -31,7 +32,6 @@ let progressBarStatus: ProgressBarStatus | undefined = $state(); let progressBar = $state>(); - let showSettings = $state(false); let showControls = $state(true); let timer: NodeJS.Timeout; let isOverControls = $state(false); @@ -99,11 +99,11 @@ onNext(); }; - const onSettingToggled = async () => { - showSettings = !showSettings; - if (document.fullscreenElement && showSettings) { + const onShowSettings = async () => { + if (document.fullscreenElement) { await document.exitFullscreen(); } + await modalManager.show(SlideshowSettings, {}); }; @@ -168,7 +168,7 @@ shape="round" color="secondary" icon={mdiCog} - onclick={onSettingToggled} + onclick={onShowSettings} aria-label={$t('slideshow_settings')} class="text-white" /> @@ -185,9 +185,6 @@ {/if} {/if} -{#if showSettings} - (showSettings = false)} /> -{/if}