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

refactor: map setting modal (#24789)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-12-22 13:54:14 -05:00
committed by GitHub
parent 8ad27c7cea
commit f99f5f4f91
1 changed files with 100 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
web/src/lib/modals/MapSettingsModal.svelte
View File

@@ -2,7 +2,7 @@
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte'; import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import DateInput from '$lib/elements/DateInput.svelte'; import DateInput from '$lib/elements/DateInput.svelte';
import type { MapSettings } from '$lib/stores/preferences.store'; import type { MapSettings } from '$lib/stores/preferences.store';
import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui'; import { Button, Field, FormModal, Stack, Switch } from '@immich/ui';
import { Duration } from 'luxon'; import { Duration } from 'luxon';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
@@ -17,119 +17,107 @@
let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore); let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore);
const onsubmit = (event: Event) => { const onSubmit = () => {
event.preventDefault();
onClose(settings); onClose(settings);
}; };
</script> </script>
<Modal title={$t('map_settings')} {onClose} size="small"> <FormModal title={$t('map_settings')} {onClose} {onSubmit} size="small">
<ModalBody> <Stack gap={4}>
<form {onsubmit} id="map-settings-form"> <Field label={$t('allow_dark_mode')}>
<Stack gap={4}> <Switch bind:checked={settings.allowDarkMode} />
<Field label={$t('allow_dark_mode')}> </Field>
<Switch bind:checked={settings.allowDarkMode} /> <Field label={$t('only_favorites')}>
</Field> <Switch bind:checked={settings.onlyFavorites} />
<Field label={$t('only_favorites')}> </Field>
<Switch bind:checked={settings.onlyFavorites} /> <Field label={$t('include_archived')}>
</Field> <Switch bind:checked={settings.includeArchived} />
<Field label={$t('include_archived')}> </Field>
<Switch bind:checked={settings.includeArchived} /> <Field label={$t('include_shared_partner_assets')}>
</Field> <Switch bind:checked={settings.withPartners} />
<Field label={$t('include_shared_partner_assets')}> </Field>
<Switch bind:checked={settings.withPartners} /> <Field label={$t('include_shared_albums')}>
</Field> <Switch bind:checked={settings.withSharedAlbums} />
<Field label={$t('include_shared_albums')}> </Field>
<Switch bind:checked={settings.withSharedAlbums} />
</Field>
{#if customDateRange} {#if customDateRange}
<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4"> <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
<div class="flex items-center justify-between gap-8"> <div class="flex items-center justify-between gap-8">
<label class="immich-form-label shrink-0 text-sm" for="date-after">{$t('date_after')}</label> <label class="immich-form-label shrink-0 text-sm" for="date-after">{$t('date_after')}</label>
<DateInput <DateInput
class="immich-form-input w-40" class="immich-form-input w-40"
type="date" type="date"
id="date-after" id="date-after"
max={settings.dateBefore} max={settings.dateBefore}
bind:value={settings.dateAfter} bind:value={settings.dateAfter}
/> />
</div> </div>
<div class="flex items-center justify-between gap-8"> <div class="flex items-center justify-between gap-8">
<label class="immich-form-label shrink-0 text-sm" for="date-before">{$t('date_before')}</label> <label class="immich-form-label shrink-0 text-sm" for="date-before">{$t('date_before')}</label>
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} /> <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
</div> </div>
<div class="flex justify-center text-xs"> <div class="flex justify-center text-xs">
<Button <Button
color="primary" color="primary"
size="small" size="small"
variant="ghost" variant="ghost"
onclick={() => { onclick={() => {
customDateRange = false; customDateRange = false;
settings.dateAfter = ''; settings.dateAfter = '';
settings.dateBefore = ''; settings.dateBefore = '';
}} }}
> >
{$t('remove_custom_date_range')} {$t('remove_custom_date_range')}
</Button> </Button>
</div> </div>
</div> </div>
{:else} {:else}
<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1"> <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
<SettingSelect <SettingSelect
label={$t('date_range')} label={$t('date_range')}
name="date-range" name="date-range"
bind:value={settings.relativeDate} bind:value={settings.relativeDate}
options={[ options={[
{ {
value: '', value: '',
text: $t('all'), text: $t('all'),
}, },
{ {
value: Duration.fromObject({ hours: 24 }).toISO() || '', value: Duration.fromObject({ hours: 24 }).toISO() || '',
text: $t('past_durations.hours', { values: { hours: 24 } }), text: $t('past_durations.hours', { values: { hours: 24 } }),
}, },
{ {
value: Duration.fromObject({ days: 7 }).toISO() || '', value: Duration.fromObject({ days: 7 }).toISO() || '',
text: $t('past_durations.days', { values: { days: 7 } }), text: $t('past_durations.days', { values: { days: 7 } }),
}, },
{ {
value: Duration.fromObject({ days: 30 }).toISO() || '', value: Duration.fromObject({ days: 30 }).toISO() || '',
text: $t('past_durations.days', { values: { days: 30 } }), text: $t('past_durations.days', { values: { days: 30 } }),
}, },
{ {
value: Duration.fromObject({ years: 1 }).toISO() || '', value: Duration.fromObject({ years: 1 }).toISO() || '',
text: $t('past_durations.years', { values: { years: 1 } }), text: $t('past_durations.years', { values: { years: 1 } }),
}, },
{ {
value: Duration.fromObject({ years: 3 }).toISO() || '', value: Duration.fromObject({ years: 3 }).toISO() || '',
text: $t('past_durations.years', { values: { years: 3 } }), text: $t('past_durations.years', { values: { years: 3 } }),
}, },
]} ]}
/> />
<div class="text-xs"> <div class="text-xs">
<Button <Button
color="primary" color="primary"
size="small" size="small"
variant="ghost" variant="ghost"
onclick={() => { onclick={() => {
customDateRange = true; customDateRange = true;
settings.relativeDate = ''; settings.relativeDate = '';
}} }}
> >
{$t('use_custom_date_range')} {$t('use_custom_date_range')}
</Button> </Button>
</div> </div>
</div> </div>
{/if} {/if}
</Stack> </Stack>
</form> </FormModal>
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="map-settings-form">{$t('save')}</Button>
</HStack>
</ModalFooter>
</Modal>