noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modal now uses tailwind

Browse Source
This commit is contained in:
Dennis Postma 2024-07-04 17:02:25 +02:00
parent caca1c887d
commit ab93dd5960
1 changed files with 14 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/utilities/Modal.vue
View File

@ -1,18 +1,23 @@
<template>
<Teleport to="body">
<div class="modal-container" v-if="isModalOpenRef" :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
<div class="modal-header" @mousedown="startDrag">
<div v-if="isModalOpenRef"
class="fixed bg-opacity-80 bg-gray-800 border-2 border-cyan-800 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
:style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-b border-cyan-800">
<slot name="modalHeader" />
<div class="buttons">
<!-- <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>-->
<button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
<div class="flex gap-2.5">
<button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
</button>
</div>
</div>
<div class="modal-body">
<div class="overflow-auto flex-grow">
<slot name="modalBody" />
<img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="resize" @mousedown="startResize" />
<img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize"
class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
@mousedown="startResize" />
</div>
<div v-if="$slots.modalFooter" class="modal-footer">
<div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-t border-cyan-800">
<slot name="modalFooter" />
</div>
</div>
@ -185,144 +190,4 @@ function handleResize() {
y.value = window.innerHeight - height.value
}
}
</script>
<style lang="scss">
@import '@/assets/scss/main';
.modal-container {
position: fixed;
top: 0;
left: 0;
background-color: rgba($dark-gray, 0.8);
border: 2px solid $dark-cyan;
z-index: 999;
display: flex;
flex-direction: column;
border-radius: 8px;
backdrop-filter: blur(5px);
box-shadow: 0 0 10px rgba($black, 0.5);
.modal-header {
cursor: move;
padding: 10px 20px;
display: flex;
justify-content: space-between;
gap: 30px;
align-items: center;
border-bottom: 1px solid $dark-cyan;
.modal-title {
margin: 0;
font-weight: 400;
flex-shrink: 0;
}
.buttons {
display: flex;
gap: 10px;
button {
width: 20px;
height: 20px;
margin: 0;
padding: 0;
position: relative;
img {
width: 100%;
height: 100%;
}
&:hover {
transform: rotate(180deg);
transition: ease-in-out transform 0.3s;
}
}
}
}
.modal-body {
overflow: auto;
flex-grow: 1;
.container {
margin: 15px;
}
.resize {
filter: invert(60%);
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
cursor: nwse-resize;
}
.submit {
display: inline-block;
button {
margin-right: 20px;
}
}
button {
padding: 6px 15px;
min-width: 100px;
}
.modal-form {
display: inline;
.form-fields {
.form-field {
display: flex;
flex-direction: column;
margin-bottom: 20px;
label {
margin-bottom: 5px;
font-family: $titles;
}
input {
max-width: 250px;
border-radius: 5px;
}
&.two-col {
flex-direction: row;
gap: 20px;
.field {
display: flex;
flex-direction: column;
margin-bottom: 0;
input {
max-width: 105px;
}
}
}
}
}
}
}
.modal-footer {
padding: 0 20px;
min-height: 50px;
display: flex;
justify-content: end;
gap: 30px;
align-items: center;
border-top: 1px solid $dark-cyan;
button {
padding: 6px 15px;
min-width: 100px;
border-radius: 5px;
border-width: 1px;
}
}
}
</style>
</script>