gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-28 20:15:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: simplify Modal rendering

Browse Source
This commit is contained in:
ndom91 2024-06-05 18:08:09 +02:00
parent 3f9fed6ed2
commit 039e2eaedb
No known key found for this signature in database
1 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/src/lib/components/Modal.svelte
View File

@ -4,7 +4,9 @@
import type iconsJson from '$lib/icons/icons.json'; import type iconsJson from '$lib/icons/icons.json';
let dialog: HTMLDialogElement; let dialog: HTMLDialogElement;
let modalForm: HTMLFormElement;
let item: any; let item: any;
let open = false;
export let width: 'default' | 'small' | 'large' = 'default'; export let width: 'default' | 'small' | 'large' = 'default';
export let title: string | undefined = undefined; export let title: string | undefined = undefined;
@ -13,19 +15,21 @@
export function show(newItem?: any) { export function show(newItem?: any) {
item = newItem; item = newItem;
dialog.showModal(); dialog.showModal();
open = true;
} }
export function close() { export function close() {
item = undefined; item = undefined;
dialog.close(); dialog.close();
open = false;
} }
//onMount(() => { onMount(() => {
// document.body.appendChild(dialog); document.body.appendChild(dialog);
//}); });
function handleClickOutside(e: MouseEvent) { function handleClickOutside(e: MouseEvent) {
if (dialog && !dialog.contains(e.target as Node)) { if (!modalForm.contains(e.target as Node)) {
dialog.close(); dialog.close();
} }
} }
@ -34,15 +38,14 @@
<svelte:window on:click={handleClickOutside} /> <svelte:window on:click={handleClickOutside} />
<dialog <dialog
class="dialog-wrap"
class:s-default={width === 'default'} class:s-default={width === 'default'}
class:s-small={width === 'small'} class:s-small={width === 'small'}
class:s-large={width === 'large'} class:s-large={width === 'large'}
bind:this={dialog} bind:this={dialog}
on:close={close} on:close={close}
> >
<div class="dialog"> {#if open}
<form class="modal-content" on:submit> <form class="modal-content" on:submit bind:this={modalForm}>
{#if title} {#if title}
<div class="modal__header"> <div class="modal__header">
{#if icon} {#if icon}
@ -64,13 +67,13 @@
</div> </div>
{/if} {/if}
</form> </form>
</div> {/if}
</dialog> </dialog>
<style lang="postcss"> <style lang="postcss">
.dialog-wrap { dialog {
position: relative; display: flex;
width: 100%; flex-direction: column;
max-height: calc(100vh - 80px); max-height: calc(100vh - 80px);
border-radius: var(--radius-l); border-radius: var(--radius-l);
background-color: var(--clr-bg-1); background-color: var(--clr-bg-1);
@ -78,23 +81,18 @@
box-shadow: var(--fx-shadow-l); box-shadow: var(--fx-shadow-l);
} }
.dialog {
display: flex;
flex-direction: column;
}
/* modifiers */ /* modifiers */
.s-large { .s-large {
max-width: 840px; width: 840px;
} }
.s-default { .s-default {
max-width: 580px; width: 580px;
} }
.s-small { .s-small {
max-width: 380px; width: 380px;
} }
.modal__header { .modal__header {