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