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

guild-settings #35

Merged
sauceyred merged 42 commits from guild-settings into main 2025-07-13 02:26:37 +00:00
Conversation 4 Commits 42 Files changed 12 +38 -13
1 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c2ae978ec1 - Show all commits

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>