From 1be7efaff7666eb466e3d7d38cd7de2bad9c1c9d Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Fri, 25 Feb 2022 01:17:49 +0100
Subject: [PATCH] Change notes to canvas instead of own page;

---
 src/App.vue         |  3 ++
 src/router/index.js |  6 ----
 src/views/Menu.vue  | 17 +++++-----
 src/views/Notes.vue | 83 +++++++++++++++++++++++++--------------------
 4 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ed8ef20..6bfb7c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@
     <TasksForTracker/>
     <Tasks/>
     <History/>
+    <Notes/>
     <Settings/>
 </template>
 
@@ -27,10 +28,12 @@ import HistoryForTracker from "./views/HistoryForTracker";
 import CustomBookForTracker from "./views/CustomBookForTracker";
 import Settings from "./views/Settings";
 import Tasks from "./views/Tasks";
+import Notes from "./views/Notes";
 
 export default {
     el: '#root',
     components: {
+        Notes,
         Tasks,
         Settings,
         CustomBookForTracker,
diff --git a/src/router/index.js b/src/router/index.js
index b2bf155..10b19aa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,6 @@ import Trackers from "../views/Trackers";
 import Settings from "../views/Settings";
 import TrackersDetail from "../views/TrackersDetail";
 import Archive from "../views/Archive";
-import Notes from "../views/Notes";
 
 Array.prototype.pushToBeginning = function (toPush) {
   return this.unshift.apply(this, [toPush]);
@@ -25,11 +24,6 @@ const routes = [
     name: 'Archive',
     component: Archive
   },
-  {
-    path: '/notes',
-    name: 'Notes',
-    component: Notes
-  },
   {
     path: '/settings',
     name: 'Settings',
diff --git a/src/views/Menu.vue b/src/views/Menu.vue
index f269f83..f6dc30e 100644
--- a/src/views/Menu.vue
+++ b/src/views/Menu.vue
@@ -46,14 +46,15 @@
             </router-link>
         </div>
         <div class="left-menu-item">
-            <router-link to="/notes"
-                         type="button"
-                         class="btn btn-warning bottom-menu-item"
-                         style="background-color: #ffea77;"
-                         data-bs-placement="left"
-                         title="Notizen">
+            <a type="button"
+               class="btn btn-info text-light bottom-menu-item"
+               style="background-color: #ffea77;"
+               data-bs-toggle="offcanvas"
+               data-bs-target="#notesCanvas"
+               data-bs-placement="top"
+               title="Notizen">
                 <i class="fas fa-pen"></i>
-            </router-link>
+            </a>
         </div>
         <div class="left-menu-item" v-if="($store.state.trackers.length + $store.state.archive.length) > 0">
             <a type="button"
@@ -122,7 +123,7 @@ export default {
     margin-bottom: 1em;
 }
 
-.fas, .far {
+.fas {
     text-shadow: 1px 1px grey;
 }
 
diff --git a/src/views/Notes.vue b/src/views/Notes.vue
index 489fd26..24fdbd5 100644
--- a/src/views/Notes.vue
+++ b/src/views/Notes.vue
@@ -1,22 +1,23 @@
 <template>
-    <div class="row">
-        <div class="col-sm-12">
+    <div class="offcanvas offcanvas-end" id="notesCanvas"
+         aria-hidden="true">
+        <div class="offcanvas-header">
+            <h5><i class="fa fa-pen"></i> Notizen</h5>
             <div class="float-end">
                 <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
             </div>
-            <h5><i class="fa fa-pen"></i> Notizen</h5>
         </div>
-
-        <div class="col-sm-12" v-if="$store.state.notes.length > 0">
-            <a href="javascript:"
-               v-if="colorToFilter !== ''"
-               v-on:click="colorToFilter = ''"
-               class="color-change-button disable-filter-button"
-               :style="'background-color: '+colorToFilter">
-                Filter aus
-            </a>
-            <span v-for="color in noteColors"
-                  v-bind:key="color">
+        <div class="filter-wrapper">
+            <div v-if="$store.state.notes.length > 0">
+                <a href="javascript:"
+                   v-if="colorToFilter !== ''"
+                   v-on:click="colorToFilter = ''"
+                   class="color-change-button disable-filter-button"
+                   :style="'background-color: '+colorToFilter">
+                    Filter aus
+                </a>
+                <span v-for="color in noteColors"
+                      v-bind:key="color">
                     <a href="javascript:"
                        v-if="colorToFilter !== color"
                        v-on:click="colorToFilter = color"
@@ -25,32 +26,38 @@
                         <i class="fas fa-filter filter-icon"></i>
                     </a>
             </span>
+            </div>
         </div>
-
-        <div id="note-container">
-            <span v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
-                <div class="col-lg-4 col-md-6" v-if="colorToFilter === '' || note.color === colorToFilter">
-                    <div class="card">
-                        <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
-                            <textarea v-model="note.body" spellcheck="false" @keydown="this.$store.commit('saveNotes')"></textarea>
-                            <div class="color-changer">
-                            <span v-for="color in noteColors"
-                                  v-bind:key="color">
-                                <span href="javascript:"
-                                      @click="changeColor(note, color);"
-                                      class="color-change-button"
-                                      v-if="color !== note.color"
-                                      :style="'background-color: ' + color">
-                                </span>
-                            </span>
-                            </div>
-                            <div class="float-end">
-                                <a href="javascript:" class="delete-button" @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a>
+        <div class="offcanvas-body">
+            <div class="row">
+                <div id="note-container">
+                    <template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
+                        <div class="col-lg-4 col-md-6" v-if="colorToFilter === '' || note.color === colorToFilter">
+                            <div class="card">
+                                <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
+                                    <textarea v-model="note.body" spellcheck="false"
+                                              @keydown="this.$store.commit('saveNotes')"></textarea>
+                                    <div class="color-changer">
+                                    <span v-for="color in noteColors"
+                                          v-bind:key="color">
+                                        <span href="javascript:"
+                                              @click="changeColor(note, color);"
+                                              class="color-change-button"
+                                              v-if="color !== note.color"
+                                              :style="'background-color: ' + color">
+                                        </span>
+                                    </span>
+                                    </div>
+                                    <div class="float-end">
+                                        <a href="javascript:" class="delete-button"
+                                           @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
+                    </template>
                 </div>
-            </span>
+            </div>
         </div>
     </div>
 </template>
@@ -159,4 +166,8 @@ textarea:focus {
     color: white;
     background-color: grey;
 }
+
+.filter-wrapper {
+    margin: 0.3em 1em;
+}
 </style>
\ No newline at end of file