helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: introduce modal manager (#18039)

Browse source
This commit is contained in:
Daniel Dietzler 2025-05-03 00:41:42 +02:00 • committed by GitHub
parent 15d431ba6a
commit 62fc5b3c7d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 265 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/lib/components/shared-components/change-location.svelte
View file

@ -115,7 +115,7 @@
<ConfirmDialog
confirmColor="primary"
title={$t('change_location')}
width="wide"
size="medium"
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
>
{#snippet promptSnippet()}

35
web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
View file

@ -1,8 +1,7 @@
<script lang="ts">
import { Button, type Color } from '@immich/ui';
import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import FullScreenModal from '../full-screen-modal.svelte';
interface Props {
title?: string;
@ -13,7 +12,7 @@
cancelColor?: Color;
hideCancelButton?: boolean;
disabled?: boolean;
width?: 'wide' | 'narrow';
size?: 'small' | 'medium';
onClose: (confirmed: boolean) => void;
promptSnippet?: Snippet;
}
@ -27,7 +26,7 @@
cancelColor = 'secondary',
hideCancelButton = false,
disabled = false,
width = 'narrow',
size = 'small',
onClose,
promptSnippet,
}: Props = $props();
@ -37,21 +36,23 @@
};
</script>
<FullScreenModal {title} onClose={() => onClose(false)} {width}>
<div class="text-md py-5 text-center">
<Modal {title} onClose={() => onClose(false)} {size} class="bg-light text-dark">
<ModalBody>
{#if promptSnippet}{@render promptSnippet()}{:else}
<p>{prompt}</p>
{/if}
</div>
</ModalBody>
{#snippet stickyBottom()}
{#if !hideCancelButton}
<Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
{cancelText}
<ModalFooter>
<div class="flex gap-3 w-full">
{#if !hideCancelButton}
<Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
{cancelText}
</Button>
{/if}
<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
{confirmText}
</Button>
{/if}
<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
{confirmText}
</Button>
{/snippet}
</FullScreenModal>
</div>
</ModalFooter>
</Modal>