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

Bunch of changes and unfinished features. Just trying to keep everything up to date. This project is a mess. Don't worry. You are employed.

Browse Source
This commit is contained in:
Max G 2021-12-18 22:18:22 +00:00
parent c99828dbad
commit d4be0d6471
18 changed files with 443 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
applyProdDatabaseToDev.sh
View File

@ -10,7 +10,8 @@ echo '-------'
# gzip -dk file.gz # gzip -dk file.gz
BACKUPDIR="/home/mab/databaseBackupSolidScribe" BACKUPDIR="/home/mab/databaseBackupSolidScribe"
DEVDBPASS="Crama!Lama*Jamma###88383!!!!!345345956245i" #DEVDBPASS="Crama!Lama*Jamma###88383!!!!!345345956245i"
DEVDBPASS="RootPass1234!"
cd $BACKUPDIR cd $BACKUPDIR

2
backupDatabase.sh
View File

@ -9,7 +9,7 @@ NOW=$(date +"%Y-%m-%d_%H-%M")
ssh mab@solidscribe.com -p 13328 "mysqldump --all-databases --single-transaction --user root -pRootPass1234!" > "backup-$NOW.sql" ssh mab@solidscribe.com -p 13328 "mysqldump --all-databases --single-transaction --user root -pRootPass1234!" > "backup-$NOW.sql"
gzip "backup-$NOW.sql" gzip "backup-$NOW.sql"
cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql" # cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql"
echo "Database Backup Complete on $NOW" echo "Database Backup Complete on $NOW"

54
client/src/assets/semantic-helper.css
View File

@ -43,6 +43,7 @@ html {
height:100%; height:100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: none;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
@ -80,9 +81,12 @@ div.ui.basic.segment.no-fluf-segment {
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/ /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
body { body {
color: var(--text_color); color: var(--text_color);
background-color: var(--body_bg_color); background: none;
font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
} }
#app {
background: var(--body_bg_color);
}
.ui.segment { .ui.segment {
color: var(--text_color); color: var(--text_color);
@ -163,6 +167,9 @@ div.ui.basic.green.label {
i.green.icon.icon.icon.icon { i.green.icon.icon.icon.icon {
color: var(--main-accent); color: var(--main-accent);
} }
.button {
box-shadow: 2px 2px 4px -2px rgba(40, 40, 40, 0.89) !important;
}
.ui.green.buttons, .ui.green.button, .ui.green.button:hover { .ui.green.buttons, .ui.green.button, .ui.green.button:hover {
background-color: var(--main-accent); background-color: var(--main-accent);
} }
@ -176,6 +183,9 @@ i.green.icon.icon.icon.icon {
.ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column { .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column {
background-color: var(--main-accent); background-color: var(--main-accent);
} }
.ui.green.header {
color: var(--main-accent);
}
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/ /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
@ -555,6 +565,10 @@ i.green.icon.icon.icon.icon {
.ui.white.button { .ui.white.button {
background: #FFF; background: #FFF;
} }
.white.row {
background-color: rgba(255, 255, 255, 0.9);
}
.input-floating-button { .input-floating-button {
position: absolute; position: absolute;
top: 19px; top: 19px;
@ -866,3 +880,41 @@ i.green.icon.icon.icon.icon {
-webkit-transform-origin: left center; -webkit-transform-origin: left center;
transform-origin: left center; transform-origin: left center;
} }
.glint:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
opacity: 0;
pointer-events: none;
z-index: 1;
background: linear-gradient(
130deg,
rgba(255,255,255,0) 45%,
rgba(255,255,255,1) 50%,
var(--main-accent) 55%,
rgba(255,255,255,0) 60%
);
animation: glint-animation 0.8s linear 1;
animation-delay: 0.9s;
}
@keyframes glint-animation {
0% {
left: -100%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}

14
client/src/assets/squire.js
View File

@ -1265,7 +1265,9 @@ var keys = {
37: 'left', 37: 'left',
39: 'right', 39: 'right',
46: 'delete', 46: 'delete',
191: '/',
219: '[', 219: '[',
220: '\\',
221: ']' 221: ']'
}; };
@ -3888,10 +3890,9 @@ var increaseBlockQuoteLevel = function ( frag ) {
}; };
var decreaseBlockQuoteLevel = function ( frag ) { var decreaseBlockQuoteLevel = function ( frag ) {
var root = this._root;
var blockquotes = frag.querySelectorAll( 'blockquote' ); var blockquotes = frag.querySelectorAll( 'blockquote' );
Array.prototype.filter.call( blockquotes, function ( el ) { Array.prototype.filter.call( blockquotes, function ( el ) {
return !getNearest( el.parentNode, root, 'BLOCKQUOTE' ); return !getNearest( el.parentNode, frag, 'BLOCKQUOTE' );
}).forEach( function ( el ) { }).forEach( function ( el ) {
replaceWith( el, empty( el ) ); replaceWith( el, empty( el ) );
}); });
@ -4172,7 +4173,14 @@ proto._getHTML = function () {
proto._setHTML = function ( html ) { proto._setHTML = function ( html ) {
var root = this._root; var root = this._root;
var node = root; var node = root;
node.innerHTML = html; var sanitizeToDOMFragment = this._config.sanitizeToDOMFragment;
if ( typeof sanitizeToDOMFragment === 'function' ) {
var frag = sanitizeToDOMFragment( html, false, this );
empty( node );
node.appendChild( frag );
} else {
node.innerHTML = html;
}
do { do {
fixCursor( node, root ); fixCursor( node, root );
} while ( node = getNextBlock( node, root ) ); } while ( node = getNextBlock( node, root ) );

86
client/src/components/GlobalSiteMenu.vue
View File

@ -7,6 +7,7 @@
} }
.global-menu { .global-menu {
width: 155px; width: 155px;
/* background: #221f2b; */
background: #221f2b; background: #221f2b;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -42,7 +43,8 @@
.menu-section {} .menu-section {}
.menu-section + .menu-section { .menu-section + .menu-section {
border-top: 1px solid #534c68; /* border-top: 1px solid #534c68; */
border-top: 1px solid #534c68e3;
} }
.menu-button { .menu-button {
cursor: pointer; cursor: pointer;
@ -73,21 +75,25 @@
/*color: var(--text_color);*/ /*color: var(--text_color);*/
/*width: 100%;*/ /*width: 100%;*/
position: fixed; position: fixed;
top: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 999; z-index: 999;
background-color: var(--small_element_bg_color); background-color: var(--small_element_bg_color);
border-bottom: 1px solid;
border-color: var(--border_color);
/*padding: 5px 1rem 5px;*/ /*padding: 5px 1rem 5px;*/
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 100vw; width: 100vw;
border-top: 1px solid var(--dark_border_color);
display: flex;
margin: 0;
padding: 0;
} }
.place-holder { .place-holder {
width: 100%; width: 100%;
height: 40px; /*height: 40px;*/
height: 0;
} }
.logo-display { .logo-display {
width: 27px; width: 27px;
@ -106,17 +112,35 @@
} }
.mobile-button { .mobile-button {
display: inline-block; padding: 5px 0 0;
font-size: 2em; margin: 0;
padding: 6px 3px 5px;
cursor: pointer; cursor: pointer;
font-size: 0.6em;
color: var(--menu-text);
text-align: center;
flex-basis: 100%;
line-height: 1.8em;
}
.mobile-button + .mobile-button {
border-left: 1px solid var(--dark_border_color);
}
.mobile-button i {
font-size: 2em;
margin: 0 auto;
padding: 0;
width: 100%;
}
.mobile-button svg {
margin: 0 46% 0;
display: inline-block;
width: 15px;
}
.mobile-button:active, .mobile-button:focus, .mobile-button:hover {
text-decoration: none;
} }
.mobile-button.active { .mobile-button.active {
background-color: transparent; background-color: transparent;
} }
.mobile-button i {
margin: 0;
}
</style> </style>
@ -128,11 +152,24 @@
<!-- collapsed menu, appears as a bar --> <!-- collapsed menu, appears as a bar -->
<div class="top-menu-bar" v-if="(collapsed || mobile) && !menuOpen"> <div class="top-menu-bar" v-if="(collapsed || mobile) && !menuOpen">
<div class="mobile-button"> <!-- logo -->
<i class="green link bars icon" v-on:click="collapseMenu"></i> <router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
<logo class="logo-display" color="var(--main-accent)" />
Notes
</router-link>
<!-- new note -->
<div v-if="loggedIn" class="mobile-button">
<span v-if="!disableNewNote" @click="createNote">
<i class="green plus icon"></i>
New Note
</span>
<span v-if="disableNewNote">
<i class="grey plus icon"></i>
Working
</span>
</div> </div>
<div class="mobile-button"></div>
<!-- open straight to note --> <!-- open straight to note -->
<router-link <router-link
@ -141,6 +178,7 @@
class="mobile-button" class="mobile-button"
:to="`/notes/open/${$store.getters.totals['quickNote']}`"> :to="`/notes/open/${$store.getters.totals['quickNote']}`">
<i class="green sticky note outline icon"></i> <i class="green sticky note outline icon"></i>
Scratch Pad
</router-link> </router-link>
<!-- create new and redirect to new note id --> <!-- create new and redirect to new note id -->
@ -150,27 +188,21 @@
exact-active-class="active" exact-active-class="active"
class="mobile-button"> class="mobile-button">
<i class="green sticky note outline icon"></i> <i class="green sticky note outline icon"></i>
Scratch Pad
</a> </a>
<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
<logo class="logo-display" color="var(--main-accent)" />
</router-link>
<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/attachments"> <router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/attachments">
<i class="green open folder outline icon"></i> <i class="green open folder outline icon"></i>
Files
</router-link> </router-link>
<div class="mobile-button"></div> <!-- menu -->
<div class="mobile-button">
<i class="green link bars icon" v-on:click="collapseMenu"></i>
Menu
</div>
<!-- mobile create note button -->
<span v-if="loggedIn">
<span v-if="!disableNewNote" @click="createNote" class="mobile-button">
<i class="green plus icon"></i>
</span>
<span v-if="disableNewNote" class="mobile-button">
<i class="grey plus icon"></i>
</span>
</span>
</div> </div>

51
client/src/components/LoginFormComponent.vue
View File

@ -22,15 +22,20 @@
</div> </div>
<div class="sixteen wide field"> <div class="sixteen wide field">
<div class="ui fluid buttons"> <div class="ui fluid buttons">
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
<i class="power icon"></i>
Login
</div>
<div class="or"></div>
<div v-on:click="register()" class="ui button"> <div v-on:click="register()" class="ui button">
<i class="plug icon"></i> <i class="plug icon"></i>
Sign Up Sign Up
</div> </div>
<div class="or"></div>
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
<i class="power icon"></i>
Login
</div>
</div> </div>
</div> </div>
<div class="sixteen wide column"> <div class="sixteen wide column">
@ -45,6 +50,26 @@
<!-- Thin form display --> <!-- Thin form display -->
<div v-if="thin" class="ui small form"> <div v-if="thin" class="ui small form">
<div v-if="!require2FA" class="field"><!-- hide this field if someone is logging in with 2FA -->
<div class="ui grid">
<div class="ui sixteen wide center aligned column">
<div v-on:click="register()" class="ui green button">
<i class="plug icon"></i>
Sign Up Now!
</div>
</div>
</div>
</div>
<div class="field"><!-- hide this field if someone is logging in with 2FA -->
<div class="ui grid">
<div class="ui sixteen wide center aligned column">
Or Login
</div>
</div>
</div>
<div class="equal width fields"> <div class="equal width fields">
<div class="field"> <div class="field">
<div class="ui input"> <div class="ui input">
@ -61,13 +86,6 @@
<input v-model="authToken" ref="authForm" type="text" name="authToken" placeholder="Authorization Token"> <input v-model="authToken" ref="authForm" type="text" name="authToken" placeholder="Authorization Token">
</div> </div>
</div> </div>
<!-- hide this field if someone is logging in with 2FA -->
<div class="field" v-if="!require2FA">
<div v-on:click="register()" class="ui fluid green button">
<i class="plug icon"></i>
Sign Up
</div>
</div>
<div class="field"> <div class="field">
<div v-on:click="login()" class="ui fluid button"> <div v-on:click="login()" class="ui fluid button">
<i class="power icon"></i> <i class="power icon"></i>
@ -143,7 +161,14 @@
register(){ register(){
if( this.username.length == 0 || this.password.length == 0 ){ if( this.username.length == 0 || this.password.length == 0 ){
this.$bus.$emit('notification', 'Unable to Sign Up - Username and Password Required')
if(this.$route.name == 'LoginPage'){
this.$bus.$emit('notification', 'Both a Username and Password are Required')
return
}
//Login section
this.$router.push('/login')
return return
} }

28
client/src/components/LogoComponent.vue
View File

@ -32,22 +32,22 @@
class="darken-accent" class="darken-accent"
id="path3813-4" id="path3813-4"
d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z" d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z"
:style="`fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" /> :style="`fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth};stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
<path <path
class="brighten-accent" class="brighten-accent"
id="path4563" id="path4563"
d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z" d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z"
:style="`fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" /> :style="`fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth}px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
<path <path
class="brighten-accent" class="brighten-accent"
id="path4563-6" id="path4563-6"
d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z" d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z"
:style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" /> :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth}px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
<path <path
class="brighten-accent" class="brighten-accent"
id="path3813-4-2" id="path3813-4-2"
d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z" d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z"
:style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.52916676;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" /> :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth};stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
</g> </g>
</svg> </svg>
</template> </template>
@ -56,13 +56,28 @@
export default { export default {
name: 'LoadingIcon', name: 'LoadingIcon',
props:[ 'color' ], props:[
'color', // hex value for setting colorr
'stroke' // enable or disable stroke
],
data(){ data(){
return { return {
displayColor: '#21BA45', //Default green color displayColor: '#21BA45', //Default green color
strokeWidth: '0.5',
strokeColor: 'none',
} }
},
beforeCreate(){
}, },
created(){ created(){
if(this.stroke){
this.strokeWidth = 0.4
this.strokeColor = 'rgba(0,0,0,0.9)'
}
//Set color if passed //Set color if passed
if(this.color){ if(this.color){
this.displayColor = this.color this.displayColor = this.color
@ -79,4 +94,7 @@
filter: saturate(145%); filter: saturate(145%);
-webkit-filter: saturate(145%); -webkit-filter: saturate(145%);
} }
g > path {
filter: drop-shadow(1px 1px 1px black);
}
</style> </style>

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

@ -7,14 +7,19 @@
> >
<!-- Giant Edit Note Menu --> <!-- Giant Edit Note Menu -->
<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }"> <div class="edit-menu glint" :class="{ 'slide-out-top':(sizeDown == true) }">
<!-- edit spacer is disabled, it is helpful if menu gets bigger. It adds a left margin, starting the icons at the edge of the note --> <!-- edit spacer is disabled, it is helpful if menu gets bigger. It adds a left margin, starting the icons at the edge of the note -->
<div class="edit-spacer"></div> <div class="edit-spacer"></div>
<div class="menu-top-half"> <div class="menu-top-half">
<div class="edit-button" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
<i class="close icon"></i> <div class="edit-button" v-on:click=" hash=0; save() " :data-tooltip="`Save\n(CTRL + S)`" data-position="bottom center">
<i class="icons">
<i class="grey save outline icon"></i>
<i v-if="statusText == 'saved'" class="green small bottom left corner check icon"></i>
<i v-if="statusText == 'saving'" class="small purple bottom left corner double angle up icon"></i>
</i>
</div> </div>
<div class="edit-divide"></div> <div class="edit-divide"></div>
@ -65,9 +70,10 @@
<div class="menu-bottom-half"> <div class="menu-bottom-half">
<!--
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/table`)" data-tooltip="Insert Table" data-position="bottom center"> <div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/table`)" data-tooltip="Insert Table" data-position="bottom center">
<i class="border all icon"></i> <i class="border all icon"></i>
</div> </div> -->
<div class="edit-button" v-on:click="insertDivide()" data-tooltip="Insert Divide" data-position="bottom center"> <div class="edit-button" v-on:click="insertDivide()" data-tooltip="Insert Divide" data-position="bottom center">
<i class="grip lines icon"></i> <i class="grip lines icon"></i>
@ -86,9 +92,9 @@
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"> <div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
<i class="paint brush icon"></i> <i class="paint brush icon"></i>
</div> </div>
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center"> <!-- <div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center">
<i class="tags icon"></i> <i class="tags icon"></i>
</div> </div> -->
<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/images`)" data-tooltip="Images" data-position="bottom center"> <div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/images`)" data-tooltip="Images" data-position="bottom center">
<i class="image icon"></i> <i class="image icon"></i>
</div> </div>
@ -116,18 +122,14 @@
<i class="purple bolt icon"></i> <i class="purple bolt icon"></i>
</div> --> </div> -->
<div class="edit-button" v-on:click=" hash=0; save() " :data-tooltip="`Save\n(CTRL + S)`" data-position="bottom center">
<i class="icons">
<i class="grey save outline icon"></i>
<i v-if="statusText == 'saved'" class="green small bottom left corner check icon"></i>
<i v-if="statusText == 'saving'" class="small purple bottom left corner double angle up icon"></i>
</i>
</div>
<div class="edit-button" v-if="diffsApplied > 0" :data-tooltip="`Unsaved Changes`" data-position="bottom center"> <div class="edit-button" v-if="diffsApplied > 0" :data-tooltip="`Unsaved Changes`" data-position="bottom center">
+{{ diffsApplied }} +{{ diffsApplied }}
</div> </div>
<div class="edit-button ui" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
<i class="green close icon"></i>
</div>
</div> </div>
</div> </div>
@ -156,9 +158,27 @@
@keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()" @keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()"
rows="1" rows="1"
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText'] }" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText'] }"
v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input"> v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input glint">
</textarea> </textarea>
<div class="large-close-button glint" v-on:click="closeButtonAction()">
<i class="fitted green close icon"></i>
</div>
<!-- little tags on the side, only show on desktop -->
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)">
<span class="add-mini-tag" v-if="noteTags.length == 0">
<i class="tags icon"></i>Add Tags
</span>
<span v-for="tag in allTags" class="active-mini-tag" v-if="isTagOnNote(tag.id)">
#{{ tag.text }}
</span>
<span class="active-mini-tag" v-if="noteTags.length > 0">
+
</span>
</div>
<!-- Squire Box --> <!-- Squire Box -->
<div <div
id="squire-id" id="squire-id"
@ -171,20 +191,7 @@
</div> </div>
<!-- little tags on the side, only show on desktop -->
<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }" v-if="!$store.getters.getIsUserOnMobile">
<span v-for="tag in allTags" class="subtle-tag active-mini-tag" v-if="isTagOnNote(tag.id)" v-on:click="removeTag(tag.id)">
<i class="tag icon"></i>
{{ tag.text }}
</span>
<span v-else class="subtle-tag" v-on:click="addTag(tag.text)">
<i class="plus icon"></i>
{{ tag.text }}
</span>
<span class="subtle-tag" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)">
<i class="plus icon"></i><i class="green tags icon"></i>Add Tag
</span>
</div>
<!-- color picker --> <!-- color picker -->
<color-tooltip <color-tooltip
@ -304,10 +311,7 @@
<!-- Show side shades if user is on desktop only --> <!-- Show side shades if user is on desktop only -->
<div class="full-focus-shade shade1" <div class="full-focus-shade shade1"
:class="{ 'slide-out-left':sizeDown }" :class="{ 'fade-me-out':sizeDown }"
v-on:click="closeButtonAction()"></div>
<div class="full-focus-shade shade2"
:class="{ 'slide-out-right':sizeDown }"
v-on:click="closeButtonAction()"></div> v-on:click="closeButtonAction()"></div>
</div> </div>
@ -360,8 +364,8 @@
saveDebounce: null, //Prevent save from being called numerous times quickly saveDebounce: null, //Prevent save from being called numerous times quickly
updated: 'Never', updated: 'Never',
editDebounce: null, editDebounce: null,
emitChangeDebounce: null, textChangedDebounce: null,
keyPressesCounter: 0, //Determen keys pressed between saves keyPressesCounter: 0, //Determine keys pressed between saves
pinned: 0, pinned: 0,
archived: 0, archived: 0,
attachmentCount: 0, attachmentCount: 0,
@ -455,7 +459,7 @@
//Show loading for a minimum time //Show loading for a minimum time
setTimeout(()=>{ setTimeout(()=>{
this.forceShowLoading = false this.forceShowLoading = false
}, 500) }, 100)
// document.addEventListener('visibilitychange', this.checkForUpdatedNote) // document.addEventListener('visibilitychange', this.checkForUpdatedNote)
@ -598,14 +602,16 @@
this.editor.focus() this.editor.focus()
this.editor.moveCursorToEnd() this.editor.moveCursorToEnd()
this.fetchNoteTags() //Don't load tags on mobile
} }
//Load tags on mobile
this.fetchNoteTags()
//Set up websockets after squire is set up //Set up websockets after squire is set up
setTimeout(() => { setTimeout(() => {
this.setupWebSockets() this.setupWebSockets()
}, 50) }, 500)
this.editor.addEventListener('cursor', e => { this.editor.addEventListener('cursor', e => {
@ -740,7 +746,7 @@
loadNote(noteId){ loadNote(noteId){
//Generate a random loading message //Generate a random loading message
let mod = ['Gently','Calmly','Lovingly','Quickly','','','','','','','','','','','','',''] let mod = ['Gently','Calmly','Lovingly','Quickly','Diligently','','','','','','','','','','','','','','']
let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating','Lumping'] let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating','Lumping']
let thing = ['Note','Note','Note','Note','Data','Text','Document','Algorithm','Buffer','Client','Download','File','Frame','Graphics','Hardware','HTML','Interface','Logic','Mainframe','Memory','Media','Nodes','Network','Chaos'] let thing = ['Note','Note','Note','Note','Data','Text','Document','Algorithm','Buffer','Client','Download','File','Frame','Graphics','Hardware','HTML','Interface','Logic','Mainframe','Memory','Media','Nodes','Network','Chaos']
@ -877,11 +883,11 @@
clearTimeout(this.editDebounce) clearTimeout(this.editDebounce)
this.editDebounce = setTimeout(() => { this.editDebounce = setTimeout(() => {
this.save() this.save()
}, 30 * 1000) }, 5 * 1000)
//Save after x keystrokes //Save after x keystrokes
this.keyPressesCounter = (this.keyPressesCounter + 1) this.keyPressesCounter = (this.keyPressesCounter + 1)
if(this.keyPressesCounter > 125){ if(this.keyPressesCounter > 25){
this.keyPressesCounter = 0 this.keyPressesCounter = 0
this.save() this.save()
} }
@ -1075,6 +1081,19 @@
<style type="text/css" scoped> <style type="text/css" scoped>
.large-close-button {
position: absolute;
min-height: 55px;
top: 0px;
right: 0px;
font-size: 23px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px 0 10px;
cursor: pointer;
}
.full-focus-shade { .full-focus-shade {
position: fixed; position: fixed;
top: 0; top: 0;
@ -1084,13 +1103,7 @@
background-color: var(--menu-accent); background-color: var(--menu-accent);
z-index: 999; z-index: 999;
cursor: pointer; cursor: pointer;
opacity: 0.88; opacity: 0.9;
}
.shade1 {
left: 50%;
}
.shade2 {
right: 50%;
} }
/* squire styles */ /* squire styles */
@ -1105,6 +1118,7 @@
overflow-x: hidden; overflow-x: hidden;
scrollbar-width: none; scrollbar-width: none;
scrollbar-color: transparent transparent; scrollbar-color: transparent transparent;
overscroll-behavior: contain;
} }
.note-wrapper { .note-wrapper {
background-color: var(--small_element_bg_color); background-color: var(--small_element_bg_color);
@ -1114,56 +1128,24 @@
} }
.note-mini-tag-area { .note-mini-tag-area {
position: fixed;
width: 120px;
left: calc(15% - 125px);
top: 46px;
bottom: 0;
height: calc(100vh - 55px);
z-index: 1000;
overflow-y: scroll;
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
.note-mini-tag-area {
scrollbar-width: auto;
scrollbar-color: inherit inherit;
}
.subtle-tag {
display: inline-block;
width: 100%; width: 100%;
padding: 1px 1px 1px 5px; padding: 5px 15px 0 15px;
margin: 0 0 0;
border: 1px solid transparent;
border-right: none;
border-radius: 3px;
background-color: transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color ease 0.3s, background ease 0.3s;
font-size: 11px;
cursor: pointer; cursor: pointer;
opacity: 0;
text-transform:capitalize; margin-left: auto;
margin-right: auto;
max-width: 1100px;
} }
.note-mini-tag-area:hover .subtle-tag { .add-mini-tag {
opacity: 1; color: var(--border_color);
}
.note-mini-tag-area:hover .active-mini-tag {
background-color: var(--main-accent);
color: white;
}
.note-mini-tag-area:hover .subtle-tag:not(.active-mini-tag) {
border-right: none;
color: var(--text_color);
background-color: var(--body_bg_color);
opacity: 1;
} }
.active-mini-tag { .active-mini-tag {
opacity: 0.7; display: inline-block;
background-color: var(--small_element_bg_color); opacity: 0.9;
color: var(--text_color) color: var(--main-accent);
}
.active-mini-tag + .active-mini-tag {
margin-left: 15px;
} }
@ -1195,12 +1177,6 @@
.menu-top-half, .menu-bottom-half { .menu-top-half, .menu-bottom-half {
display: inline-block; display: inline-block;
} }
/* .edit-spacer {
width: calc(15% - 10px);
display: inline-block;
height: 10px;
opacity: 0;
}*/
.edit-button { .edit-button {
background-color: var(--small_element_bg_color); background-color: var(--small_element_bg_color);
color: var(--menu-text); color: var(--menu-text);
@ -1241,9 +1217,10 @@
.stealth-input { .stealth-input {
width: 100%; width: 100%;
padding: 10px 15px 5px; padding: 15px;
background-color: var(--small_element_bg_color ); background-color: var(--small_element_bg_color );
border: none; border: none;
border-bottom: 2px solid var(--main-accent);
font-size: 1.7em; font-size: 1.7em;
color: var(--text_color); color: var(--text_color);
caret-color: var(--main-accent); caret-color: var(--main-accent);
@ -1384,16 +1361,16 @@
} }
} }
.slide-out-left { .fade-me-out {
animation: slide-out-left 0.5s ease; animation: fade-me-out 0.5s ease;
} }
@keyframes slide-out-left { @keyframes fade-me-out {
0% { 0% {
left: 85%; opacity: 1;
} }
100% { 100% {
left: 150%; opacity: 0;
} }
} }

13
client/src/components/NoteTitleDisplayCard.vue
View File

@ -20,6 +20,11 @@
<span v-if="note.title.length > 0" <span v-if="note.title.length > 0"
class="big-text"><p>{{ note.title }}</p></span> class="big-text"><p>{{ note.title }}</p></span>
<span class="tags" v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}</span>
<br>
</span>
<!-- Sub text display --> <!-- Sub text display -->
<span v-if="note.subtext.length > 0" <span v-if="note.subtext.length > 0"
class="small-text" class="small-text"
@ -69,11 +74,6 @@
<div class="tool-bar" @click.self="cardClicked" v-if="!titleView"> <div class="tool-bar" @click.self="cardClicked" v-if="!titleView">
<div class="icon-bar"> <div class="icon-bar">
<span class="tags" v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">{{ tag.split(':')[0] }}</span>
<br>
</span>
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }"> <span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
{{$helpers.timeAgo( note.updated )}} {{$helpers.timeAgo( note.updated )}}
</span> </span>
@ -476,7 +476,6 @@
.little-tag { .little-tag {
font-size: 0.7em; font-size: 0.7em;
padding: 5px 5px; padding: 5px 5px;
border: 1px solid var(--border_color);
margin: 0 3px 5px 0; margin: 0 3px 5px 0;
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
@ -486,6 +485,8 @@
line-height: 0.8em; line-height: 0.8em;
text-overflow: ellipsis; text-overflow: ellipsis;
float: left; float: left;
color: var(--main-accent);
opacity: 0.8;
} }
.tiny-thumb-box { .tiny-thumb-box {
max-height: 70px; max-height: 70px;

12
client/src/components/SideSlideMenuComponent.vue
View File

@ -27,7 +27,7 @@
right: 0; 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: 1019; z-index: 1019;
overflow: hidden; overflow: hidden;
@ -88,15 +88,17 @@
<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}"> <div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
<!-- close menu on bottom -->
<div class="note-menu">
<nm-button more-class="right" icon="close" text="close" :show-text="true" v-on:click.native="close" />
</div>
<!-- content of the editor --> <!-- content of the editor -->
<div class="slide-content"> <div class="slide-content">
<slot></slot> <slot></slot>
</div> </div>
<!-- close menu on bottom -->
<div class="note-menu">
<nm-button more-class="right" icon="close" text="close" :show-text="true" v-on:click.native="close" />
</div>
</div> </div>

159
client/src/pages/HomePage.vue
View File

@ -11,7 +11,24 @@
-moz-animation: fadeorama 16s ease infinite; -moz-animation: fadeorama 16s ease infinite;
animation: fadeorama 16s ease infinite; animation: fadeorama 16s ease infinite;
height: 350px; height: 350px;
text-shadow: 1px 1px 2px black;
} }
.shine {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: none;
}
.spotlight {
background: rgba(255,255,255,0);
background: radial-gradient(circle at bottom, var(--main-accent) 0%, rgba(255,255,255,0) 60%);
z-index: 200;
}
.logo-display { .logo-display {
width: 140px; width: 140px;
height: auto; height: auto;
@ -24,10 +41,14 @@
font-size: 4rem; font-size: 4rem;
text-align: center; text-align: center;
} }
div#app div.lightly-padded.home-main div.ui.centered.vertically.divided.stackable.grid div.row.hero.fadeBg div.sixteen.wide.middle.aligned.center.column h2.massive-text svg.logo-display path {
stroke: black !important;
stroke-width: 1px !important;
}
.blinking { .blinking {
animation:blinkingText 1.5s linear infinite; animation:blinkingText 1.5s linear infinite;
} }
@keyframes blinkingText{ @keyframes blinkingText {
0%{ opacity: 0.9; } 0%{ opacity: 0.9; }
50%{ opacity: 0; } 50%{ opacity: 0; }
100%{ opacity: 0.9; } 100%{ opacity: 0.9; }
@ -101,10 +122,11 @@
<!-- <div class="one wide large screen only column"></div> --> <!-- <div class="one wide large screen only column"></div> -->
<!-- desktop column - large screen only --> <!-- desktop column - large screen only -->
<div class="sixteen wide middle aligned center aligned column"> <div class="sixteen wide middle aligned center aligned column" style="z-index: 500;">
<h2 class="massive-text"> <h2 class="massive-text">
<img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo"> <!-- <img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo"> -->
<logo class="logo-display" color="var(--main-accent)" stroke="true" />
<br> <br>
Solid Scribe Solid Scribe
</h2> </h2>
@ -119,6 +141,10 @@
<img loading="lazy" width="90%" src="/api/static/assets/marketing/notebook.svg" alt="The Venus fly laptop about to capture another victim"> <img loading="lazy" width="90%" src="/api/static/assets/marketing/notebook.svg" alt="The Venus fly laptop about to capture another victim">
</div> --> </div> -->
<div v-for="i in jewelFacets" class="shine" :style="shineStyle(i)" v-bind:key="i"></div>
<div class="shine spotlight"></div>
</div> </div>
<!-- All marketing images if you need to review --> <!-- All marketing images if you need to review -->
@ -145,6 +171,7 @@
<!-- Go to notes button --> <!-- Go to notes button -->
<div class="row" v-if="$parent.loggedIn"> <div class="row" v-if="$parent.loggedIn">
<div class="sixteen wide middle algined center aligned column"> <div class="sixteen wide middle algined center aligned column">
<h3>You are already logged in</h3>
<router-link class="ui huge green labeled icon button" to="/notes"> <router-link class="ui huge green labeled icon button" to="/notes">
<i class="external alternate icon"></i>Go to Notes <i class="external alternate icon"></i>Go to Notes
</router-link> </router-link>
@ -164,10 +191,30 @@
</div> </div>
</div> </div>
<!-- theme selector -->
<div class="ui white row">
<div class="sixteen wide middle aligned column">
<div class="ui container">
<h2>
Pick your theme
</h2>
<h3 v-if="$parent.loggedIn">Go to settings to change theme</h3>
<div
v-for="color in themeColors"
v-bind:key="color"
class="ui small basic button"
:style="`background: linear-gradient(0deg, ${color} 4%, rgba(0,0,0,0) 5%);`"
v-on:click="setAccentColor(color)">
<logo style="width: 20px; height: auto;" :color="color" />
</div>
</div>
</div>
</div>
<!-- Overview --> <!-- Overview -->
<div class="middle aligned centered row"> <div class="middle aligned centered row">
<div class="six wide column"> <div class="six wide column">
<h2>Powerful text editing and privacy</h2> <h2 class="ui dividing header">Powerful text editing and privacy</h2>
<h3>Easily edit, share and organize thousands of notes.</h3> <h3>Easily edit, share and organize thousands of notes.</h3>
<h3>Feel safe knowing no one can read your notes but you.</h3> <h3>Feel safe knowing no one can read your notes but you.</h3>
<!-- <h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3> --> <!-- <h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3> -->
@ -183,42 +230,42 @@
<!-- note features --> <!-- note features -->
<div class="six wide column"> <div class="six wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>App Features</h1> <h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>App Features</h1>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey sticky note icon"></i> <i class="grey sticky note icon"></i>
<i class="bottom left corner teal plus icon"></i> <i class="bottom left corner teal plus icon"></i>
</i> </i>
Create as many notes as you want Create a million notes!
<div class="sub header">Create unlimited notes up to 5,000,000 characters long.</div> <div class="sub header">Create unlimited notes up to 5,000,000 characters long.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey tags icon"></i> <i class="grey tags icon"></i>
<i class="bottom left corner purple plus icon"></i> <i class="bottom left corner purple plus icon"></i>
</i> </i>
Tag Notes Tag Notes
<div class="sub header">Easily add and edit tags on notes then search or sort by tag.</div> <div class="sub header">Add and edit tags on notes then search or sort by tag.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey search icon"></i> <i class="grey search icon"></i>
<i class="bottom left corner orange font icon"></i> <i class="bottom left corner orange font icon"></i>
</i> </i>
Search Note Text Search Note Text
<div class="sub header">Easily search all notes, files, links and tags.</div> <div class="sub header">Search all notes, files, links and tags.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey search icon"></i> <i class="grey search icon"></i>
@ -229,7 +276,7 @@
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey cloud moon icon"></i> <i class="grey cloud moon icon"></i>
@ -243,8 +290,8 @@
<!-- editing features --> <!-- editing features -->
<div class="six wide column"> <div class="six wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Editing Features</h1> <h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Editing Features</h1>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey list icon"></i> <i class="grey list icon"></i>
@ -254,7 +301,7 @@
<div class="sub header">Create To Do lists that are always synced, work on mobile and can be sorted.</div> <div class="sub header">Create To Do lists that are always synced, work on mobile and can be sorted.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey file icon"></i> <i class="grey file icon"></i>
@ -264,7 +311,7 @@
<div class="sub header">Bold, Underline, Title, Add Links, Add Tables, Color Text, Color Background and more.</div> <div class="sub header">Bold, Underline, Title, Add Links, Add Tables, Color Text, Color Background and more.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey file icon"></i> <i class="grey file icon"></i>
@ -274,7 +321,7 @@
<div class="sub header">Color the background of notes and add colored icons to make them stand out.</div> <div class="sub header">Color the background of notes and add colored icons to make them stand out.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey images icon"></i> <i class="grey images icon"></i>
@ -284,7 +331,7 @@
<div class="sub header">Upload images to notes, add search text to the images to find them later.</div> <div class="sub header">Upload images to notes, add search text to the images to find them later.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey users icon"></i> <i class="grey users icon"></i>
@ -301,8 +348,8 @@
<div class="middle aligned centered row"> <div class="middle aligned centered row">
<!-- privacy features --> <!-- privacy features -->
<div class="six wide column"> <div class="six wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Privacy Features</h1> <h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Privacy Features</h1>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey lock icon"></i> <i class="grey lock icon"></i>
@ -312,17 +359,17 @@
<div class="sub header">All note text is encrypted. No one can read your notes. None of your data is shared.</div> <div class="sub header">All note text is encrypted. No one can read your notes. None of your data is shared.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey search icon"></i> <i class="grey search icon"></i>
<i class="bottom left corner orange font icon"></i> <i class="bottom left corner orange font icon"></i>
</i> </i>
Note Search is Encrypted Note Search is Encrypted
<div class="sub header">Easily search the contents of all your notes without compromising security.</div> <div class="sub header">Search the contents of all your notes without compromising security.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey share alternate icon"></i> <i class="grey share alternate icon"></i>
@ -332,7 +379,7 @@
<div class="sub header">Shared notes are still encrypted, only readable by you and the shared users.</div> <div class="sub header">Shared notes are still encrypted, only readable by you and the shared users.</div>
</div> </div>
</h2> </h2>
<h2 class="ui dividing header"> <h2 class="ui header">
<div class="content"> <div class="content">
<i class="icons"> <i class="icons">
<i class="grey tv icon"></i> <i class="grey tv icon"></i>
@ -442,7 +489,10 @@
<div v-if="true" class="middle aligned centered row"> <div v-if="true" class="middle aligned centered row">
<div class="six wide column"> <div class="six wide column">
<h2>Solid Scribe was created by one passionate developer</h2> <h3>
<a target="_blank" href="https://www.maxg.cc">Solid Scribe was created by Max Gialanella</a>
</h3>
<p><a target="_blank" href="https://www.maxg.cc">Check out my Resume</a></p>
<p> <p>
I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations. I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations.
</p> </p>
@ -450,9 +500,10 @@
If you want to give it a shot, feel free to make an account. There are no ads. None of this data is shared or public. I don't make any money. If you want to give it a shot, feel free to make an account. There are no ads. None of this data is shared or public. I don't make any money.
</p> </p>
<p> <p>
If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i> If you see anything broken or want to see a feature implemented; I'm open to suggestions. <i class="thumbs up icon"></i>
</p> </p>
<p>If you want to help me out, I would love a small Bitcoin donation.</p> <p>Email me at <a href="mailto:maxgialanella@pm.me">Max.Gialanella@pm.me</a></p>
<p>If you want to help me out with hosting this application, I would love a small Bitcoin donation.</p>
<p> <p>
<a href="https://btc3.trezor.io/address/3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG" target="_blank"> <a href="https://btc3.trezor.io/address/3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG" target="_blank">
<img loading="lazy" width="160px" src="/api/static/assets/marketing/wallet.png" alt="3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG"> <img loading="lazy" width="160px" src="/api/static/assets/marketing/wallet.png" alt="3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG">
@ -466,7 +517,7 @@
</div> </div>
<div class="center aligned sixteen wide column"> <div class="center aligned sixteen wide column">
<router-link to="/terms"></i>Solid Scribe Terms of Use</router-link> <router-link to="/terms">Solid Scribe Terms of Use</router-link>
</div> </div>
@ -479,11 +530,27 @@ export default {
name: 'WelcomePage', name: 'WelcomePage',
components: { components: {
'login-form':require('@/components/LoginFormComponent.vue').default, 'login-form':require('@/components/LoginFormComponent.vue').default,
'logo':require('@/components/LogoComponent.vue').default,
}, },
data(){ data(){
return { return {
height: null, height: null,
realInformation: false, realInformation: false,
jewelFacets: 15,
themeColors: [
'#21BA45', //Green
'#b5cc18', //Lime
'#00b5ad', //Teal
'#2185d0', //Blue
'#7128b9', //Violet
'#a333c8', // "Purple"
'#e03997', //Pink
'#db2828', //Red
'#f2711c', //Orange
'#fbbd08', //Yellow
'#767676', //Grey
'#303030', //Black-almost
],
} }
}, },
beforeCreate(){ beforeCreate(){
@ -497,6 +564,40 @@ export default {
}, },
methods: { methods: {
shineStyle(i){
const farMax = 95 //85
const farMin = 83
const farOut = (Math.floor(Math.random() * (farMax - farMin + 1)) + farMin)
// const rotation = 360/this.jewelFacets
const rotMax = 360/this.jewelFacets
const rotMin = 320/this.jewelFacets
const rotation = (Math.floor(Math.random() * (rotMax - rotMin + 1)) + rotMin)
let style = `
background: linear-gradient(
${(i+1)*(rotation)}deg,
rgba(255,255,255,0) ${farOut}%,
rgba(255,255,255,0.1) ${farOut+1}%,
rgba(255,255,255,0.0) ${farOut+10}%
)
;`
// Remove whitespace - Make it 1 line
return style.replace(/\s+/g, '')
},
setAccentColor(color){
let root = document.documentElement
root.style.setProperty('--main-accent', color)
localStorage.setItem('main-accent', color)
if(!color || color == '#21BA45'){
localStorage.removeItem('main-accent')
}
},
showRealInformation(){ showRealInformation(){

5
client/src/pages/NotesPage.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container" v-on:scroll="onScroll">
<div class="ui grid" ref="content"> <div class="ui grid" ref="content">
@ -367,6 +367,9 @@
} }
}, },
methods: { methods: {
onScroll(e){
console.log('Scroll')
},
toggleTitleView(){ toggleTitleView(){
this.titleView = !this.titleView this.titleView = !this.titleView
}, },

8
client/src/pages/SettingsPage.vue
View File

@ -49,7 +49,7 @@
<div class="ui segment"> <div class="ui segment">
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="six wide column"> <div class="six wide column">
<p>1. Enter Password and get QR</p> <div class="ui tiny dividing header">1. Enter Password and get QR</div>
<div class="ui fluid action input"> <div class="ui fluid action input">
<input type="password" placeholder="Current Password" v-model="password"> <input type="password" placeholder="Current Password" v-model="password">
@ -62,12 +62,12 @@
</div> </div>
</div> </div>
<div class="four wide column"> <div class="four wide column">
<p>2. Scan QR Code</p> <div class="ui tiny dividing header">2. Scan QR Code</div>
<p v-if="qrCode == ''">(QR Code will appear here)</p> <p v-if="qrCode == ''">(QR Code will appear here)</p>
<img v-if="qrCode != ''" :src="qrCode" alt="QR Code"> <img v-if="qrCode != ''" :src="qrCode" class="ui image" alt="QR Code">
</div> </div>
<div class="six wide column"> <div class="six wide column">
<p>3. Verify with code</p> <div class="ui tiny dividing header">3. Verify with code</div>
<div class="ui fluid action input" v-if="qrCode != ''"> <div class="ui fluid action input" v-if="qrCode != ''">
<input type="text" placeholder="Verification Code" v-model="verificationToken" v-on:keyup.enter="verifyQrCode()"> <input type="text" placeholder="Verification Code" v-model="verificationToken" v-on:keyup.enter="verifyQrCode()">
<div class="ui green button"> <div class="ui green button">

3
client/src/stores/mainStore.js
View File

@ -41,7 +41,8 @@ export default new Vuex.Store({
'menu-text': '#5e6268', 'menu-text': '#5e6268',
}, },
'black':{ 'black':{
'body_bg_color': '#0f0f0f',//'#000', 'body_bg_color': 'linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(23,12,46,1) 100%)',
//'#0f0f0f',//'#000',
'small_element_bg_color': '#000', 'small_element_bg_color': '#000',
'text_color': '#FFF', 'text_color': '#FFF',
'dark_border_color': '#555',//'#ACACAC', //Lighter color to accent elemnts user can interact with 'dark_border_color': '#555',//'#ACACAC', //Lighter color to accent elemnts user can interact with

21
client/vue.config.js
View File

@ -1,13 +1,18 @@
module.exports = { module.exports = {
pwa: { pwa: {
name: 'SolidScribe', name: 'SolidScribe',
iconPaths: { iconPaths: {
favicon32: null, favicon32: null,
favicon16: null, favicon16: null,
appleTouchIcon: null, appleTouchIcon: null,
maskIcon: null, maskIcon: null,
msTileImage: null, msTileImage: null,
} },
},
devServer: {
disableHostCheck: true,
proxy: 'http://localhost:8081',
public: 'marvin.local',
},
}
} }

8
package-lock.json generated
View File

@ -466,7 +466,7 @@
"denque": { "denque": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz", "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
"integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==" "integrity": "sha1-Z0T/dkHBSMP4ppwwflEjXB9KN88="
}, },
"depd": { "depd": {
"version": "1.1.2", "version": "1.1.2",
@ -798,7 +798,7 @@
"generate-function": { "generate-function": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz", "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
"integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==", "integrity": "sha1-8GlhdpDBDIaOc7hGV0Z2T5fDR58=",
"requires": { "requires": {
"is-property": "^1.0.2" "is-property": "^1.0.2"
} }
@ -1100,7 +1100,7 @@
"long": { "long": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz", "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==" "integrity": "sha1-mntxz7fTYaGU6lVSQckvdGjVvyg="
}, },
"lru-cache": { "lru-cache": {
"version": "4.1.5", "version": "4.1.5",
@ -1223,7 +1223,7 @@
"named-placeholders": { "named-placeholders": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz", "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz",
"integrity": "sha512-wiFWqxoLL3PGVReSZpjLVxyJ1bRqe+KKJVbr4hGs1KWfTZTQyezHFBbuKj9hsizHyGV2ne7EMjHdxEGAybD5SA==", "integrity": "sha1-zrH7/1C2szSStc8hTM9eOc7z0Og=",
"requires": { "requires": {
"lru-cache": "^4.1.3" "lru-cache": "^4.1.3"
} }

4
server/index.js
View File

@ -212,7 +212,7 @@ io.on('connection', function(socket){
http.listen(3001, function(){ http.listen(3001, function(){
// console.log('socket.io liseting on port 3001'); console.log('socket.io liseting on port 3001');
}); });
//Enable json body parsing in requests. Allows me to post data in ajax calls //Enable json body parsing in requests. Allows me to post data in ajax calls
@ -299,7 +299,7 @@ app.use('/api/quick-note', quickNote)
//Output running status //Output running status
app.listen(port, () => { app.listen(port, () => {
// console.log(`Listening on port ${port}!`) console.log(`Listening on port ${port}!`)
}) })
// //

2
server/models/User.js
View File

@ -9,7 +9,7 @@ const speakeasy = require('speakeasy')
let User = module.exports = {} let User = module.exports = {}
const version = '3.2.6' const version = '3.3.1'
//Login a user, if that user does not exist create them //Login a user, if that user does not exist create them
//Issues login token //Issues login token