mirror of
https://github.com/immich-app/immich.git
synced 2025-01-10 05:46:46 +01:00
796c933fb8
* feat(web,a11y): standardize the FullScreenModal look * consistent header, padding, close button, and radius as BaseModal * vertically stacking ConfirmDialogue CTA buttons in narrow screens * adding aria-modal tags for screen reader * add viewport-specific height limits on modals, to enable scrolling * prevent focus from being hidden under sticky content in modals * standardize FullScreenModal widths using a Prop * wip: consistent padding with header * fix: alignment on "create user" and "edit user" modals * fix: horizontal modal content alignment * fix: create user CTA buttons * chore: remove unnecessary warning --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
51 lines
2.1 KiB
Svelte
51 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
import SettingInputField, {
|
|
SettingInputFieldType,
|
|
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
|
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
|
import { mdiArrowDownThin, mdiArrowUpThin, mdiShuffle } from '@mdi/js';
|
|
import { SlideshowNavigation, slideshowStore } from '../stores/slideshow.store';
|
|
import Button from './elements/buttons/button.svelte';
|
|
import type { RenderedOption } from './elements/dropdown.svelte';
|
|
import SettingDropdown from './shared-components/settings/setting-dropdown.svelte';
|
|
|
|
const { slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
|
|
|
|
export let onClose = () => {};
|
|
|
|
const options: Record<SlideshowNavigation, RenderedOption> = {
|
|
[SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: 'Shuffle' },
|
|
[SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: 'Backward' },
|
|
[SlideshowNavigation.DescendingOrder]: { icon: mdiArrowDownThin, title: 'Forward' },
|
|
};
|
|
|
|
const handleToggle = (selectedOption: RenderedOption) => {
|
|
for (const [key, option] of Object.entries(options)) {
|
|
if (option === selectedOption) {
|
|
$slideshowNavigation = key as SlideshowNavigation;
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<FullScreenModal id="slideshow-settings-modal" title="Slideshow settings" {onClose}>
|
|
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
|
|
<SettingDropdown
|
|
title="Direction"
|
|
options={Object.values(options)}
|
|
selectedOption={options[$slideshowNavigation]}
|
|
onToggle={(option) => handleToggle(option)}
|
|
/>
|
|
<SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label="Duration"
|
|
desc="Number of seconds to display each image"
|
|
min={1}
|
|
bind:value={$slideshowDelay}
|
|
/>
|
|
<Button class="w-full" color="gray" on:click={onClose}>Done</Button>
|
|
</div>
|
|
</FullScreenModal>
|