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

make notes own page; grid for notes; show version on app;

chronos
stingl 3 years ago
parent
d6053fb205
commit
4a5f06cc4a
5 changed files with 86 additions and 73 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. 17
      src/App.vue
  2. 6
      src/router/index.js
  3. 15
      src/views/Menu.vue
  4. 119
      src/views/Notes.vue

17
src/App.vue
Unescape View File

@ -4,6 +4,9 @@
<Menu/> <Menu/>
<div class="col" id="page-wrapper"> <div class="col" id="page-wrapper">
<router-view/> <router-view/>
<span id="version">
v{{ version }}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -13,7 +16,6 @@
<TasksForTracker/> <TasksForTracker/>
<Tasks/> <Tasks/>
<History/> <History/>
<Notes/>
<Settings/> <Settings/>
</template> </template>
@ -28,12 +30,10 @@ 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,
@ -44,6 +44,7 @@ export default {
}, },
data() { data() {
return { return {
version: '0.8.23.3',
sounds: { sounds: {
bad: [ bad: [
'alert', 'alert',
@ -56,7 +57,7 @@ export default {
theme: 'materia', theme: 'materia',
customBookingValue: '', customBookingValue: '',
customDateForPastDays: '', customDateForPastDays: '',
newTaskInput: '' newTaskInput: '',
} }
}, },
mounted() { mounted() {
@ -231,4 +232,12 @@ export default {
#page-wrapper { #page-wrapper {
padding-top: 15px; padding-top: 15px;
} }
#version {
position: fixed;
bottom: 1em;
right: 2em;
z-index: -1;
color: lightgrey;
}
</style> </style>

6
src/router/index.js
Unescape View File

@ -3,6 +3,7 @@ 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]);
@ -24,6 +25,11 @@ const routes = [
name: 'Archive', name: 'Archive',
component: Archive component: Archive
}, },
{
path: '/notes',
name: 'Notes',
component: Notes
},
{ {
path: '/settings', path: '/settings',
name: 'Settings', name: 'Settings',

15
src/views/Menu.vue
Unescape View File

@ -46,15 +46,14 @@
</router-link> </router-link>
</div> </div>
<div class="left-menu-item"> <div class="left-menu-item">
<a type="button" <router-link to="/notes"
class="btn btn-info text-light bottom-menu-item" type="button"
style="background-color: #ffea77;" class="btn btn-info text-light bottom-menu-item"
data-bs-toggle="offcanvas" style="background-color: #ffea77;"
data-bs-target="#notesCanvas" data-bs-placement="left"
data-bs-placement="top" title="Notizen">
title="Notizen">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</a> </router-link>
</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"

119
src/views/Notes.vue
Unescape View File

@ -1,73 +1,66 @@
<template> <template>
<div class="offcanvas offcanvas-end" id="notesCanvas" <div class="row">
aria-hidden="true"> <div class="col-md-12">
<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> <div v-if="$store.state.notes.length > 0" class="filter-wrapper">
</div>
</div>
<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:" <a href="javascript:"
v-if="colorToFilter !== color" v-if="colorToFilter !== ''"
v-on:click="colorToFilter = color" v-on:click="colorToFilter = ''"
class="color-change-button" class="color-change-button disable-filter-button"
:style="'background-color: ' + color"> :style="'background-color: '+colorToFilter">
<i class="fas fa-filter filter-icon"></i> Filter aus
</a> </a>
</span> <span v-for="color in noteColors"
</div> v-bind:key="color">
</div>
<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 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>
</template>
<span v-if="colorToFilter !== '' && !notesExistInFilteredColor">
Keine Notizen mit gewählter Farbe vorhanden<br>
<a href="javascript:" <a href="javascript:"
class="color-change-button disable-filter-button" v-if="colorToFilter !== color"
:style="'background-color: '+colorToFilter" v-on:click="colorToFilter = color"
v-on:click="colorToFilter = ''"> class="color-change-button"
Filter ausschalten :style="'background-color: ' + color">
<i class="fas fa-filter filter-icon"></i>
</a> </a>
</span> </span>
</div> </div>
<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>
<template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
<div v-if="colorToFilter === '' || note.color === colorToFilter" class="col-md-3 col-lg-4 col-sm-2 card-box">
<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>
</template>
<span v-if="colorToFilter !== '' && !notesExistInFilteredColor">
Keine Notizen mit gewählter Farbe vorhanden<br>
<a href="javascript:"
class="color-change-button disable-filter-button"
:style="'background-color: '+colorToFilter"
v-on:click="colorToFilter = ''">
Filter ausschalten
</a>
</span>
</div> </div>
</template> </template>
@ -186,6 +179,12 @@ textarea:focus {
} }
.filter-wrapper { .filter-wrapper {
display: inline-block;
margin: 0.3em 1em; margin: 0.3em 1em;
} }
.card-box {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
</style> </style>
Write Preview
Loading…
Cancel
Save