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
This commit is contained in:
Arno 2025-05-25 21:38:13 +02:00 committed by GitHub
parent d22fb2d5db
commit c3aeb6c497
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,6 +3,7 @@
import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte'; import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
import SlideshowSettings from '$lib/components/slideshow-settings.svelte'; import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
import { ProgressBarStatus } from '$lib/constants'; import { ProgressBarStatus } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store'; import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
import { IconButton } from '@immich/ui'; import { IconButton } from '@immich/ui';
import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js'; import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
@ -31,7 +32,6 @@
let progressBarStatus: ProgressBarStatus | undefined = $state(); let progressBarStatus: ProgressBarStatus | undefined = $state();
let progressBar = $state<ReturnType<typeof ProgressBar>>(); let progressBar = $state<ReturnType<typeof ProgressBar>>();
let showSettings = $state(false);
let showControls = $state(true); let showControls = $state(true);
let timer: NodeJS.Timeout; let timer: NodeJS.Timeout;
let isOverControls = $state(false); let isOverControls = $state(false);
@ -99,11 +99,11 @@
onNext(); onNext();
}; };
const onSettingToggled = async () => { const onShowSettings = async () => {
showSettings = !showSettings; if (document.fullscreenElement) {
if (document.fullscreenElement && showSettings) {
await document.exitFullscreen(); await document.exitFullscreen();
} }
await modalManager.show(SlideshowSettings, {});
}; };
</script> </script>
@ -168,7 +168,7 @@
shape="round" shape="round"
color="secondary" color="secondary"
icon={mdiCog} icon={mdiCog}
onclick={onSettingToggled} onclick={onShowSettings}
aria-label={$t('slideshow_settings')} aria-label={$t('slideshow_settings')}
class="text-white" class="text-white"
/> />
@ -185,9 +185,6 @@
{/if} {/if}
</div> </div>
{/if} {/if}
{#if showSettings}
<SlideshowSettings onClose={() => (showSettings = false)} />
{/if}
<ProgressBar <ProgressBar
autoplay autoplay