Compare commits

..

3 Commits

Author SHA1 Message Date
Max G
282cbfe7bc Added note tags to main note edit display 2020-03-09 03:11:05 +00:00
Max G
b50aecdfca Creating new tags doesn't throw an error
fixes #22
2020-03-04 05:20:14 +00:00
Max G
98f4695739 Tweaked display of note cards, again
* Added an option to pin notes, on the main screen
2020-03-02 05:33:49 +00:00
7 changed files with 120 additions and 15 deletions

View File

@ -198,7 +198,7 @@
<div class="menu-section" v-if="loggedIn" data-tooltip="Click to log out" data-inverted="" data-position="right center"> <div class="menu-section" v-if="loggedIn" data-tooltip="Click to log out" data-inverted="" data-position="right center">
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="menu-item menu-button"> <div v-if="loggedIn" v-on:click="destroyLoginToken" class="menu-item menu-button">
<i class="user outline icon"></i>{{ucWords($store.getters.getUsername)}} <i v-if="userIcon" class="user outline icon"></i>{{ usernameDisplay }}
</div> </div>
</div> </div>
@ -225,6 +225,7 @@
mobile: false, mobile: false,
disableNewNote: false, disableNewNote: false,
menuOpen: true, menuOpen: true,
userIcon: true,
} }
}, },
beforeCreate: function(){ beforeCreate: function(){
@ -246,7 +247,19 @@
loggedIn () { loggedIn () {
//Map logged in from state //Map logged in from state
return this.$store.getters.getLoggedIn return this.$store.getters.getLoggedIn
},
usernameDisplay() {
//Remove Emails from username, limit length to 16 chars
let name = this.$store.getters.getUsername
let splitName = name.split('@')
if(splitName.length > 1){
name = splitName.shift()
this.userIcon = false
} }
return this.ucWords(name.substring(0, 16))
},
}, },
methods: { methods: {
menuClicked(){ menuClicked(){

View File

@ -1,7 +1,7 @@
<template> <template>
<span> <span>
<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right"> <span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right">
<i class="grey trash alternate icon"></i> <i class="trash alternate icon"></i>
</span> </span>
<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="top right" data-inverted=""> <span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="top right" data-inverted="">
<i class="red trash alternate icon"></i> <i class="red trash alternate icon"></i>

View File

@ -144,7 +144,7 @@
//Enter - 13 - Execute addTag() function //Enter - 13 - Execute addTag() function
if(code == 13){ if(code == 13){
//If an item from list is selected, make that the text //If an item from list is selected, make that the text
if(this.selection > -1){ if(this.selection > -1 && this.suggestions[vm.selection]){
this.newTagInput = this.suggestions[vm.selection].text this.newTagInput = this.suggestions[vm.selection].text
} }
this.addTag() this.addTag()

View File

@ -61,12 +61,13 @@
<!-- Toolbar on the bottom --> <!-- Toolbar on the bottom -->
<div class="tool-bar" @click.self="cardClicked"> <div class="tool-bar" @click.self="cardClicked">
<div class="icon-bar">
<div class="icon-bar" @click="cardClicked">
<!-- {{$helpers.timeAgo(note.updated)}} --> <!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags"> <span v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span> <span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
</span> </span>
<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted=""> <span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
<i class="green pin icon"></i> <i class="green pin icon"></i>
</span> </span>
@ -74,7 +75,24 @@
<i class="green archive icon"></i> <i class="green archive icon"></i>
</span> </span>
<delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" /> <!-- :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" -->
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<!-- <span class="teeny-button" data-tooltip="Archive" data-inverted>
<i class="archive icon"></i>
</span> -->
<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
<i class="tags icon"></i>
</i>
<i class="teeny-button" data-tooltip="Pin" data-inverted v-on:click="pinNote">
<i class="pin icon"></i>
</i>
<delete-button class="teeny-button" :note-id="note.id" />
</span>
</div> </div>
<div v-if="getThumbs.length > 0"> <div v-if="getThumbs.length > 0">
@ -85,18 +103,31 @@
</div> </div>
<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)">
<div class="ui basic segment">
<note-tag-edit :noteId="note.id" :key="'display-tags-for-note-'+note.id"/>
</div> </div>
</side-slide-menu>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios'
export default { export default {
name: 'NoteTitleDisplayCard', name: 'NoteTitleDisplayCard',
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ], props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
components: { components: {
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default, 'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
'side-slide-menu': require('@/components/SideSlideMenuComponent.vue').default,
}, },
methods:{ methods:{
cardClicked(){ cardClicked(){
@ -123,6 +154,22 @@
openEditAttachment(){ openEditAttachment(){
this.$router.push('/attachments/note/'+this.note.id) this.$router.push('/attachments/note/'+this.note.id)
}, },
pinNote(){
let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
axios.post('/api/note/setpinned', postData)
.then(data => {
this.$bus.$emit('update_single_note', this.note.id)
})
},
toggleTags(state){
this.showTagSlideMenu = state
if(state == false){
this.$bus.$emit('update_single_note', this.note.id)
}
},
}, },
data () { data () {
return { return {
@ -132,6 +179,7 @@
noteIcon: null, noteIcon: null,
iconColor: null, iconColor: null,
beenClicked: false, beenClicked: false,
showTagSlideMenu: false,
} }
}, },
computed: { computed: {
@ -190,6 +238,18 @@
</script> </script>
<style type="text/css"> <style type="text/css">
.teeny-button {
border: 1px solid var(--border_color);
border-radius: 5px;
padding: 0px 0px 0px 4px;
text-align: center;
margin: 0 0 0 5px;
display: inline-block;
min-width: 30px;
color: var(--text_color);
background-color: var(--background_color);
}
/*Strict font sizes for card display*/ /*Strict font sizes for card display*/
.small-text, .small-text > p, .small-text > h1, .small-text > h2 { .small-text, .small-text > p, .small-text > h1, .small-text > h2 {
/*font-size: 1.0em !important;*/ /*font-size: 1.0em !important;*/
@ -198,10 +258,12 @@
.small-text > p, , .small-text > h1, .small-text > h2 { .small-text > p, , .small-text > h1, .small-text > h2 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.big-text, .big-text > p, .big-text > h1, .big-text > h2 { .big-text > p:first-child,
.big-text > h1, .big-text > h2 {
/*font-size: 1.3em !important;*/ /*font-size: 1.3em !important;*/
font-size: 17px !important; font-size: 17px !important;
font-weight: bold; font-weight: bold;
margin-bottom: 0.5em;
} }
.big-text > p, .big-text > h1, .big-text > h2 { .big-text > p, .big-text > h1, .big-text > h2 {
margin-bottom: 0.3em; margin-bottom: 0.3em;
@ -269,14 +331,15 @@
font-size: 0.7em; font-size: 0.7em;
padding: 5px 5px; padding: 5px 5px;
border: 1px solid var(--border_color); border: 1px solid var(--border_color);
margin: 5px 3px 0 0; margin: 0 3px 5px 0;
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
max-width: 100px; max-width: 175px;
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
line-height: 0.8em; line-height: 0.8em;
text-overflow: ellipsis; text-overflow: ellipsis;
float: left;
} }
.tiny-thumb-box { .tiny-thumb-box {
max-height: 70px; max-height: 70px;

View File

@ -69,7 +69,7 @@
<div class="sixteen wide column"> <div class="sixteen wide column">
<h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0"> <h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0">
No Notes Yet. Create one when you feel ready. No Notes Yet. Thats ok. Create one when you feel ready.
</h3> </h3>
<!-- Go to one wide column, do not do this on mobile interface --> <!-- Go to one wide column, do not do this on mobile interface -->
@ -205,11 +205,15 @@
if(modified){ if(modified){
this.updateSingleNote(noteId) this.updateSingleNote(noteId)
} }
})
this.$bus.$on('update_single_note', (noteId) => {
this.updateSingleNote(noteId)
}) })
this.$bus.$on('note_deleted', (noteId) => { this.$bus.$on('note_deleted', (noteId) => {
//Remove deleted note from set, its deleted //Remove deleted note from set, its deleted
this.fetchUserTags()
Object.keys(this.noteSections).forEach( key => { Object.keys(this.noteSections).forEach( key => {
this.noteSections[key].forEach( (note, index) => { this.noteSections[key].forEach( (note, index) => {
if(note.id == noteId){ if(note.id == noteId){
@ -460,7 +464,7 @@
//Don't move notes that were not changed //Don't move notes that were not changed
if(note.updated == newNote.updated){ if(note.updated == newNote.updated){
return // return
} }
//Compare note tags, if they changed, reload tags //Compare note tags, if they changed, reload tags

View File

@ -202,6 +202,21 @@ Note.update = (io, userId, noteId, noteText, color, pinned, archived) => {
}) })
} }
Note.setPinned = (userId, noteId, pinnedBoolean) => {
return new Promise((resolve, reject) => {
const pinned = pinnedBoolean ? 1:0
//Update other note attributes
return db.promise()
.query('UPDATE note SET pinned = ? WHERE id = ? AND user_id = ? LIMIT 1',
[pinned, noteId, userId])
.then((rows, fields) => {
resolve(true)
})
})
}
// //
// Delete a note and all its remaining parts // Delete a note and all its remaining parts
// //

View File

@ -62,6 +62,16 @@ router.post('/difftext', function (req, res) {
}) })
}) })
//
// Update single note attributes
//
router.post('/setpinned', function (req, res) {
Notes.setPinned(userId, req.body.noteId, req.body.pinned)
.then( results => {
res.send(results)
})
})
// //
// Share Note Actions // Share Note Actions
// //