mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2024-12-29 11:06:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

web/dialogs: create a container for reused code

Browse source
This commit is contained in:
wukko 2024-07-27 14:24:24 +06:00
parent 0a7747c497
commit 778190b2b3
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 48 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
web/src/components/dialog/DialogContainer.svelte Normal file
View file

@ -0,0 +1,33 @@
<script lang="ts">
import { tick } from "svelte";
import { killDialog } from "$lib/dialogs";
export let id: string;
let dialogParent: HTMLDialogElement;
let open = false;
let closing = false;
export const close = () => {
if (dialogParent) {
closing = true;
open = false;
setTimeout(() => {
dialogParent.close();
killDialog();
}, 150);
}
};
$: if (dialogParent) {
dialogParent.showModal();
tick().then(() => {
open = true;
});
}
</script>
<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
<slot></slot>
</dialog>

42
web/src/components/dialog/PickerDialog.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import { tick } from "svelte";
import { device } from "$lib/device";
import { killDialog } from "$lib/dialogs";
import { t } from "$lib/i18n/translations";
import type { Optional } from "$lib/types/generic";
import type { DialogButton } from "$lib/types/dialog";
import type { DialogPickerItem } from "$lib/types/dialog";
import DialogContainer from "$components/dialog/DialogContainer.svelte";
import PickerItem from "$components/dialog/PickerItem.svelte";
import DialogButtons from "$components/dialog/DialogButtons.svelte";
import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
@ -28,38 +28,14 @@
dialogDescription += "desktop";
}
let dialogParent: HTMLDialogElement;
let closing = false;
let open = false;
const close = () => {
if (dialogParent) {
closing = true;
open = false;
setTimeout(() => {
dialogParent.close();
killDialog();
}, 150);
}
};
$: if (dialogParent) {
dialogParent.showModal();
tick().then(() => {
open = true;
});
}
let close: () => void;
</script>
<dialog
id="dialog-{id}"
bind:this={dialogParent}
class:closing
class:open
class:three-columns={items && items.length <= 3}
>
<div class="dialog-body picker-dialog">
<DialogContainer {id} bind:close>
<div
class="dialog-body picker-dialog"
class:three-columns={items && items.length <= 3}
>
<div class="popup-header">
<div class="popup-title-container">
<IconBoxMultiple />
@ -84,7 +60,7 @@
</div>
<DialogBackdropClose closeFunc={close} />
</dialog>
</DialogContainer>
<style>
.picker-dialog {

36
web/src/components/dialog/SmallDialog.svelte
View file

@ -1,11 +1,10 @@
<script lang="ts">
import { tick } from "svelte";
import { killDialog } from "$lib/dialogs";
import type { Optional } from "$lib/types/generic";
import type { MeowbaltEmotions } from "$lib/types/meowbalt";
import type { DialogButton, SmallDialogIcons } from "$lib/types/dialog";
import DialogContainer from "$components/dialog/DialogContainer.svelte";
import Meowbalt from "$components/misc/Meowbalt.svelte";
import DialogButtons from "$components/dialog/DialogButtons.svelte";
import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
@ -20,31 +19,10 @@
export let bodySubText = "";
export let buttons: Optional<DialogButton[]> = undefined;
let dialogParent: HTMLDialogElement;
let closing = false;
let open = false;
const close = () => {
if (dialogParent) {
closing = true;
open = false;
setTimeout(() => {
dialogParent.close();
killDialog();
}, 150);
}
};
$: if (dialogParent) {
dialogParent.showModal();
tick().then(() => {
open = true;
});
}
let close: () => void;
</script>
<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
<DialogContainer {id} bind:close>
<div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}>
{#if meowbalt}
<div class="meowbalt-container">
@ -77,7 +55,7 @@
</div>
<DialogBackdropClose closeFunc={close} />
</dialog>
</DialogContainer>
<style>
.small-dialog,
@ -95,9 +73,7 @@
.small-dialog {
text-align: center;
max-width: 340px;
width: calc(
100% - var(--padding) - var(--dialog-padding) * 2
);
width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
max-height: 50%;
margin: calc(var(--padding) / 2);
}