7 changed files with 221 additions and 13 deletions
Binary file not shown.
@ -0,0 +1,125 @@
@@ -0,0 +1,125 @@
|
||||
<template> |
||||
<div class="row"> |
||||
<div class="col-sm-12"> |
||||
<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 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 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="note.color = 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> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import axios from "axios"; |
||||
|
||||
export default { |
||||
name: "Notes", |
||||
data() { |
||||
return { |
||||
noteColors: ['#ffea77', '#ee6352', '#59cd90', '#3fa7d6', '#fac05e', '#f79d84'] |
||||
} |
||||
}, |
||||
methods: { |
||||
createNote() { |
||||
let component = this; |
||||
|
||||
axios.get( |
||||
'https://api.quotable.io/random' |
||||
).then((response) => { |
||||
component.$store.commit('createNote', response.data.content + '\n - ' + response.data.author); |
||||
component.$store.commit('saveNotes'); |
||||
}).catch(() => { |
||||
component.$store.commit('createNote', ''); |
||||
component.$store.commit('saveNotes'); |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.card-body { |
||||
font-family: NotePaper, sans-serif; |
||||
} |
||||
|
||||
#note-container { |
||||
margin-top: 1em; |
||||
} |
||||
|
||||
textarea { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 0; |
||||
margin: 0; |
||||
background-color: transparent; |
||||
border: 0 solid transparent; |
||||
min-height: 10em; |
||||
} |
||||
|
||||
textarea:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
.color-changer { |
||||
position: absolute; |
||||
bottom: -0.8em; |
||||
z-index: 1000; |
||||
} |
||||
|
||||
.color-change-button { |
||||
margin-right: 0.2em; |
||||
background-color: red; |
||||
border-radius: 25px; |
||||
padding: 0.2em 0.7em; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.color-change-button:hover { |
||||
opacity: 0.9; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.delete-button { |
||||
position: absolute; |
||||
bottom: -1.5em; |
||||
right: 0.5em; |
||||
|
||||
text-align: right; |
||||
background-color: red; |
||||
border-radius: 25px; |
||||
z-index: 1000; |
||||
} |
||||
|
||||
.delete-button i { |
||||
margin: 1em; |
||||
color: black; |
||||
} |
||||
|
||||
.delete-button:hover * { |
||||
color: white; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue