From: Adam Dullage <redacted>
Date: Sat, 4 May 2024 10:34:56 +0000 (+0100)
Subject: Move title back to ConfirmModal and position modal close with absolute positioning
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=1ebc6e4250c56c109ef8d5b6ccecf71695d2c870;p=flatnotes.git

Move title back to ConfirmModal and position modal close with absolute positioning
---

diff --git a/client/components/ConfirmModal.vue b/client/components/ConfirmModal.vue
index 8b34773..8617fb0 100644
--- a/client/components/ConfirmModal.vue
+++ b/client/components/ConfirmModal.vue
@@ -2,9 +2,10 @@
   <Modal
     ref="modal"
     :class="{ 'border border-l-4 border-l-theme-failure': isDanger }"
-    :title="title"
     :closeHandler="cancelHandler"
   >
+    <!-- Title -->
+    <div class="mb-6 text-xl">{{ title }}</div>
     <!-- Message -->
     <div class="mb-6">{{ message }}</div>
     <!-- Buttons -->
diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index 92dd8e6..d4bd824 100644
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -1,20 +1,19 @@
 <template>
   <!-- Mask -->
   <div
+    v-if="isVisible"
     class="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center bg-theme-background-tint/40 backdrop-blur-sm"
-    :class="{ hidden: !isVisible }"
   >
     <!-- Modal -->
     <div
-      class="max-w-96 grow rounded-lg border border-theme-border bg-theme-background px-6 py-4 shadow-lg"
+      class="relative max-w-96 grow rounded-lg border border-theme-border bg-theme-background px-6 py-4 shadow-lg"
       :class="$attrs.class"
     >
-      <!-- Title -->
-      <div class="mb-6 flex justify-between">
-        <div class="text-xl">{{ title }}</div>
-        <CustomButton :iconPath="mdiWindowClose" @click="close" />
-      </div>
-      <!-- Slot -->
+      <CustomButton
+        :iconPath="mdiWindowClose"
+        @click="close"
+        class="absolute right-1 top-1"
+      />
       <slot></slot>
     </div>
   </div>
@@ -31,7 +30,6 @@ defineOptions({
 const props = defineProps({
   closeHandler: Function,
   modalClasses: String,
-  title: String,
 });
 
 import CustomButton from "./CustomButton.vue";