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

Bunch of changes and unfinished features. Just trying to keep everything up to date. This project is a mess. Don't worry. You are employed.

Browse Source
This commit is contained in:
Max G
2021-12-18 22:18:22 +00:00
parent c99828dbad
commit d4be0d6471
18 changed files with 443 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,14 +7,19 @@
>
<!-- Giant Edit Note Menu -->
<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }">
<div class="edit-menu glint" :class="{ 'slide-out-top':(sizeDown == true) }">
<!-- edit spacer is disabled, it is helpful if menu gets bigger. It adds a left margin, starting the icons at the edge of the note -->
<div class="edit-spacer"></div>
<div class="menu-top-half">
<div class="edit-button" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
<i class="close icon"></i>
<div class="edit-button" v-on:click=" hash=0; save() " :data-tooltip="`Save\n(CTRL + S)`" data-position="bottom center">
<i class="icons">
<i class="grey save outline icon"></i>
<i v-if="statusText == 'saved'" class="green small bottom left corner check icon"></i>
<i v-if="statusText == 'saving'" class="small purple bottom left corner double angle up icon"></i>
</i>
</div>
<div class="edit-divide"></div>
@@ -65,9 +70,10 @@
<div class="menu-bottom-half">
<!--
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/table`)" data-tooltip="Insert Table" data-position="bottom center">
<i class="border all icon"></i>
</div>
</div> -->
<div class="edit-button" v-on:click="insertDivide()" data-tooltip="Insert Divide" data-position="bottom center">
<i class="grip lines icon"></i>
@@ -86,9 +92,9 @@
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" :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">
<!-- <div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center">
<i class="tags icon"></i>
</div>
</div> -->
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/images`)" data-tooltip="Images" data-position="bottom center">
<i class="image icon"></i>
</div>
@@ -116,17 +122,13 @@
<i class="purple bolt icon"></i>
</div> -->
<div class="edit-button" v-on:click=" hash=0; save() " :data-tooltip="`Save\n(CTRL + S)`" data-position="bottom center">
<i class="icons">
<i class="grey save outline icon"></i>
<i v-if="statusText == 'saved'" class="green small bottom left corner check icon"></i>
<i v-if="statusText == 'saving'" class="small purple bottom left corner double angle up icon"></i>
</i>
</div>
<div class="edit-button" v-if="diffsApplied > 0" :data-tooltip="`Unsaved Changes`" data-position="bottom center">
+{{ diffsApplied }}
</div>
<div class="edit-button ui" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
<i class="green close icon"></i>
</div>
</div>
</div>
@@ -156,9 +158,27 @@
@keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()"
rows="1"
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText'] }"
v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input">
v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input glint">
</textarea>
<div class="large-close-button glint" v-on:click="closeButtonAction()">
<i class="fitted green close icon"></i>
</div>
<!-- little tags on the side, only show on desktop -->
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)">
<span class="add-mini-tag" v-if="noteTags.length == 0">
<i class="tags icon"></i>Add Tags
</span>
<span v-for="tag in allTags" class="active-mini-tag" v-if="isTagOnNote(tag.id)">
#{{ tag.text }}
</span>
<span class="active-mini-tag" v-if="noteTags.length > 0">
+
</span>
</div>
<!-- Squire Box -->
<div
id="squire-id"
@@ -171,20 +191,7 @@
</div>
<!-- little tags on the side, only show on desktop -->
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }" v-if="!$store.getters.getIsUserOnMobile">
<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 -->
<color-tooltip
@@ -304,10 +311,7 @@
<!-- Show side shades if user is on desktop only -->
<div class="full-focus-shade shade1"
:class="{ 'slide-out-left':sizeDown }"
v-on:click="closeButtonAction()"></div>
<div class="full-focus-shade shade2"
:class="{ 'slide-out-right':sizeDown }"
:class="{ 'fade-me-out':sizeDown }"
v-on:click="closeButtonAction()"></div>
</div>
@@ -360,8 +364,8 @@
saveDebounce: null, //Prevent save from being called numerous times quickly
updated: 'Never',
editDebounce: null,
emitChangeDebounce: null,
keyPressesCounter: 0, //Determen keys pressed between saves
textChangedDebounce: null,
keyPressesCounter: 0, //Determine keys pressed between saves
pinned: 0,
archived: 0,
attachmentCount: 0,
@@ -455,7 +459,7 @@
//Show loading for a minimum time
setTimeout(()=>{
this.forceShowLoading = false
}, 500)
}, 100)
// document.addEventListener('visibilitychange', this.checkForUpdatedNote)
@@ -598,14 +602,16 @@
this.editor.focus()
this.editor.moveCursorToEnd()
this.fetchNoteTags() //Don't load tags on mobile
}
//Load tags on mobile
this.fetchNoteTags()
//Set up websockets after squire is set up
setTimeout(() => {
this.setupWebSockets()
}, 50)
}, 500)
this.editor.addEventListener('cursor', e => {
@@ -740,7 +746,7 @@
loadNote(noteId){
//Generate a random loading message
let mod = ['Gently','Calmly','Lovingly','Quickly','','','','','','','','','','','','','']
let mod = ['Gently','Calmly','Lovingly','Quickly','Diligently','','','','','','','','','','','','','','']
let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating','Lumping']
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']
@@ -877,11 +883,11 @@
clearTimeout(this.editDebounce)
this.editDebounce = setTimeout(() => {
this.save()
}, 30 * 1000)
}, 5 * 1000)
//Save after x keystrokes
this.keyPressesCounter = (this.keyPressesCounter + 1)
if(this.keyPressesCounter > 125){
if(this.keyPressesCounter > 25){
this.keyPressesCounter = 0
this.save()
}
@@ -1075,6 +1081,19 @@
<style type="text/css" scoped>
.large-close-button {
position: absolute;
min-height: 55px;
top: 0px;
right: 0px;
font-size: 23px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px 0 10px;
cursor: pointer;
}
.full-focus-shade {
position: fixed;
top: 0;
@@ -1084,13 +1103,7 @@
background-color: var(--menu-accent);
z-index: 999;
cursor: pointer;
opacity: 0.88;
}
.shade1 {
left: 50%;
}
.shade2 {
right: 50%;
opacity: 0.9;
}
/* squire styles */
@@ -1105,6 +1118,7 @@
overflow-x: hidden;
scrollbar-width: none;
scrollbar-color: transparent transparent;
overscroll-behavior: contain;
}
.note-wrapper {
background-color: var(--small_element_bg_color);
@@ -1114,56 +1128,24 @@
}
.note-mini-tag-area {
position: fixed;
width: 120px;
left: calc(15% - 125px);
top: 46px;
bottom: 0;
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: 1px 1px 1px 5px;
margin: 0 0 0;
border: 1px solid transparent;
border-right: none;
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: 11px;
padding: 5px 15px 0 15px;
cursor: pointer;
opacity: 0;
text-transform:capitalize;
margin-left: auto;
margin-right: auto;
max-width: 1100px;
}
.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);
background-color: var(--body_bg_color);
opacity: 1;
.add-mini-tag {
color: var(--border_color);
}
.active-mini-tag {
opacity: 0.7;
background-color: var(--small_element_bg_color);
color: var(--text_color)
display: inline-block;
opacity: 0.9;
color: var(--main-accent);
}
.active-mini-tag + .active-mini-tag {
margin-left: 15px;
}
@@ -1195,12 +1177,6 @@
.menu-top-half, .menu-bottom-half {
display: inline-block;
}
/* .edit-spacer {
width: calc(15% - 10px);
display: inline-block;
height: 10px;
opacity: 0;
}*/
.edit-button {
background-color: var(--small_element_bg_color);
color: var(--menu-text);
@@ -1241,9 +1217,10 @@
.stealth-input {
width: 100%;
padding: 10px 15px 5px;
padding: 15px;
background-color: var(--small_element_bg_color );
border: none;
border-bottom: 2px solid var(--main-accent);
font-size: 1.7em;
color: var(--text_color);
caret-color: var(--main-accent);
@@ -1384,16 +1361,16 @@
}
}
.slide-out-left {
animation: slide-out-left 0.5s ease;
.fade-me-out {
animation: fade-me-out 0.5s ease;
}
@keyframes slide-out-left {
@keyframes fade-me-out {
0% {
left: 85%;
opacity: 1;
}
100% {
left: 150%;
opacity: 0;
}
}