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

* Added Much better session Management, key updating and deleting

Browse Source 
* Force reload of JS if app numbers dont match
* Added cool tag display on side of note
* Cleaned up a bunch of code and tweaked little things to be better
This commit is contained in:
Max G
2020-06-15 09:02:20 +00:00
parent 56d4664d0d
commit e4fae23623
18 changed files with 333 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -170,13 +170,18 @@
</div>
<!-- little tags on the side -->
<div class="note-mini-tag-area" v-if="allTags.length > 0" :class="{ 'slide-out-right':(sizeDown == true) }">
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }">
<span v-for="tag in allTags" class="subtle-tag active-mini-tag" v-if="isTagOnNote(tag.id)" v-on:click="removeTag(tag.id)">
<i class="tag icon"></i>
{{ tag.text }}
</span>
<span v-else class="subtle-tag" v-on:click="addTag(tag.text)">
<i class="plus icon"></i>
{{ tag.text }}
</span>
<span class="subtle-tag" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)">
<i class="plus icon"></i><i class="green tags icon"></i>Add Tag
</span>
</div>
<!-- color picker -->
@@ -195,7 +200,7 @@
/>
</side-slide-menu>
<side-slide-menu v-if="tags" v-on:close="tags = false" name="tags" :style-object="styleObject">
<side-slide-menu v-if="tags" v-on:close="tags = false; fetchNoteTags()" name="tags" :style-object="styleObject">
<div class="ui basic segment">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div>
@@ -254,10 +259,10 @@
<!-- Show side shades if user is on desktop only -->
<div class="full-focus-shade shade1"
:class="{ 'slide-out-left':(sizeDown == true) }"
:class="{ 'slide-out-left':sizeDown }"
v-on:click="close()"></div>
<div class="full-focus-shade shade2"
:class="{ 'slide-out-right':(sizeDown == true) }"
:class="{ 'slide-out-right':sizeDown }"
v-on:click="close()"></div>
</div>
@@ -335,10 +340,6 @@
diffTextTimeout: null,
diffsApplied: null,
//Fake Caret position and visibility
caretShow: false,
caretLeft: null,
caretTop: null,
//Used to restore caret position
lastRange: null,
startOffset: 0,
@@ -541,9 +542,6 @@
if(!this.$store.getters.getIsUserOnMobile){
this.editor.focus()
this.editor.moveCursorToEnd()
this.caretShow = true
this.moveArtificialCaret()
this.fetchNoteTags() //Don't load tags on mobile
}
@@ -615,14 +613,7 @@
})
this.editor.addEventListener('keydown', event => {
setTimeout(() => {
if(event.keyCode == 32){
this.caretLeft += 3
}
if(event.keyCode == 8){
// this.caretLeft -= 3
}
}, 10)
})
//Bind event handlers
@@ -633,29 +624,10 @@
//Show and hide additional toolbars
this.editor.addEventListener('focus', e => {
// this.caretShow = true
})
this.editor.addEventListener('blur', e => {
// this.caretShow = false
})
},
moveArtificialCaret(rect = null){
//Lets not use the artificial caret for now
return
//If rect isn't present, grab by selection
if(!rect || rect.left == 0){ //Left should always be greater than 0, because of a margin
rect = this.editor.getCursorPosition()
//Another way to get range
// window.getSelection().getRangeAt(0)
}
const textArea = document.getElementById('text-box-container').getBoundingClientRect()
this.caretLeft = (rect.left - textArea.left - 1)
this.caretTop = (rect.top - textArea.top - 1 )
},
openEditAttachment(){
this.$router.push('/attachments/note/'+this.currentNoteId)
@@ -845,7 +817,7 @@
// clearTimeout(this.editDebounce)
if(this.statusText == 'saving'){
return reject(false)
return resolve(true)
}
//Don't save note if its hash doesn't change
@@ -1081,38 +1053,45 @@
.note-mini-tag-area {
position: fixed;
width: 100px;
left: calc(15% - 100px);
width: 120px;
left: calc(15% - 125px);
top: 46px;
bottom: 0;
height: 500px;
height: calc(100vh - 55px);
z-index: 1000;
overflow-y: scroll;
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
.note-mini-tag-area {
scrollbar-width: auto;
scrollbar-color: inherit inherit;
}
.subtle-tag {
display: inline-block;
width: 100%;
padding: 2px 1px 2px 4px;
margin: 0 0 2px;
padding: 1px 1px 1px 5px;
margin: 0 0 0;
border: 1px solid transparent;
border-right: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: var(--text_color);
border-radius: 3px;
background-color: transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color ease 0.3s, background ease 0.3s;
font-size: 12px;
font-size: 11px;
cursor: pointer;
opacity: 0;
text-transform:capitalize;
}
.note-mini-tag-area:hover .subtle-tag {
opacity: 1;
}
}
.note-mini-tag-area:hover .active-mini-tag {
background-color: var(--main-accent);
color: white;
}
.note-mini-tag-area:hover .subtle-tag:not(.active-mini-tag) {
border-right: none;
color: var(--text_color);
@@ -1120,9 +1099,9 @@
opacity: 1;
}
.active-mini-tag {
opacity: 0.6;
background-color: #16ab39;
color: white;
opacity: 0.7;
background-color: var(--small_element_bg_color);
color: var(--text_color)
}