Move edit form to modal dialog

priv/static/index.html

@@ -77,7 +77,11 @@
         </div>
       </note-form>
 
-      <note-form mode="edit" id="edit-note" class="hidden">
+      <div id="notes"></div>
+    </div>
+
+    <dialog id="edit-note-dialog">
+      <note-form mode="edit" id="edit-note">
         <div class="note">
           <p class="content"></p>
           <div class="toolbar">
@@ -88,9 +92,7 @@
           </div>
         </div>
       </note-form>
-
-      <div id="notes"></div>
-    </div>
+    </dialog>
 
     <template id="task-list-item">
       <div class="handle">||</div>

priv/static/js/jenot.js

@@ -95,6 +95,7 @@ if (notificationsAvailable()) {
 
 const newNote = document.querySelector("#new-note");
 const editNote = document.querySelector("#edit-note");
+const editNoteDialog = document.querySelector("#edit-note-dialog");
 
 // Each save event originating from storage triggers a re-render
 // of notes list.
@@ -113,17 +114,15 @@ newNote.addEventListener("addNote", async (e) => {
 });
 
 editNote.addEventListener("updateNote", async (e) => {
-  newNote.classList.remove("hidden");
-  editNote.classList.add("hidden");
   await Notes.update(e.detail);
   Notes.saveStorage();
+  editNoteDialog.close();
 });
 
 editNote.addEventListener("deleteNote", async (e) => {
-  newNote.classList.remove("hidden");
-  editNote.classList.add("hidden");
   await Notes.remove(e.detail);
   Notes.saveStorage();
+  editNoteDialog.close();
 });
 
 // The notes rendering routine is optimized to replace only
@@ -215,10 +214,9 @@ function renderNote(note) {
   }
 
   container.addEventListener("click", async (e) => {
-    newNote.classList.add("hidden");
-    editNote.classList.remove("hidden");
     const note = await Notes.get(container.id);
     editNote.load(note);
+    editNoteDialog.showModal();
   });
 
   return container;

priv/static/style.css

@@ -1,6 +1,7 @@
 /* Variables */
 
 :root {
+  --backdrop-background: lightgray;
   --gap-1: 10px;
   --font-color: #222;
   --button-text-color: #222;
@@ -14,6 +15,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --backdrop-background: black;
     --font-color: antiquewhite;
     --button-text-color: black;
     --background: #222;
@@ -37,11 +39,28 @@
   margin: 0;
 }
 
+dialog {
+  margin: auto;
+  border: 0;
+  background: transparent;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+::backdrop {
+  background: var(--backdrop-background);
+  opacity: 0.75;
+}
+
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
 
+body:has(dialog[open]) {
+    overflow: hidden;
+}
+
 img,
 picture,
 video,
@@ -304,6 +323,19 @@ button {
   color: var(--inactive-color);
 }
 
+@container (min-width: 700px) {
+  #edit-note-dialog {
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#edit-note-dialog {
+  margin: auto;
+  width: 700px;
+}
+
 .hidden {
   display: none;
 }