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

Adding everything to get started on cycle tracking and maybe avid habit clone

Browse Source
This commit is contained in:
Max G
2022-09-25 17:17:41 +00:00
parent df5e9f8c3b
commit b7d22cb7fc
19 changed files with 1727 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,133 +1,134 @@
<template>
<!-- change class to .master-note-edit to have it popup on the screen.
@keyup.esc="closeButtonAction()" -->
<div
id="InputNotes"
class="master-note-edit"
>
<div class="master-note-edit">
<!-- Giant Edit Note Menu -->
<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }">
<!-- Edit Menus -->
<!-- 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="colorpicker = true" data-tooltip="Text Color" data-position="bottom center">
<i class="font 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}">
<i class="bold icon"></i>
</div>
<div class="edit-button" v-on:click="toggleItalic()" :data-tooltip="`Italic\n(CRTL + i)`" data-position="bottom center" :class="{'edit-active':activeItalics}">
<i class="italic icon"></i>
</div>
<div class="edit-button" v-on:click="toggleUnderline()" :data-tooltip="`Underline\n(CRTL + u)`" data-position="bottom center" :class="{'edit-active':activeUnderline}">
<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">
<i class="indent icon"></i>
</div>
<div class="edit-button" v-on:click="editor.decreaseQuoteLevel()" :data-tooltip="`Un-Indent\n(SHIFT + TAB)`" data-position="bottom center">
<i class="outdent icon"></i>
</div>
<div class="menu-top-half" :class="{ 'hide-text':(openNotes > 1) }">
<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center">
<i class="font icon"></i>
<div class="font-color-bar" :style="{'background':lastUsedColor}"></div>
<span>Color</span>
</div>
<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 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-divide"></div>
<!-- <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">
<i class="tags icon"></i>
</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>
<file-upload-button
data-tooltip="Upload File" data-position="bottom center"
class="edit-button"
:noteId="noteid" />
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/options`)" data-tooltip="More Options" data-position="bottom center">
&nbsp;&nbsp;
<i class="ellipsis horizontal icon"></i>
&nbsp;&nbsp;
</div>
<div class="edit-divide"></div>
<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 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 class="edit-button" v-on:click="toggleBold()" :data-tooltip="`Bold\n(CTRL + b)`" data-position="bottom center" :class="{'edit-active':activeBold}">
<i class="bold icon"></i>
<span>Bold</span>
</div>
<div class="edit-button" v-on:click="toggleItalic()" :data-tooltip="`Italic\n(CRTL + i)`" data-position="bottom center" :class="{'edit-active':activeItalics}">
<i class="italic icon"></i>
<span>Italic</span>
</div>
<div class="edit-button" v-on:click="toggleUnderline()" :data-tooltip="`Underline\n(CRTL + u)`" data-position="bottom center" :class="{'edit-active':activeUnderline}">
<i class="underline icon"></i>
<span>Underline</span>
</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>
<span>Quote</span>
</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>
<span>Small Text</span>
</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>
<span>Title</span>
</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="indentText" :data-tooltip="`Indent\n(TAB)`" data-position="bottom center">
<i class="indent icon"></i>
<span>Indent</span>
</div>
<div class="edit-button" v-on:click="outdentText" :data-tooltip="`Un-Indent\n(SHIFT + TAB)`" data-position="bottom center">
<i class="outdent icon"></i>
</div>
</div>
<!-- invisible menu item, creates BG for bottom menu -->
<div class="bottom-edit-menu"></div>
<div class="menu-bottom-half" :class="{ 'hide-text':(openNotes > 1) }">
<!--
<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-button" v-on:click="toggleList('ul')" :data-tooltip="`Task List\n(CTRL + SHIFT + 8)`" data-position="top center" :class="{'edit-active':activeToDo}">
<i class="tasks icon"></i>
<span>To-Do</span>
</div>
<div class="edit-button" v-on:click="toggleList('ol')" :data-tooltip="`Ordered List\n(CTRL + SHIFT + 9)`" data-position="top center" :class="{'edit-active':activeList}">
<i class="list ol icon"></i>
<span>List</span>
</div>
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="insertDivide()" data-tooltip="Insert Divide" data-position="top center">
<i class="grip lines icon"></i>
<span>Divide</span>
</div>
<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="top 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="top center">
<i class="tags icon"></i>
</div> -->
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/images`)" data-tooltip="Images" data-position="top center">
<i class="image icon"></i>
<span>Images</span>
</div>
<file-upload-button
data-tooltip="Upload File" data-position="top center"
class="edit-button"
:noteId="noteid" />
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/options`)" data-tooltip="More Options" data-position="top center">
&nbsp;&nbsp;
<i class="ellipsis horizontal icon"></i>
&nbsp;&nbsp;
</div>
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="undoCustom()" :data-tooltip="`Undo\n(CTRL + z)`" data-position="top center">
<i class="reply icon"></i>
</div>
<div class="edit-button done-button" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="top center">
<!-- <i class="green close icon"></i> -->
<span class="ui green text">Done</span>
</div>
</div>
<div class="input-container-wrapper"
:class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true),}">
:class="{ 'side-menu-open':sideMenuOpen }">
<!-- Squire box grows -->
<div id="text-box-container" class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground']}">
<div class="note-wrapper">
<!-- Loading indicator -->
<transition name="fade">
@@ -155,9 +156,9 @@
</div>
<!-- tags on the side, only show on desktop -->
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }"
<div class="note-mini-tag-area"
v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)"
:style="{ 'background-color':styleObject['noteBackground'] }">
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText'] }">
<span class="add-mini-tag" v-if="allTags.length == 0">
<i class="tags icon"></i>Add Tags
@@ -341,9 +342,9 @@
</side-slide-menu>
<!-- Show side shades if user is on desktop only -->
<div class="full-focus-shade shade1"
<!-- <div class="full-focus-shade shade1"
:class="{ 'fade-me-out':sizeDown }"
v-on:click="closeButtonAction()"></div>
v-on:click="closeButtonAction()"></div> -->
</div>
</template>
@@ -360,8 +361,8 @@
import SquireButtonFunctions from '@/mixins/SquireButtonFunctions.js'
export default {
name: 'InputNotes',
props: [ 'noteid', 'position', 'openMenu', 'urlData' ],
name: 'NoteInputPanel',
props: [ 'noteid', 'position', 'openMenu', 'urlData', 'openNotes'],
components:{
'note-tag-edit': () => import('@/components/NoteTagEdit.vue'),
'color-picker': () => import('@/components/ColorPicker.vue'),
@@ -436,12 +437,10 @@
watch: {
urlData(newVal, oldVal){
// return
//Handle changes in URL to
if(newVal.id == undefined || newVal.id != this.noteid){
this.closeButtonAction()
// this.closeButtonAction()
}
//Reset all note menus on URL change
@@ -453,7 +452,7 @@
this.table = false
//If a menu value is set, open it
if(newVal.openMenu){
if(newVal.openMenu && newVal.id == this.noteid){
//Only modify menu boolean if its defined
if(typeof this[newVal.openMenu] == 'boolean'){
this.sideMenuOpen = true
@@ -471,6 +470,12 @@
this.save()
}
})
this.$bus.$on('close_note_by_id', (noteId) => {
if(noteId == this.noteid){
this.closeButtonAction()
}
})
},
beforeDestroy(){
@@ -485,6 +490,7 @@
//Obliterate squire instance
this.editor.destroy()
// trigger save actions and reindex
this.close()
},
@@ -643,9 +649,9 @@
if(keyCode == 'Tab'){
if(event.shiftKey){
this.editor.decreaseQuoteLevel()
this.outdentText()
} else {
this.editor.increaseQuoteLevel()
this.indentText()
}
event.preventDefault()
@@ -989,12 +995,14 @@
return hash;
},
closeButtonAction(){
this.sizeDown = true
closeButtonAction(playAnimation = false){
this.sizeDown = playAnimation
const animationTimeout = (playAnimation ? 300 : 0)
//This timeout allows animation to play before closing
setTimeout(() => {
this.$router.push('/notes')
}, 300)
// this.$router.push('/notes')
this.close()
}, animationTimeout)
},
close(){
@@ -1022,9 +1030,9 @@
})
},
destroyWebSockets(){
this.$io.removeListener('past_diffs')
this.$io.removeListener('update_user_count')
this.$io.removeListener('incoming_diff')
// this.$io.removeListener('past_diffs')
// this.$io.removeListener('update_user_count')
// this.$io.removeListener('incoming_diff')
},
setupWebSockets(){
@@ -1134,42 +1142,41 @@
left: 0;
right: 0;
bottom: 0;
background-color: var(--menu-accent);
background-color: var(--small_element_bg_color);
z-index: 999;
cursor: pointer;
opacity: 0.9;
opacity: 0.6;
}
/* squire styles */
.input-container-wrapper {
position: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 15%;
right: 15%;
z-index: 1005;
left: 0;
right: 0;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
scrollbar-color: transparent transparent;
overscroll-behavior: contain;
background-color: var(--border_color);
}
.note-wrapper {
background-color: var(--small_element_bg_color);
border: 1px solid var(--menu-accent);
margin: 45px 0 45px 0;
background-color: var(--border_color);
position: relative;
margin: 50px auto;
max-width: 1100px;
}
.note-mini-tag-area {
width: 100%;
padding: 5px 15px 0 15px;
cursor: pointer;
margin-left: auto;
margin-right: auto;
max-width: 1100px;
position: relative;
background: var(--small_element_bg_color);
}
.add-mini-tag {
color: var(--border_color);
@@ -1195,22 +1202,29 @@
Edit Menu Styles START
*/
.edit-menu {
position: fixed;
top: 0;
.menu-top-half, .menu-bottom-half {
display: flex;
justify-content: center;
position: absolute;
z-index: 1001;
background-color: green;
border-radius: 3px;
padding: 5px 5px;
background-color: var(--menu-background);
left: 0;
right: 0;
width: 100%;
display: block;
background-color: var(--small_element_bg_color);
z-index: 1019;
padding: 5px 0;
border: none;
border-bottom: 1px solid var(--menu-accent);
text-align: center;
}
.menu-top-half, .menu-bottom-half {
display: inline-block;
.menu-top-half{
top: 0;
}
.menu-bottom-half {
bottom: 0;
}
.menu-top-half.hide-text .edit-button > span:not(.ui),
.menu-bottom-half.hide-text .edit-button > span:not(.ui)
{
display: none;
}
.edit-button {
background-color: var(--small_element_bg_color);
@@ -1218,14 +1232,15 @@
display: inline-block;
border-radius: 3px;
cursor: pointer;
font-size: 1.4em;
font-size: 1em;
box-shadow: 0 0 1px 0 #c4c4c4;
margin: 0 3px 0;
padding: 6px 0 0 0;
padding: 6px 12px 0;
text-align: center;
min-width: 32px;
min-height: 32px;
min-width: 25px;
min-height: 30px;
/*flex-basis: 100%;*/
white-space: nowrap;
}
.edit-button > i {
font-size: 1em;
@@ -1244,19 +1259,29 @@
}
.edit-divide {
display: inline-block;
background-color: var(--menu-accent);
height: 15px;
width: 1px;
margin: 0 8px;
width: 7px;
padding: 0;
}
@media only screen and (max-width: 740px) {
.edit-spacer {
display: none;
}
.edit-button {
font-size: 1.2em;
}
.menu-top-half, .menu-bottom-half {
padding: 3px 2px;
left: 0;
right: 0;
transform: none;
border-radius: 0;
}
.menu-bottom-half {
position: fixed;
z-index: 100000;
}
.note-wrapper {
margin-bottom: 100px;
margin-top: 38px;
}
}
/*
@@ -1331,68 +1356,22 @@
left: calc(50% + 10px) !important;
right: calc(0% + 10px) !important;
}
@media only screen and (max-width: 740px) {
/*weird inbetween size for tables*/
@media only screen and (max-width: 875px) {
.master-note-edit {
left: 0;
right: 0;
}
.input-container-wrapper {
left: 0;
right: 0;
top: 35px;
bottom: 37px;
background-color: var(--small_element_bg_color);
}
.note-wrapper {
margin: 0;
border: none;
}
}
@media only screen and (max-width: 830px) {
.shade1, .shade2 {
right: 150%;
}
.edit-menu {
background-color: var(--dark_border_color);
}
/*menu overwrites */
.bottom-edit-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: block;
/*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: 37px;
}
.menu-top-half, .menu-bottom-half {
display: flex;
justify-content: space-around;
}
.edit-divide {
display: none;
}
.menu-bottom-half {
z-index: 1005;
position: fixed;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
}
.edit-button {
flex-basis: 100%;
margin: 0 2px;
padding: 6px 0px 0;
}
.done-button {
flex-basis: 150%;
font-size: 13px;
.edit-button > span:not(.ui) {
display: none;
}
}