menu popover, styling

matterofabstract · Jul 18, 2023 · 958cd8a · 958cd8a
1 parent 59d5701
commit 958cd8a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/dist/index.html → dist/nvAux.html b/dist/index.html → dist/nvAux.html
diff --git a/src/lib/IconSettings.svelte b/src/lib/IconSettings.svelte
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="20"
-  height="20"
+  width="26"
+  height="26"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

diff --git a/src/lib/NoteDetail.svelte b/src/lib/NoteDetail.svelte
@@ -3,7 +3,7 @@
   import { onMount } from 'svelte';
   import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
-  import { selectedNote, bodyText } from './store';
+  import { selectedNote } from './store';
 
   import { debounce } from '../utils/debounce';
   import { isEmptyObject } from '../utils/isEmptyObject';
@@ -17,7 +17,7 @@
   const updateNote = async () => {
     await $selectedNote.update({
       $set: {
-        body: $bodyText,
+        body: $selectedNote.body,
         updatedAt: new Date().getTime(),
       },
     });
@@ -35,7 +35,7 @@
     <textarea
       id="body-editor"
       class="block w-full h-full relative no-resize border-0 outline-none border-box"
-      bind:value={$bodyText}
+      bind:value={$selectedNote.body}
       on:keydown={handleDebounceSave}
     />
   {/if}

diff --git a/src/lib/OmniBar.svelte b/src/lib/OmniBar.svelte
@@ -11,7 +11,7 @@
 
   import { omniMode, omniText, selectedNote, db } from './store';
 
-  let omniInput;
+  let omniInput, showMenu;
 
   onMount(() => omniInput.focus());
 
@@ -42,15 +42,39 @@
       })
       .then(() => document.getElementById('body-editor').focus());
   };
+
+  const toggleMenu = () => {
+    showMenu = !showMenu;
+  };
 </script>
 
 <svelte:window on:keydown={clearSelection} />
 
-<div class="omnibar flex items-center border-box border-b" style="border-color: #2e3338; background-color: #181a1c; height: 42px">
+<div
+  class="omnibar flex items-center border-box border-b"
+  style="border-color: #2e3338; background-color: #181a1c; height: 42px"
+>
   <!-- <ImportNotesZip />
   <DownloadNotesZip /> -->
-  <div class="flex items-center" style="padding: 0 4px 0 10px; color: #444953;">
-    <IconSettings />
+  <div class="relative" style="padding: 0 4px 0 8px;">
+    <button on:click={toggleMenu} class="bg-transparent flex items-center" style="color: #444953;">
+      <IconSettings />
+    </button>
+    {#if showMenu}
+      <ul
+        class="absolute"
+        style="min-width: 180px; border: 1px solid rgba(255,255,255,0.1); z-index: 9999; border-radius: 6px; background: #0e0f11c4; top: 33px; left: 10px; color: white; list-style-type: none; margin: 0; padding: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);"
+      >
+        <li><div style="width: 10spx;" /> About nvAux</li>
+        <li><div style="width: 10spx;" /> Leave Feedback...</li>
+        <li class="break" />
+
+        <li><div style="width: 10spx;" /> Import</li>
+        <li><div style="width: 10spx;" /> Export (.zip)</li>
+        <li class="break" />
+        <li><div style="width: 10spx;" /> Reset Database</li>
+      </ul>
+    {/if}
   </div>
   <!-- <div
     on:click={() => omniInput.focus()}
@@ -97,7 +121,7 @@
     width: 100%;
     box-sizing: border-box;
     border-radius: 0px;
-    font-size: 17px;
+    font-size: 14px;
     background: transparent;
     color: white;
     height: 38px;
@@ -108,4 +132,17 @@
   input::placeholder {
     color: #3e464d;
   }
+
+  li {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    margin-bottom: 1px;
+    box-sizing: border-box;
+    color: #adadad;
+  }
+  li.break {
+    height: 1px; padding: 0; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.05);
+  }
 </style>