mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web,a11y): standardize the FullScreenModal UI (#8566)
* 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>
This commit is contained in:
Ben
GitHub
parent
d43daaee81
commit
796c933fb8
43 changed files with 749 additions and 853 deletions
|
|
@ -21,98 +21,92 @@
|
|||
const handleClose = () => dispatch('close');
|
||||
</script>
|
||||
|
||||
<FullScreenModal onClose={handleClose}>
|
||||
<div
|
||||
class="flex w-96 max-w-lg flex-col gap-8 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
|
||||
<FullScreenModal id="map-settings-modal" title="Map settings" onClose={handleClose}>
|
||||
<form
|
||||
on:submit|preventDefault={() => dispatch('save', settings)}
|
||||
class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<h1 class="self-center text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Map Settings</h1>
|
||||
|
||||
<form
|
||||
on:submit|preventDefault={() => dispatch('save', settings)}
|
||||
class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
|
||||
<SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
|
||||
<SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
|
||||
<SettingSwitch id="include-shared-with-me" title="Include shared with me" bind:checked={settings.withPartners} />
|
||||
{#if customDateRange}
|
||||
<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
|
||||
<DateInput
|
||||
class="immich-form-input w-40"
|
||||
type="date"
|
||||
id="date-after"
|
||||
max={settings.dateBefore}
|
||||
bind:value={settings.dateAfter}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
|
||||
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
|
||||
</div>
|
||||
<div class="flex justify-center text-xs">
|
||||
<LinkButton
|
||||
on:click={() => {
|
||||
customDateRange = false;
|
||||
settings.dateAfter = '';
|
||||
settings.dateBefore = '';
|
||||
}}
|
||||
>
|
||||
Remove custom date range
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
|
||||
<SettingSelect
|
||||
label="Date range"
|
||||
name="date-range"
|
||||
bind:value={settings.relativeDate}
|
||||
options={[
|
||||
{
|
||||
value: '',
|
||||
text: 'All',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ hours: 24 }).toISO() || '',
|
||||
text: 'Past 24 hours',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ days: 7 }).toISO() || '',
|
||||
text: 'Past 7 days',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ days: 30 }).toISO() || '',
|
||||
text: 'Past 30 days',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ years: 1 }).toISO() || '',
|
||||
text: 'Past year',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ years: 3 }).toISO() || '',
|
||||
text: 'Past 3 years',
|
||||
},
|
||||
]}
|
||||
<SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
|
||||
<SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
|
||||
<SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
|
||||
<SettingSwitch id="include-shared-with-me" title="Include shared with me" bind:checked={settings.withPartners} />
|
||||
{#if customDateRange}
|
||||
<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
|
||||
<DateInput
|
||||
class="immich-form-input w-40"
|
||||
type="date"
|
||||
id="date-after"
|
||||
max={settings.dateBefore}
|
||||
bind:value={settings.dateAfter}
|
||||
/>
|
||||
<div class="text-xs">
|
||||
<LinkButton
|
||||
on:click={() => {
|
||||
customDateRange = true;
|
||||
settings.relativeDate = '';
|
||||
}}
|
||||
>
|
||||
Use custom date range instead
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 flex w-full gap-4">
|
||||
<Button color="gray" size="sm" fullwidth on:click={handleClose}>Cancel</Button>
|
||||
<Button type="submit" size="sm" fullwidth>Save</Button>
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
|
||||
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
|
||||
</div>
|
||||
<div class="flex justify-center text-xs">
|
||||
<LinkButton
|
||||
on:click={() => {
|
||||
customDateRange = false;
|
||||
settings.dateAfter = '';
|
||||
settings.dateBefore = '';
|
||||
}}
|
||||
>
|
||||
Remove custom date range
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{:else}
|
||||
<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
|
||||
<SettingSelect
|
||||
label="Date range"
|
||||
name="date-range"
|
||||
bind:value={settings.relativeDate}
|
||||
options={[
|
||||
{
|
||||
value: '',
|
||||
text: 'All',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ hours: 24 }).toISO() || '',
|
||||
text: 'Past 24 hours',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ days: 7 }).toISO() || '',
|
||||
text: 'Past 7 days',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ days: 30 }).toISO() || '',
|
||||
text: 'Past 30 days',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ years: 1 }).toISO() || '',
|
||||
text: 'Past year',
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ years: 3 }).toISO() || '',
|
||||
text: 'Past 3 years',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div class="text-xs">
|
||||
<LinkButton
|
||||
on:click={() => {
|
||||
customDateRange = true;
|
||||
settings.relativeDate = '';
|
||||
}}
|
||||
>
|
||||
Use custom date range instead
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 flex w-full gap-4">
|
||||
<Button color="gray" size="sm" fullwidth on:click={handleClose}>Cancel</Button>
|
||||
<Button type="submit" size="sm" fullwidth>Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
</FullScreenModal>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue