writes working

matterofabstract · Jul 22, 2023 · 9b16c1c · 9b16c1c
1 parent e99144d
commit 9b16c1c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -11,7 +11,9 @@
 <div class="h-screen w-screen overflow-hidden flex flex-col justify-center items-center {$fullScreen ? '' : 'p-2'}">
 
     <div class="transition-all text-center" style="{$fullScreen ? 'opacity: 0; height: 0;' : 'height: 230px;' }">
-      <h1 style="opacity: 0.9; text-shadow: 1px 3px 5px rgba(0,0,0,0.5);">nvAux</h1>
+      <div style="perspective: {$fullScreen ? '0' : '150'}px;" class="transition-all">
+        <h1 style="opacity: 0.9; text-shadow: 1px 3px 5px rgba(0,0,0,0.5); transform: rotateX(11deg) rotateY(0deg); transform-style: preserve-3d;">nvAux</h1>
+      </div>
       <p>Capture and retrieve ideas at the speed of thought with nvAux, the in-the-zone note-taking app for creative professionals.</p>
     </div>
 

diff --git a/src/lib/NoteDetail.svelte b/src/lib/NoteDetail.svelte
@@ -3,37 +3,38 @@
   import { onMount } from 'svelte';
   import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
-  import { db, selectedNote, bodyText } from './store';
+  import { selectedNote, bodyText } from './store';
 
   import { debounce } from '../utils/debounce';
   import { isEmptyObject } from '../utils/isEmptyObject';
 
   import Settings from './Settings.svelte';
 
   let innerHeight;
-  let db$;
+  let note;
 
   onMount(async () => {
     addRxPlugin(RxDBUpdatePlugin);
-    db$ = await db();
-    db$.notes.findOne($selectedNote.guid).exec();
   });
 
-  const handleDebounceSave = debounce(() => !isEmptyObject($selectedNote) && updateNote(), 500);
+  const handleDebounceSave = debounce(() => updateNote(), 1000);
 
   const updateNote = async () => {
-    await $selectedNote.update({
-      $set: {
-        body: $bodyText,
-        updatedAt: new Date().getTime(),
-      },
+    // @ts-ignore
+    await $selectedNote.incrementalModify((data) => {
+      data.body = $bodyText;
+      data.updatedAt = new Date().getTime();
+      return data;
     });
   };
 </script>
 
 <svelte:window bind:innerHeight />
 
-<div class="relative overflow-hidden h-full overflow-y-auto" style="margin-bottom: 35px; background: var(--app-notedetail-background);">
+<div
+  class="relative overflow-hidden h-full overflow-y-auto"
+  style="margin-bottom: 35px; background: var(--app-notedetail-background);"
+>
   {#if isEmptyObject($selectedNote)}
     <div class="relative w-full h-full flex items-center justify-center">
       <h2 style="font-size: 18px; color: #525962">No Note Selected</h2>
@@ -45,7 +46,7 @@
       id="body-editor"
       class="block w-full h-full relative no-resize border-0 outline-none border-box bg-transparent"
       bind:value={$bodyText}
-      on:keydown={handleDebounceSave}
+      on:keyup={handleDebounceSave}
     />
   {/if}
 </div>

diff --git a/src/lib/StatusBar.svelte b/src/lib/StatusBar.svelte
@@ -17,20 +17,38 @@
 </script>
 
 <div
-  class="px-2 flex items-center absolute w-full flex-grow-0"
-  style="font-size: 12px; height: 35px; background: var(--app-statusbar-background); bottom: 0; left: 0; color: #606060; border-top: 1px solid var(--app-statusbar-border);"
+  class="status-bar px-2 flex absolute w-full flex-grow-0 transition-all"
+  style="font-size: 12px;  background: var(--app-statusbar-background); bottom: 0; left: 0; color: #606060; border-top: 1px solid var(--app-statusbar-border);"
 >
   <div class="flex-grow">nvAux v0.1.5-20230719-032</div>
-  <!-- <div>
+  <div>
     <button on:click={() => $fullScreen = !$fullScreen} style="margin-right: 10px; color: #ed0178" class="bg-transparent flex items-center outline-none">
       {#if $fullScreen}
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>
       {:else}
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
       {/if}
     </button>
-  </div> -->
+  </div>
   {#if $showClock}
      <div>{format(time, 'hh:mm:ss a')}</div>
   {/if}
 </div>
+
+
+<style>
+ @media screen and (max-width: 768px) {
+    .status-bar {
+      height: 65px;
+      align-items: start;
+      padding-top: 10px;
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    .status-bar {
+      height: 35px;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/src/lib/store.js b/src/lib/store.js
@@ -13,7 +13,7 @@ import { schema } from './schema';
 
 const storedNoteListHeight = localStorage.getItem('noteListHeight') || 220;
 const storedFullScreen = JSON.parse(localStorage.getItem('fullScreen')) || false;
-const storedMaximumFullScreen = JSON.parse(localStorage.getItem('maximumFullScreen')) || false;
+const storedMaximumFullScreen = JSON.parse(localStorage.getItem('maximumFullScreen')) || true;
 const storedShowClock = JSON.parse(localStorage.getItem('showClock')) || "true";
 
 /**