gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: redesign Modal component and add exit button

Browse source
This commit is contained in:
SauceyRed 2025-07-13 04:10:49 +02:00
parent d43105ab58
commit c2ae978ec1
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

51
components/Modal.vue
View file

@ -1,25 +1,32 @@
<template>
<dialog ref="dialog" class="modal">
<h1 class="modal-title">{{ title }}</h1>
<slot />
<dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
</span>
<div class="modal-content">
<h1 class="modal-title">{{ title }}</h1>
<slot />
</div>
</dialog>
</template>
<script lang="ts" setup>
import type { ModalProps } from '~/types/interfaces';
import Button from './UserInterface/Button.vue';
const props = defineProps<ModalProps>();
const dialog = ref<HTMLDialogElement>();
console.log("props:", props);
onMounted(() => {
if (dialog) {
dialog.value?.showModal();
if (dialog.value) {
dialog.value.showModal();
if (props.onClose) {
dialog.value?.addEventListener("close", props.onClose);
dialog.value.addEventListener("close", props.onClose);
}
if (props.onCancel) {
dialog.value?.addEventListener("cancel", props.onCancel);
dialog.value.addEventListener("cancel", props.onCancel);
}
}
});
@ -33,15 +40,22 @@ onMounted(() => {
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1em;
opacity: 100%;
padding: 1%;
background-color: var(--background-color);
color: var(--main-text-color);
background-color: var(--sidebar-highlighted-background-color);
color: var(--text-color);
overflow: hidden;
}
.modal::backdrop {
background-color: rgb(50, 50, 50);
opacity: 70%;
.modal-regular::backdrop {
background-color: var(--chat-background-color);
opacity: 0%;
}
.modal-obscure::backdrop {
background-color: var(--chat-background-color);
opacity: 80%;
}
.modal-top-container {
@ -55,5 +69,16 @@ onMounted(() => {
.modal-title {
font-size: 1.5rem;
padding: 0;
}
.modal-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
margin: 1em;
width: 100%;
}
</style>