gitea-mirror/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 15:38:24 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: slideshow modal (#24788)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-12-22 13:44:53 -05:00
committed by GitHub
parent edc21ed746
commit 8ad27c7cea
1 changed files with 42 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/lib/modals/SlideshowSettingsModal.svelte
View File

@@ -1,9 +1,6 @@
<script lang="ts"> <script lang="ts">
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import type { RenderedOption } from '$lib/elements/Dropdown.svelte'; import type { RenderedOption } from '$lib/elements/Dropdown.svelte';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Field, FormModal, HelperText, NumberInput, Switch } from '@immich/ui';
import { import {
mdiArrowDownThin, mdiArrowDownThin,
mdiArrowUpThin, mdiArrowUpThin,
@@ -26,9 +23,9 @@
slideshowState, slideshowState,
} = slideshowStore; } = slideshowStore;
interface Props { type Props = {
onClose: () => void; onClose: () => void;
} };
let { onClose }: Props = $props(); let { onClose }: Props = $props();
@@ -63,7 +60,7 @@
} }
}; };
const applyChanges = () => { const onSubmit = () => {
$slideshowDelay = tempSlideshowDelay; $slideshowDelay = tempSlideshowDelay;
$showProgressBar = tempShowProgressBar; $showProgressBar = tempShowProgressBar;
$slideshowNavigation = tempSlideshowNavigation; $slideshowNavigation = tempSlideshowNavigation;
@@ -75,41 +72,41 @@
}; };
</script> </script>
<Modal size="small" title={$t('slideshow_settings')} onClose={() => onClose()}> <FormModal size="small" title={$t('slideshow_settings')} {onClose} {onSubmit}>
<ModalBody> <div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 text-primary"> <SettingDropdown
<SettingDropdown title={$t('direction')}
title={$t('direction')} options={Object.values(navigationOptions)}
options={Object.values(navigationOptions)} selectedOption={navigationOptions[tempSlideshowNavigation]}
selectedOption={navigationOptions[tempSlideshowNavigation]} onToggle={(option) => {
onToggle={(option) => { tempSlideshowNavigation = handleToggle(option, navigationOptions) || tempSlideshowNavigation;
tempSlideshowNavigation = handleToggle(option, navigationOptions) || tempSlideshowNavigation; }}
}} />
/>
<SettingDropdown <SettingDropdown
title={$t('look')} title={$t('look')}
options={Object.values(lookOptions)} options={Object.values(lookOptions)}
selectedOption={lookOptions[tempSlideshowLook]} selectedOption={lookOptions[tempSlideshowLook]}
onToggle={(option) => { onToggle={(option) => {
tempSlideshowLook = handleToggle(option, lookOptions) || tempSlideshowLook; tempSlideshowLook = handleToggle(option, lookOptions) || tempSlideshowLook;
}} }}
/> />
<SettingSwitch title={$t('autoplay_slideshow')} bind:checked={tempSlideshowAutoplay} />
<SettingSwitch title={$t('show_progress_bar')} bind:checked={tempShowProgressBar} /> <Field label={$t('autoplay_slideshow')}>
<SettingSwitch title={$t('show_slideshow_transition')} bind:checked={tempSlideshowTransition} /> <Switch bind:checked={tempSlideshowAutoplay} />
<SettingInputField </Field>
inputType={SettingInputFieldType.NUMBER}
label={$t('duration')} <Field label={$t('show_progress_bar')}>
description={$t('admin.slideshow_duration_description')} <Switch bind:checked={tempShowProgressBar} />
min={1} </Field>
bind:value={tempSlideshowDelay}
/> <Field label={$t('show_slideshow_transition')}>
</div> <Switch bind:checked={tempSlideshowTransition} />
</ModalBody> </Field>
<ModalFooter>
<HStack fullWidth> <Field label={$t('duration')}>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> <NumberInput min={1} bind:value={tempSlideshowDelay} />
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button> <HelperText>{$t('admin.slideshow_duration_description')}</HelperText>
</HStack> </Field>
</ModalFooter> </div>
</Modal> </FormModal>