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

Lots of little ease of use tweaks

Browse Source
This commit is contained in:
Max G
2022-02-25 02:33:49 +00:00
parent 00500ecc33
commit 6d0187ee0a
15 changed files with 546 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,38 +7,16 @@
>
<!-- Giant Edit Note Menu -->
<div class="edit-menu glint" :class="{ 'slide-out-top':(sizeDown == true) }">
<div class="edit-menu" :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=" 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>
<div class="edit-button" v-on:click="toggleList('ul')" :data-tooltip="`Task List\n(CTRL + SHIFT + 8)`" data-position="bottom center" :class="{'edit-active':activeToDo}">
<i class="tasks icon"></i>
</div>
<div class="edit-button" v-on:click="toggleList('ol')" :data-tooltip="`Ordered List\n(CTRL + SHIFT + 9)`" data-position="bottom center" :class="{'edit-active':activeList}">
<i class="list ol icon"></i>
</div>
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center">
<i class="font icon"></i>
</div>
<div v-if="lastUsedColor" class="edit-button" v-on:click="applyLastUsedColor()" data-tooltip="Last Color" data-position="bottom center" :style="{'color':lastUsedColor}">
<i class="eye dropper icon"></i>
<div class="font-color-bar" :style="{'background':lastUsedColor}"></div>
</div>
<div class="edit-button" v-on:click="toggleBold()" :data-tooltip="`Bold\n(CTRL + b)`" data-position="bottom center" :class="{'edit-active':activeBold}">
@@ -53,10 +31,22 @@
<i class="underline icon"></i>
</div>
<div class="edit-button" v-on:click="modifyCode('1.4em')" data-tooltip="Quote" data-position="bottom center" :class="{'edit-active':activeCode}">
<i class="quote right icon"></i>
</div>
<div class="edit-button" v-on:click="modifyFont('0.9em')" data-tooltip="Sub Title" data-position="bottom center" :class="{'edit-active':activeSubTitle}">
<i class="small text height icon"></i>
</div>
<div class="edit-button" v-on:click="modifyFont('1.4em')" data-tooltip="Title" data-position="bottom center" :class="{'edit-active':activeTitle}">
<i class="text height icon"></i>
</div>
<div class="edit-button" v-on:click="removeFormatting()" data-tooltip="Remove Formatting" data-position="bottom center">
<i class="remove format icon"></i>
</div>
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="editor.increaseQuoteLevel()" :data-tooltip="`Indent\n(TAB)`" data-position="bottom center">
@@ -74,18 +64,22 @@
<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 class="edit-divide"></div>
<div class="edit-button" v-on:click="toggleList('ul')" :data-tooltip="`Task List\n(CTRL + SHIFT + 8)`" data-position="bottom center" :class="{'edit-active':activeToDo}">
<i class="tasks icon"></i>
</div>
<div class="edit-button" v-on:click="toggleList('ol')" :data-tooltip="`Ordered List\n(CTRL + SHIFT + 9)`" data-position="bottom center" :class="{'edit-active':activeList}">
<i class="list ol icon"></i>
</div>
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="insertDivide()" data-tooltip="Insert Divide" data-position="bottom center">
<i class="grip lines icon"></i>
</div>
<div class="edit-button" v-on:click="removeFormatting()" data-tooltip="Remove Formatting" data-position="bottom center">
<i class="remove format icon"></i>
</div>
<div class="edit-button" v-on:click="undoCustom()" :data-tooltip="`Undo\n(CTRL + z)`" data-position="bottom center">
<i class="undo icon"></i>
</div>
<div class="edit-divide"></div>
@@ -114,28 +108,19 @@
<div class="edit-divide"></div>
<div class="edit-button" v-if="usersOnNote > 1" :data-tooltip="`Viewers`" data-position="bottom center">
<i class="green eye icon"></i> {{ usersOnNote }}
<div class="edit-button" v-on:click="undoCustom()" :data-tooltip="`Undo\n(CTRL + z)`" data-position="bottom center">
<i class="reply icon"></i>
</div>
<!--
<div class="edit-button" v-on:click="simulateTyping()">
<i class="purple bolt icon"></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 class="edit-button done-button" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
<!-- <i class="green close icon"></i> -->
<span class="ui green text">Done</span>
</div>
</div>
</div>
<!-- invisible menu item, creates BG for bottom menu -->
<div class="bottom-edit-menu"></div>
<div class="input-container-wrapper"
@@ -146,7 +131,7 @@
<!-- Loading indicator -->
<transition name="fade">
<div v-if="loading || forceShowLoading" class="loading-note" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
<div v-if="loading && forceShowLoading" class="loading-note" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
<div class="loading-text">
<loading-icon :message="loadingMessage" />
</div>
@@ -173,6 +158,12 @@
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }"
v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)"
:style="{ 'background-color':styleObject['noteBackground'] }">
<span>
{{ lastVisibilityState }}
</span>
<span class="add-mini-tag" v-if="allTags.length == 0">
<i class="tags icon"></i>Add Tags
</span>
@@ -182,6 +173,28 @@
<span class="active-mini-tag" v-if="allTags.length > 0">
+
</span>
<span class="status-menu" v-on:click=" hash=0; save()">
<span v-if="diffsApplied > 0">
+{{ diffsApplied }} Unsaved Changes
</span>
<span v-if="usersOnNote > 1" :data-tooltip="`Viewers`" data-position="left center">
<i class="green eye icon"></i> {{ usersOnNote }}
</span>
<span v-if="statusText == 'modified'" data-position="left center" data-tooltip="Modified">
<i class="grey asterisk icon"></i>
</span>
<span v-if="statusText == 'saving'" data-position="left center" data-tooltip="Saving">
<i class="grey upload icon"></i>
</span>
<span v-if="statusText == 'saved'" data-position="left center" data-tooltip="Saved">
<i class="grey check icon"></i>
</span>
</span>
</div>
@@ -202,6 +215,7 @@
<!-- color picker -->
<color-tooltip
v-if="colorpicker"
:last-used-color="lastUsedColor"
v-on:color="color => modifyColor(color)"
v-on:close="colorpicker = false"
/>
@@ -234,7 +248,7 @@
<side-slide-menu v-if="options" v-on:close="options = false" name="note-options">
<div class="ui basic padded segment">
<div class="ui grid">
<div class="ui compact stackable grid">
<div class="eight wide column">
<div class="ui dividing header">
@@ -370,7 +384,7 @@
data(){
return {
loading: true,
forceShowLoading: true,
forceShowLoading: false,
loadingMessage: 'Loading Note',
currentNoteId: 0,
modified: false,
@@ -478,12 +492,12 @@
},
mounted: function() {
//Show loading for a minimum time
//Show loading if note has not loaded in 500ms
setTimeout(()=>{
this.forceShowLoading = false
}, 100)
this.forceShowLoading = true
}, 500)
// document.addEventListener('visibilitychange', this.checkForUpdatedNote)
document.addEventListener('visibilitychange', this.checkForUpdatedNote)
//Init squire as early as possible
if(this.editor && this.editor.destroy){
@@ -561,7 +575,6 @@
if(!this.$store.getters.getIsUserOnMobile){
this.editor.focus()
this.editor.moveCursorToEnd()
}
//Set up websockets after squire is set up
@@ -596,10 +609,6 @@
//If the offset is triggered with a negative offset, it means the before element was clicked
if(e.offsetX < -5){
//Will hide keyboard if clicked on mobile
if(this.$store.getters.getIsUserOnMobile){
this.editor.blur()
}
//Area before element was clicked, they clicked the checkbox
if (el.className === 'active'){
@@ -607,6 +616,21 @@
} else {
el.className = 'active';
}
//Trigger keyup event to save list changes
this.onKeyup(e)
//Will hide keyboard if clicked on mobile
if(this.$store.getters.getIsUserOnMobile){
setTimeout(() => {
document.activeElement.blur()
e.preventDefault()
return
}, 25)
}
}
@@ -660,10 +684,10 @@
})
//Show and hide additional toolbars
this.editor.addEventListener('focus', e => {
})
this.editor.addEventListener('blur', e => {
})
// this.editor.addEventListener('focus', e => {
// })
// this.editor.addEventListener('blur', e => {
// })
},
openEditAttachment(){
@@ -846,10 +870,11 @@
//Save after x keystrokes
this.keyPressesCounter = (this.keyPressesCounter + 1)
if(this.keyPressesCounter > 25){
if(this.keyPressesCounter > 60){
this.keyPressesCounter = 0
this.save()
}
},
save(force = false){
return new Promise((resolve, reject) => {
@@ -902,10 +927,6 @@
},
checkForUpdatedNote(){
//Ignore visibility changes, handle this with socket IO
//Just keep it always up to date if user is on note
return
//If user leaves page then returns to page, reload the first batch
if(this.lastVisibilityState == 'hidden' && document.visibilityState == 'visible'){
// console.log('Checking for note updates after visibility change.')
@@ -918,7 +939,7 @@
console.log('Focus regained with note open.')
console.log('Attempting to fix diff text. fix this. Search spleen')
return
// return
}
//Track visibility state
@@ -1040,6 +1061,33 @@
<style type="text/css" scoped>
.status-menu {
position: absolute;
right: 10px;
z-index: 1019;
text-align: right;
}
.font-color-bar {
/*width: calc(100% - 8px);*/
height: 3px;
position: absolute;
bottom: 2px;
right: 4px;
left: 4px;
z-index: 0;
background: linear-gradient(
45deg,
rgba(255, 0, 0, 1) 0%,
rgba(208, 222, 33, 1) 20%,
rgba(63, 218, 216, 1) 40%,
rgba(28, 127, 238, 1) 60%,
rgba(186, 12, 248, 1) 80%,
rgba(255, 0, 0, 1) 100%
);
overflow: hidden;
}
.large-close-button {
position: absolute;
min-height: 55px;
@@ -1094,6 +1142,7 @@
margin-left: auto;
margin-right: auto;
max-width: 1100px;
position: relative;
}
.add-mini-tag {
color: var(--border_color);
@@ -1128,7 +1177,7 @@
display: block;
background-color: var(--small_element_bg_color);
z-index: 1019;
padding: 3px 5px;
padding: 5px 0;
border: none;
border-bottom: 1px solid var(--menu-accent);
text-align: center;
@@ -1140,10 +1189,24 @@
background-color: var(--small_element_bg_color);
color: var(--menu-text);
display: inline-block;
font-size: 1.4em;
padding: 4px 1px 5px 4px;
border-radius: 3px;
cursor: pointer;
font-size: 1.4em;
box-shadow: 0 0 1px 0 #c4c4c4;
margin: 0 3px 0;
padding: 6px 0 0 0;
text-align: center;
min-width: 32px;
min-height: 32px;
}
.edit-button > i {
font-size: 1em;
padding: 0;
margin: 0;
}
.edit-button > span {
padding: 0 8px;
}
.edit-button:hover {
background-color: var(--menu-accent);
@@ -1157,7 +1220,7 @@
background-color: var(--menu-accent);
height: 15px;
width: 1px;
margin: 0 1px;
margin: 0 8px;
padding: 0;
}
@media only screen and (max-width: 740px) {
@@ -1253,7 +1316,7 @@
left: 0;
right: 0;
top: 35px;
bottom: 40px;
bottom: 37px;
background-color: var(--small_element_bg_color);
}
.note-wrapper {
@@ -1263,6 +1326,9 @@
.shade1, .shade2 {
right: 150%;
}
.edit-menu {
background-color: var(--dark_border_color);
}
/*menu overwrites */
.bottom-edit-menu {
position: fixed;
@@ -1271,14 +1337,19 @@
right: 0;
width: 100%;
display: block;
background-color: var(--small_element_bg_color);
/*background-color: var(--small_element_bg_color);*/
background-color: var(--dark_border_color);
z-index: 1012;
border: none;
border-top: 1px solid var(--menu-accent);
min-height: 40px;
min-height: 37px;
}
.edit-menu {
text-align: center;
.menu-top-half, .menu-bottom-half {
display: flex;
justify-content: space-around;
}
.edit-divide {
display: none;
}
.menu-bottom-half {
z-index: 1005;
@@ -1288,6 +1359,14 @@
right: 0;
text-align: center;
}
.edit-button {
flex-basis: 100%;
margin: 0 2px;
}
.done-button {
flex-basis: 150%;
font-size: 13px;
}
}