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

146
client/src/components/NoteInputPanel.vue
View File

@@ -5,6 +5,52 @@
:class="[{'size-down':(sizeDown == true)}, 'position-'+position ]"
:style="{'background-color':color, 'color':fontColor}"
>
<div v-if="loading" class="loading-note">
<div class="ui active dimmer">
<div class="ui text loader">{{loadingMessage}}...</div>
</div>
</div>
<div class="note-top-menu">
<div @click="close" class="ui button"><i class="green close icon"></i>Close (ESC)</div>
<div @click="onToggleFancyInput" class="ui button">
Fancy ({{fancyInput?'On':'Off'}})
</div>
<div @click="onTogglePinned" class="ui button">
<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'pinned':'not pinned'}}
</div>
<div @click="onToggleArchived" class="ui button">
<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'archived':'not archived'}}
</div>
<span class="relative" v-on:mouseover="showColorPicker = true" v-on:mouseleave="showColorPicker = false">
<span class="ui icon button">
<i class="paint brush icon"></i>
</span>
<span v-if="showColorPicker" class="color-picker">
<button @click="onChangeColor" class="ui icon white button"></button>
<button @click="onChangeColor" class="ui icon red button"></button>
<button @click="onChangeColor" class="ui icon orange button"></button>
<button @click="onChangeColor" class="ui icon yellow button"></button>
<button @click="onChangeColor" class="ui icon olive button"></button>
<button @click="onChangeColor" class="ui icon green button"></button>
<button @click="onChangeColor" class="ui icon teal button"></button>
<button @click="onChangeColor" class="ui icon blue button"></button>
<button @click="onChangeColor" class="ui icon violet button"></button>
<button @click="onChangeColor" class="ui icon purple button"></button>
<button @click="onChangeColor" class="ui icon pink button"></button>
<button @click="onChangeColor" class="ui icon brown button"></button>
<button @click="onChangeColor" class="ui icon grey button"></button>
<button @click="onChangeColor" class="ui icon black button"></button>
</span>
</span>
<span class="note-status-indicator">{{statusText}}</span>
</div>
<div v-if="fancyInput == 1" class="textarea-height no-flow">
<ckeditor ref="main-edit"
@@ -19,35 +65,6 @@
v-on:keyup="onKeyup"
/>
<div class="ui buttons">
<div @click="close" class="ui button">Close + Save (ESC)</div>
<div class="ui button">Delete</div>
<div @click="onToggleFancyInput" class="ui button">
Fancy ({{fancyInput?'On':'Off'}})
</div>
</div>
<div class="ui buttons">
<button @click="onChangeColor" class="ui icon white button"></button>
<button @click="onChangeColor" class="ui icon red button"></button>
<button @click="onChangeColor" class="ui icon orange button"></button>
<button @click="onChangeColor" class="ui icon yellow button"></button>
<button @click="onChangeColor" class="ui icon olive button"></button>
<button @click="onChangeColor" class="ui icon green button"></button>
<button @click="onChangeColor" class="ui icon teal button"></button>
<button @click="onChangeColor" class="ui icon blue button"></button>
<button @click="onChangeColor" class="ui icon violet button"></button>
<button @click="onChangeColor" class="ui icon purple button"></button>
<button @click="onChangeColor" class="ui icon pink button"></button>
<button @click="onChangeColor" class="ui icon brown button"></button>
<button @click="onChangeColor" class="ui icon grey button"></button>
<button @click="onChangeColor" class="ui icon black button"></button>
</div>
<div class="ui right floated green button">{{statusText}}</div>
<!-- <p>
Last Updated: {{$helpers.timeAgo(updated)}}
</p> -->
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div>
@@ -57,6 +74,13 @@
import axios from 'axios'
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
//Start working on some plugin, tag plugin, link to other note, interactive checkbox
class InsertImage extends Plugin {
init() {
console.log( 'InsertImage was initialized' );
}
}
export default {
@@ -67,6 +91,8 @@
},
data(){
return {
loading: true,
loadingMessage: 'Loading Note',
currentNoteId: 0,
noteText: '',
statusText: 'Saved',
@@ -77,9 +103,12 @@
editDebounce: null,
keyPressesCounter: 0,
fancyInput: 0, //Default to basic text edit. Upgrade if set to 1
color: '#FFF',
pinned: 0,
archived: 0,
color: '#fff',
fontColor: '#000',
sizeDown: false,
showColorPicker: false,
editor: DecoupledEditor,
editorConfig: {
@@ -116,7 +145,6 @@
},
methods: {
onToggleFancyInput(){
if(this.fancyInput == 0){
this.fancyInput = 1
} else {
@@ -125,12 +153,31 @@
//Update last note hash, this will tell note to save next update
this.lastNoteHash = 0
},
onTogglePinned(){
if(this.pinned == 0){
this.pinned = 1
} else {
this.pinned = 0;
}
//Update last note hash, this will tell note to save next update
this.lastNoteHash = 0
},
onToggleArchived(){
if(this.archived == 0){
this.archived = 1
} else {
this.archived = 0;
}
//Update last note hash, this will tell note to save next update
this.lastNoteHash = 0
},
onChangeColor(event){
//Grab the color of the button clicked
const style = getComputedStyle(event.target)
this.color = style['background-color']
this.fontColor = '#FFF'
//If background is white, default to colors in CSS
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF'){
this.color = null
this.fontColor = null
@@ -140,19 +187,33 @@
this.save()
},
loadNote(noteId){
let vm = this
let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating']
let thing = ['Note','Note','Note','Note','Data','Text','Document','Algorithm','Buffer','Client','Download','File','Frame','Graphics','Hardware','HTML','Interface','Logic','Mainframe','Memory','Media','Nodes','Network','Chaos']
let p1 = doing[Math.floor(Math.random() * doing.length)]
let p2 = thing[Math.floor(Math.random() * thing.length)]
vm.loadingMessage = p1 + ' ' + p2
//Component is activated with NoteId in place, lookup text with associated ID
if(this.$store.getters.getLoggedIn){
axios.post('/api/note/get', {'noteId': noteId})
.then(response => {
vm.loading = false
//Set up local data
vm.currentNoteId = noteId
vm.noteText = response.data.text
vm.updated = response.data.updated
vm.lastNoteHash = vm.hashString(response.data.text)
console.log(vm.lastNoteHash)
vm.color = response.data.color
if(response.data.pinned != null){
vm.pinned = response.data.pinned
}
vm.archived = response.data.archived
this.fontColor = '#FFF'
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF' || this.color == null){
@@ -166,6 +227,7 @@
//Put focus on note, at the end of the note text
vm.$nextTick(() => {
// vm.$refs['custom-input'].focus()
})
@@ -230,7 +292,6 @@
//Don't save note if its hash doesn't change
if( this.lastNoteHash == this.hashString(this.noteText) ){
console.log('Note was not modified')
resolve(false)
return
}
@@ -239,7 +300,9 @@
'noteId':this.currentNoteId,
'text': this.noteText,
'fancyInput': this.fancyInput,
'color': this.color
'color': this.color,
'pinned': this.pinned,
'archived':this.archived,
}
let vm = this
@@ -294,7 +357,6 @@
</script>
<style type="text/css" scoped>
.no-flow {
overflow: hidden;
@@ -310,6 +372,10 @@
border: 1px solid;
}
.note-top-menu {
width: 100%;
display: inline-block;
}
/* container styles change based on mobile and number of open screens */
.master-note-edit {
@@ -319,11 +385,19 @@
/*color: var(--text_color);*/
height: 100vh;
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
z-index: 1001;
}
.loading-note {
position: absolute;
top: 38px;
left: 0;
right: 0;
bottom: 50px;
}
/* One note open, in the middle of the screen */
.master-note-edit.position-0 {
left: 30%;
right: 1%;
right: 0;
}
@media only screen and (max-width: 740px) {
.master-note-edit.position-0 {