Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

* Updated color picker interface

Browse Source 
* Updated note status bar
* Added fast filters
* Added pinned and archived notes options
* Added loading indicators to notes and loading of notes
* updated tag edit area
* Updated how search results are displayed
* Fixed bug with opening and closing two notes one after another
* Added mobile detection to global store
* Added a lot of style tweaks and UX tweaks
This commit is contained in:
Max G
2019-09-10 18:10:11 +00:00
parent dd0205a3c1
commit 7b77bd37f3
14 changed files with 620 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
client/src/pages/NotesPage.vue
View File

@@ -1,9 +1,10 @@
<template>
<div class="ui basic segment">
<div class="ui equal width grid">
<!-- <div class="ui row">{{ $store.getters.getIsUserOnMobile ? 'Mobile Device':'Normal Browser' }}</div> -->
<!-- mobile search menu -->
<div class="ui mobile only row">
<!-- Small screen new note button -->
@@ -40,12 +41,18 @@
<router-link class="ui basic button" to="/help">Help</router-link>
<div v-on:click="toggleNightMode" class="ui basic button">
Dark Theme:
<div v-on:click="toggleNightMode" class="ui basic icon button">
<i class="eye icon"></i>&nbsp;Dark Theme:
<span v-if="$store.getters.getIsNightMode">On</span>
<span v-else>Off</span>
</div>
<div v-on:click="toggleArchivedVisible" class="ui basic icon button">
<i class="archive icon"></i>&nbsp;Archived:
<span v-if="showArchived == 1">Visible</span>
<span v-else>Hidden</span>
</div>
<div class="ui right floated basic button"
data-tooltip="Log Out" data-position="left center"
v-on:click="destroyLoginToken"><i class="user icon"></i> {{username}}</div>
@@ -55,8 +62,10 @@
<div class="ui row">
<!-- tags display -->
<div class="ui two wide large screen only column">
<div class="ui basic fluid button" @click="reset"><i class="undo icon"></i>All Notes</div>
<div class="ui two wide large screen only column" v-if="activeNoteId1 == null && activeNoteId2 == null">
<div class="ui small basic fluid button" @click="reset">
<i class="undo icon"></i>Reset Filters
</div>
<div class="ui divider"></div>
<div class="ui section list">
<div class="item" v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
@@ -70,13 +79,24 @@
<!-- Note title cards -->
<div class="ui fourteen wide computer sixteen wide mobile column">
<h2>
Notes ({{notes.length}})
({{notes.length}}) <fast-filters />
</h2>
<div v-if="notes !== null" class="note-card-display-area" :class="{'one-column':(activeNoteId1 != null || activeNoteId2 != null )}">
<h3 v-if="searchTerm.length > 0 && notes.length == 0">No notes found. Check your spelling, try completing the word or using a different phrase.</h3>
<h3 v-if="searchTerm.length == 0 && notes.length == 0">Create your first note. Click the "New Note" button.</h3>
<div v-if="working"><div class="ui active inline loader"></div> Working...</div>
<div v-if="notes !== null && !working"
class="note-card-display-area"
:class="{'one-column':(activeNoteId1 != null || activeNoteId2 != null )}
">
<note-title-display-card
v-for="note in notes"
:onClick="openNote"
:data="note"
:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
:key="note.id + note.color + note.note_highlights.length + note.attachment_highlights.length + ' -' + note.tag_highlights.length + '-' +note.title.length + '-' +note.subtext.length"
/>
</div>
@@ -101,6 +121,7 @@
components: {
'input-notes': require('@/components/NoteInputPanel.vue').default,
'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
'fast-filters': require('@/components/FastFilters.vue').default,
},
data () {
return {
@@ -111,6 +132,9 @@
searchTags: [],
notes: [],
searchDebounce: null,
fastFilters: {},
showArchived: 0,
working: false,
//Currently open notes in app
activeNoteId1: null,
@@ -131,6 +155,18 @@
this.$bus.$on('note_deleted', () => {
this.search()
})
this.$bus.$on('update_fast_filters', newFilter => {
this.fastFilters = newFilter
this.search()
})
//Mount notes on load if note ID is set
if(this.$route.params && this.$route.params.id){
const id = this.$route.params.id
console.log('About to load note ', id)
this.openNote(id)
}
},
mounted() {
@@ -150,6 +186,7 @@
if(this.activeNoteId1 == null && this.activeNoteId2 == null){
this.activeNoteId1 = id
this.activeNote1Position = 0 //Middel of page
this.$router.push('/notes/open/'+this.activeNoteId1)
return
}
//2 notes open
@@ -159,6 +196,14 @@
this.activeNote2Position = 2 //Left side of page
return
}
//2 notes open
if(this.activeNoteId2 != null && this.activeNoteId1 == null){
this.activeNoteId1 = id
this.activeNote1Position = 2 //Right side of page
this.activeNote2Position = 1 //Left side of page
return
}
},
closeNote(position){
//One note open, close that note
@@ -174,10 +219,12 @@
this.activeNoteId2 = null
}
this.$router.push('/notes')
this.activeNote1Position = 0
this.activeNote2Position = 0
this.search()
this.search(false)
},
toggleTagFilter(tagId){
@@ -189,21 +236,33 @@
this.search()
},
search(){
search(showLoading = true){
//Add archived to fast filters
this.fastFilters['archived'] = 0
if(this.showArchived == 1){
this.fastFilters['archived'] = 1
}
let postData = {
searchQuery: this.searchTerm,
searchTags: this.searchTags
searchTags: this.searchTags,
fastFilters: this.fastFilters,
}
if(showLoading){
this.working = true
}
//Perform search
let vm = this
axios.post('/api/note/search', postData).
then(response => {
console.log('Notes and Tags')
console.log(response.data)
vm.commonTags = response.data.tags
vm.notes = response.data.notes
vm.highlights = response.data.highlights
this.working = false
})
},
searchKeyUp(){
@@ -234,6 +293,8 @@
reset(){
this.searchTerm = ''
this.searchTags = []
this.fastFilters = {}
this.$bus.$emit('reset_fast_filters')
this.search()
},
destroyLoginToken() {
@@ -242,6 +303,14 @@
},
toggleNightMode(){
this.$store.commit('toggleNightMode')
},
toggleArchivedVisible(){
if(this.showArchived == 0){
this.showArchived = 1
} else {
this.showArchived = 0
}
this.search()
}
}
}