feat(web,a11y): consolidate BaseModal into FullScreenModal (#8787)

* feat(web,a11y): FullScreenModal sticky buttons

* chore(web): combine BaseModal into FullScreenModal

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Ben 2024-04-16 05:06:15 +00:00 committed by GitHub
parent 28f591d01b
commit bcdec25843
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 251 additions and 337 deletions

View file

@ -8,12 +8,12 @@
import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
import { mdiContentCopy, mdiLink } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import BaseModal from '../base-modal.svelte';
import type { ImmichDropDownOption } from '../dropdown-button.svelte';
import DropdownButton from '../dropdown-button.svelte';
import { NotificationType, notificationController } from '../notification/notification';
import SettingInputField, { SettingInputFieldType } from '../settings/setting-input-field.svelte';
import SettingSwitch from '../settings/setting-switch.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
export let onClose: () => void;
export let albumId: string | undefined = undefined;
@ -159,8 +159,8 @@
};
</script>
<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} {onClose}>
<section class="mx-6 mb-6">
<FullScreenModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} {onClose}>
<section>
{#if shareType === SharedLinkType.Album}
{#if !editingLink}
<div>Let anyone with the link see photos and people in this album.</div>
@ -246,29 +246,22 @@
</div>
</section>
<hr />
<section slot="sticky-bottom">
<svelte:fragment slot="sticky-bottom">
{#if !sharedLink}
{#if editingLink}
<div class="flex justify-end">
<Button size="sm" on:click={handleEditLink}>Confirm</Button>
</div>
<Button size="sm" fullwidth on:click={handleEditLink}>Confirm</Button>
{:else}
<div class="flex justify-end">
<Button size="sm" on:click={handleCreateSharedLink}>Create link</Button>
</div>
<Button size="sm" fullwidth on:click={handleCreateSharedLink}>Create link</Button>
{/if}
{:else}
<div class="flex w-full gap-4">
<div class="flex w-full gap-2">
<input class="immich-form-input w-full" bind:value={sharedLink} disabled />
<LinkButton on:click={() => (sharedLink ? copyToClipboard(sharedLink) : '')}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiContentCopy} size="18" />
<Icon path={mdiContentCopy} ariaLabel="Copy link to clipboard" size="18" />
</div>
</LinkButton>
</div>
{/if}
</section>
</BaseModal>
</svelte:fragment>
</FullScreenModal>