Compare commits
2 Commits
596e57eaf0
...
c8033588dd
| Author | SHA1 | Date | |
|---|---|---|---|
|
c8033588dd | ||
|
|
bcb31e9af5 |
@ -35,7 +35,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="centered">
|
<div class="centered">
|
||||||
<img class="logo" src="/api/static/assets/logo.svg" alt="logo">
|
<img class="logo" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo - if you can read this your connection is really slow">
|
||||||
<h1>Solid Scribe</h1>
|
<h1>Solid Scribe</h1>
|
||||||
<h3>Loading...</h3>
|
<h3>Loading...</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -22,9 +22,13 @@
|
|||||||
--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 {
|
||||||
@ -229,7 +233,7 @@ a:hover {
|
|||||||
border: none;
|
border: none;
|
||||||
/*height: calc(100% - 69px);*/
|
/*height: calc(100% - 69px);*/
|
||||||
|
|
||||||
min-height: calc(100% - 0px);
|
min-height: 500px;
|
||||||
background-color: rgba(255,200,0,0.0);
|
background-color: rgba(255,200,0,0.0);
|
||||||
/*margin-bottom: 15px;*/
|
/*margin-bottom: 15px;*/
|
||||||
|
|
||||||
@ -238,7 +242,7 @@ a:hover {
|
|||||||
/*background: transparent;*/
|
/*background: transparent;*/
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
line-height: 1.5em;
|
line-height: 1.8em;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
/*border-bottom: 1px solid #ccc;*/
|
/*border-bottom: 1px solid #ccc;*/
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
@ -274,6 +278,7 @@ 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 {
|
||||||
@ -339,6 +344,9 @@ 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,
|
||||||
@ -424,4 +432,384 @@ 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;
|
||||||
}
|
}
|
||||||
@ -9,7 +9,8 @@
|
|||||||
<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> -->
|
||||||
|
|||||||
@ -257,7 +257,7 @@
|
|||||||
},
|
},
|
||||||
data: function(){
|
data: function(){
|
||||||
return {
|
return {
|
||||||
version: '1.0.4',
|
version: '1.0.5',
|
||||||
username: '',
|
username: '',
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
mobile: false,
|
mobile: false,
|
||||||
|
|||||||
@ -4,196 +4,194 @@
|
|||||||
id="InputNotes"
|
id="InputNotes"
|
||||||
class="master-note-edit"
|
class="master-note-edit"
|
||||||
@keyup.esc="close()"
|
@keyup.esc="close()"
|
||||||
:class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) }, 'position-'+position ]"
|
:class="[{ 'full-focus':(fullFocusEditor) }, 'position-'+position ]"
|
||||||
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
|
|
||||||
>
|
>
|
||||||
|
|
||||||
<div class="input-container-wrapper">
|
<!-- Main Menu -->
|
||||||
|
<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }">
|
||||||
|
|
||||||
<!-- Loading indicator -->
|
|
||||||
<div v-if="loading" class="loading-note">
|
|
||||||
<div class="ui active dimmer">
|
|
||||||
<div class="ui text loader">{{loadingMessage}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="note-menu">
|
|
||||||
|
|
||||||
<nm-button tip="Close" bottom-tip="true" v-on:click.native="close()" icon="close" />
|
|
||||||
|
|
||||||
<nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
|
|
||||||
|
|
||||||
<nm-button tip="Bold" bottom-tip="true" v-on:click.native="toggleBold()" icon="bold" />
|
|
||||||
|
|
||||||
<nm-button tip="Quote" bottom-tip="true" v-on:click.native="toggleItalic()" icon="quote left" />
|
|
||||||
|
|
||||||
<nm-button tip="Big Text" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" />
|
<div class="edit-spacer"></div>
|
||||||
|
|
||||||
<nm-button tip="Indent" bottom-tip="true" v-on:click.native="editor.increaseQuoteLevel()" icon="indent" />
|
<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>
|
||||||
|
|
||||||
<nm-button tip="Outdent" bottom-tip="true" v-on:click.native="editor.decreaseQuoteLevel()" icon="outdent" />
|
<div class="edit-divide"></div>
|
||||||
|
|
||||||
<nm-button tip="Remove Formatting" bottom-tip="true" v-on:click.native="removeFormatting()" icon="remove format icon" />
|
<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>
|
||||||
|
|
||||||
<nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" />
|
<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>
|
||||||
|
|
||||||
<nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" />
|
<div class="edit-button" v-on:click="toggleBold()" data-tooltip="Bold" data-position="bottom center" data-inverted>
|
||||||
|
<i class="bold icon"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="edit-button" v-on:click="toggleItalic()" data-tooltip="Quote" data-position="bottom center" data-inverted>
|
||||||
|
<i class="quote left icon"></i>
|
||||||
<!-- Squire box grows -->
|
</div>
|
||||||
<div class="note-wrapper">
|
<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>
|
||||||
<textarea
|
</div>
|
||||||
ref="titleTextarea"
|
<div class="edit-button" v-on:click="editor.increaseQuoteLevel()" data-tooltip="Indent" data-position="bottom center" data-inverted>
|
||||||
v-on:keyup="titleResize"
|
<i class="indent icon"></i>
|
||||||
v-on:keydown="titleResize"
|
</div>
|
||||||
@keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()"
|
<div class="edit-button" v-on:click="editor.decreaseQuoteLevel()" data-tooltip="Outdent" data-position="bottom center" data-inverted>
|
||||||
rows="1"
|
<i class="outdent icon"></i>
|
||||||
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
|
</div>
|
||||||
v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input">
|
<div class="edit-button" v-on:click="removeFormatting()" data-tooltip="Remove Formatting" data-position="bottom center" data-inverted>
|
||||||
</textarea>
|
<i class="remove format icon"></i>
|
||||||
|
|
||||||
<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 class="ui disabled fluid button" v-if="password.length < 3">
|
|
||||||
Unlock Note
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-bottom-half">
|
||||||
|
<div class="edit-divide"></div>
|
||||||
|
|
||||||
<!-- bottom stats -->
|
|
||||||
<div class="ui basic segment">
|
<div class="edit-button" v-on:click="undoCustom()" data-tooltip="Undo" data-position="bottom center" data-inverted>
|
||||||
<div class="ui grid compact">
|
<i class="undo icon"></i>
|
||||||
|
|
||||||
<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 class="edit-divide"></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- && this.$store.getters.getIsUserOnMobile -->
|
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" data-inverted>
|
||||||
<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
|
<i class="paint brush icon"></i>
|
||||||
<div class="ui green button">{{statusText}}</div>
|
</div>
|
||||||
</span>
|
<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>
|
||||||
|
|
||||||
<!-- 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
|
<file-upload-button
|
||||||
class="nm-button"
|
data-tooltip="Upload File" data-position="bottom center" data-inverted
|
||||||
|
class="edit-button"
|
||||||
:noteId="noteid" />
|
:noteId="noteid" />
|
||||||
|
|
||||||
<nm-button
|
<div class="edit-divide"></div>
|
||||||
icon="ellipsis horizontal"
|
|
||||||
text="Options"
|
|
||||||
tip="More Options"
|
|
||||||
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/options`)" />
|
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
|
<!-- <span :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
|
||||||
|
Edited: {{ $helpers.timeAgo(updated) }}
|
||||||
|
</span> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="bottom-edit-menu"></div>
|
||||||
|
|
||||||
|
<div class="input-container-wrapper" :class="{ 'size-down':(sizeDown == true)}" >
|
||||||
|
|
||||||
|
<!-- Loading indicator -->
|
||||||
|
<div v-if="loading" class="loading-note">
|
||||||
|
<div class="ui active dimmer">
|
||||||
|
<div class="ui text loader">{{loadingMessage}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Squire box grows -->
|
||||||
|
<div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
|
||||||
|
|
||||||
|
<!-- Title input area -->
|
||||||
|
<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 -->
|
||||||
|
<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 class="ui disabled fluid button" v-if="password.length < 3">
|
||||||
|
Unlock Note
|
||||||
|
</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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- color picker -->
|
<!-- color picker -->
|
||||||
<color-tooltip
|
<color-tooltip
|
||||||
@ -203,7 +201,6 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 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"
|
||||||
@ -319,7 +316,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</side-slide-menu>
|
</side-slide-menu>
|
||||||
|
|
||||||
<!-- <div class="full-focus-shade"></div> -->
|
<!-- Show side shades if user is on desktop only -->
|
||||||
|
<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>
|
||||||
@ -460,7 +463,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')
|
||||||
|
|
||||||
@ -1263,6 +1266,9 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
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)
|
||||||
|
|
||||||
@ -1354,33 +1360,98 @@
|
|||||||
|
|
||||||
<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;
|
||||||
display: block;
|
top: 0;
|
||||||
height: 100%;
|
bottom: 0;
|
||||||
width: 100%;
|
left: 15%;
|
||||||
margin: 0;
|
right: 15%;
|
||||||
padding: 0;
|
z-index: 1005;
|
||||||
overflow: hidden;
|
overflow-x: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
/*Three main elements nested in panel */
|
.note-wrapper {
|
||||||
.note-menu {
|
background-color: var(--background_color);
|
||||||
/*position: absolute;*/
|
border: 1px solid var(--menu-accent);;
|
||||||
top: 0;/*
|
margin: 45px 0 45px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
Edit Menu Styles START
|
||||||
|
|
||||||
|
*/
|
||||||
|
.edit-menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;*/
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
flex-grow: 0;
|
display: block;
|
||||||
|
background-color: var(--background_color);
|
||||||
|
z-index: 1019;
|
||||||
|
padding: 3px 5px;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid var(--menu-accent);
|
||||||
}
|
}
|
||||||
.note-wrapper {
|
.menu-top-half, .menu-bottom-half {
|
||||||
flex-grow: 1;
|
display: inline-block;
|
||||||
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%;
|
||||||
@ -1388,29 +1459,17 @@
|
|||||||
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 */
|
||||||
@ -1421,12 +1480,8 @@
|
|||||||
.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;
|
||||||
@ -1443,12 +1498,49 @@
|
|||||||
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) {
|
||||||
.master-note-edit.position-0 {
|
.input-container-wrapper {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 35px;
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1457,10 +1549,9 @@
|
|||||||
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%;
|
||||||
@ -1474,17 +1565,59 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.size-down {
|
/* animations START */
|
||||||
animation: size-down 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes size-down {
|
.slide-out-top {
|
||||||
0% {
|
animation: slide-out-top 0.5s ease;
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
top: 150vh;
|
@keyframes slide-out-top {
|
||||||
|
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>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 55%;
|
right: 55%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 400;
|
z-index: 1020;
|
||||||
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: 50%;
|
right: 0;
|
||||||
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: 399;
|
z-index: 1019;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
/*cursor: pointer;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-shadow.full-shadow {
|
.slide-shadow.full-shadow {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<style type="text/css" scoped>
|
<style type="text/css" scoped>
|
||||||
.colors {
|
.colors {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1005;
|
z-index: 1023;
|
||||||
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: 1004;
|
z-index: 1022;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|||||||
@ -10,7 +10,26 @@ import store from './stores/mainStore';
|
|||||||
import App from './App'
|
import App from './App'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|
||||||
import 'fomantic-ui-css/semantic.css';
|
//Include entire fomantic ui library
|
||||||
|
// 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')
|
||||||
@ -46,7 +65,6 @@ 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,
|
||||||
|
|||||||
@ -1,14 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ui basic segment no-fluf-segment">
|
<div class="ui basic segment no-fluf-segment">
|
||||||
|
|
||||||
<div class="ui grid" :class="{ 'mush-it-up':showOneColumn() }" ref="content">
|
<div class="ui grid" 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" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
|
<div class="ten wide column"
|
||||||
|
: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)"
|
||||||
@ -75,10 +76,7 @@
|
|||||||
</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':(
|
<div :class="{'one-column':( showOneColumn() )}">
|
||||||
(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">
|
||||||
@ -136,7 +134,9 @@
|
|||||||
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,6 +308,9 @@
|
|||||||
},
|
},
|
||||||
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
|
||||||
@ -729,9 +732,7 @@
|
|||||||
}
|
}
|
||||||
</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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,22 +2,14 @@ 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')
|
|
||||||
|
|
||||||
// import LoginPage from '@/pages/LoginPage'
|
const HomePage = () => import(/* webpackChunkName: "HomePage" */ '@/pages/HomePage')
|
||||||
const LoginPage = () => import('@/pages/LoginPage')
|
const LoginPage = () => import(/* webpackChunkName: "LoginPage" */ '@/pages/LoginPage')
|
||||||
|
const HelpPage = () => import(/* webpackChunkName: "HelpPage" */ '@/pages/HelpPage')
|
||||||
// import HelpPage from '@/pages/HelpPage'
|
const SharePage = () => import(/* webpackChunkName: "SharePage" */ '@/pages/SharePage')
|
||||||
const HelpPage = () => import('@/pages/HelpPage')
|
const NotesPage = () => import(/* webpackChunkName: "NotesPage" */ '@/pages/NotesPage')
|
||||||
|
const QuickPage = () => import(/* webpackChunkName: "QuickPage" */ '@/pages/QuickPage')
|
||||||
// import SharePage from '@/pages/SharePage'
|
const AttachmentsPage = () => import(/* webpackChunkName: "AttachmentsPage" */ '@/pages/AttachmentsPage')
|
||||||
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)
|
||||||
|
|
||||||
|
|||||||
@ -53,6 +53,8 @@ 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){
|
||||||
@ -61,6 +63,9 @@ 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',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user