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

* Made splash page dark and updated description

Browse Source 
* Cleaned up unused things
* Updated squire which had a comment typo update...thats it
* Background color picker has matching colors and styles to text color picker
* Added new black theme
* Moved search to main page, show it on mobile and added options to push things to notes from search with experimental tag searching
* Added active note menu buttons based on cursor location in text
* Added more instant updating if app is open in two locations for the same user Scratch Pad and home page update with new notes and new text in real time
This commit is contained in:
Max G
2020-05-15 23:12:09 +00:00
parent 2861042485
commit b0eee636b5
20 changed files with 526 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,25 +21,25 @@
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="toggleList('ul')" data-tooltip="Task List" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="toggleList('ul')" data-tooltip="Task List" data-position="bottom center" data-inverted :class="{'edit-active':activeToDo}">
<i class="tasks icon"></i>
</div>
<div class="edit-button" v-on:click="toggleList('ol')" data-tooltip="Numbered List" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="toggleList('ol')" data-tooltip="Numbered List" data-position="bottom center" data-inverted :class="{'edit-active':activeList}">
<i class="list ol icon"></i>
</div>
<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center" data-inverted :style="{'color':activeColor}">
<i class="palette icon"></i>
</div>
<div class="edit-button" v-on:click="toggleBold()" data-tooltip="Bold" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="toggleBold()" data-tooltip="Bold" data-position="bottom center" data-inverted :class="{'edit-active':activeBold}">
<i class="bold icon"></i>
</div>
<div class="edit-button" v-on:click="toggleItalic()" data-tooltip="Quote" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="toggleItalic()" data-tooltip="Quote" data-position="bottom center" data-inverted :class="{'edit-active':activeQuote}">
<i class="quote left icon"></i>
</div>
<div class="edit-button" v-on:click="modifyFont('1.4em')" data-tooltip="Title" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="modifyFont('1.4em')" data-tooltip="Title" data-position="bottom center" data-inverted :class="{'edit-active':activeTitle}">
<i class="text height icon"></i>
</div>
<div class="edit-button" v-on:click="editor.increaseQuoteLevel()" data-tooltip="Indent" data-position="bottom center" data-inverted>
@@ -63,7 +63,7 @@
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" data-inverted>
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" data-inverted :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
<i class="paint brush icon"></i>
</div>
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center" data-inverted>
@@ -112,7 +112,7 @@
<div class="bottom-edit-menu"></div>
<div class="input-container-wrapper" :class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true)}" >
<div class="input-container-wrapper" :class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true),}" :style="{ 'background-color':styleObject['noteBackground'] }">
<!-- Squire box grows -->
<div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
@@ -142,11 +142,6 @@
</div>
<!-- && this.$store.getters.getIsUserOnMobile -->
<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
<div class="ui green button">{{statusText}}</div>
</span>
</div>
<!-- color picker -->
@@ -298,6 +293,14 @@
images: false,
options: false,
colorpicker: false,
//active button states
activeBold: false,
activeQuote: false,
activeTitle: false,
activeList: false,
activeToDo: false,
activeColor: null,
}
},
watch: {
@@ -383,7 +386,7 @@
this.setText(this.noteText)
this.lastNoteHash = this.hashString(this.getText())
console.log('hash on load', this.lastNoteHash)
// console.log('hash on load', this.lastNoteHash)
//focus on open, not on mobile, thats annoying
if(!this.$store.getters.getIsUserOnMobile){
@@ -398,6 +401,41 @@
}
//Change button states on editor when element is active
//eg; Bold button turns green when on bold text
this.editor.addEventListener('pathChange', e => {
//Reset all button states
this.activeBold = false
this.activeTitle = false
this.activeQuote = false
this.activeList = false
this.activeToDo = false
this.activeColor = null
let colors = e.path.match(/\d+/g)
if(colors && colors.length == 3){
this.activeColor=`rgb(${colors.join(',')})`
}
//@ TODO - Update this to match all elements, like color and bold
// index of and then the specific thing might more indexOf('B'), indexOf('I'), etc
let element = e.path.split('>').pop()
switch (element) {
case 'B': this.activeBold = true; break;
case 'I': this.activeQuote = true; break;
case 'SPAN.size[fontSize=1.4em]': this.activeTitle = true; break;
}
let parent = e.path.split('>').shift()
switch (parent) {
case 'OL': this.activeList = true; break;
case 'UL': this.activeToDo = true; break;
}
})
//Click Event - Open links when clicked in editor or toggle checks
this.editor.addEventListener('click', e => {
@@ -1003,17 +1041,17 @@
this.statusText = ''
this.diffText()
// this.diffText()
//Each note, save after 5 seconds, focus lost or 30 characters typed.
//Each note, save after 15 seconds, focus lost or 30 characters typed.
clearTimeout(this.editDebounce)
this.editDebounce = setTimeout(() => {
this.save()
}, 5000)
}, 15 * 1000)
//Save after 30 keystrokes
//Save after 50 keystrokes
this.keyPressesCounter = (this.keyPressesCounter + 1)
if(this.keyPressesCounter > 30){
if(this.keyPressesCounter > 50){
this.keyPressesCounter = 0
this.save()
}
@@ -1048,7 +1086,7 @@
'hash': currentHash,
}
console.log('Save Hash', currentHash)
// console.log('Save Hash', currentHash)
this.statusText = 'Saving'
axios.post('/api/note/update', postData).then( response => {
@@ -1148,8 +1186,8 @@
setupWebSockets(){
this.$io.on('new_note_text_saved', ({noteId, hash}) => {
console.log('Current hash', this.lastNoteHash)
console.log('Incoming Hash', hash)
// console.log('Current hash', this.lastNoteHash)
// console.log('Incoming Hash', hash)
})
return
@@ -1255,6 +1293,10 @@
.edit-button:hover {
background-color: var(--menu-accent);
}
.edit-active {
background-color: #21BA45;
color: white;
}
.edit-divide {
display: inline-block;
background-color: var(--menu-accent);
@@ -1313,7 +1355,7 @@
width: 100%;
height: 100%;
min-height: 300px;
background: var(--background_color);
/*background: var(--background_color);*/
/*opacity: 0.;*/
z-index: 1;
}