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

Add filter for colors;

modulation
Nero Ignis 4 years ago
parent
287a335f21
commit
c636bb6f82
1 changed files with 45 additions and 14 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. 59
      src/views/Notes.vue

59
src/views/Notes.vue
Unescape View File

@ -2,29 +2,49 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="float-end"> <div class="float-end">
<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"
class="color-change-button"
:style="'background-color: ' + color">
<i class="fas fa-filter filter-icon"></i>
</a>
</span>
&nbsp;
<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> <h5><i class="fa fa-pen"></i> Notizen</h5>
</div> </div>
<div id="note-container" class="row"> <div id="note-container" class="row">
<div class="col-lg-4 col-md-6" v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex"> <div 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" @keydown="this.$store.commit('saveNotes')"></textarea>
<div class="color-changer">
<span v-for="color in noteColors" <span v-for="color in noteColors"
v-bind:key="color"> v-bind:key="color">
<span href="javascript:" <span href="javascript:"
@click="changeColor(note, color);" @click="changeColor(note, color);"
class="color-change-button" class="color-change-button"
v-if="color !== note.color" v-if="color !== note.color"
:style="'background-color: ' + color"> :style="'background-color: ' + color">
</span> </span>
</span> </span>
</div> </div>
<div class="float-end"> <div class="float-end">
<a href="javascript:" class="delete-button" @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a> <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>
@ -40,7 +60,8 @@ export default {
name: "Notes", name: "Notes",
data() { data() {
return { return {
noteColors: ['#ffea77', '#ee6352', '#59cd90', '#3fa7d6', '#fac05e', '#f79d84'] noteColors: ['#ffea77', '#ee6352', '#59cd90', '#3fa7d6', '#fac05e', '#f79d84'],
colorToFilter: ''
} }
}, },
methods: { methods: {
@ -126,4 +147,14 @@ textarea:focus {
.delete-button:hover * { .delete-button:hover * {
color: white; color: white;
} }
.filter-icon {
color: white;
font-size: 0.7em;
}
.disable-filter-button {
color: white;
background-color: grey;
}
</style> </style>
Write Preview
Loading…
Cancel
Save