save point

matterofabstract · Jul 19, 2023 · bb8acc4 · bb8acc4
1 parent 52cf723
commit bb8acc4
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,8 @@
     <meta name="theme-color" content="#181a1c" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <link rel="manifest" href='data:application/manifest+json,{ "name": "nvAux", "short_name": "nvAux", "description": "the note-taking app for creative professionals"}' />
+
     <link
       rel="icon"
       type="image/svg+xml"

diff --git a/src/App.svelte b/src/App.svelte
@@ -17,7 +17,7 @@
   {/if}
   <main
     class="{$fullScreen ? 'fullscreen' : 'windowed'} relative overflow-hidden flex flex-col transition-all"
-    style="{$fullScreen ? $maximumFullScreen ? 'height: 100%; width: 100%;' : 'height: calc(100vh - 8px); width: calc(100vw - 8px); border-radius: 8px;' : ''} background-color: #181a1c;"
+    style="{$fullScreen ? $maximumFullScreen ? 'height: 100%; width: 100%;' : 'height: calc(100vh - 8px); width: calc(100vw - 8px); border-radius: 8px;' : ''} background-color: var(--app-background);"
   >
     <OmniBar />
     <NoteList />

diff --git a/src/lib/NoteDetail.svelte b/src/lib/NoteDetail.svelte
@@ -3,18 +3,20 @@
   import { onMount } from 'svelte';
   import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
-  import { selectedNote, bodyText } from './store';
+  import { db, selectedNote, bodyText } from './store';
 
   import { debounce } from '../utils/debounce';
   import { isEmptyObject } from '../utils/isEmptyObject';
 
   import Settings from './Settings.svelte';
 
   let innerHeight;
+  let db$;
 
-  onMount(() => {
+  onMount(async () => {
     addRxPlugin(RxDBUpdatePlugin);
-    if ($selectedNote.body) $bodyText = $selectedNote.body;
+    db$ = await db();
+    db$.notes.findOne($selectedNote.guid).exec();
   });
 
   const handleDebounceSave = debounce(() => !isEmptyObject($selectedNote) && updateNote(), 500);
@@ -31,7 +33,7 @@
 
 <svelte:window bind:innerHeight />
 
-<div class="relative overflow-hidden h-full overflow-y-auto" style="margin-bottom: 35px;">
+<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>

diff --git a/src/lib/NoteList.svelte b/src/lib/NoteList.svelte
@@ -68,7 +68,7 @@
   id="noteList"
   on:mousedown={() => (isMouseDown = true)}
   on:mouseup={() => (isMouseDown = false)}
-  style="height: {$noteListHeight}px"
+  style="height: {$noteListHeight}px;"
 >
   {#await noteList}
     Loading Notes...
@@ -110,7 +110,7 @@
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    background-color: #1c1f21;
+    background-color: var(--app-omni-background);
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
   }
@@ -127,10 +127,10 @@
     color: rgb(205, 205, 205);
   }
   li:nth-child(odd) {
-    background: #2b2e31;
+    background: var(--app-notelist-odd-background);
   }
   li:nth-child(even) {
-    background: #222426;
+    background: var(--app-notelist-even-background);
   }
   .meta {
     color: #43484f;

diff --git a/src/lib/OmniBar.svelte b/src/lib/OmniBar.svelte
@@ -43,7 +43,7 @@
 
 <div
   class="omnibar flex items-center border-box"
-  style="background-color: #181a1c; height: 42px; padding-left: 10px;"
+  style="background-color: var(--app-omni-background); height: 42px; padding-left: 10px;"
 >
   <div class="input-wrapper flex-grow flex items-center">
     <input

diff --git a/src/lib/ResizeHandle.svelte b/src/lib/ResizeHandle.svelte
@@ -1,31 +1,43 @@
 <script>
   import { noteListHeight } from './store';
-  import mousePosition from '../utils/mousePosition';
 
   let dragging = false;
+  let start, initial = null;
+  let y;
 
-  const startResize = () => (dragging = true);
-  const stopResize = () => (dragging = false);
+  $: height = 100;
 
-  const handleResize = () => {
+  // const startResize = () => (dragging = true);
+  const startResize = (type, event) => {
+    event.preventDefault();
+    dragging = true;
+    start = event.pageY;
+    initial = { y, height };
+  };
+
+  // const stopResize = () => (dragging = false);
+  const stopResize = () => {
+    dragging = false;
+    start = null;
+    initial = null;
+  };
+
+  const handleResize = (event) => {
+    event.preventDefault();
     if (!dragging) return;
-    $noteListHeight = $mousePosition.y >= 42 && $mousePosition.y - 42;
-    // TODO now check for page size and never allow the resize bar to go past the floor!
+    const delta = start - event.pageY;
+    height = initial.height - delta;
+    $noteListHeight = height;
     return;
   };
 </script>
 
-<svelte:window
-  on:mouseup={stopResize}
-  on:mousemove={handleResize}
-  on:touchend={stopResize}
-  on:touchmove={handleResize}
-/>
+<svelte:window on:mouseup={stopResize} on:mousemove={handleResize} on:mouseup={stopResize} />
 
 <div
-  on:mousedown={startResize}
-  on:touchstart={startResize}
+  on:mousedown={startResize.bind(this, 'left')}
   class="w-full resize-bar select-none row-resize h-[10px]"
+  style="background: var(--app-notedetail-background) * 20%;"
   role="button"
   tabindex="-1"
 />
diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { db, maximumFullScreen } from './store';
+  import { db, maximumFullScreen, showClock } from './store';
 
   import DownloadNotesZip from './DownloadNotesZip.svelte';
   import ImportNotesZip from './ImportNotesZip.svelte';
@@ -14,8 +14,8 @@
   };
 </script>
 
-<div class="text-white h-full" style="margin-bottom: 100px; padding: 0px 15px;">
-  <h2 class="font-bold">nvAux Settings</h2>
+<div class="text-white h-full" style="margin-bottom: 100px; padding: 0px 15px; margin: 0;">
+  <span class="font-bold">nvAux Settings</span>
   <div class="relative">
     {#await db().notes.find().exec()}
       <p>...waiting</p>
@@ -28,7 +28,10 @@
     <h3 class="font-bold" style="margin-top: 25px;">General Preferences</h3>
 
     <div>
-      <label for=""><input type="checkbox" bind:checked={$maximumFullScreen} /> Maximum Fullscreen</label>
+      <label for="showClock"><input id="showClock" type="checkbox" bind:checked={$showClock} /> Show Clock</label>
+    </div>
+    <div>
+      <label for="maxfullscreen"><input id="maxfullscreen" type="checkbox" bind:checked={$maximumFullScreen} /> Maximum Fullscreen</label>
     </div>
 
     <h3 class="font-bold" style="margin-top: 25px;">Import/Export Notes</h3>

diff --git a/src/lib/StatusBar.svelte b/src/lib/StatusBar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { format } from 'date-fns';
-  import { fullScreen } from './store';
+  import { fullScreen, showClock } from './store';
 
   let time = new Date();
 
@@ -18,7 +18,7 @@
 
 <div
   class="px-2 flex items-center absolute w-full flex-grow-0"
-  style="font-size: 12px; height: 35px; background: #151719; bottom: 0; left: 0; color: #606060; border-top: 1px solid #1d1e20;"
+  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);"
 >
   <div class="flex-grow">nvAux v0.1.5-20230719-001</div>
   <div>
@@ -30,5 +30,7 @@
       {/if}
     </button>
   </div>
-  <div>{format(time, 'hh:mm:ss a')}</div>
+  {#if $showClock}
+     <div>{format(time, 'hh:mm:ss a')}</div>
+  {/if}
 </div>
diff --git a/src/lib/store.js b/src/lib/store.js
@@ -11,9 +11,10 @@ import { schema } from './schema';
  * State that persists to localStorage =========================================
  */
 
-const storedNoteListHeight = localStorage.getItem('noteListHeight') || 100;
+const storedNoteListHeight = localStorage.getItem('noteListHeight') || 220;
 const storedFullScreen = JSON.parse(localStorage.getItem('fullScreen')) || false;
 const storedMaximumFullScreen = JSON.parse(localStorage.getItem('maximumFullScreen')) || false;
+const storedShowClock = JSON.parse(localStorage.getItem('showClock')) || "true";
 
 /**
  * RxDB ************************************************************************
@@ -34,10 +35,12 @@ const _create = async () => {
 
   const notes = await db.notes.find().exec();
 
+  let welcomeNote = await db.notes.findOne('11111111-1111-1111-1111-111111111111').exec();
+
   setTimeout(() => {
-    if (notes.length === 0) {
+    if (notes.length === 0 && !welcomeNote) {
       db.notes.insert({
-        guid: uuidv4(),
+        guid: '11111111-1111-1111-1111-111111111111',
         name: '🚀 Welcome to nvAux!',
         body: `Welcome and thank you for taking interest in nvAux!
 
@@ -85,6 +88,8 @@ export const selectedNote = writable({});
 export const bodyText = writable('');
 export const fullScreen = writable(storedFullScreen);
 export const maximumFullScreen = writable(storedMaximumFullScreen);
+export const showClock = writable(storedShowClock);
+
 
 omniText.subscribe(v => {
   if (v === '') {
@@ -98,3 +103,4 @@ noteListHeight.subscribe(v => localStorage.setItem('noteListHeight', v.toString(
 
 fullScreen.subscribe(v => localStorage.setItem('fullScreen', v));
 maximumFullScreen.subscribe(v => localStorage.setItem('maximumFullScreen', v));
+showClock.subscribe(v => localStorage.setItem('showClock', v));
diff --git a/src/lib/style.css b/src/lib/style.css
@@ -69,42 +69,61 @@ html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-s
 
 
 body {
-	background: linear-gradient(-45deg, #714436, #72354d, #334169, #4c746a);
+	background: linear-gradient(-45deg, #ea8060, #e4578d, #a1d0e1, #70e1c7);
 	background-size: 400% 400%;
 	animation: gradient 40s ease-in-out infinite;
 	height: 100vh;
-}
-
-@keyframes gradient {
-	0% {
-		background-position: 0% 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
-	100% {
-		background-position: 0% 50%;
-	}
+	/* background: var(--background); */
+	/* background: var(--background-gradient); */
+	color: var(--text-color);
+	/* transition: background-color 0.3s, color 0.3s; */
 }
 
 /* Light/Dark Mode Support */
 :root {
 	/* --background-color: white; */
-	--background-gradient: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+	/* --background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
 	--text-color: black;
+	--app-background: #eaeaea;
+	--app-omni-background: #d8d8d8;
+	--app-statusbar-background: #d1d1d1;
+	--app-statusbar-border: #c4c4c4;
+	--app-notedetail-background: #d9dde1;
+	--app-notelist-odd-background: #e9e9e9;
+	--app-notelist-even-background: #e3e3e3;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
 		/* --background-color: black; */
-		--background-gradient: linear-gradient(-45deg, #813822, #7e183f, #125f7e, #0f755e);
+		/* --background: linear-gradient(-45deg, #813822, #7e183f, #125f7e, #0f755e); */
 		--text-color: white;
+		--app-background: #181a1c;
+		--app-omni-background: #181a1c;
+		--app-statusbar-background: #151719;
+		--app-statusbar-border: #c4c4c4;
+		--app-statusbar-border: #24272a;
+		--app-notedetail-background: #1c1f21;
+		--app-notelist-odd-background: #222426;
+		--app-notelist-even-background: #2c2e31;
+	}
+
+	body {
+		background: linear-gradient(-45deg, #714436, #72354d, #334169, #4c746a);
+		background-size: 400% 400%;
+		animation: gradient 40s ease-in-out infinite;
+		height: 100vh;
 	}
 }
 
-body {
-	/* background-color: var(--background-color); */
-	/* background: var(--background-gradient); */
-	color: var(--text-color);
-	/* transition: background-color 0.3s, color 0.3s; */
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
 }