github/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-06-06 01:13:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: delay settings apply for slideshow popup (#18028)

Browse Source 
* fix: fixed slideshow values to apply on done.

* chore: linting error fixes

* feat: added cancel button and changed text from done to confirm
This commit is contained in:
Dhaval Javia 2025-05-18 02:39:15 +05:30 committed by GitHub
parent 61d784f4e7
commit a65c905621
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/lib/components/slideshow-settings.svelte
View File

@ -25,6 +25,13 @@
let { onClose = () => {} }: Props = $props();
// Temporary variables to hold the settings - marked as reactive with $state() but initialized with store values
let tempSlideshowDelay = $state($slideshowDelay);
let tempShowProgressBar = $state($showProgressBar);
let tempSlideshowNavigation = $state($slideshowNavigation);
let tempSlideshowLook = $state($slideshowLook);
let tempSlideshowTransition = $state($slideshowTransition);
const navigationOptions: Record<SlideshowNavigation, RenderedOption> = {
[SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: $t('shuffle') },
[SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: $t('backward') },
@ -47,6 +54,15 @@
}
}
};
const applyChanges = () => {
$slideshowDelay = tempSlideshowDelay;
$showProgressBar = tempShowProgressBar;
$slideshowNavigation = tempSlideshowNavigation;
$slideshowLook = tempSlideshowLook;
$slideshowTransition = tempSlideshowTransition;
onClose();
};
</script>
<FullScreenModal title={$t('slideshow_settings')} onClose={() => onClose()}>
@ -54,31 +70,32 @@
<SettingDropdown
title={$t('direction')}
options={Object.values(navigationOptions)}
selectedOption={navigationOptions[$slideshowNavigation]}
selectedOption={navigationOptions[tempSlideshowNavigation]}
onToggle={(option) => {
$slideshowNavigation = handleToggle(option, navigationOptions) || $slideshowNavigation;
tempSlideshowNavigation = handleToggle(option, navigationOptions) || tempSlideshowNavigation;
}}
/>
<SettingDropdown
title={$t('look')}
options={Object.values(lookOptions)}
selectedOption={lookOptions[$slideshowLook]}
selectedOption={lookOptions[tempSlideshowLook]}
onToggle={(option) => {
$slideshowLook = handleToggle(option, lookOptions) || $slideshowLook;
tempSlideshowLook = handleToggle(option, lookOptions) || tempSlideshowLook;
}}
/>
<SettingSwitch title={$t('show_progress_bar')} bind:checked={$showProgressBar} />
<SettingSwitch title={$t('show_slideshow_transition')} bind:checked={$slideshowTransition} />
<SettingSwitch title={$t('show_progress_bar')} bind:checked={tempShowProgressBar} />
<SettingSwitch title={$t('show_slideshow_transition')} bind:checked={tempSlideshowTransition} />
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label={$t('duration')}
description={$t('admin.slideshow_duration_description')}
min={1}
bind:value={$slideshowDelay}
bind:value={tempSlideshowDelay}
/>
</div>
{#snippet stickyBottom()}
<Button fullWidth shape="round" color="primary" onclick={() => onClose()}>{$t('done')}</Button>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
{/snippet}
</FullScreenModal>