1nicerOli
/
timetrack-router
1
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity
Browse Source

Change notes to canvas instead of own page;

modulation
Nero Ignis 3 years ago
parent
9ab4122bd6
commit
1be7efaff7
4 changed files with 59 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/App.vue
  2. 6
      src/router/index.js
  3. 17
      src/views/Menu.vue
  4. 83
      src/views/Notes.vue

3
src/App.vue
Unescape View File

@ -13,6 +13,7 @@
<TasksForTracker/> <TasksForTracker/>
<Tasks/> <Tasks/>
<History/> <History/>
<Notes/>
<Settings/> <Settings/>
</template> </template>
@ -27,10 +28,12 @@ import HistoryForTracker from "./views/HistoryForTracker";
import CustomBookForTracker from "./views/CustomBookForTracker"; import CustomBookForTracker from "./views/CustomBookForTracker";
import Settings from "./views/Settings"; import Settings from "./views/Settings";
import Tasks from "./views/Tasks"; import Tasks from "./views/Tasks";
import Notes from "./views/Notes";
export default { export default {
el: '#root', el: '#root',
components: { components: {
Notes,
Tasks, Tasks,
Settings, Settings,
CustomBookForTracker, CustomBookForTracker,

6
src/router/index.js
Unescape View File

@ -3,7 +3,6 @@ import Trackers from "../views/Trackers";
import Settings from "../views/Settings"; import Settings from "../views/Settings";
import TrackersDetail from "../views/TrackersDetail"; import TrackersDetail from "../views/TrackersDetail";
import Archive from "../views/Archive"; import Archive from "../views/Archive";
import Notes from "../views/Notes";
Array.prototype.pushToBeginning = function (toPush) { Array.prototype.pushToBeginning = function (toPush) {
return this.unshift.apply(this, [toPush]); return this.unshift.apply(this, [toPush]);
@ -25,11 +24,6 @@ const routes = [
name: 'Archive', name: 'Archive',
component: Archive component: Archive
}, },
{
path: '/notes',
name: 'Notes',
component: Notes
},
{ {
path: '/settings', path: '/settings',
name: 'Settings', name: 'Settings',

17
src/views/Menu.vue
Unescape View File

@ -46,14 +46,15 @@
</router-link> </router-link>
</div> </div>
<div class="left-menu-item"> <div class="left-menu-item">
<router-link to="/notes" <a type="button"
type="button" class="btn btn-info text-light bottom-menu-item"
class="btn btn-warning bottom-menu-item" style="background-color: #ffea77;"
style="background-color: #ffea77;" data-bs-toggle="offcanvas"
data-bs-placement="left" data-bs-target="#notesCanvas"
title="Notizen"> data-bs-placement="top"
title="Notizen">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</router-link> </a>
</div> </div>
<div class="left-menu-item" v-if="($store.state.trackers.length + $store.state.archive.length) > 0"> <div class="left-menu-item" v-if="($store.state.trackers.length + $store.state.archive.length) > 0">
<a type="button" <a type="button"
@ -122,7 +123,7 @@ export default {
margin-bottom: 1em; margin-bottom: 1em;
} }
.fas, .far { .fas {
text-shadow: 1px 1px grey; text-shadow: 1px 1px grey;
} }

83
src/views/Notes.vue
Unescape View File

@ -1,22 +1,23 @@
<template> <template>
<div class="row"> <div class="offcanvas offcanvas-end" id="notesCanvas"
<div class="col-sm-12"> aria-hidden="true">
<div class="offcanvas-header">
<h5><i class="fa fa-pen"></i> Notizen</h5>
<div class="float-end"> <div class="float-end">
<a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a> <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
</div> </div>
<h5><i class="fa fa-pen"></i> Notizen</h5>
</div> </div>
<div class="filter-wrapper">
<div class="col-sm-12" v-if="$store.state.notes.length > 0"> <div v-if="$store.state.notes.length > 0">
<a href="javascript:" <a href="javascript:"
v-if="colorToFilter !== ''" v-if="colorToFilter !== ''"
v-on:click="colorToFilter = ''" v-on:click="colorToFilter = ''"
class="color-change-button disable-filter-button" class="color-change-button disable-filter-button"
:style="'background-color: '+colorToFilter"> :style="'background-color: '+colorToFilter">
Filter aus Filter aus
</a> </a>
<span v-for="color in noteColors" <span v-for="color in noteColors"
v-bind:key="color"> v-bind:key="color">
<a href="javascript:" <a href="javascript:"
v-if="colorToFilter !== color" v-if="colorToFilter !== color"
v-on:click="colorToFilter = color" v-on:click="colorToFilter = color"
@ -25,32 +26,38 @@
<i class="fas fa-filter filter-icon"></i> <i class="fas fa-filter filter-icon"></i>
</a> </a>
</span> </span>
</div>
</div> </div>
<div class="offcanvas-body">
<div id="note-container"> <div class="row">
<span v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex"> <div id="note-container">
<div class="col-lg-4 col-md-6" v-if="colorToFilter === '' || note.color === colorToFilter"> <template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
<div class="card"> <div class="col-lg-4 col-md-6" v-if="colorToFilter === '' || note.color === colorToFilter">
<div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'"> <div class="card">
<textarea v-model="note.body" spellcheck="false" @keydown="this.$store.commit('saveNotes')"></textarea> <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
<div class="color-changer"> <textarea v-model="note.body" spellcheck="false"
<span v-for="color in noteColors" @keydown="this.$store.commit('saveNotes')"></textarea>
v-bind:key="color"> <div class="color-changer">
<span href="javascript:" <span v-for="color in noteColors"
@click="changeColor(note, color);" v-bind:key="color">
class="color-change-button" <span href="javascript:"
v-if="color !== note.color" @click="changeColor(note, color);"
:style="'background-color: ' + color"> class="color-change-button"
</span> v-if="color !== note.color"
</span> :style="'background-color: ' + color">
</div> </span>
<div class="float-end"> </span>
<a href="javascript:" class="delete-button" @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a> </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> </div>
</div> </template>
</div> </div>
</span> </div>
</div> </div>
</div> </div>
</template> </template>
@ -159,4 +166,8 @@ textarea:focus {
color: white; color: white;
background-color: grey; background-color: grey;
} }
.filter-wrapper {
margin: 0.3em 1em;
}
</style> </style>
Write Preview
Loading…
Cancel
Save