Compare commits

..

No commits in common. "c8033588dde91454fa924269722e7b0c3a0a7315" and "596e57eaf0678cc27ca91900b0c4f6be3560f2ea" have entirely different histories.

11 changed files with 263 additions and 801 deletions

View File

@ -35,7 +35,7 @@
</style> </style>
<div class="centered"> <div class="centered">
<img class="logo" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo - if you can read this your connection is really slow"> <img class="logo" src="/api/static/assets/logo.svg" alt="logo">
<h1>Solid Scribe</h1> <h1>Solid Scribe</h1>
<h3>Loading...</h3> <h3>Loading...</h3>
</div> </div>

View File

@ -22,13 +22,9 @@
--outline_color: rgba(34,36,38,.15); --outline_color: rgba(34,36,38,.15);
--border_color: rgba(34,36,38,.20); --border_color: rgba(34,36,38,.20);
/* Global purple menu styles */ /*Global purple menu styles */
--menu-border: #534c68; --menu-border: #534c68;
--menu-background: #221f2b; --menu-background: #221f2b;
/* edit menu styles, text, accent */
--menu-text: #5e6268;
--menu-accent: #cecece;
} }
html { html {
@ -233,7 +229,7 @@ a:hover {
border: none; border: none;
/*height: calc(100% - 69px);*/ /*height: calc(100% - 69px);*/
min-height: 500px; min-height: calc(100% - 0px);
background-color: rgba(255,200,0,0.0); background-color: rgba(255,200,0,0.0);
/*margin-bottom: 15px;*/ /*margin-bottom: 15px;*/
@ -242,7 +238,7 @@ a:hover {
/*background: transparent;*/ /*background: transparent;*/
overflow-x: scroll; overflow-x: scroll;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.8em; line-height: 1.5em;
word-wrap: break-word; word-wrap: break-word;
/*border-bottom: 1px solid #ccc;*/ /*border-bottom: 1px solid #ccc;*/
scrollbar-width: none; scrollbar-width: none;
@ -278,7 +274,6 @@ a:hover {
.note-card-text p, .note-card-text p,
.squire-box p { .squire-box p {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5em;
} }
.note-card-text blockquote, .note-card-text blockquote,
.squire-box blockquote { .squire-box blockquote {
@ -344,9 +339,6 @@ a:hover {
.ui.button.shrinking { .ui.button.shrinking {
font-size: 0.85714286rem; font-size: 0.85714286rem;
margin: 0 3px;
padding: 10px 7px !important;
} }
.note-card-text ul > li, .note-card-text ul > li,
@ -432,384 +424,4 @@ a:hover {
transform: translateZ(0); transform: translateZ(0);
opacity: 1; opacity: 1;
} }
}
/*Fomantic Tooltips*/
/* Content */
[data-tooltip] {
position: relative;
}
/* Arrow */
[data-tooltip]:before {
pointer-events: none;
position: absolute;
content: '';
font-size: 1rem;
width: 0.71428571em;
height: 0.71428571em;
background: #FFFFFF;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1901;
-webkit-box-shadow: 1px 1px 0 0 #bababc;
box-shadow: 1px 1px 0 0 #bababc;
}
/* Popup */
[data-tooltip]:after {
pointer-events: none;
content: attr(data-tooltip);
position: absolute;
text-transform: none;
text-align: left;
white-space: nowrap;
font-size: 1rem;
border: 1px solid #D4D4D5;
line-height: 1.4285em;
max-width: none;
background: #FFFFFF;
padding: 0.833em 1em;
font-weight: normal;
font-style: normal;
color: rgba(0, 0, 0, 0.87);
border-radius: 0.28571429rem;
-webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
z-index: 1900;
}
/* Default Position (Top Center) */
[data-tooltip]:not([data-position]):before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
background: #FFFFFF;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;
}
[data-tooltip]:not([data-position]):after {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 100%;
margin-bottom: 0.5em;
}
/* Animation */
[data-tooltip]:before,
[data-tooltip]:after {
pointer-events: none;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
transition: transform 0.1s ease, opacity 0.1s ease;
transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
}
[data-tooltip]:before {
-webkit-transform: rotate(45deg) scale(0) !important;
transform: rotate(45deg) scale(0) !important;
-webkit-transform-origin: center top;
transform-origin: center top;
}
[data-tooltip]:after {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
[data-tooltip]:hover:before {
-webkit-transform: rotate(45deg) scale(1) !important;
transform: rotate(45deg) scale(1) !important;
}
/* Animation Position */
[data-tooltip]:after,
[data-tooltip][data-position="top center"]:after,
[data-tooltip][data-position="bottom center"]:after {
-webkit-transform: translateX(-50%) scale(0) !important;
transform: translateX(-50%) scale(0) !important;
}
[data-tooltip]:hover:after,
[data-tooltip][data-position="bottom center"]:hover:after {
-webkit-transform: translateX(-50%) scale(1) !important;
transform: translateX(-50%) scale(1) !important;
}
[data-tooltip][data-position="left center"]:after,
[data-tooltip][data-position="right center"]:after {
-webkit-transform: translateY(-50%) scale(0) !important;
transform: translateY(-50%) scale(0) !important;
}
[data-tooltip][data-position="left center"]:hover:after,
[data-tooltip][data-position="right center"]:hover:after {
-webkit-transform: translateY(-50%) scale(1) !important;
transform: translateY(-50%) scale(1) !important;
}
[data-tooltip][data-position="top left"]:after,
[data-tooltip][data-position="top right"]:after,
[data-tooltip][data-position="bottom left"]:after,
[data-tooltip][data-position="bottom right"]:after {
-webkit-transform: scale(0) !important;
transform: scale(0) !important;
}
[data-tooltip][data-position="top left"]:hover:after,
[data-tooltip][data-position="top right"]:hover:after,
[data-tooltip][data-position="bottom left"]:hover:after,
[data-tooltip][data-position="bottom right"]:hover:after {
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
[data-tooltip][data-variation~="fixed"]:after {
white-space: normal;
width: 250px;
}
[data-tooltip][data-variation*="wide fixed"]:after {
width: 350px;
}
[data-tooltip][data-variation*="very wide fixed"]:after {
width: 550px;
}
@media only screen and (max-width: 767.98px) {
[data-tooltip][data-variation~="fixed"]:after {
width: 250px;
}
}
/*--------------
Inverted
---------------*/
/* Arrow */
[data-tooltip][data-inverted]:before {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Arrow Position */
[data-tooltip][data-inverted]:before {
background: #1B1C1D;
}
/* Popup */
[data-tooltip][data-inverted]:after {
background: #1B1C1D;
color: #FFFFFF;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
[data-tooltip][data-inverted]:after .header {
background: none;
color: #FFFFFF;
}
/*--------------
Position
---------------*/
[data-position~="top"][data-tooltip]:before {
background: #FFFFFF;
}
/* Top Center */
[data-position="top center"][data-tooltip]:after {
top: auto;
right: auto;
left: 50%;
bottom: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin-bottom: 0.5em;
}
[data-position="top center"][data-tooltip]:before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
background: #FFFFFF;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;
}
/* Top Left */
[data-position="top left"][data-tooltip]:after {
top: auto;
right: auto;
left: 0;
bottom: 100%;
margin-bottom: 0.5em;
}
[data-position="top left"][data-tooltip]:before {
top: auto;
right: auto;
bottom: 100%;
left: 1em;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;
}
/* Top Right */
[data-position="top right"][data-tooltip]:after {
top: auto;
left: auto;
right: 0;
bottom: 100%;
margin-bottom: 0.5em;
}
[data-position="top right"][data-tooltip]:before {
top: auto;
left: auto;
bottom: 100%;
right: 1em;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;
}
[data-position~="bottom"][data-tooltip]:before {
background: #FFFFFF;
-webkit-box-shadow: -1px -1px 0 0 #bababc;
box-shadow: -1px -1px 0 0 #bababc;
}
/* Bottom Center */
[data-position="bottom center"][data-tooltip]:after {
bottom: auto;
right: auto;
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin-top: 0.5em;
}
[data-position="bottom center"][data-tooltip]:before {
bottom: auto;
right: auto;
top: 100%;
left: 50%;
margin-left: -0.07142857rem;
margin-top: 0.14285714rem;
}
/* Bottom Left */
[data-position="bottom left"][data-tooltip]:after {
left: 0;
top: 100%;
margin-top: 0.5em;
}
[data-position="bottom left"][data-tooltip]:before {
bottom: auto;
right: auto;
top: 100%;
left: 1em;
margin-left: -0.07142857rem;
margin-top: 0.14285714rem;
}
/* Bottom Right */
[data-position="bottom right"][data-tooltip]:after {
right: 0;
top: 100%;
margin-top: 0.5em;
}
[data-position="bottom right"][data-tooltip]:before {
bottom: auto;
left: auto;
top: 100%;
right: 1em;
margin-left: -0.14285714rem;
margin-top: 0.07142857rem;
}
/* Left Center */
[data-position="left center"][data-tooltip]:after {
right: 100%;
top: 50%;
margin-right: 0.5em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-position="left center"][data-tooltip]:before {
right: 100%;
top: 50%;
margin-top: -0.14285714rem;
margin-right: -0.07142857rem;
background: #FFFFFF;
-webkit-box-shadow: 1px -1px 0 0 #bababc;
box-shadow: 1px -1px 0 0 #bababc;
}
/* Right Center */
[data-position="right center"][data-tooltip]:after {
left: 100%;
top: 50%;
margin-left: 0.5em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-position="right center"][data-tooltip]:before {
left: 100%;
top: 50%;
margin-top: -0.07142857rem;
margin-left: 0.14285714rem;
background: #FFFFFF;
-webkit-box-shadow: -1px 1px 0 0 #bababc;
box-shadow: -1px 1px 0 0 #bababc;
}
/* Inverted Arrow Color */
[data-inverted][data-position~="bottom"][data-tooltip]:before {
background: #1B1C1D;
-webkit-box-shadow: -1px -1px 0 0 #bababc;
box-shadow: -1px -1px 0 0 #bababc;
}
[data-inverted][data-position="left center"][data-tooltip]:before {
background: #1B1C1D;
-webkit-box-shadow: 1px -1px 0 0 #bababc;
box-shadow: 1px -1px 0 0 #bababc;
}
[data-inverted][data-position="right center"][data-tooltip]:before {
background: #1B1C1D;
-webkit-box-shadow: -1px 1px 0 0 #bababc;
box-shadow: -1px 1px 0 0 #bababc;
}
[data-inverted][data-position~="top"][data-tooltip]:before {
background: #1B1C1D;
}
[data-position~="bottom"][data-tooltip]:before {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
[data-position~="bottom"][data-tooltip]:after {
-webkit-transform-origin: center top;
transform-origin: center top;
}
[data-position="left center"][data-tooltip]:before {
-webkit-transform-origin: top center;
transform-origin: top center;
}
[data-position="left center"][data-tooltip]:after {
-webkit-transform-origin: right center;
transform-origin: right center;
}
[data-position="right center"][data-tooltip]:before {
-webkit-transform-origin: right center;
transform-origin: right center;
}
[data-position="right center"][data-tooltip]:after {
-webkit-transform-origin: left center;
transform-origin: left center;
}
/*--------------
Basic
---------------*/
[data-tooltip][data-variation~="basic"]:before {
display: none;
} }

View File

@ -9,8 +9,7 @@
<template> <template>
<form data-tooltip="Upload File" data-inverted> <form data-tooltip="Upload File" data-inverted>
<label :for="`upfile-${noteId}`" class="clickable"> <label :for="`upfile-${noteId}`" class="clickable">
<!-- <nm-button icon="upload" :text="uploadStatusText"/> --> <nm-button icon="upload" :text="uploadStatusText"/>
<i class="file upload icon"></i>
</label> </label>
<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" /> <input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> --> <!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->

View File

@ -257,7 +257,7 @@
}, },
data: function(){ data: function(){
return { return {
version: '1.0.5', version: '1.0.4',
username: '', username: '',
collapsed: false, collapsed: false,
mobile: false, mobile: false,

View File

@ -4,195 +4,197 @@
id="InputNotes" id="InputNotes"
class="master-note-edit" class="master-note-edit"
@keyup.esc="close()" @keyup.esc="close()"
:class="[{ 'full-focus':(fullFocusEditor) }, 'position-'+position ]" :class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) }, 'position-'+position ]"
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
> >
<!-- Main Menu --> <div class="input-container-wrapper">
<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }">
<!-- Loading indicator -->
<div v-if="loading" class="loading-note">
<div class="edit-spacer"></div> <div class="ui active dimmer">
<div class="ui text loader">{{loadingMessage}}</div>
<div class="menu-top-half">
<div class="edit-button" v-on:click="close()" data-tooltip="Close" data-position="bottom center" data-inverted>
<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>
<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>
<i class="list ol icon"></i>
</div>
<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center" data-inverted>
<i class="palette icon"></i>
</div>
<div class="edit-button" v-on:click="toggleBold()" data-tooltip="Bold" data-position="bottom center" data-inverted>
<i class="bold icon"></i>
</div>
<div class="edit-button" v-on:click="toggleItalic()" data-tooltip="Quote" data-position="bottom center" data-inverted>
<i class="quote left icon"></i>
</div>
<div class="edit-button" v-on:click="modifyFont('1.4em')" data-tooltip="Title" data-position="bottom center" data-inverted>
<i class="text height icon"></i>
</div>
<div class="edit-button" v-on:click="editor.increaseQuoteLevel()" data-tooltip="Indent" data-position="bottom center" data-inverted>
<i class="indent icon"></i>
</div>
<div class="edit-button" v-on:click="editor.decreaseQuoteLevel()" data-tooltip="Outdent" data-position="bottom center" data-inverted>
<i class="outdent icon"></i>
</div>
<div class="edit-button" v-on:click="removeFormatting()" data-tooltip="Remove Formatting" data-position="bottom center" data-inverted>
<i class="remove format icon"></i>
</div>
</div> </div>
<div class="menu-bottom-half">
<div class="edit-divide"></div>
<div class="edit-button" v-on:click="undoCustom()" data-tooltip="Undo" data-position="bottom center" data-inverted>
<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>
<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>
<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>
<i class="image icon"></i>
</div>
<file-upload-button
data-tooltip="Upload File" data-position="bottom center" data-inverted
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>
<i class="tools icon"></i>
</div>
<div class="edit-divide"></div>
<!-- protect -->
<div class="edit-button" v-if="!isEncrypted"
v-on:click="$router.push(`/notes/open/${noteid}/menu/passwordprotect`)" data-tooltip="Password Protect" data-position="bottom center" data-inverted>
<i class="shield alternate icon"></i>
</div>
<!-- data-tooltip="Remove Password Protection" -->
<div class="edit-button" v-if="isEncrypted && isDecrypted" v-on:click="disableEncryption()" data-tooltip="Close" data-position="bottom center" data-inverted>
<i class="unlock icon"></i>
</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>
<!-- data-tooltip="Files on note" -->
<div class="edit-button" v-on:click="openEditAttachment" data-tooltip="Files" data-position="bottom center" data-inverted>
<i class="folder icon"></i>
</div>
</div>
<!-- <span :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
Edited: {{ $helpers.timeAgo(updated) }}
</span> -->
</div> </div>
<div class="bottom-edit-menu"></div> <div class="note-menu">
<div class="input-container-wrapper" :class="{ 'size-down':(sizeDown == true)}" > <nm-button tip="Close" bottom-tip="true" v-on:click.native="close()" icon="close" />
<!-- Loading indicator --> <nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
<div v-if="loading" class="loading-note">
<div class="ui active dimmer"> <nm-button tip="Bold" bottom-tip="true" v-on:click.native="toggleBold()" icon="bold" />
<div class="ui text loader">{{loadingMessage}}</div>
</div> <nm-button tip="Quote" bottom-tip="true" v-on:click.native="toggleItalic()" icon="quote left" />
</div>
<!-- Squire box grows --> <nm-button tip="Big Text" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" />
<div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
<!-- Title input area --> <nm-button tip="Indent" bottom-tip="true" v-on:click.native="editor.increaseQuoteLevel()" icon="indent" />
<textarea
ref="titleTextarea"
v-on:keyup="titleResize"
v-on:keydown="titleResize"
@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">
</textarea>
<!-- Squire Box - only appears if decrypted --> <nm-button tip="Outdent" bottom-tip="true" v-on:click.native="editor.decreaseQuoteLevel()" icon="outdent" />
<div v-show="isDecrypted" id="squire-id" class="squire-box" ref="squirebox" placeholder="Note Text"></div>
<!-- Decrypt note prompt --> <nm-button tip="Remove Formatting" bottom-tip="true" v-on:click.native="removeFormatting()" icon="remove format icon" />
<div v-if="isEncrypted && !isDecrypted" class="ui basic padded segment">
<div class="ui raised segment">
<h3 class="ui center aligned icon header">
<i class="green lock alternate icon"></i>
<span v-if="!lockedOut"> <nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" />
This note is encrypted and requires a password to be opened.
</span>
<!-- note is locked for 5 minutes --> <nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" />
<span v-if="lockedOut">
To many unlock attempts. Note is locked for 5 minutes. </div>
</span>
</h3> <!-- Squire box grows -->
<!-- Decrypt note --> <div class="note-wrapper">
<div class="ui form" v-if="!lockedOut">
<h5 class="ui horizontal divider header" v-if="passwordHint && passwordHint.length > 0"> <textarea
Hint: {{ passwordHint }} ref="titleTextarea"
</h5> v-on:keyup="titleResize"
<div class="field"> v-on:keydown="titleResize"
<input :name="`randomThing-${noteid}`" :id="`yupper-${noteid}`"type="password" v-model="password" placeholder="Note Password" v-on:keyup.enter="decryptNote" autofocus ref="decryptNotePrompt"> @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">
</textarea>
<div v-show="isDecrypted" id="squire-id" class="squire-box" ref="squirebox" placeholder="Note Text"></div>
<!-- Decrypt note prompt -->
<div v-if="isEncrypted && !isDecrypted" class="ui basic padded segment">
<div class="ui raised segment">
<h3 class="ui center aligned icon header">
<i class="green lock alternate icon"></i>
<span v-if="!lockedOut">
This note is encrypted and requires a password to be opened.
</span>
<!-- note is locked for 5 minutes -->
<span v-if="lockedOut">
To many unlock attempts. Note is locked for 5 minutes.
</span>
</h3>
<!-- Decrypt note -->
<div class="ui form" v-if="!lockedOut">
<h5 class="ui horizontal divider header" v-if="passwordHint && passwordHint.length > 0">
Hint: {{ passwordHint }}
</h5>
<div class="field">
<input :name="`randomThing-${noteid}`" :id="`yupper-${noteid}`"type="password" v-model="password" placeholder="Note Password" v-on:keyup.enter="decryptNote" autofocus ref="decryptNotePrompt">
</div>
<div class="field">
<div v-on:click="decryptNote" class="ui green fluid button" v-if="password.length >= 3">
Unlock Note
</div> </div>
<div class="field"> <div class="ui disabled fluid button" v-if="password.length < 3">
<div v-on:click="decryptNote" class="ui green fluid button" v-if="password.length >= 3"> Unlock Note
Unlock Note
</div>
<div class="ui disabled fluid button" v-if="password.length < 3">
Unlock Note
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- && this.$store.getters.getIsUserOnMobile -->
<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
<div class="ui green button">{{statusText}}</div>
</span>
<!-- bottom stats -->
<div class="ui basic segment">
<div class="ui grid compact">
<div class="four wide column">
<button class="ui compact basic fluid icon button shrinking" v-if="!isEncrypted"
v-on:click="$router.push(`/notes/open/${noteid}/menu/passwordprotect`)" data-tooltip="Add Password">
<i class="shield alternate icon"></i>
Protect
</button>
<button class="ui compact basic fluid icon button shrinking" v-if="isEncrypted && isDecrypted" v-on:click="disableEncryption" data-tooltip="Remove Password Protection">
<i class="unlock icon"></i>
Un-protect
</button>
</div>
<div class="four wide column">
<!-- Archive Button -->
<button class="ui compact basic fluid icon button shrinking" v-on:click="onToggleArchived" :data-tooltip="archived == 1?'Move to main list':'Move to Archive'">
<span v-if="archived == 1"><i class="green archive icon"></i> Archived</span>
<span v-if="archived != 1"><i class="archive icon"></i> Archive</span>
</button>
</div>
<div class="four wide column">
<!-- Pin button -->
<button class="ui compact basic fluid icon button shrinking" v-on:click="onTogglePinned" :data-tooltip="pinned == 1?'Un-pin from top':'Pin to top'">
<span v-if="pinned == 1"><i class="green pin icon"></i> Pinned</span>
<span v-if="pinned != 1"><i class="pin icon"></i> Pin</span>
</button></div>
<div class="four wide column">
<!-- files button -->
<button class="ui compact basic fluid icon button shrinking" v-on:click="openEditAttachment" data-tooltip="Files on note">
<i class="folder icon"></i> Files
</button>
</div>
<div class="one wide column"></div>
<div class="eight wide middle aligned column">
<span :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
Edited: {{ $helpers.timeAgo(updated) }}
</span>
</div>
<div class="one wide column"></div>
</div>
</div>
</div> </div>
<!-- && this.$store.getters.getIsUserOnMobile -->
<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
<div class="ui green button">{{statusText}}</div>
</span>
<!-- Note options on the bottom of note -->
<div class="all-settings">
<div class="note-menu shrink-icons-on-mobile">
<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" text="Check" />
<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" text="List"/>
<!-- colors button -->
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/colors`)"
icon="paint brush"
text="Color"
tip="Note Color"
></nm-button>
<!-- Tags -->
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)"
icon="tags"
text="Tags"
tip="Tags"
></nm-button>
<!-- add images panel -->
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)"
icon="image"
text="Images"
tip="Images"
></nm-button>
<!-- file upload button -->
<file-upload-button
class="nm-button"
:noteId="noteid" />
<nm-button
icon="ellipsis horizontal"
text="Options"
tip="More Options"
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/options`)" />
</div>
</div>
</div>
<!-- color picker --> <!-- color picker -->
<color-tooltip <color-tooltip
v-if="colorpicker" v-if="colorpicker"
@ -201,6 +203,7 @@
/> />
<!-- Side slide menus for colors, tags, images and other options --> <!-- Side slide menus for colors, tags, images and other options -->
<side-slide-menu v-show="colors" v-on:close="colors = false" name="colors"> <side-slide-menu v-show="colors" v-on:close="colors = false" name="colors">
<color-picker <color-picker
@changeColor="onChangeColor" @changeColor="onChangeColor"
@ -316,13 +319,7 @@
</div> </div>
</side-slide-menu> </side-slide-menu>
<!-- Show side shades if user is on desktop only --> <!-- <div class="full-focus-shade"></div> -->
<div class="full-focus-shade shade1"
:class="{ 'slide-out-left':(sizeDown == true) }"
v-on:click="close()"></div>
<div class="full-focus-shade shade2"
:class="{ 'slide-out-right':(sizeDown == true) }"
v-on:click="close()"></div>
</div> </div>
</template> </template>
@ -463,7 +460,7 @@
this.hashedPass = '' this.hashedPass = ''
clearTimeout(this.autoLockTimeout) clearTimeout(this.autoLockTimeout)
// this.$io.emit('leave_room', this.rawTextId) this.$io.emit('leave_room', this.rawTextId)
this.$bus.$off('new_file_upload') this.$bus.$off('new_file_upload')
@ -1266,9 +1263,6 @@
}) })
}, },
setupWebSockets(){ setupWebSockets(){
return
//Tell server to push this note into a room //Tell server to push this note into a room
this.$io.emit('join_room', this.rawTextId) this.$io.emit('join_room', this.rawTextId)
@ -1360,98 +1354,33 @@
<style type="text/css" scoped> <style type="text/css" scoped>
.full-focus-shade {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--menu-accent);
z-index: 999;
cursor: pointer;
opacity: 0.8;
}
.shade1 {
left: 50%;
}
.shade2 {
right: 50%;
}
/* squire styles */ /* squire styles */
.input-container-wrapper { .input-container-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 15%;
right: 15%;
z-index: 1005;
overflow-x: scroll;
scrollbar-width: none;
}
.note-wrapper {
background-color: var(--background_color);
border: 1px solid var(--menu-accent);;
margin: 45px 0 45px 0;
}
/* display: block;
height: 100%;
Edit Menu Styles START width: 100%;
margin: 0;
*/ padding: 0;
.edit-menu { overflow: hidden;
position: fixed;
top: 0; display: flex;
flex-direction: column;
}
/*Three main elements nested in panel */
.note-menu {
/*position: absolute;*/
top: 0;/*
left: 0; left: 0;
right: 0; right: 0;*/
width: 100%;
display: block; flex-grow: 0;
background-color: var(--background_color);
z-index: 1019;
padding: 3px 5px;
border: none;
border-bottom: 1px solid var(--menu-accent);
} }
.menu-top-half, .menu-bottom-half { .note-wrapper {
display: inline-block; flex-grow: 1;
overflow: scroll;
} }
.edit-spacer {
width: calc(15% - 10px);
display: inline-block;
height: 10px;
opacity: 0;
}
.edit-button {
background-color: var(--background_color);
color: var(--menu-text);
display: inline-block;
font-size: 1.4em;
padding: 4px 1px 5px 4px;
border-radius: 3px;
cursor: pointer;
}
.edit-button:hover {
background-color: var(--menu-accent);
}
.edit-divide {
display: inline-block;
background-color: var(--menu-accent);
height: 15px;
width: 1px;
margin: 0 3px;
padding: 0;
}
@media only screen and (max-width: 740px) {
.edit-spacer {
display: none;
}
}
/*
Edit Menu Styles END
*/
.stealth-input { .stealth-input {
width: 100%; width: 100%;
@ -1459,17 +1388,29 @@
background-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1);
border: none; border: none;
font-size: 1.7em; font-size: 1.7em;
/*line-height: 1.7em;*/
color: var(--text_color); color: var(--text_color);
resize: none; resize: none;
overflow: hidden; overflow: hidden;
margin: 0;
} }
/*Settings manager styles */ /*Settings manager styles */
.all-settings { .all-settings {
/*border-top: 1px solid #534c68;*/
background: #221f2b; background: #221f2b;
/*position: absolute;*/
/*bottom: 40px;*/
/*right: 0;*/
/*left: 0;*/
z-index: 99; z-index: 99;
/*border: 1px solid;*/
/*background-color: var(--background_color);*/
/*border-color: var(--border_color);*/
/*box-sizing: border-box;*/
/*border-radius: 7px;*/
/*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/
/*padding: 1.2em 0 0;*/
flex-grow: 0; flex-grow: 0;
} }
/*End Settings manager styles */ /*End Settings manager styles */
@ -1480,8 +1421,12 @@
.master-note-edit { .master-note-edit {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
background: var(--background_color);
/*color: var(--text_color);*/
height: 100vh; height: 100vh;
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
z-index: 1001; z-index: 1001;
/*overflow-x: scroll;*/
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
@ -1498,49 +1443,12 @@
left: 50%; left: 50%;
right: 0; right: 0;
} }
.master-note-edit.full-focus {
left: 15%;
right: 15%;
}
@media only screen and (max-width: 740px) { @media only screen and (max-width: 740px) {
.input-container-wrapper { .master-note-edit.position-0 {
left: 0; left: 0;
right: 0; right: 0;
top: 35px; top: 0;
bottom: 40px;
background-color: var(--background_color);
}
.note-wrapper {
margin: 0;
border: none;
}
.shade1, .shade2 {
right: 150%;
}
/*menu overwrites */
.bottom-edit-menu {
position: fixed;
bottom: 0; bottom: 0;
left: 0;
right: 0;
width: 100%;
display: block;
background-color: var(--background_color);
z-index: 1012;
border: none;
border-top: 1px solid var(--menu-accent);
min-height: 40px;
}
.edit-menu {
text-align: center;
}
.menu-bottom-half {
z-index: 1005;
position: fixed;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
} }
} }
@ -1549,9 +1457,10 @@
left: 50%; left: 50%;
right: 0%; right: 0%;
} }
/* .master-note-edit.position-1.full-focus {
left: 20%;
right: 20%;
}*/
.master-note-edit.position-2 { .master-note-edit.position-2 {
left: 0%; left: 0%;
right: 50%; right: 50%;
@ -1565,59 +1474,17 @@
box-shadow: none; box-shadow: none;
} }
/* animations START */ .size-down {
animation: size-down 0.5s ease;
}
.slide-out-top { @keyframes size-down {
animation: slide-out-top 0.5s ease; 0% {
top: 0;
} }
100% {
@keyframes slide-out-top { top: 150vh;
0% {
top: 0;
}
100% {
top: -100px;
}
} }
}
.size-down {
animation: size-down 0.5s ease;
}
@keyframes size-down {
0% {
top: 0;
}
100% {
top: 150vh;
}
}
.slide-out-left {
animation: slide-out-left 0.5s ease;
}
@keyframes slide-out-left {
0% {
left: 85%;
}
100% {
left: 150%;
}
}
.slide-out-right {
animation: slide-out-right 0.5s ease;
}
@keyframes slide-out-right {
0% {
right: 85%;
}
100% {
right: 150%;
}
}
/* animations END */
</style> </style>

View File

@ -5,7 +5,7 @@
left: 0; left: 0;
right: 55%; right: 55%;
bottom: 0; bottom: 0;
z-index: 1020; z-index: 400;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
@ -24,14 +24,14 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 50%;
bottom: 0; bottom: 0;
color: red; color: red;
/*background-color: rgba(0,0,0,0.5);*/ background-color: rgba(0,0,0,0.5);
/*background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);*/ /*background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);*/
z-index: 1019; z-index: 399;
overflow: hidden; overflow: hidden;
/*cursor: pointer;*/ cursor: pointer;
} }
.slide-shadow.full-shadow { .slide-shadow.full-shadow {

View File

@ -1,7 +1,7 @@
<style type="text/css" scoped> <style type="text/css" scoped>
.colors { .colors {
position: absolute; position: absolute;
z-index: 1023; z-index: 1005;
top: 42px; top: 42px;
/*height: 100px;*/ /*height: 100px;*/
/*width: 415px;*/ /*width: 415px;*/
@ -25,7 +25,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1022; z-index: 1004;
background-color: transparent; background-color: transparent;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;

View File

@ -10,26 +10,7 @@ import store from './stores/mainStore';
import App from './App' import App from './App'
import router from './router' import router from './router'
//Include entire fomantic ui library import 'fomantic-ui-css/semantic.css';
// import 'fomantic-ui-css/semantic.css';
//Required site and reset CSS
import 'fomantic-ui-css/components/reset.css'
import 'fomantic-ui-css/components/site.css' //modified to remove included LATO fonts
//Only include parts that are used
import 'fomantic-ui-css/components/button.css'
import 'fomantic-ui-css/components/container.css'
import 'fomantic-ui-css/components/form.css'
import 'fomantic-ui-css/components/grid.css'
import 'fomantic-ui-css/components/header.css'
import 'fomantic-ui-css/components/icon.css'
import 'fomantic-ui-css/components/input.css'
import 'fomantic-ui-css/components/segment.css'
import 'fomantic-ui-css/components/label.css'
require('./assets/semantic-helper.css') require('./assets/semantic-helper.css')
// Fonts // Fonts
require('./assets/roboto-latin.woff2') require('./assets/roboto-latin.woff2')
@ -65,6 +46,7 @@ import Helpers from './Helpers'
Vue.use(Vuex) Vue.use(Vuex)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,

View File

@ -1,15 +1,14 @@
<template> <template>
<div class="ui basic segment no-fluf-segment"> <div class="ui basic segment no-fluf-segment">
<div class="ui grid" ref="content"> <div class="ui grid" :class="{ 'mush-it-up':showOneColumn() }" ref="content">
<div class="sixteen wide column"> <div class="sixteen wide column">
<!-- :class="{ 'sixteen wide column':showOneColumn(), 'sixteen wide column':!showOneColumn() }" --> <!-- :class="{ 'sixteen wide column':showOneColumn(), 'sixteen wide column':!showOneColumn() }" -->
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="ten wide column" <div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
:class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
<div class="ui basic button shrinking" <div class="ui basic button shrinking"
v-on:click="updateFastFilters(3)" v-on:click="updateFastFilters(3)"
@ -76,7 +75,10 @@
</h3> </h3>
<!-- Go to one wide column, do not do this on mobile interface --> <!-- Go to one wide column, do not do this on mobile interface -->
<div :class="{'one-column':( showOneColumn() )}"> <div :class="{'one-column':(
(activeNoteId1 != null || activeNoteId2 != null) &&
!$store.getters.getIsUserOnMobile
)}">
<!-- render each section based on notes in set --> <!-- render each section based on notes in set -->
<div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section"> <div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section">
@ -134,9 +136,7 @@
export default { export default {
name: 'SearchBar', name: 'SearchBar',
components: { components: {
'input-notes': require('@/components/NoteInputPanel.vue').default,
'input-notes': () => import(/* webpackChunkName: "NoteInputPanel" */ '@/components/NoteInputPanel.vue'),
'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default, 'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
'fast-filters': require('@/components/FastFilters.vue').default, 'fast-filters': require('@/components/FastFilters.vue').default,
'search-input': require('@/components/SearchInput.vue').default, 'search-input': require('@/components/SearchInput.vue').default,
@ -308,9 +308,6 @@
}, },
methods: { methods: {
showOneColumn(){ showOneColumn(){
return this.$store.getters.getIsUserOnMobile
//If note 1 or 2 is open, show one column. Or if the user is on mobile //If note 1 or 2 is open, show one column. Or if the user is on mobile
return (this.activeNoteId1 != null || this.activeNoteId2 != null) && return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
!this.$store.getters.getIsUserOnMobile !this.$store.getters.getIsUserOnMobile
@ -732,7 +729,9 @@
} }
</script> </script>
<style type="text/css" scoped> <style type="text/css" scoped>
.mush-it-up {
width: calc(50% - 130px);
}
.detail { .detail {
float: right; float: right;
} }

View File

@ -2,14 +2,22 @@ import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
//Breaking components into function sections allows webpack to load them dynamically //Breaking components into function sections allows webpack to load them dynamically
//import HomePage from '@/pages/HomePage'
const HomePage = () => import('@/pages/HomePage')
const HomePage = () => import(/* webpackChunkName: "HomePage" */ '@/pages/HomePage') // import LoginPage from '@/pages/LoginPage'
const LoginPage = () => import(/* webpackChunkName: "LoginPage" */ '@/pages/LoginPage') const LoginPage = () => import('@/pages/LoginPage')
const HelpPage = () => import(/* webpackChunkName: "HelpPage" */ '@/pages/HelpPage')
const SharePage = () => import(/* webpackChunkName: "SharePage" */ '@/pages/SharePage') // import HelpPage from '@/pages/HelpPage'
const NotesPage = () => import(/* webpackChunkName: "NotesPage" */ '@/pages/NotesPage') const HelpPage = () => import('@/pages/HelpPage')
const QuickPage = () => import(/* webpackChunkName: "QuickPage" */ '@/pages/QuickPage')
const AttachmentsPage = () => import(/* webpackChunkName: "AttachmentsPage" */ '@/pages/AttachmentsPage') // import SharePage from '@/pages/SharePage'
const SharePage = () => import('@/pages/SharePage')
//These guys can all be loaded as a chunk
import NotesPage from '@/pages/NotesPage'
import QuickPage from '@/pages/QuickPage'
import AttachmentsPage from '@/pages/AttachmentsPage'
Vue.use(Router) Vue.use(Router)

View File

@ -53,8 +53,6 @@ export default new Vuex.Store({
'text_color': '#3d3d3d', 'text_color': '#3d3d3d',
'outline_color': 'rgba(34,36,38,0.15)', 'outline_color': 'rgba(34,36,38,0.15)',
'border_color': 'rgba(34,36,38,0.20)', 'border_color': 'rgba(34,36,38,0.20)',
'menu-accent': '#cecece',
'menu-text': '#5e6268',
} }
//Night mode colors //Night mode colors
if(state.nightMode){ if(state.nightMode){
@ -63,9 +61,6 @@ export default new Vuex.Store({
'text_color': '#a98457', 'text_color': '#a98457',
'outline_color': '#a98457', 'outline_color': '#a98457',
'border_color': 'rgba(255, 255, 255, 0.31)', 'border_color': 'rgba(255, 255, 255, 0.31)',
'menu-accent': '#626262',
'menu-text': '#d9d9d9',
} }
} }