Changed UI, functionallity, added dynamic preview-editor sync

Aneksium · Jun 27, 2024 · 5db1990 · 5db1990
1 parent 8778896
commit 5db1990
Show file tree

Hide file tree

Showing 15 changed files with 692 additions and 275 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,5 @@
 <template>
   <app-underlay-vue/>
-  <div data-tauri-drag-region id="titlebar">
-    <div id="iconCont" data-tauri-drag-region>
-      <img data-tauri-drag-region id="icon" src="./assets/logo.png">
-    </div>
-    <span data-tauri-drag-region id="title">
-      {{ $route.params.board || 'NoteSphere' }}
-    </span>
-    <div id="windowBtnCont">
-      <button class="windowBtn" @click="minimize()">
-        <img src="./assets/btn-minimize.png">
-      </button>
-      <button class="windowBtn" @click="maximize()">
-        <img src="./assets/btn-maximize.png" :style="` display: ${ general.maximized ? 'none' : 'inherit' }`">
-        <img src="./assets/btn-unmaximize.png" :style="` display: ${ !general.maximized ? 'none' : 'inherit' }`">
-      </button>
-      <button class="windowBtn" datatype="close" @click="close()">
-        <img src="./assets/btn-close.png">
-      </button>
-    </div>
-  </div>
   <router-view/>
 </template>
 

diff --git a/src/assets/NoteSphere-text.png b/src/assets/NoteSphere-text.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/NotePreview/NotePreview.vue b/src/components/NotePreview/NotePreview.vue
@@ -1,14 +1,16 @@
 <template>
-    <button @click="openEditor()" class="notePrev" :class="{ 
-        yellow: color == 'yellow',
-        aqua: color == 'aqua',
-        pink: color == 'pink',
-        green: color == 'green',
-        grey: color == 'grey',
-    }">
-
-        <div class="prevTit" :style="{ fontSize: titleSize + 'px' }">{{ stateTitle }}</div>
-        <div class="prevDesc">{{ stateDesc }}</div>
+    <button @click="openEditor()" class="notePrev">
+        <div class="noteColor" :class="{ 
+            yellow: storeData.color == 'yellow',
+            aqua: storeData.color == 'aqua',
+            pink: storeData.color == 'pink',
+            green: storeData.color == 'green',
+            gray: storeData.color == 'gray',
+        }"></div>
+        <div class="noteContent">
+            <div class="prevTit" :style="{ fontSize: titleSize + 'px' }">{{ storeData.title }}</div>
+            <div class="prevDesc">{{ storeData.description }}</div>
+        </div>
     </button>
 </template>
 
@@ -45,21 +47,19 @@ export default defineComponent({
                 description: '',
                 color: ''
             },
-            stateTitle: '',
-            stateDesc: '',
-            titleSize: 50
+            titleSize: 30
         }
     },
 
     methods: {
         handleFontSize(title: string, description: string) {
-            this.stateTitle = title
-            if(title == '' && this.title == '') this.stateTitle = 'New Note'
-            this.stateDesc = description
-            if(title.length > 25) this.stateTitle = title.slice(0, 22).trimEnd() + '...'
-            if(description.length > 50) this.stateDesc = description.slice(0, 47) + '...'
-            if(this.stateTitle.length > 7) this.titleSize = 50 - (this.stateTitle.length + 7) / 2
-            if(this.stateTitle.length > 20) this.titleSize = 50 - (this.stateTitle.length + 10) / 2
+            this.storeData.title = title
+            if(title == '' && this.title == '') this.storeData.title = 'New Note'
+            this.storeData.description = description
+            this.titleSize = 30
+            if(title.length > 25) this.storeData.title = title.slice(0, 22).trimEnd() + '...'
+            if(description.length > 60) this.storeData.description = description.slice(0, 57) + '...'
+            if(this.storeData.title.length > 10) this.titleSize = 30 - (this.storeData.title.length + 10) / 2
         },
         openEditor() {
             if(localStorage.getItem(`${this.board}/${this.id}-title`)) return null
@@ -68,7 +68,8 @@ export default defineComponent({
             //     ?  `http://localhost:1420/#/edit/${this.board}/${this.id}`
             //     : `file://${__dirname}/index.html#/edit/${this.board}/${this.id}`
 
-            const win = new WebviewWindow(`editor-${this.board}/${this.id}`, { 
+            console.log(`editor-${this.board.replace(' ', '-')}/${this.id}`)
+            const win = new WebviewWindow(`editor-${this.board.replace(/\s/g, '-')}/${this.id}`, { 
                 url: `http://localhost:1420/#/edit/${this.board}/${this.id}`, 
                 minWidth: 500,
                 minHeight: 500,
@@ -80,29 +81,34 @@ export default defineComponent({
 
             win.once('tauri://created', () => { 
                 localStorage.setItem(`${this.board}/${this.id}-title`, this.note.title)
-                localStorage.setItem(`${this.board}/${this.id}-description`, this.note.content)
+                localStorage.setItem(`${this.board}/${this.id}-description`,  JSON.stringify({ content: Array.from(this.note.content).map(x => { return { id: x[0], data: x[1] } }) }))
+                localStorage.setItem(`${this.board}/${this.id}-color`, this.note.color)
+
                 win.setEffects({ effects: [Effect.Blur] })
                 window.addEventListener('storage', (e: StorageEvent) => {
-                    if(e.key?.startsWith(`${this.board}/${this.id}-title`)) this.handleFontSize(e.newValue!, this.stateDesc)
-                    if(e.key?.startsWith(`${this.board}/${this.id}-description`)) this.handleFontSize(this.stateTitle, e.newValue!)
+                    if(e.key?.startsWith(`${this.board}/${this.id}-title`)) this.handleFontSize(e.newValue!, this.storeData.description)
+                    if(e.key?.startsWith(`${this.board}/${this.id}-description`)) this.handleFontSize(this.storeData.title, JSON.parse(e.newValue!).content.map((x: { id: `h1-${number}` | `p-${number}`, data: string }) => x.data).join('\n'))
+                    if(e.key?.startsWith(`${this.board}/${this.id}-color`)) this.storeData.color = e.newValue as 'yellow' | 'aqua' | 'pink' | 'green' |'gray'
                 })
             })
             
             win.once('tauri://error', function(e: any) { console.log(e) })
             win.once('tauri://destroyed', () => { 
                 const note = boardManager.boards.get(this.board)?.notes.get(this.id)
                 note!.title = localStorage.getItem(`${this.board}/${this.id}-title`)!
-                note!.content = localStorage.getItem(`${this.board}/${this.id}-description`)!
-                note!.color = this.color as 'yellow' | 'aqua' | 'pink' | 'green'
+                JSON.parse(localStorage.getItem(`${this.board}/${this.id}-description`)!).content.forEach((x: { id: `h1-${number}` | `p-${number}`, data: string }) => this.note.content.set(x.id, x.data))
+                note!.color = this.storeData.color as 'yellow' | 'aqua' | 'pink' | 'green'
                 note!.save()
                 localStorage.removeItem(`${this.board}/${this.id}-title`)
                 localStorage.removeItem(`${this.board}/${this.id}-description`)
+                localStorage.removeItem(`${this.board}/${this.id}-color`)
             })
 
         }
     },
     mounted() {
         this.handleFontSize(this.title, this.description)
+        this.storeData.color = this.note.color
     }
 })
 </script>
diff --git a/src/components/NotePreview/styles.css b/src/components/NotePreview/styles.css
@@ -1,36 +1,54 @@
-@import url('https://fonts.googleapis.com/css2?family=Caveat:[email protected]&family=Inconsolata&display=swap');
-
 .notePrev {
     width: 13rem;
     height: 13rem;
-    box-shadow: black 10px 15px 10px;
-    border: none;
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: rgba(0, 0, 0, 0.75) 10px 10px 15px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-top: none;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    font-family: 'Inconsolata', monospace;
+    text-align: center;
+}
+
+.noteColor {
+    width: 13rem;
+    box-sizing: border-box;
+    height: 18px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.noteContent {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 4px;
+    gap: 1rem;
+    width: 100%;
+    height: 100%;
     box-sizing: border-box;
     padding: 1rem;
-    font-family: 'Noto Sans', sans-serif;
-    color: black;
-    text-decoration: none;
-    text-align: center;
-    border-radius: 2px;
 }
 
 .prevTit {
-    font-weight: bolder;
+    font-weight: normal;
     word-wrap: break-word;
     width: 100%;
-    font-family: "Caveat", cursive;
 }
 
 .prevDesc {
-    font-size: 22px;
+    font-weight: 200;
+    font-size: 18px;
     word-wrap: break-word;
     width: 100%;
-    font-family: "Caveat", cursive;
+    text-align: justify;
 }
 
 .yellow {
@@ -49,11 +67,12 @@
     background-color: rgb(0, 255, 60);
 }
 
-.grey {
+.gray {
     background-color: rgb(196, 196, 196);
 }
 
 .notePrev:hover {
-    background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
+    background: rgba(255, 255, 255, 0.1);
+    transition: background 200ms;
     cursor: pointer;
 }
diff --git a/src/components/WindowButtons/WindowButtons.vue b/src/components/WindowButtons/WindowButtons.vue
@@ -0,0 +1,45 @@
+<template>
+    <div data-tauri-drag-region id="container">
+        <div id="windowBtnCont">
+        <button class="windowBtn" @click="minimize()">
+            <img src="../../assets/btn-minimize.png">
+        </button>
+        <button class="windowBtn" @click="maximize()">
+            <img :src="!maximized ? '/src/assets/btn-maximize.png' : '/src/assets/btn-unmaximize.png'" >
+        </button>
+        <button class="windowBtn" datatype="close" @click="close()">
+            <img src="../../assets/btn-close.png">
+        </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    @import url("./styles.css");
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { window } from '@tauri-apps/api';
+
+export default defineComponent({
+    name: "WindowButtons",
+    data() {
+        return {
+            maximized: false
+        }
+    },
+    methods: {
+        minimize() {
+            window.getCurrent().minimize()
+        },
+        maximize() {
+            this.maximized = !this.maximized
+            window.getCurrent().toggleMaximize()
+        },
+        close() {
+            window.getCurrent().close()
+        }
+    }
+})
+</script>
diff --git a/src/components/WindowButtons/styles.css b/src/components/WindowButtons/styles.css
@@ -0,0 +1,38 @@
+#container {
+    width: 100vw;
+    height: 36px;
+    background: transparent;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    user-select: none;
+    z-index: 999;
+    position: fixed;
+}
+
+#windowBtnCont {
+    height: 100%;
+    width: fit-content
+}
+
+.windowBtn {
+    height: 100%;
+    width: 50px;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+}
+
+.windowBtn img {
+    height: 10px;
+    width: fit-content;
+}
+
+.windowBtn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.windowBtn[datatype="close"]:hover {
+    background-color: rgba(255, 0, 0, 0.5);
+}
diff --git a/src/routes/HomePage/HomePage.vue b/src/routes/HomePage/HomePage.vue