|
|
|
@@ -2,7 +2,7 @@
|
|
|
|
|
<!-- change class to .master-note-edit to have it popup on the screen -->
|
|
|
|
|
<div
|
|
|
|
|
id="InputNotes"
|
|
|
|
|
class="master-note-edit full-focus position-0"
|
|
|
|
|
class="master-note-edit"
|
|
|
|
|
@keyup.esc="closeButtonAction()"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
@@ -13,47 +13,51 @@
|
|
|
|
|
<div class="edit-spacer"></div>
|
|
|
|
|
|
|
|
|
|
<div class="menu-top-half">
|
|
|
|
|
<div class="edit-button" v-on:click="closeButtonAction()" data-tooltip="Close" data-position="bottom center" data-inverted>
|
|
|
|
|
<div class="edit-button" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
|
|
|
|
|
<i class="close icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-divide"></div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-on:click="toggleList('ul')" data-tooltip="Task List" data-position="bottom center" data-inverted :class="{'edit-active':activeToDo}">
|
|
|
|
|
<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="Numbered List" data-position="bottom center" data-inverted :class="{'edit-active':activeList}">
|
|
|
|
|
<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" data-inverted :style="{'color':activeColor}">
|
|
|
|
|
<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center">
|
|
|
|
|
<i class="font icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-on:click="toggleBold()" data-tooltip="Bold" data-position="bottom center" data-inverted :class="{'edit-active':activeBold}">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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" data-position="bottom center" data-inverted :class="{'edit-active':activeItalics}">
|
|
|
|
|
<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" data-position="bottom center" data-inverted :class="{'edit-active':activeUnderline}">
|
|
|
|
|
<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="modifyFont('1.4em')" data-tooltip="Title" data-position="bottom center" data-inverted :class="{'edit-active':activeTitle}">
|
|
|
|
|
<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-divide"></div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-on:click="editor.increaseQuoteLevel()" data-tooltip="Indent" data-position="bottom center" data-inverted>
|
|
|
|
|
<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="Outdent" data-position="bottom center" data-inverted>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
@@ -61,60 +65,49 @@
|
|
|
|
|
|
|
|
|
|
<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" data-inverted>
|
|
|
|
|
<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="insertDivide()" data-tooltip="Insert Divide" data-position="bottom center" data-inverted>
|
|
|
|
|
<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" data-inverted>
|
|
|
|
|
<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" data-position="bottom center" data-inverted>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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']}">
|
|
|
|
|
<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" data-inverted>
|
|
|
|
|
<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" data-inverted>
|
|
|
|
|
<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" data-inverted
|
|
|
|
|
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" data-inverted>
|
|
|
|
|
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/options`)" data-tooltip="More Options" data-position="bottom center">
|
|
|
|
|
<i class="ellipsis horizontal icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-divide"></div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
<div class="edit-button" v-on:click="onToggleArchived()" :data-tooltip="archived == 1?'Move to main list':'Move to Archive'" data-position="bottom center" data-inverted>
|
|
|
|
|
<span v-if="archived == 1"><i class="green archive icon"></i></span>
|
|
|
|
|
<span v-if="archived != 1"><i class="archive icon"></i></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-on:click="onTogglePinned" :data-tooltip="pinned == 1?'Un-pin from top':'Pin to top'" data-position="bottom center" data-inverted>
|
|
|
|
|
<span v-if="pinned == 1"><i class="green pin icon"></i></span>
|
|
|
|
|
<span v-if="pinned != 1"><i class="pin icon"></i></span>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-if="usersOnNote > 1">
|
|
|
|
|
<div class="edit-button" v-if="usersOnNote > 1" :data-tooltip="`Viewers`" data-position="bottom center">
|
|
|
|
|
<i class="green eye icon"></i> {{ usersOnNote }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -123,7 +116,7 @@
|
|
|
|
|
<i class="purple bolt icon"></i>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-on:click=" hash=0; save() ">
|
|
|
|
|
<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>
|
|
|
|
@@ -131,7 +124,7 @@
|
|
|
|
|
</i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="edit-button" v-if="diffsApplied > 0">
|
|
|
|
|
<div class="edit-button" v-if="diffsApplied > 0" :data-tooltip="`Unsaved Changes`" data-position="bottom center">
|
|
|
|
|
+{{ diffsApplied }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -172,8 +165,8 @@
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- little tags on the side -->
|
|
|
|
|
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }">
|
|
|
|
|
<!-- 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 }}
|
|
|
|
@@ -222,7 +215,24 @@
|
|
|
|
|
<div class="ui basic padded segment">
|
|
|
|
|
<div class="ui grid">
|
|
|
|
|
<div class="sixteen wide column">
|
|
|
|
|
<h2>Additional Note Options</h2>
|
|
|
|
|
<h3>Note Options</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="eight wide column">
|
|
|
|
|
<div class="ui labeled icon fluid basic button" v-on:click="onToggleArchived()">
|
|
|
|
|
<i class="archive icon" :class="{'green':(archived == 1)}"></i>
|
|
|
|
|
<span v-if="archived == 1">Un-Archive Note</span>
|
|
|
|
|
<span v-if="archived != 1">Archive Note</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="eight wide column">
|
|
|
|
|
<div class="ui labeled icon fluid basic button" v-on:click="onTogglePinned">
|
|
|
|
|
<i class="pin icon" :class="{'green':(pinned == 1)}"></i>
|
|
|
|
|
<span v-if="pinned == 1">Un-Pin Note</span>
|
|
|
|
|
<span v-if="pinned != 1">Pin Note</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sixteen wide column">
|
|
|
|
|
<h3>List Options</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sixteen wide column">
|
|
|
|
|
<div class="ui labeled icon fluid basic button" v-on:click="sortList">
|
|
|
|
@@ -242,6 +252,9 @@
|
|
|
|
|
Uncheck All
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sixteen wide column">
|
|
|
|
|
<h3>Misc Options</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="eight wide column">
|
|
|
|
|
<div class="ui labeled icon fluid basic button" v-on:click="calculateMath" data-tooltip="Calculates algebra before '='">
|
|
|
|
|
<i class="calculator icon"></i>
|
|
|
|
@@ -258,7 +271,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sixteen wide column" v-if="rawTextId > 0">
|
|
|
|
|
<h2>Share Note</h2>
|
|
|
|
|
<h3>Share Note</h3>
|
|
|
|
|
<share-note-component
|
|
|
|
|
:note-id="noteid"
|
|
|
|
|
:raw-text-id="rawTextId"
|
|
|
|
@@ -287,7 +300,7 @@
|
|
|
|
|
<div class="full-focus-shade shade1"
|
|
|
|
|
:class="{ 'slide-out-left':sizeDown }"
|
|
|
|
|
v-on:click="closeButtonAction()"></div>
|
|
|
|
|
<div class="full-focus-shade shade2"
|
|
|
|
|
<div class="full-focus-shade shade2"
|
|
|
|
|
:class="{ 'slide-out-right':sizeDown }"
|
|
|
|
|
v-on:click="closeButtonAction()"></div>
|
|
|
|
|
|
|
|
|
@@ -404,6 +417,7 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeMount(){
|
|
|
|
|
|
|
|
|
|
this.$bus.$on('new_file_upload', ({noteId, imageCode}) => {
|
|
|
|
|
if(this.noteid == noteId && this.editor){
|
|
|
|
|
this.editor.moveCursorToEnd()
|
|
|
|
@@ -438,6 +452,9 @@
|
|
|
|
|
// document.addEventListener('visibilitychange', this.checkForUpdatedNote)
|
|
|
|
|
|
|
|
|
|
//Init squire as early as possible
|
|
|
|
|
if(this.editor && this.editor.destroy){
|
|
|
|
|
this.editor.destroy()
|
|
|
|
|
}
|
|
|
|
|
this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' })
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
@@ -1052,10 +1069,11 @@
|
|
|
|
|
titleResize(){
|
|
|
|
|
//Resize the title field
|
|
|
|
|
let element = this.$refs.titleTextarea
|
|
|
|
|
let padding = 0
|
|
|
|
|
if(element){
|
|
|
|
|
|
|
|
|
|
element.style.height = 'auto'
|
|
|
|
|
element.style.height = (element.scrollHeight + padding) +'px'
|
|
|
|
|
element.style.height = 'auto'
|
|
|
|
|
element.style.height = (element.scrollHeight) +'px'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@@ -1072,7 +1090,7 @@
|
|
|
|
|
background-color: var(--menu-accent);
|
|
|
|
|
z-index: 999;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
opacity: 0.88;
|
|
|
|
|
}
|
|
|
|
|
.shade1 {
|
|
|
|
|
left: 50%;
|
|
|
|
@@ -1089,7 +1107,8 @@
|
|
|
|
|
left: 15%;
|
|
|
|
|
right: 15%;
|
|
|
|
|
z-index: 1005;
|
|
|
|
|
overflow-x: scroll;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
scrollbar-color: transparent transparent;
|
|
|
|
|
}
|
|
|
|
@@ -1248,20 +1267,20 @@
|
|
|
|
|
}
|
|
|
|
|
/*End Settings manager styles */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* container styles change based on mobile and number of open screens */
|
|
|
|
|
.master-note-edit {
|
|
|
|
|
/* .master-note-edit {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
left: 15%;
|
|
|
|
|
right: 15%;
|
|
|
|
|
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
scrollbar-color: transparent transparent;
|
|
|
|
|
}
|
|
|
|
|
}*/
|
|
|
|
|
.loading-note {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
@@ -1282,19 +1301,18 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* One note open, in the middle of the screen */
|
|
|
|
|
.master-note-edit.position-0 {
|
|
|
|
|
left: 50%;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
.master-note-edit.full-focus {
|
|
|
|
|
left: 15%;
|
|
|
|
|
right: 15%;
|
|
|
|
|
}
|
|
|
|
|
.side-menu-open {
|
|
|
|
|
left: calc(50% + 10px) !important;
|
|
|
|
|
right: calc(0% + 10px) !important;
|
|
|
|
|
}
|
|
|
|
|
@media only screen and (max-width: 740px) {
|
|
|
|
|
|
|
|
|
|
.master-note-edit {
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.input-container-wrapper {
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
@@ -1338,27 +1356,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Two Notes Open, each takes up 50% of the space */
|
|
|
|
|
.master-note-edit.position-1 {
|
|
|
|
|
left: 50%;
|
|
|
|
|
right: 0%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.master-note-edit.position-2 {
|
|
|
|
|
left: 0%;
|
|
|
|
|
right: 50%;
|
|
|
|
|
}
|
|
|
|
|
.master-note-edit.position-3 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: inherit;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 200px;
|
|
|
|
|
height: auto;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* animations START */
|
|
|
|
|
|
|
|
|
|
.slide-out-top {
|
|
|
|
|