Edit/Add bookmark modal

src/digimarks/static/css/digui.css

@@ -322,6 +322,7 @@ th, td {
     /*padding: 1em;*/
 }
 
+[data-theme='nebula'] :modal,
 [data-theme='nebula'] .card,
 [data-theme='nebula'] button,
 [data-theme='nebula'] .button,
@@ -329,6 +330,7 @@ th, td {
 [data-theme='nebula'] select,
 [data-theme='nebula'] textarea,
 [data-theme='nebula'] table,
+[data-theme='nebula-dark'] :modal,
 [data-theme='nebula-dark'] .card,
 [data-theme='nebula-dark'] button,
 [data-theme='nebula-dark'] .button,
@@ -427,6 +429,16 @@ th, td {
 }
 
 
+/** Modal, e.g. for showing info or filling in a form; on top of the other content */
+
+:modal {
+    color: var(--text-color);
+    background-color: var(--background-color);
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius);
+}
+
+
 /** Footer */
 
 footer {

src/digimarks/static/js/digimarks.js

@@ -1,17 +1,13 @@
 document.addEventListener('alpine:init', () => {
     Alpine.store('digimarks', {
         /** Main digimarks application, state etc */
-        // userKey: Alpine.$persist(0).as('userKey'),
         userKey: -1,
         /* cache consists of cache[userKey] = {'bookmarks': [], 'tags': [], ??} */
         cache: Alpine.$persist({}).as('cache'),
 
         bookmarks: [],
 
-        /* Bookmark that is being edited, used to fill the form etc */
-        bookmark_to_edit: null,
-
-        /* nebula (dropshadows), bbs (monospace, right lines), silo (like bbs but dark) ?? */
+        /* nebula (drop-shadows), bbs (monospace, right lines), silo (like bbs but dark) ?? */
         themes: ['nebula', 'nebula-dark', 'bbs', 'silo'],
         theme: Alpine.$persist('nebula').as('theme'),
 
@@ -19,6 +15,8 @@ document.addEventListener('alpine:init', () => {
         show_bookmarks_list: Alpine.$persist(true).as('show_bookmarks_list'),
         show_bookmarks_cards: Alpine.$persist(false).as('show_bookmarks_cards'),
         show_tags: Alpine.$persist(false).as('show_tags'),
+        /* Bookmark that is being edited, used to fill the form, etc. */
+        bookmarkToEdit: Alpine.$persist(null).as('bookmarkToEdit'),
 
         /* Loading indicator */
         loading: false,
@@ -196,7 +194,6 @@ document.addEventListener('alpine:init', () => {
 
         async toggleTagPage() {
             /* Show or hide the tag page instead of the bookmarks */
-            console.log('Toggle tag page');
             this.show_bookmarks = !this.show_bookmarks;
             this.show_tags = !this.show_bookmarks;
         },
@@ -209,9 +206,16 @@ document.addEventListener('alpine:init', () => {
         async startAddingBookmark() {
             /* Open 'add bookmark' page */
             console.log('Start adding bookmark');
-            this.bookmark_to_edit = {
+            this.bookmarkToEdit = {
                 'url': ''
             }
+            // this.show_bookmark_details = true;
+            const editFormDialog = document.getElementById("editFormDialog");
+            editFormDialog.showModal();
+        },
+        async saveBookmark() {
+            console.log('Saving bookmark');
+            // this.show_bookmark_details = false;
         },
         async addBookmark() {
             /* Post new bookmark to the backend */

src/digimarks/templates/user_index.html

@@ -28,8 +28,7 @@
         </header>
 
         <main>
-            <section x-cloak x-show="$store.digimarks.show_bookmarks && !$store.digimarks.bookmark_to_edit"
-                     x-transition.opacity>
+            <section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition.opacity>
                 <h1 x-bind:title="$store.digimarks.userKey">Bookmarks</h1>
 
                 <p>
@@ -123,8 +122,7 @@
                 </section>
             </section>
 
-            <section x-cloak x-show="$store.digimarks.show_tags && !$store.digimarks.bookmark_to_edit"
-                     x-transition.opacity>
+            <section x-cloak x-show="$store.digimarks.show_tags" x-transition.opacity>
                 <h1>Tags</h1>
 
                 <table>
@@ -147,7 +145,13 @@
                 </table>
             </section>
 
-            <section x-cloak x-show="$store.digimarks.bookmark_to_edit" x-transition.opacity>
+            <dialog x-cloak id="editFormDialog"
+                    x-transition:enter="modal-enter"
+                    x-transition:enter-start="modal-enter"
+                    x-transition:enter-end="modal-enter-active"
+                    x-transition:leave="modal-leave-active"
+                    x-transition:leave-start="modal-enter-active"
+                    x-transition:leave-end="modal-enter">
                 <h1>Add/Edit bookmark</h1>
                 {#
                 <div class="card-panel {{ theme.ERRORMESSAGE_BACKGROUND }}">
@@ -166,14 +170,20 @@
             </span>
                 </div>
 #}
-                <form>
+                <form method="dialog">
                     <input type="text" name="">
-                    <label>
-                        <input type="checkbox" name="strip" id="strip"/>
-                        <span>Strip parameters from url (like <em>?utm_source=social</em> - can break the link!)</span>
-                    </label>
+                    <p>
+                        <label>
+                            <input type="checkbox" name="strip" id="strip"/>
+                            <span>Strip parameters from url (like <em>?utm_source=social</em> - can break the link!)</span>
+                        </label>
+                    </p>
+                    <div>
+                        <button value="cancel">Cancel</button>
+                        <button @click="$store.digimarks.saveBookmark()">Save</button>
+                    </div>
                 </form>
-            </section>
+            </dialog>
         </main>
 
     </article>