tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-06-04 13:15:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): immich/ui select component (#25268)

Browse Source 
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2026-01-14 20:38:13 -05:00
committed by GitHub
parent 7b3a298c6a
commit d59ee7d2ae
9 changed files with 90 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/modals/MapSettingsModal.svelte
+34 -35
View File
@@ -1,16 +1,15 @@
<script lang="ts">
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import DateInput from '$lib/elements/DateInput.svelte';
import type { MapSettings } from '$lib/stores/preferences.store';
import { Button, Field, FormModal, Stack, Switch } from '@immich/ui';
import { Button, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
import { Duration } from 'luxon';
import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition';
interface Props {
type Props = {
settings: MapSettings;
onClose: (settings?: MapSettings) => void;
}
};
let { settings: initialValues, onClose }: Props = $props();
let settings = $state(initialValues);
@@ -73,37 +72,37 @@
</div>
{:else}
<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
<SettingSelect
label={$t('date_range')}
name="date-range"
bind:value={settings.relativeDate}
options={[
{
value: '',
text: $t('all'),
},
{
value: Duration.fromObject({ hours: 24 }).toISO() || '',
text: $t('past_durations.hours', { values: { hours: 24 } }),
},
{
value: Duration.fromObject({ days: 7 }).toISO() || '',
text: $t('past_durations.days', { values: { days: 7 } }),
},
{
value: Duration.fromObject({ days: 30 }).toISO() || '',
text: $t('past_durations.days', { values: { days: 30 } }),
},
{
value: Duration.fromObject({ years: 1 }).toISO() || '',
text: $t('past_durations.years', { values: { years: 1 } }),
},
{
value: Duration.fromObject({ years: 3 }).toISO() || '',
text: $t('past_durations.years', { values: { years: 3 } }),
},
]}
/>
<Field label={$t('date_range')}>
<Select
bind:value={settings.relativeDate}
options={[
{
label: $t('all'),
value: '',
},
{
label: $t('past_durations.hours', { values: { hours: 24 } }),
value: Duration.fromObject({ hours: 24 }).toISO() || '',
},
{
label: $t('past_durations.days', { values: { days: 7 } }),
value: Duration.fromObject({ days: 7 }).toISO() || '',
},
{
label: $t('past_durations.days', { values: { days: 30 } }),
value: Duration.fromObject({ days: 30 }).toISO() || '',
},
{
label: $t('past_durations.years', { values: { years: 1 } }),
value: Duration.fromObject({ years: 1 }).toISO() || '',
},
{
label: $t('past_durations.years', { values: { years: 3 } }),
value: Duration.fromObject({ years: 3 }).toISO() || '',
},
]}
/>
</Field>
<div class="text-xs">
<Button
color="primary"