I need to get back into using git. The hell is wrong with me!?
This commit is contained in:
Max G
@@ -42,7 +42,7 @@ module.exports = {
|
||||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
test: /\.(png|jpe?g|gif)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
@@ -58,11 +58,11 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
test: /\.(eot|ttf|otf|woff|woff2|svg)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
||||
name: utils.assetsPath('fonts/[name].[ext]')
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -17,6 +17,9 @@ const devWebpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
|
||||
},
|
||||
watchOptions: {
|
||||
ignored: ['uploads', 'node_modules']
|
||||
},
|
||||
// cheap-module-eval-source-map is faster for development
|
||||
devtool: config.dev.devtool,
|
||||
|
||||
|
||||
@@ -4,4 +4,4 @@ const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
})
|
||||
@@ -13,7 +13,7 @@ module.exports = {
|
||||
proxyTable: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
host: 'localhost', // can be overwritten by process.env.HOST
|
||||
host: '0.0.0.0',//'localhost', // can be overwritten by process.env.HOST
|
||||
port: 8444, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
autoOpenBrowser: false,
|
||||
errorOverlay: true,
|
||||
|
||||
@@ -3,10 +3,16 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>client</title>
|
||||
|
||||
<link rel="icon" href="/api/static/assets/favicon.ico" type="image/ico"/>
|
||||
<link rel="shortcut icon" href="/api/static/assets/favicon.ico" type="image/x-icon"/>
|
||||
|
||||
<meta name="theme-color" content="#000" />
|
||||
|
||||
<title>Notes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<!-- built files will be auto injected, somewhere around here -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -11,20 +11,10 @@
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ckeditor/ckeditor5-build-classic": "^12.3.1",
|
||||
"@ckeditor/ckeditor5-build-decoupled-document": "^12.3.1",
|
||||
"@ckeditor/ckeditor5-dev-utils": "^12.0.2",
|
||||
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.2",
|
||||
"@ckeditor/ckeditor5-indent": "^10.0.1",
|
||||
"@ckeditor/ckeditor5-paragraph": "^11.0.4",
|
||||
"@ckeditor/ckeditor5-theme-lark": "^14.1.1",
|
||||
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
|
||||
"axios": "^0.18.0",
|
||||
"ckeditor5-indent-text": "^1.0.8",
|
||||
"es6-promise": "^4.2.6",
|
||||
"postcss-loader": "^2.1.6",
|
||||
"raw-loader": "^0.5.1",
|
||||
"semantic-ui": "^2.4.2",
|
||||
"vue": "^2.5.2",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.1.0"
|
||||
@@ -46,6 +36,7 @@
|
||||
"file-loader": "^1.1.4",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"ip": "^1.1.5",
|
||||
"node-notifier": "^5.1.2",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^1.2.0",
|
||||
|
||||
@@ -1,37 +1,19 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
|
||||
<global-site-menu />
|
||||
|
||||
<!-- Hide this menu on the notes page -->
|
||||
<div class="ui basic segment" v-if="
|
||||
this.$router.currentRoute.name != 'NotesPage'
|
||||
">
|
||||
<div class="ui container">
|
||||
<div class="ui tabular menu">
|
||||
|
||||
<router-link class="item" exact-active-class="active" to="/">Home</router-link>
|
||||
<router-link v-if="loggedIn" exact-active-class="active" class="item" to="/notes">Notes</router-link>
|
||||
<router-link class="item" exact-active-class="active" to="/help">Help</router-link>
|
||||
<router-link v-if="!loggedIn" exact-active-class="active" class="item" to="/login">Login</router-link>
|
||||
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="item">Logout</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-view/>
|
||||
<router-view />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
'global-site-menu': require('@/components/GlobalSiteMenu.vue').default,
|
||||
},
|
||||
data: function(){
|
||||
return {
|
||||
// loggedIn:
|
||||
@@ -39,6 +21,9 @@ export default {
|
||||
},
|
||||
beforeCreate: function(){
|
||||
|
||||
//Detect if user is on a mobile browser and set a flag in store
|
||||
this.$store.commit('detectIsUserOnMobile')
|
||||
|
||||
//Set color theme based on local storage
|
||||
if(localStorage.getItem('nightMode') == 'true'){
|
||||
this.$store.commit('toggleNightMode')
|
||||
@@ -50,15 +35,11 @@ export default {
|
||||
|
||||
if(token){
|
||||
this.$store.commit('setLoginToken', {token, username})
|
||||
} else {
|
||||
this.$store.commit('destroyLoginToken')
|
||||
this.$router.push({'path':'/'})
|
||||
}
|
||||
|
||||
//Detect if user is on a mobile browser and set a flag in store
|
||||
this.$store.commit('detectIsUserOnMobile')
|
||||
},
|
||||
mounted: function(){
|
||||
|
||||
},
|
||||
computed: {
|
||||
loggedIn () {
|
||||
@@ -69,6 +50,13 @@ export default {
|
||||
methods: {
|
||||
destroyLoginToken() {
|
||||
this.$store.commit('destroyLoginToken')
|
||||
},
|
||||
loginGateway() {
|
||||
if(!this.loggedIn){
|
||||
console.log('This user is not logged in')
|
||||
this.$router.push({'path':'/login'})
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
BIN
client/src/assets/roboto-latin-bold.woff2
Normal file
BIN
client/src/assets/roboto-latin-bold.woff2
Normal file
Binary file not shown.
BIN
client/src/assets/roboto-latin.woff2
Normal file
BIN
client/src/assets/roboto-latin.woff2
Normal file
Binary file not shown.
@@ -1,22 +1,47 @@
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/static/fonts/roboto-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(/static/fonts/roboto-latin-bold.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--background_color: #fff;
|
||||
--text_color: #3d3d3d;
|
||||
--outline_color: rgba(34,36,38,.15);
|
||||
--border_color: rgba(34,36,38,.20);
|
||||
}
|
||||
|
||||
div.ui.basic.segment.no-fluf-segment {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
|
||||
body{
|
||||
color: var(--text_color);
|
||||
background-color: var(--background_color);
|
||||
}
|
||||
|
||||
.ui.form input:not([type]),
|
||||
.ui.form input:not([type]):focus {
|
||||
.ui.form input:not([type]):focus,
|
||||
.ui.form textarea:not([type]),
|
||||
.ui.form textarea:not([type]):focus {
|
||||
color: var(--text_color);
|
||||
background-color: var(--background_color);
|
||||
border-color: var(--border_color);
|
||||
}
|
||||
.ui.basic.label {
|
||||
.ui.basic.label, .ui.header, .ui.header div.sub.header {
|
||||
color: var(--text_color);
|
||||
background-color: var(--background_color);
|
||||
border-color: var(--border_color);
|
||||
@@ -47,27 +72,29 @@ div.ui.basic.green.label {
|
||||
}
|
||||
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
|
||||
|
||||
|
||||
.color-picker {
|
||||
/* Styles for public display pages */
|
||||
.fun {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
color: var(--text_color);
|
||||
background-color: var(--background_color);
|
||||
|
||||
position: absolute;
|
||||
width: 175px;
|
||||
height: 100px;
|
||||
top: 26px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
left: -63px;
|
||||
z-index: 100;
|
||||
border: 1px solid;
|
||||
border-color: var(--border_color) !important;
|
||||
}
|
||||
.color-picker .button{
|
||||
border: 1px solid !important;
|
||||
border-color: var(--border_color) !important;
|
||||
color: var(--border_color) !important;
|
||||
.fun h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.fun h2 {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
.fun h3 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.fun p {
|
||||
/*font-size: 1.5em;*/
|
||||
}
|
||||
.fun blockquote {
|
||||
border-left: 5px solid cornflowerblue;
|
||||
padding-left: 25px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
/* Styles for public display pages */
|
||||
|
||||
.note-status-indicator {
|
||||
float: right;
|
||||
@@ -92,19 +119,19 @@ div.ui.basic.green.label {
|
||||
.textarea-height {
|
||||
height: calc(100% - 90px);
|
||||
}
|
||||
.ck-content {
|
||||
font-family: 'Open Sans' !important;
|
||||
font-size: 1.3rem !important;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ck .ck-editor__nested-editable:focus {
|
||||
background-color: var(--background_color) !important;
|
||||
.mobile-textarea-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui.white.button {
|
||||
background: #FFF;
|
||||
}
|
||||
.input-floating-button {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
transform: translateY(-50%);
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.fade-in-fwd {
|
||||
animation: fade-in-fwd 0.8s both;
|
||||
|
||||
40312
client/src/assets/semantic-min.css
vendored
40312
client/src/assets/semantic-min.css
vendored
File diff suppressed because one or more lines are too long
123
client/src/components/AttachmentDisplayCard.vue
Normal file
123
client/src/components/AttachmentDisplayCard.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<style type="text/css" scoped>
|
||||
|
||||
.attachment-display-card {
|
||||
width: 100%;
|
||||
padding: 0 0 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.attachment-image {
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
float: left;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
.image-placeholder {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
border: 1px solid #DDD;
|
||||
float: left;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid;
|
||||
font-size: 1.4em;
|
||||
margin: 0 0 10px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.link {
|
||||
font-size: 1.4em;
|
||||
margin: 0 0 5px;
|
||||
display: inline-block;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: calc(100% - 180px);
|
||||
line-height: 1.4em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="attachment-display-card">
|
||||
|
||||
|
||||
<input class="text" v-on:blur="saveIt()" v-model="text"></input>
|
||||
|
||||
<div v-if="item.attachment_type == 1">
|
||||
<div class="image-holder" v-if="item.file_location">
|
||||
<a v-if="item.file_location" :href="item.url" target="_blank">
|
||||
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="image-placeholder"></div>
|
||||
|
||||
<a class="link" v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
|
||||
</div>
|
||||
|
||||
<div v-if="item.attachment_type == 2">
|
||||
<div class="image-holder" v-if="item.file_location">
|
||||
<a v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">
|
||||
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="image-placeholder"></div>
|
||||
|
||||
<a class="link" v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="ui small compact basic button" v-on:click="openNote">
|
||||
Open Note
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
|
||||
props: [ 'item' ],
|
||||
data: function(){
|
||||
return {
|
||||
things: [],
|
||||
text: '',
|
||||
}
|
||||
},
|
||||
beforeCreate: function(){
|
||||
},
|
||||
mounted: function(){
|
||||
this.text = this.item.text
|
||||
},
|
||||
methods: {
|
||||
openNote(){
|
||||
const noteId = this.item.note_id
|
||||
this.$router.push('/notes/open/'+noteId)
|
||||
},
|
||||
saveIt(){
|
||||
|
||||
//Don't save text if it didn'th change
|
||||
if(this.item.text == this.text){
|
||||
return
|
||||
}
|
||||
|
||||
const data = {
|
||||
'attachmentId': this.item.id,
|
||||
'updatedText': this.text,
|
||||
'noteId': this.item.note_id
|
||||
}
|
||||
|
||||
//Save it, and don't think about it.
|
||||
axios.post('/api/attachment/update', data)
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
110
client/src/components/AttachmentEditor.vue
Normal file
110
client/src/components/AttachmentEditor.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<style scoped>
|
||||
.shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
z-index: 1200;
|
||||
cursor: pointer;
|
||||
}
|
||||
.editor {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
z-index: 1300;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--background_color);
|
||||
border: 3px solid;
|
||||
border-color: var(--border_color);
|
||||
}
|
||||
.attachment-image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="shade" v-on:click="closeAttachmentEditor"></div>
|
||||
<div class="editor">
|
||||
<div class="ui basic segment">
|
||||
|
||||
<h2>Edit Attachments</h2>
|
||||
|
||||
<div class="ui vertically divided grid">
|
||||
<div v-for="item in attachments" class="row">
|
||||
|
||||
<div class="ui sixteen wide column">
|
||||
<div class="ui form">
|
||||
<div class="field">
|
||||
<textarea v-on:blur="saveIt(item)" v-model="item.text" :key="item.id + 'text'"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui sixteen wide column">
|
||||
<a v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
|
||||
|
||||
<!-- Display image -->
|
||||
<div v-if="item.file_location && item.attachment_type == 2">
|
||||
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
|
||||
</div>
|
||||
|
||||
<!-- provide link -->
|
||||
<a v-if="item.file_location" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
|
||||
name: 'AttachmentEditor',
|
||||
props: [ 'noteId' ],
|
||||
data: function(){
|
||||
return {
|
||||
attachments: []
|
||||
}
|
||||
},
|
||||
beforeCreate: function(){
|
||||
},
|
||||
mounted: function(){
|
||||
|
||||
this.fetchAttachments()
|
||||
},
|
||||
methods: {
|
||||
fetchAttachments(){
|
||||
axios.post('/api/attachment/get', {'noteId':this.noteId})
|
||||
.then(results => {
|
||||
this.attachments = results.data
|
||||
})
|
||||
},
|
||||
closeAttachmentEditor(){
|
||||
this.$bus.$emit('close_edit_attachment')
|
||||
},
|
||||
saveIt(attachment){
|
||||
const data = {
|
||||
'attachmentId': attachment.id,
|
||||
'updatedText': attachment.text,
|
||||
'noteId': this.noteId
|
||||
}
|
||||
axios.post('/api/attachment/update', data)
|
||||
.then(results => {})
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
131
client/src/components/ColorPicker.vue
Normal file
131
client/src/components/ColorPicker.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="color-picker" :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
|
||||
<div class="ui grid">
|
||||
<div class="five wide column">
|
||||
<p>Note Color</p>
|
||||
<div v-for="color in colors"
|
||||
class="color-button"
|
||||
:style="{ backgroundColor:color }"
|
||||
v-on:click="chosenColor(color)"
|
||||
></div>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<p>Note Icon
|
||||
<span v-if="allStyles.noteIcon" >
|
||||
<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
|
||||
</span>
|
||||
</p>
|
||||
<div v-for="icon in icons" class="icon-button" v-on:click="chosenIcon(icon)" >
|
||||
<i :class="`large ${icon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
|
||||
</div>
|
||||
<div class="ui compact fluid button" v-on:click="clearStyles">Clear All Styles</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<p>Icon Color</p>
|
||||
<div v-for="color in colors"
|
||||
class="color-button"
|
||||
:style="{ backgroundColor:color }"
|
||||
v-on:click="chooseIconColor(color)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ColorPicker',
|
||||
props: [ 'location', 'styleObject' ],
|
||||
data () {
|
||||
return {
|
||||
allStyles:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
|
||||
blankStyle:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
|
||||
colors: [
|
||||
"#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#e8f5e9","#c8e6c9","#a5d6a7","#81c784","#66bb6a","#4caf50","#43a047","#388e3c","#2e7d32","#1b5e20","#f1f8e9","#dcedc8","#c5e1a5","#aed581","#9ccc65","#8bc34a","#7cb342","#689f38","#558b2f","#33691e","#f9fbe7","#f0f4c3","#e6ee9c","#dce775","#d4e157","#cddc39","#c0ca33","#afb42b","#9e9d24","#827717","#fffde7","#fff9c4","#fff59d","#fff176","#ffee58","#ffeb3b","#fdd835","#fbc02d","#f9a825","#f57f17","#fff8e1","#ffecb3","#ffe082","#ffd54f","#ffca28","#ffc107","#ffb300","#ffa000","#ff8f00","#ff6f00","#fff3e0","#ffe0b2","#ffcc80","#ffb74d","#ffa726","#ff9800","#fb8c00","#f57c00","#ef6c00","#e65100","#fbe9e7","#ffccbc","#ffab91","#ff8a65","#ff7043","#ff5722","#f4511e","#e64a19","#d84315","#bf360c","#efebe9","#d7ccc8","#bcaaa4","#a1887f","#8d6e63","#795548","#6d4c41","#5d4037","#4e342e","#3e2723","#fafafa","#f5f5f5","#eeeeee","#e0e0e0","#bdbdbd","#9e9e9e","#757575","#616161","#424242","#212121","#eceff1","#cfd8dc","#b0bec5","#90a4ae","#78909c","#607d8b","#546e7a","#455a64","#37474f","#263238","#ffffff","#000000"],
|
||||
icons: ['ambulance','anchor','balance scale','bath','bed','beer','bell','bell slash','bell slash outline','bicycle','binoculars','birthday cake','blind','bomb','book','bookmark','briefcase','building','car','coffee','crosshairs','dollar sign','eye','eye slash','fighter jet','fire','fire extinguisher','flag','flag checkered','flask','gamepad','gavel','gift','glass martini','globe','graduation cap','h square','heart','heart outline','heartbeat','home','hospital','hospital outline','image','image outline','images','images outline','industry','info','info circle','key','leaf','lemon','lemon outline','life ring','life ring outline','lightbulb','lightbulb outline','location arrow','low vision','magnet','male','map','map outline','map marker','map marker alternate','map pin','map signs','medkit','money bill alternate','money bill alternate outline','motorcycle','music','newspaper','newspaper outline','paw','phone','phone square','phone volume','plane','plug','plus','plus square','plus square outline','print','recycle','road','rocket','search','search minus','search plus','ship','shopping bag','shopping basket','shopping cart','shower','street view','subway','suitcase','tag','tags','taxi','thumbtack','ticket alternate','tint','train','tree','trophy','truck','tty','umbrella','university','utensil spoon','utensils','wheelchair','wifi','wrench']
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
styleObject: function(updatedStyles){
|
||||
this.allStyles = updatedStyles
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.allStyles = this.styleObject
|
||||
},
|
||||
methods: {
|
||||
clearStyles(){
|
||||
this.$emit('changeColor', this.blankStyle)
|
||||
},
|
||||
chosenColor(inColor){
|
||||
|
||||
//Set not background to color that was chosen
|
||||
this.allStyles.noteBackground = inColor
|
||||
|
||||
//Automatically select note text color
|
||||
|
||||
// Convert hex color to RGB - http://gist.github.com/983661
|
||||
let color = +("0x" + inColor.slice(1).replace(inColor.length < 5 && /./g, '$&$&'));
|
||||
|
||||
let r = color >> 16;
|
||||
let g = color >> 8 & 255;
|
||||
let b = color & 255;
|
||||
|
||||
//Convert RGB to HSP
|
||||
const hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) );
|
||||
|
||||
//If it has a BG color, default to sold black text
|
||||
this.allStyles.noteText = '#000'
|
||||
if(hsp < 127.5){
|
||||
this.allStyles.noteText = '#FFF' //If color is dark, we need brighter text
|
||||
}
|
||||
|
||||
this.$emit('changeColor', this.allStyles)
|
||||
},
|
||||
chosenIcon(inIcon){
|
||||
|
||||
this.allStyles.noteIcon = inIcon
|
||||
|
||||
this.$emit('changeColor', this.allStyles)
|
||||
},
|
||||
chooseIconColor(inColor){
|
||||
|
||||
this.allStyles.iconColor = inColor
|
||||
|
||||
this.$emit('changeColor', this.allStyles)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
.color-picker {
|
||||
color: var(--text_color);
|
||||
background-color: var(--background_color);
|
||||
|
||||
position: absolute;
|
||||
|
||||
/*height: 100px;*/
|
||||
top: 37px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
left: -63px;
|
||||
z-index: 300;
|
||||
border: 1px solid;
|
||||
border-color: var(--border_color) !important;
|
||||
|
||||
width: 750px;
|
||||
}
|
||||
.icon-button {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.color-button {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
43
client/src/components/CrunchMenu.vue
Normal file
43
client/src/components/CrunchMenu.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Crunch Menu</p>
|
||||
<div v-for="(item, index) in items">
|
||||
<slot :name="index"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'CrunchMenu',
|
||||
data () {
|
||||
return {
|
||||
items: []
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
},
|
||||
mounted(){
|
||||
console.log(this)
|
||||
// console.log(this.$slots.default)
|
||||
this.$slots.default.forEach( vnode => {
|
||||
if(vnode.tag && vnode.tag.length > 0){
|
||||
this.items.push(vnode)
|
||||
}
|
||||
})
|
||||
|
||||
console.log(this.items)
|
||||
},
|
||||
methods: {
|
||||
onClickTag(index){
|
||||
console.log('yup')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
</style>
|
||||
@@ -20,9 +20,6 @@
|
||||
'Order by Last Edited' :'lastEdited',
|
||||
'Order by Last Opened' :'lastOpened',
|
||||
'Order by Last Created' :'lastCreated',
|
||||
'Only Show Notes with Links' :'withLinks',
|
||||
'Only Show Notes with Tags' :'withTags',
|
||||
'Only Show Archived Notes' :'onlyArchived',
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -32,9 +29,6 @@
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
confirmDelete(){
|
||||
this.click++
|
||||
},
|
||||
displayString(){
|
||||
return this.orderString.replace('Order by','').replace('Only Show','')
|
||||
},
|
||||
@@ -54,7 +48,7 @@
|
||||
<style type="text/css" scoped>
|
||||
|
||||
.filter-header {
|
||||
width: 270px;
|
||||
width: 200px;
|
||||
padding: 0 0 0 10px;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
border-bottom: none;
|
||||
@@ -62,24 +56,27 @@
|
||||
box-sizing: border-box;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
margin: 0 0 0 -11px;
|
||||
float: right;
|
||||
}
|
||||
.filter-menu {
|
||||
|
||||
color: var(--text_color);
|
||||
background-color: var(--background_color);
|
||||
border-color: var(--border_color);
|
||||
|
||||
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 270px;
|
||||
width: 200px;
|
||||
left: -1px;
|
||||
z-index: 10;
|
||||
padding-top: 10px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-color: var(--border_color);
|
||||
}
|
||||
.filter-active {
|
||||
border: 1px solid;
|
||||
|
||||
96
client/src/components/FileUploadButton.vue
Normal file
96
client/src/components/FileUploadButton.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<style type="text/css" scoped>
|
||||
.hidden-up {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="ui clickable basic button">
|
||||
<form>
|
||||
<label :for="`upfile-${noteId}`" class="clickable">File Yeet {{uploadPercentage}}</label>
|
||||
<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
|
||||
</form>
|
||||
<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
name: 'FileUploadButton',
|
||||
props: [ 'noteId' ],
|
||||
data () {
|
||||
return {
|
||||
file: null,
|
||||
uploadPercentage: 0,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// console.log(this.noteId)
|
||||
},
|
||||
methods: {
|
||||
uploadFileToServer() {
|
||||
let formData = new FormData();
|
||||
formData.append('file', this.file);
|
||||
formData.append('noteId', this.noteId)
|
||||
console.log('>> formData >> ', formData);
|
||||
|
||||
// You should have a server side REST API
|
||||
axios.post('/api/attachment/upload',
|
||||
formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
onUploadProgress: ( progressEvent ) => {
|
||||
this.uploadPercentage = parseInt(
|
||||
Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) )
|
||||
}
|
||||
}
|
||||
).then(results => {
|
||||
this.uploadPercentage = 'DONE'
|
||||
this.file = null
|
||||
console.log('SUCCESS!!');
|
||||
|
||||
console.log('File upload results')
|
||||
console.log(results.data)
|
||||
|
||||
const name = results.data.fileName
|
||||
const location = results.data.fileLocation
|
||||
|
||||
if(name && location){
|
||||
|
||||
const imageCode = `<img alt="yup" height="200px" src="/api/static/${location}">`
|
||||
|
||||
//put cursor at the bottom of the window
|
||||
tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true);
|
||||
tinyMCE.activeEditor.selection.collapse(false);
|
||||
tinymce.activeEditor.execCommand('mceInsertContent', false, imageCode)
|
||||
}
|
||||
|
||||
//try and stick that file into the active editor
|
||||
// tinyMCE.execCommand(
|
||||
// 'mceInsertContent',
|
||||
// false,
|
||||
// '<img alt="Smiley face" height="42" width="42" src="' + src + '"/>'
|
||||
// );
|
||||
|
||||
})
|
||||
.catch(results => {
|
||||
this.uploadPercentage = 'FAIL'
|
||||
console.log('FAILURE!!');
|
||||
})
|
||||
},
|
||||
handleFileUpload() {
|
||||
//Grab file and push note id to into data
|
||||
this.file = this.$refs.file.files[0]
|
||||
|
||||
console.log('>>>> 1st element in files array >>>> ')
|
||||
console.log(this.file)
|
||||
|
||||
if(this.file){
|
||||
this.uploadFileToServer()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
253
client/src/components/GlobalSiteMenu.vue
Normal file
253
client/src/components/GlobalSiteMenu.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<style scoped>
|
||||
.slotholder {
|
||||
height: 100vh;
|
||||
width: 140px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.global-menu {
|
||||
width: 140px;
|
||||
background: #221f2b;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 111;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
color: #fff;
|
||||
padding: 10px 0px 10px 10px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 1.1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sub {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.menu-section {}
|
||||
.menu-section + .menu-section {
|
||||
border-top: 1px solid #534c68;
|
||||
}
|
||||
.menu-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-button:hover {
|
||||
background-color: #534c68;
|
||||
}
|
||||
|
||||
.router-link-active i {
|
||||
/*color: #16ab39;*/
|
||||
}
|
||||
.router-link-active {
|
||||
background-color: #534c68;
|
||||
}
|
||||
|
||||
.shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
.top-menu-bar {
|
||||
color: var(--text_color);
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.top-menu-bar img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- collapsed menu, appears as a bar -->
|
||||
<div class="top-menu-bar menu-item" v-if="collapsed || mobile" v-on:click="collapseMenu">
|
||||
<div class="ui grid">
|
||||
<div class="five wide column">
|
||||
<i class="bars icon"></i> Menu
|
||||
</div>
|
||||
<div class="six wide center aligned column">
|
||||
<img src="/api/static/assets/favicon.ico" alt="logo" />
|
||||
</div>
|
||||
<div class="five wide right aligned column"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shade" v-if="mobile && !collapsed" v-on:click="collapseMenu"></div>
|
||||
|
||||
<div class="slotholder" v-if="!collapsed && !mobile">
|
||||
</div>
|
||||
|
||||
<div class="global-menu" v-if="!collapsed" v-on:click="menuClicked">
|
||||
|
||||
<div class="menu-section">
|
||||
<div class="menu-item menu-button" v-on:click="collapseMenu">
|
||||
<i class="caret square left icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-section" v-if="loggedIn">
|
||||
<div v-if="!disableNewNote" @click="createNote" class="menu-item menu-item menu-button">
|
||||
<i class="green plus icon"></i>New Note
|
||||
</div>
|
||||
<div v-if="disableNewNote" class="menu-item menu-item menu-button">
|
||||
<i class="purple plus icon"></i>Creating
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-section" v-if="loggedIn">
|
||||
<router-link exact-active-class="active" class="menu-item menu-button" to="/notes">
|
||||
<i class="file icon"></i>Notes
|
||||
</router-link>
|
||||
<div>
|
||||
<div class="menu-item sub">Show Only <i class="caret down icon"></i></div>
|
||||
<div v-on:click="updateFastFilters(0)" class="menu-item menu-button sub"><i class="grey linkify icon"></i>Links</div>
|
||||
<div v-on:click="updateFastFilters(1)" class="menu-item menu-button sub"><i class="grey tags icon"></i>Tags</div>
|
||||
<div v-on:click="updateFastFilters(2)" class="menu-item menu-button sub"><i class="grey archive icon"></i>Archived</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-section" v-if="loggedIn">
|
||||
<router-link class="menu-item menu-button" exact-active-class="active" to="/attachments">
|
||||
<i class="folder icon"></i>Attachments
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-section" v-if="loggedIn">
|
||||
<router-link v-if="loggedIn" exact-active-class="active" class="menu-item menu-button" to="/quick">
|
||||
<i class="coffee icon"></i>Quick
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-section" v-if="!loggedIn">
|
||||
<router-link v-if="!loggedIn" class="menu-item menu-button" exact-active-class="active" to="/">
|
||||
<i class="home icon"></i>Welcome
|
||||
</router-link>
|
||||
|
||||
<router-link exact-active-class="active" class="menu-item menu-button" to="/login">
|
||||
<i class="plug icon"></i>Login
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-section">
|
||||
<div v-on:click="toggleNightMode" class="menu-item menu-button">
|
||||
<span v-if="$store.getters.getIsNightMode">
|
||||
<i class="toggle on icon"></i>Dark Theme</span>
|
||||
<span v-else>
|
||||
<i class="toggle off icon"></i>Dark Theme</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-section" v-if="loggedIn">
|
||||
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="menu-item menu-button">
|
||||
<i class="user icon"></i>{{ucWords($store.getters.getUsername)}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <router-link class="ui basic compact button" exact-active-class="active" to="/help">
|
||||
<i class="question mark icon"></i>Help
|
||||
</router-link> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
username: '',
|
||||
collapsed: false,
|
||||
mobile: false,
|
||||
disableNewNote: false
|
||||
}
|
||||
},
|
||||
beforeCreate: function(){
|
||||
},
|
||||
mounted: function(){
|
||||
this.mobile = this.$store.getters.getIsUserOnMobile
|
||||
this.collapsed = this.$store.getters.getIsUserOnMobile
|
||||
},
|
||||
computed: {
|
||||
loggedIn () {
|
||||
//Map logged in from state
|
||||
return this.$store.getters.getLoggedIn
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
menuClicked(){
|
||||
//Collapse menu when item is clicked in mobile
|
||||
if(this.mobile && !this.collapsed){
|
||||
this.collapsed = true
|
||||
}
|
||||
},
|
||||
collapseMenu(){
|
||||
this.collapsed = !this.collapsed
|
||||
},
|
||||
createNote(event){
|
||||
const title = ''
|
||||
this.disableNewNote = true
|
||||
|
||||
axios.post('/api/note/create', {title})
|
||||
.then(response => {
|
||||
|
||||
if(response.data && response.data.id){
|
||||
this.$router.push('/notes/open/'+response.data.id)
|
||||
this.$bus.$emit('open_note', response.data.id)
|
||||
this.disableNewNote = false
|
||||
}
|
||||
})
|
||||
},
|
||||
destroyLoginToken() {
|
||||
this.$store.commit('destroyLoginToken')
|
||||
this.$router.push('/')
|
||||
},
|
||||
toggleNightMode(){
|
||||
this.$store.commit('toggleNightMode')
|
||||
this.$bus.$emit('toggle_night_mode')
|
||||
},
|
||||
ucWords(str){
|
||||
return (str + '')
|
||||
.replace(/^(.)|\s+(.)/g, function ($1) {
|
||||
return $1.toUpperCase()
|
||||
})
|
||||
},
|
||||
updateFastFilters(index){
|
||||
|
||||
//A little hacky, brings user to notes page then filters on click
|
||||
if(this.$route.name != 'NotesPage'){
|
||||
this.$router.push('/notes')
|
||||
setTimeout( () => {
|
||||
this.updateFastFilters(index)
|
||||
}, 500 )
|
||||
}
|
||||
|
||||
const options = [
|
||||
'withLinks', // 'Only Show Notes with Links'
|
||||
'withTags', // 'Only Show Notes with Tags'
|
||||
'onlyArchived', //'Only Show Archived Notes'
|
||||
]
|
||||
|
||||
let filter = {}
|
||||
filter[options[index]] = 1
|
||||
|
||||
this.$bus.$emit('update_fast_filters', filter)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<span>
|
||||
<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete">
|
||||
<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right">
|
||||
<i class="grey trash alternate icon"></i>
|
||||
</span>
|
||||
<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="left center">
|
||||
<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="left center" data-inverted="">
|
||||
<i class="red trash alternate icon"></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -1,71 +1,62 @@
|
||||
<template>
|
||||
<!-- change class to .master-note-edit to have it popup on the screen -->
|
||||
<div
|
||||
id="InputNotes" class="master-note-edit"
|
||||
id="InputNotes"
|
||||
class="master-note-edit"
|
||||
@keyup.esc="close"
|
||||
:class="[{'size-down':(sizeDown == true)}, 'position-'+position ]"
|
||||
:style="{'background-color':color, 'color':fontColor}"
|
||||
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
|
||||
>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div v-if="loading" class="loading-note">
|
||||
<div class="ui active dimmer">
|
||||
<div class="ui text loader">{{loadingMessage}}...</div>
|
||||
<div class="ui text loader">{{loadingMessage}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu -->
|
||||
<div class="note-top-menu">
|
||||
<div @click="close" class="ui button"><i class="green close icon"></i>Close (ESC)</div>
|
||||
|
||||
<div @click="onToggleFancyInput" class="ui button">
|
||||
Fancy ({{fancyInput?'On':'Off'}})
|
||||
<div @click="close" class="ui basic icon button" data-tooltip="Close" data-position="right center" data-inverted="">
|
||||
<i class="close icon"></i>
|
||||
</div>
|
||||
|
||||
<div @click="onTogglePinned" class="ui button">
|
||||
<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'pinned':'not pinned'}}
|
||||
<div @click="onTogglePinned" class="ui basic icon button" data-tooltip="Pin to Top" data-position="right center" data-inverted="">
|
||||
<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'Pinned':''}}
|
||||
</div>
|
||||
<div @click="onToggleArchived" class="ui button">
|
||||
<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'archived':'not archived'}}
|
||||
<div @click="onToggleArchived" class="ui basic icon button" data-tooltip="Hide on main" data-position="right center" data-inverted="">
|
||||
<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'Archived':''}}
|
||||
</div>
|
||||
|
||||
<span class="relative" v-on:mouseover="showColorPicker = true" v-on:mouseleave="showColorPicker = false">
|
||||
<span class="ui icon button">
|
||||
<!-- <file-upload-button :noteId="noteid" /> -->
|
||||
|
||||
<span class="relative" v-on:click="showColorPicker">
|
||||
<span class="ui basic icon button">
|
||||
<i class="paint brush icon"></i>
|
||||
</span>
|
||||
|
||||
<span v-if="showColorPicker" class="color-picker">
|
||||
<button @click="onChangeColor" class="ui icon white button"></button>
|
||||
<button @click="onChangeColor" class="ui icon red button"></button>
|
||||
<button @click="onChangeColor" class="ui icon orange button"></button>
|
||||
<button @click="onChangeColor" class="ui icon yellow button"></button>
|
||||
<button @click="onChangeColor" class="ui icon olive button"></button>
|
||||
<button @click="onChangeColor" class="ui icon green button"></button>
|
||||
<button @click="onChangeColor" class="ui icon teal button"></button>
|
||||
<button @click="onChangeColor" class="ui icon blue button"></button>
|
||||
<button @click="onChangeColor" class="ui icon violet button"></button>
|
||||
<button @click="onChangeColor" class="ui icon purple button"></button>
|
||||
<button @click="onChangeColor" class="ui icon pink button"></button>
|
||||
<button @click="onChangeColor" class="ui icon brown button"></button>
|
||||
<button @click="onChangeColor" class="ui icon grey button"></button>
|
||||
<button @click="onChangeColor" class="ui icon black button"></button>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div v-if="attachmentCount > 0" class="ui basic icon button" v-on:click="openEditAttachment" data-tooltip="View Links/Images" data-position="right center" data-inverted="">
|
||||
<i class="folder icon"></i>
|
||||
</div>
|
||||
|
||||
<span class="note-status-indicator">{{statusText}}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="fancyInput == 1" class="textarea-height no-flow">
|
||||
<ckeditor ref="main-edit"
|
||||
:editor="editor" @ready="onReady" v-model="noteText" :config="editorConfig" v-on:blur="save" />
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
class="textarea-height raw-edit"
|
||||
v-if="fancyInput == 0"
|
||||
v-model="noteText"
|
||||
v-on:blur="save"
|
||||
v-on:keyup="onKeyup"
|
||||
|
||||
|
||||
<textarea :id="noteid+'-tinymce-editor'">{{noteText}}</textarea>
|
||||
|
||||
<note-tag-edit v-if="!$store.getters.getIsUserOnMobile" :noteId="noteid" :key="'tags-for-note-'+noteid"/>
|
||||
|
||||
<color-picker
|
||||
v-if="colorPickerVisible"
|
||||
:location="colorPickerLocation"
|
||||
@changeColor="onChangeColor"
|
||||
:style-object="styleObject"
|
||||
/>
|
||||
|
||||
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -73,21 +64,14 @@
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
|
||||
|
||||
//Start working on some plugin, tag plugin, link to other note, interactive checkbox
|
||||
class InsertImage extends Plugin {
|
||||
init() {
|
||||
console.log( 'InsertImage was initialized' );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: 'InputNotes',
|
||||
props: [ 'noteid', 'position' ],
|
||||
components:{
|
||||
'note-tag-edit': require('@/components/NoteTagEdit.vue').default
|
||||
'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
|
||||
'color-picker': require('@/components/ColorPicker.vue').default,
|
||||
'file-upload-button': require('@/components/FileUploadButton.vue').default,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
@@ -98,23 +82,19 @@
|
||||
statusText: 'Saved',
|
||||
lastNoteHash: null,
|
||||
saveDebounce: null, //Prevent save from being called numerous times quickly
|
||||
lastSaved: 0,
|
||||
updated: 'Never',
|
||||
editDebounce: null,
|
||||
keyPressesCounter: 0,
|
||||
fancyInput: 0, //Default to basic text edit. Upgrade if set to 1
|
||||
keyPressesCounter: 0, //Determen keys pressed between saves
|
||||
pinned: 0,
|
||||
archived: 0,
|
||||
color: '#fff',
|
||||
fontColor: '#000',
|
||||
sizeDown: false,
|
||||
showColorPicker: false,
|
||||
attachmentCount: 0,
|
||||
styleObject: { 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null }, //Style object. Determines colors and badges
|
||||
|
||||
editor: DecoupledEditor,
|
||||
editorConfig: {
|
||||
startupFocus: 'end',
|
||||
toolbar: ["alignment", "fontSize", "removeHighlight", "highlight", "bold", "italic", "strikethrough", "underline", "blockQuote", "heading", "link", "numberedList", "bulletedList", "insertTable", "|", "undo", "redo"]
|
||||
}
|
||||
sizeDown: false, //Used to animate close state
|
||||
colorPickerVisible: false,
|
||||
colorPickerLocation: null,
|
||||
|
||||
tinymce: null, //Initialized editor instance
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -134,24 +114,102 @@
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy(){
|
||||
|
||||
this.$bus.$off('toggle_night_mode', this.listener)
|
||||
//Trash editor instance on close
|
||||
this.tinymce.remove()
|
||||
|
||||
},
|
||||
mounted: function() {
|
||||
|
||||
this.loadNote(this.noteid)
|
||||
//Change TinyMce styles on nightmored change
|
||||
this.$bus.$on('toggle_night_mode', this.setEditorTextColor )
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.loadNote(this.noteid)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onToggleFancyInput(){
|
||||
if(this.fancyInput == 0){
|
||||
this.fancyInput = 1
|
||||
} else {
|
||||
this.fancyInput = 0;
|
||||
initTinyMce(){
|
||||
|
||||
// image_list: [
|
||||
// {title: 'My image 1', value: 'https://www.tinymce.com/my1.gif'},
|
||||
// {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
|
||||
// ]
|
||||
|
||||
//Tweak doc height for mobile
|
||||
let docHeight = 'calc(100vh - 90px)'
|
||||
if(this.$store.getters.getIsUserOnMobile){
|
||||
docHeight = 'calc(100vh - 37px)'
|
||||
}
|
||||
//Update last note hash, this will tell note to save next update
|
||||
this.lastNoteHash = 0
|
||||
|
||||
//setup skin as dark if night mode is enabled
|
||||
let skin = 'oxide'
|
||||
if(this.$store.getters.getIsNightMode){
|
||||
skin = 'oxide-dark'
|
||||
}
|
||||
|
||||
const editorId = '#'+this.noteid+'-tinymce-editor'
|
||||
|
||||
//Globally defined included in index HTML
|
||||
tinymce.init({
|
||||
selector: editorId,
|
||||
toolbar: 'forecolor backcolor styleselect | bold italic underline | link image | code | undo redo | bullist numlist | outdent indent table, hr, searchreplace | removeformat',
|
||||
plugins: 'paste, link, code, lists, table, hr, searchreplace, image',
|
||||
browser_spellcheck: true,
|
||||
menubar: false,
|
||||
branding: false,
|
||||
statusbar: false,
|
||||
height: docHeight,
|
||||
skin: skin,
|
||||
contextmenu: false,
|
||||
init_instance_callback: this.editorInitCallback,
|
||||
imagetools_toolbar: "imageoptions",
|
||||
})
|
||||
},
|
||||
editorInitCallback(editor){
|
||||
|
||||
this.loading = false //Turn off loading screed when editor is loaded
|
||||
this.tinymce = editor
|
||||
|
||||
this.setEditorTextColor()
|
||||
|
||||
editor
|
||||
.on('Change', this.onKeyup )
|
||||
.on('keyup', this.onKeyup )
|
||||
.on('blur', this.save )
|
||||
|
||||
},
|
||||
setEditorTextColor(){
|
||||
//Only Set editor text color, background is transparent and set on parent element
|
||||
|
||||
//There may be scenarios where editor has not been set up
|
||||
if(this.tinymce){
|
||||
//Set editor color to color from app, change with night mode
|
||||
this.tinymce.getBody().style.color = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--text_color');
|
||||
|
||||
//Overwrite set color if theme is set for note.
|
||||
if(this.styleObject && this.styleObject.noteText){
|
||||
this.tinymce.getBody().style.color = this.styleObject.noteText
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
getText(){
|
||||
//Return text from tinyMce Editor
|
||||
return this.tinymce.getContent()
|
||||
},
|
||||
showColorPicker(event){
|
||||
this.colorPickerVisible = !this.colorPickerVisible
|
||||
this.colorPickerLocation = {'x':event.clientX, 'y':event.clientY}
|
||||
},
|
||||
openEditAttachment(){
|
||||
// this.$bus.$emit('open_edit_attachment', this.currentNoteId)
|
||||
this.$router.push('/attachments/note/'+this.currentNoteId)
|
||||
},
|
||||
onTogglePinned(){
|
||||
if(this.pinned == 0){
|
||||
@@ -161,6 +219,7 @@
|
||||
}
|
||||
//Update last note hash, this will tell note to save next update
|
||||
this.lastNoteHash = 0
|
||||
this.save()
|
||||
},
|
||||
onToggleArchived(){
|
||||
if(this.archived == 0){
|
||||
@@ -170,18 +229,14 @@
|
||||
}
|
||||
//Update last note hash, this will tell note to save next update
|
||||
this.lastNoteHash = 0
|
||||
this.save()
|
||||
},
|
||||
onChangeColor(event){
|
||||
//Grab the color of the button clicked
|
||||
const style = getComputedStyle(event.target)
|
||||
this.color = style['background-color']
|
||||
this.fontColor = '#FFF'
|
||||
onChangeColor(newStyleObject){
|
||||
|
||||
//If background is white, default to colors in CSS
|
||||
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF'){
|
||||
this.color = null
|
||||
this.fontColor = null
|
||||
}
|
||||
//Set new style object for note, page will use some styles, styles will be saved to database
|
||||
this.styleObject = newStyleObject
|
||||
|
||||
this.setEditorTextColor()
|
||||
|
||||
this.lastNoteHash = 0 //Update hash to force note update on next save
|
||||
this.save()
|
||||
@@ -190,45 +245,34 @@
|
||||
|
||||
let vm = this
|
||||
|
||||
let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating']
|
||||
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 p1 = doing[Math.floor(Math.random() * doing.length)]
|
||||
let p2 = thing[Math.floor(Math.random() * thing.length)]
|
||||
vm.loadingMessage = p1 + ' ' + p2
|
||||
|
||||
|
||||
//Component is activated with NoteId in place, lookup text with associated ID
|
||||
if(this.$store.getters.getLoggedIn){
|
||||
axios.post('/api/note/get', {'noteId': noteId})
|
||||
.then(response => {
|
||||
|
||||
vm.loading = false
|
||||
|
||||
//Set up local data
|
||||
vm.currentNoteId = noteId
|
||||
vm.noteText = response.data.text
|
||||
vm.updated = response.data.updated
|
||||
vm.lastNoteHash = vm.hashString(response.data.text)
|
||||
vm.color = response.data.color
|
||||
if(response.data.color){
|
||||
vm.styleObject = JSON.parse(response.data.color) //Load styles json from DB
|
||||
}
|
||||
|
||||
if(response.data.pinned != null){
|
||||
vm.pinned = response.data.pinned
|
||||
}
|
||||
vm.archived = response.data.archived
|
||||
vm.attachmentCount = response.data.attachment_count
|
||||
|
||||
this.fontColor = '#FFF'
|
||||
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF' || this.color == null){
|
||||
this.color = null
|
||||
this.fontColor = null
|
||||
}
|
||||
|
||||
if(response.data.raw_input == 1){
|
||||
this.fancyInput = 1
|
||||
}
|
||||
|
||||
//Put focus on note, at the end of the note text
|
||||
vm.$nextTick(() => {
|
||||
|
||||
// vm.$refs['custom-input'].focus()
|
||||
this.initTinyMce()
|
||||
})
|
||||
|
||||
})
|
||||
@@ -236,79 +280,53 @@
|
||||
console.log('Could not fetch note')
|
||||
}
|
||||
},
|
||||
onReady(editor){
|
||||
|
||||
let vm = this
|
||||
|
||||
// Insert the toolbar before the editable area.
|
||||
editor.ui.getEditableElement().parentElement.insertBefore(
|
||||
editor.ui.view.toolbar.element,
|
||||
editor.ui.getEditableElement()
|
||||
);
|
||||
|
||||
editor.editing.view.focus()
|
||||
|
||||
// const editor = this.editor;
|
||||
const view = editor.editing.view;
|
||||
const viewDocument = view.document;
|
||||
|
||||
//Insert 5 spaces when tab is pressed
|
||||
viewDocument.on( 'keyup', ( evt, data ) => {
|
||||
|
||||
vm.onKeyup(event)
|
||||
|
||||
//Optional data bindings for tab key
|
||||
if( (data.keyCode == 9) && viewDocument.isFocused ){
|
||||
|
||||
//Insert 5 spaces to simulate tab
|
||||
//editor.execute( 'input', { text: " " } );
|
||||
|
||||
evt.stop(); // Prevent executing the default handler.
|
||||
data.preventDefault();
|
||||
view.scrollToTheSelection();
|
||||
}
|
||||
|
||||
} );
|
||||
},
|
||||
//Used by simple editor
|
||||
onKeyup(){
|
||||
let vm = this
|
||||
vm.statusText = 'Modified'
|
||||
|
||||
this.statusText = 'Modified'
|
||||
|
||||
//Each note, save after 5 seconds, focus lost or 30 characters typed.
|
||||
clearTimeout(vm.editDebounce)
|
||||
vm.editDebounce = setTimeout(() => {
|
||||
vm.save()
|
||||
clearTimeout(this.editDebounce)
|
||||
this.editDebounce = setTimeout(() => {
|
||||
this.save()
|
||||
}, 5000)
|
||||
|
||||
//Save after 30 keystrokes
|
||||
vm.keyPressesCounter = (vm.keyPressesCounter + 1)
|
||||
if(vm.keyPressesCounter > 30){
|
||||
vm.keyPressesCounter = 0
|
||||
vm.save()
|
||||
this.keyPressesCounter = (this.keyPressesCounter + 1)
|
||||
if(this.keyPressesCounter > 30){
|
||||
this.keyPressesCounter = 0
|
||||
this.save()
|
||||
}
|
||||
},
|
||||
save(){
|
||||
return new Promise((resolve, reject) => {
|
||||
//Clear other debounced events to prevent double calling of save
|
||||
clearTimeout(this.editDebounce)
|
||||
|
||||
//Don't save note if its hash doesn't change
|
||||
if( this.lastNoteHash == this.hashString(this.noteText) ){
|
||||
resolve(false)
|
||||
return
|
||||
const currentNoteText = this.getText()
|
||||
if( this.lastNoteHash == this.hashString( currentNoteText )){
|
||||
return resolve(true)
|
||||
}
|
||||
|
||||
//If user accidentally clears note, it won't delete it
|
||||
if(currentNoteText == ''){
|
||||
this.statusText = 'Empty'
|
||||
console.log('Prevented from saving empty note.')
|
||||
return resolve(true)
|
||||
}
|
||||
|
||||
const postData = {
|
||||
'noteId':this.currentNoteId,
|
||||
'text': this.noteText,
|
||||
'fancyInput': this.fancyInput,
|
||||
'color': this.color,
|
||||
'text': currentNoteText,
|
||||
'color': JSON.stringify(this.styleObject), //Save little json color object
|
||||
'pinned': this.pinned,
|
||||
'archived':this.archived,
|
||||
}
|
||||
|
||||
let vm = this
|
||||
//Only save every 1 second
|
||||
clearTimeout(this.saveDebounce)
|
||||
this.saveDebounce = setTimeout(() => {
|
||||
//Debounce save to prevent spamming
|
||||
// clearTimeout(this.saveDebounce)
|
||||
// this.saveDebounce = setTimeout(() => {
|
||||
//Only notify user if saving - may help with debugging in the future
|
||||
vm.statusText = 'Saving'
|
||||
axios.post('/api/note/update', postData).then( response => {
|
||||
@@ -316,39 +334,44 @@
|
||||
vm.updated = Math.round((+new Date)/1000)
|
||||
|
||||
//Update last saved note hash
|
||||
vm.lastNoteHash = vm.hashString(vm.noteText)
|
||||
resolve(true)
|
||||
return
|
||||
vm.lastNoteHash = vm.hashString( currentNoteText )
|
||||
return resolve(true)
|
||||
})
|
||||
}, 300)
|
||||
// }, 300)
|
||||
})
|
||||
|
||||
},
|
||||
hashString(text){
|
||||
|
||||
var hash = 0;
|
||||
if (text.length == 0) {
|
||||
return hash;
|
||||
}
|
||||
|
||||
//Simplified for speed
|
||||
return text.length
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
let char = text.charCodeAt(i);
|
||||
hash = ((hash<<5)-hash)+char;
|
||||
hash = hash & hash; // Convert to 32bit integer
|
||||
}
|
||||
|
||||
return hash;
|
||||
},
|
||||
close(){
|
||||
this.sizeDown = true
|
||||
|
||||
// this.loading = true
|
||||
// this.loadingMessage = 'Save and Close'
|
||||
|
||||
this.save().then( result => {
|
||||
//Save has a 300 ms timeout, if it saves animation will complete
|
||||
if(result){
|
||||
|
||||
this.sizeDown = true
|
||||
//This timeout allows animation to play before closing
|
||||
setTimeout(() => {
|
||||
this.$bus.$emit('close_active_note', this.position)
|
||||
return
|
||||
} else {
|
||||
//If save is not called, set timeout manually and then close after animation
|
||||
setTimeout(() => {
|
||||
this.$bus.$emit('close_active_note', this.position)
|
||||
}, 300)
|
||||
}
|
||||
}, 300)
|
||||
})
|
||||
|
||||
}
|
||||
@@ -357,24 +380,20 @@
|
||||
</script>
|
||||
|
||||
<style type="text/css" scoped>
|
||||
|
||||
.no-flow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.raw-edit {
|
||||
font-family: 'Open Sans' !important;
|
||||
font-size: 1.3rem !important;
|
||||
background: rgba(0,0,0,0);
|
||||
width: 100%;
|
||||
resize: none;
|
||||
padding: 15px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.note-top-menu {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
height: 37px;
|
||||
border-left: 3px solid var(--border_color);
|
||||
}
|
||||
.note-top-menu .ui.basic.button {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-right: 1px solid var(--border_color);
|
||||
margin: 0px -2px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* container styles change based on mobile and number of open screens */
|
||||
@@ -386,17 +405,18 @@
|
||||
height: 100vh;
|
||||
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
|
||||
z-index: 1001;
|
||||
/*overflow-x: scroll;*/
|
||||
}
|
||||
.loading-note {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 50px;
|
||||
bottom: 0;
|
||||
}
|
||||
/* One note open, in the middle of the screen */
|
||||
.master-note-edit.position-0 {
|
||||
left: 30%;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
}
|
||||
@media only screen and (max-width: 740px) {
|
||||
@@ -424,12 +444,14 @@
|
||||
|
||||
@keyframes size-down {
|
||||
0% {
|
||||
opacity: 1;
|
||||
/*opacity: 1;*/
|
||||
/*top: 0;*/
|
||||
top: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
top: 30vh;
|
||||
/*opacity: 0;*/
|
||||
/*top: 30vh;*/
|
||||
top: 150vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
}
|
||||
|
||||
let postData = {
|
||||
'tagText':this.newTagInput,
|
||||
'tagText':this.newTagInput.trim(),
|
||||
'noteId':this.noteId
|
||||
}
|
||||
let vm = this
|
||||
|
||||
@@ -1,67 +1,59 @@
|
||||
<template>
|
||||
<div class="note-title-display-card fade-in-fwd"
|
||||
:style="{'background-color':color, 'color':fontColor}"
|
||||
<div class="note-title-display-card"
|
||||
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
|
||||
:class="{'currently-open':currentlyOpen}"
|
||||
>
|
||||
<!-- fade-in-fwd -->
|
||||
<div v-if="noteIcon" class="badge">
|
||||
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
|
||||
</div>
|
||||
|
||||
<div class="ui grid max-height">
|
||||
|
||||
<!-- Show title and snippet below it -->
|
||||
<div class="top aligned row" @click.stop="onClick(note.id)">
|
||||
|
||||
<div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
|
||||
<!-- Display highlights from solr results -->
|
||||
<div v-if="note.note_highlights.length > 0" class="term-usage">
|
||||
<h4><i class="paragraph icon"></i> Found in Text</h4>
|
||||
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="cleanHighlight(highlight)"></div>
|
||||
</div>
|
||||
<div v-if="note.attachment_highlights.length > 0" class="term-usage">
|
||||
<h4><i class="linkify icon"></i> Found in URL</h4>
|
||||
<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="cleanHighlight(highlight)"></div>
|
||||
</div>
|
||||
<div v-if="note.tag_highlights.length > 0" class="term-usage">
|
||||
<h4><i class="tags icon"></i> Found in Tags</h4>
|
||||
<div class="usage-row" v-for="highlight in note.tag_highlights">
|
||||
<span
|
||||
v-for="tag in splitTags(highlight)"
|
||||
class="ui label"
|
||||
>
|
||||
<span v-html="tag"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sixteen wide column overflow-hidden">
|
||||
<h3 class="clickable">{{note.title}}</h3>
|
||||
<p v-if="!isShowingSearchResults()" class="clickable">{{note.subtext}}</p>
|
||||
<!-- Display highlights from solr results -->
|
||||
<div v-if="note.note_highlights.length > 0 && textResults" class="term-usage">
|
||||
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="cleanHighlight(highlight)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sixteen wide column overflow-hidden">
|
||||
<p class="clickable">{{note.subtext}}</p>
|
||||
</div>
|
||||
|
||||
<!-- <div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
|
||||
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottom aligned row" @click.self.stop="onClick(note.id)">
|
||||
<!-- Toolbar on the bottom -->
|
||||
<div class="bottom aligned row icon-bar" @click.self.stop="onClick(note.id)">
|
||||
<div class="six wide column clickable" @click.stop="onClick(note.id)">
|
||||
{{$helpers.timeAgo(note.updated)}}
|
||||
{{$helpers.timeAgo(note.updated)}}
|
||||
<!-- {{(note.chars.toLocaleString())}} -->
|
||||
</div>
|
||||
|
||||
<div class="ten wide right aligned column split-spans">
|
||||
<span v-if="note.pinned == 1" data-tooltip="Pinned">
|
||||
|
||||
<delete-button class="hover-hide" :note-id="note.id" />
|
||||
|
||||
<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
|
||||
<i class="green pin icon"></i>
|
||||
</span>
|
||||
<span v-if="note.archived == 1" data-tooltip="Archived">
|
||||
<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
|
||||
<i class="green archive icon"></i>
|
||||
</span>
|
||||
<span v-if="note.attachment_count > 0">
|
||||
<span v-if="note.attachment_count > 0" v-on:click.stop="openEditAttachment">
|
||||
<i class="linkify icon"></i> {{note.attachment_count}}
|
||||
</span>
|
||||
<span v-if="note.tag_count == 1" data-tooltip="Note has 1 tag">
|
||||
<span v-if="note.tag_count == 1" data-position="top right" data-tooltip="Note has 1 tag" data-inverted="">
|
||||
<i class="tags icon"></i> {{note.tag_count}}
|
||||
</span>
|
||||
<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`">
|
||||
<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`" data-position="top right" data-inverted="">
|
||||
<i class="tags icon"></i> {{note.tag_count}}
|
||||
</span>
|
||||
<delete-button :note-id="note.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -73,7 +65,7 @@
|
||||
|
||||
export default {
|
||||
name: 'NoteTitleDisplayCard',
|
||||
props: [ 'onClick', 'data', 'currentlyOpen' ],
|
||||
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
|
||||
components: {
|
||||
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
|
||||
},
|
||||
@@ -93,37 +85,70 @@
|
||||
},
|
||||
splitTags(text){
|
||||
return text.split(',')
|
||||
}
|
||||
},
|
||||
openEditAttachment(){
|
||||
this.$router.push('/attachments/note/'+this.note.id)
|
||||
// this.$bus.$emit('open_edit_attachment', this.note.id)
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
note: null,
|
||||
color: null, //'#FFF',
|
||||
fontColor: null, //'#000'
|
||||
color: null,
|
||||
fontColor: null,
|
||||
noteIcon: null,
|
||||
iconColor: null,
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
this.note = this.data
|
||||
|
||||
if(this.note.color != null && this.note.color != '#FFF'){
|
||||
this.color = this.note.color
|
||||
this.fontColor = '#FFF'
|
||||
if(this.note.color != null){
|
||||
|
||||
const styles = JSON.parse(this.note.color)
|
||||
|
||||
//Set background color
|
||||
if(styles.noteBackground){
|
||||
this.color = styles.noteBackground
|
||||
}
|
||||
|
||||
//set text color
|
||||
if(styles.noteText){
|
||||
this.fontColor = styles.noteText
|
||||
}
|
||||
|
||||
if(styles.noteIcon){
|
||||
this.noteIcon = styles.noteIcon
|
||||
}
|
||||
|
||||
if(styles.iconColor){
|
||||
this.iconColor = styles.iconColor
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
|
||||
.note-title-display-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.term-usage {
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
/*border-bottom: 1px solid #DDD;*/
|
||||
/*padding-bottom: 10px;*/
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.term-usage em {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
.usage-row + .usage-row {
|
||||
padding: 8px 0 0;
|
||||
@@ -133,22 +158,44 @@
|
||||
|
||||
.note-title-display-card {
|
||||
position: relative;
|
||||
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
|
||||
margin: 0 15px 15px 0;
|
||||
padding: 1em;
|
||||
/*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/
|
||||
box-shadow: 0 0px 5px 1px rgba(34,36,38,0);
|
||||
margin: 5px;
|
||||
padding: 1em 1.5em;
|
||||
border-radius: .28571429rem;
|
||||
border: 1px solid;
|
||||
border-color: var(--border_color);
|
||||
width: calc(33.333% - 15px);
|
||||
width: calc(33.333% - 10px);
|
||||
transition: box-shadow 0.3s;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
line-height: 1.8rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
.note-title-display-card:hover {
|
||||
box-shadow: 0 1px 2px -0 rgba(34,36,38,.50);
|
||||
/*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/
|
||||
box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);
|
||||
}
|
||||
.icon-bar {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.hover-hide {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
.note-title-display-card:hover .icon-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
.note-title-display-card:hover .hover-hide {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.one-column .note-title-display-card {
|
||||
margin-right: 65%;
|
||||
width: 33%;
|
||||
/*margin-right: 65%;*/
|
||||
/*width: 33%;*/
|
||||
width: 100%;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
@@ -162,6 +209,7 @@
|
||||
.currently-open:after {
|
||||
content: 'Open';
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -176,10 +224,18 @@
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
/* Tweak mobile display to show only one column */
|
||||
@media only screen and (max-width: 740px) {
|
||||
.note-title-display-card {
|
||||
width: 100%;
|
||||
margin: 15px 0 0 0;
|
||||
width: calc(100% + 10px);
|
||||
margin: 0px -5px 10px -5px;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,10 +9,33 @@ import store from './stores/mainStore';
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
require('./assets/semantic-min.css')
|
||||
require('./assets/semantic-helper.css')
|
||||
// Fonts
|
||||
require('./assets/roboto-latin.woff2')
|
||||
require('./assets/roboto-latin-bold.woff2')
|
||||
|
||||
require('./assets/themes/default/assets/fonts/icons.eot')
|
||||
require('./assets/themes/default/assets/fonts/icons.otf')
|
||||
require('./assets/themes/default/assets/fonts/icons.svg')
|
||||
require('./assets/themes/default/assets/fonts/icons.ttf')
|
||||
require('./assets/themes/default/assets/fonts/icons.woff')
|
||||
require('./assets/themes/default/assets/fonts/icons.woff2')
|
||||
|
||||
require('./assets/themes/default/assets/fonts/outline-icons.eot')
|
||||
require('./assets/themes/default/assets/fonts/outline-icons.svg')
|
||||
require('./assets/themes/default/assets/fonts/outline-icons.ttf')
|
||||
require('./assets/themes/default/assets/fonts/outline-icons.woff')
|
||||
require('./assets/themes/default/assets/fonts/outline-icons.woff2')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// This callback runs before every route change, including on page load.
|
||||
// Sets the title of the page using vue router
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
document.title = to.meta.title;
|
||||
next();
|
||||
});
|
||||
@@ -21,12 +44,6 @@ router.beforeEach((to, from, next) => {
|
||||
import EventBus from './EventBus'
|
||||
import Helpers from './Helpers'
|
||||
|
||||
import CKEditor from '@ckeditor/ckeditor5-vue';
|
||||
Vue.use( CKEditor )
|
||||
|
||||
require('./assets/semantic-min.css')
|
||||
require('./assets/semantic-helper.css')
|
||||
|
||||
Vue.use(Vuex)
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
83
client/src/pages/AttachmentsPage.vue
Normal file
83
client/src/pages/AttachmentsPage.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="ui basic segment no-fluf-segment">
|
||||
<div class="ui grid">
|
||||
|
||||
<div class="ui sixteen wide column">
|
||||
<h2 class="ui header">
|
||||
<i class="folder icon"></i>
|
||||
<div class="content">
|
||||
Attachments
|
||||
<div class="sub header">Files and scraped web pages from notes</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="ui segment" v-if="searchParams.noteId">
|
||||
Showing Attachments for note. <div class="ui button" v-on:click="clearNote">Clear</div>
|
||||
</div>
|
||||
|
||||
<div class="ui basic segment">
|
||||
<attachment-display
|
||||
v-for="item in attachments"
|
||||
:item="item"
|
||||
:key="item.id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'attachment-display': require('@/components/AttachmentDisplayCard').default,
|
||||
},
|
||||
data: function(){
|
||||
return {
|
||||
attachments: [],
|
||||
searchParams: {}
|
||||
}
|
||||
},
|
||||
beforeCreate: function(){
|
||||
//
|
||||
// Perform Login check
|
||||
//
|
||||
this.$parent.loginGateway()
|
||||
},
|
||||
mounted: function(){
|
||||
|
||||
//Mount notes on load if note ID is set
|
||||
if(this.$route.params && this.$route.params.id){
|
||||
const inputNoteId = this.$route.params.id
|
||||
this.searchParams['noteId'] = inputNoteId
|
||||
}
|
||||
|
||||
this.searchAttachments()
|
||||
},
|
||||
methods: {
|
||||
clearNote(){
|
||||
this.$router.push('/attachments/')
|
||||
delete this.searchParams.noteId
|
||||
this.searchAttachments()
|
||||
},
|
||||
searchAttachments (){
|
||||
|
||||
axios.post('/api/attachment/search', this.searchParams)
|
||||
.then( results => {
|
||||
this.attachments = results.data
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
.attachment-display-area {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,310 @@
|
||||
<style type="text/css" scoped>
|
||||
|
||||
.hero {
|
||||
background-size: 50%;
|
||||
background-color: #0a2f13;
|
||||
background: linear-gradient(270deg, #21ba45, #3710a4);
|
||||
background-size: 400% 400%;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-animation: fadeorama 16s ease infinite;
|
||||
-moz-animation: fadeorama 16s ease infinite;
|
||||
animation: fadeorama 16s ease infinite;
|
||||
}
|
||||
.lightly-padded {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.massive-text {
|
||||
color: white;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.blinking {
|
||||
animation:blinkingText 1.5s linear infinite;
|
||||
}
|
||||
@keyframes blinkingText{
|
||||
0%{ opacity: 0.9; }
|
||||
50%{ opacity: 0; }
|
||||
100%{ opacity: 0.9; }
|
||||
}
|
||||
.subtext {
|
||||
border-bottom: 1px solid white;
|
||||
border-right: 1px solid white;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.stand-out {
|
||||
color: white;
|
||||
text-shadow:
|
||||
2px 2px 1px black,
|
||||
-2px -2px 1px black,
|
||||
-2px 2px 1px black,
|
||||
2px -2px 1px black;
|
||||
}
|
||||
h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes fadeorama {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@-moz-keyframes fadeorama {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@keyframes fadeorama {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="ui basic segment">
|
||||
<div class="ui container">
|
||||
<h1>Welcome</h1>
|
||||
<div class="lightly-padded">
|
||||
<div class="ui centered vertically divided stackable grid">
|
||||
|
||||
<div class="row hero fadeBg" :style="{ 'height':(height+'px') }">
|
||||
|
||||
<!-- All marketing images if you need to review -->
|
||||
<div v-if="false" class="sixteen wide column">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/add.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/gardening.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/growth.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/icecream.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/investing.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/onboarding.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/robot.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/solution.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/watching.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/cloud.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/grandma.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/hamburger.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/idea.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/notebook.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/plan.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/secure.svg" alt="">
|
||||
<img loading="lazy" width="10%" src="/api/static/assets/marketing/void.svg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="one wide large screen only column"></div>
|
||||
|
||||
<!-- desktop column - large screen only -->
|
||||
<div class="seven wide middle aligned left aligned column">
|
||||
<h2 class="massive-text">Take Notes, <br>Like Never Before</h2>
|
||||
<h3 class="subtext">
|
||||
Using an online note application <i class="i cursor icon blinking"></i>
|
||||
</h3>
|
||||
<br>
|
||||
<i class="huge inverted chevron circle down icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="eight wide middle aligned left aligned column">
|
||||
<img loading="lazy" width="90%" src="/api/static/assets/marketing/notebook.svg" alt="The Venus fly laptop about to capture another victim">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- set -->
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<h2>Everyone has knowledge that need to be expressed</h2>
|
||||
<h3>Utilize action potential to create notes by encoding raw brainwaves converted to written language</h3>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/idea.svg" alt="Explosion of New Ideas">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/gardening.svg" alt="Pruning the mind garden">
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<h2>Dream it, then do it</h2>
|
||||
<h3>Easily record your unlimited imagination. Ideas, stories, notes, plays, poems anything, that can reasonably be put into text</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- set -->
|
||||
<div class="middle aligned centered green row">
|
||||
<div class="six wide column">
|
||||
<h2>Unbridled Input</h2>
|
||||
<h3>Revolutionary technology allows the use of any keyboard with up to 395 keys</h3>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/add.svg" alt="A shpere of newness">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/solution.svg" alt="Hypercube of Solutions">
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<h2>Solutions with the Internet</h2>
|
||||
<h3>With the power to save any combination of letters, you can easily inscribe thoughts</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- set -->
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<h2>Search your data</h2>
|
||||
<h3>Type in a word and find that same word but somewhere else</h3>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/cloud.svg" alt="Girl falling into the spiral of digital chaos">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/plan.svg" alt="Scheme for planetary destruction">
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<h2>Embrace the Void</h2>
|
||||
<h3>Remove unnecessary clutter for your brain and save it to the cloud, allowing you to easily embrace the gaping abyss</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- set -->
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<h2>Space for Growth</h2>
|
||||
<h3>Groom a clear path for new expressions and innovations. Elevate your being and lower your cholesterol</h3>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/growth.svg" alt="Endless progress at the cost of sanity and health">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="Shrunken man near giant tablet">
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<h2>Become your Data</h2>
|
||||
<h3>We exist as electrical impulses, no different from data on a computer</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- set -->
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<h2>Ice Cream</h2>
|
||||
<h3>Get excited without all the screaming</h3>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/icecream.svg" alt="Emergence of a 4th dimensional being perceived as a large ice cream ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/secure.svg" alt="marketing mumbo jumbo">
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<h2>Data Backups</h2>
|
||||
<h3>Nothing you do will be forgotten.<br>You can never take back what you have done</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle aligned centered row">
|
||||
<div class="six wide column">
|
||||
<h2>Freedom to unleash yourself</h2>
|
||||
<h3>Imagine an awakening of what could be</h3>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/grandma.svg" alt="Drinking the blood of the elderly">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- final slide -->
|
||||
<div class="middle aligned centered green row">
|
||||
<div class="twelve wide center aligned column">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>What are you waiting for?<br>Sign up now.</h2>
|
||||
<br>
|
||||
<router-link class="ui huge white labeled icon button" to="/login">
|
||||
<i class="plug icon"></i>Sign Me Up!
|
||||
</router-link>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
OR
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<span class="ui button" v-on:click="showRealInformation">View real information about this site</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="realInformation" class="middle aligned centered row" ref="real">
|
||||
<div class="six wide column">
|
||||
<h2 class="ui center aligned">
|
||||
What is this really?
|
||||
</h2>
|
||||
<h3>Its just a little web app for taking notes. This page is mocking the "over the top" marketing sites use to sell their products.</h3>
|
||||
<p>
|
||||
This App exists because 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>
|
||||
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>
|
||||
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>Hero Slide Photo Credit - <a target="_blank" href="https://unsplash.com/@tkaslik14">https://unsplash.com/@tkaslik14</a></p>
|
||||
<p>Generic Marketing Images - <a target="_blank" href="https://undraw.co/">https://unDraw.co/</a></p>
|
||||
</div>
|
||||
<div class="four wide column">
|
||||
<img loading="lazy" width="100%" src="/api/static/assets/marketing/watching.svg" alt="Drinking the blood of the elderly">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WelcomePage'
|
||||
name: 'WelcomePage',
|
||||
data(){
|
||||
return {
|
||||
height: null,
|
||||
realInformation: false,
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
//Don't change hero banner on mobile
|
||||
if(!this.$store.getters.getIsUserOnMobile){
|
||||
let windowHeight = window.innerHeight
|
||||
this.height = windowHeight - (windowHeight * 0.10)
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
showRealInformation(){
|
||||
|
||||
|
||||
this.realInformation = !this.realInformation
|
||||
if(this.realInformation){
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.real.scrollIntoView({'behavior':'smooth'})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,41 +1,41 @@
|
||||
<template>
|
||||
<div class="ui container">
|
||||
<h3>Login</h3>
|
||||
<p>Begin the login process by typing your username or email.</p>
|
||||
<p>To create an account, type in the username you want to use followed by the password.</p>
|
||||
<p>You will remain logged in on this browser, until you log out.</p>
|
||||
|
||||
<div class="ui segment" v-on:keyup.enter="submit">
|
||||
<div class="ui large form">
|
||||
<div class="field">
|
||||
<div class="ui input">
|
||||
<input v-model="username" type="text" name="email" placeholder="Username or E-mail address" autofocus>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="username.length > 0">
|
||||
<div class="ui input">
|
||||
<input v-model="password" type="password" name="password" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="submit" class="ui massive compact fluid green submit button">Login</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui basic segment no-fluf-segment">
|
||||
<div class="ui grid">
|
||||
<div class="ui sixteen wide column">
|
||||
|
||||
|
||||
<p><b>Create an account:</b> type in the username you want to use followed by the password.</p>
|
||||
|
||||
<div class="ui segment" v-on:keyup.enter="submit">
|
||||
<div class="ui large form">
|
||||
<div class="field">
|
||||
<div class="ui input">
|
||||
<input v-model="username" type="text" name="email" placeholder="Username or E-mail address" autofocus>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui input">
|
||||
<input v-model="password" type="password" name="password" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="submit" class="ui massive compact fluid green submit button">Login</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You will remain logged in on this browser, until you log out.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
//ajax calls
|
||||
import axios from 'axios';
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data () {
|
||||
return {
|
||||
message: 'Login stuff',
|
||||
enabled: false,
|
||||
username: '',
|
||||
password: ''
|
||||
@@ -61,26 +61,23 @@
|
||||
|
||||
axios.post('/api/user/login', data)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
if(response.data.success){
|
||||
|
||||
const token = response.data.token
|
||||
const username = response.data.username
|
||||
|
||||
vm.$store.commit('setLoginToken', {token, username})
|
||||
|
||||
//Redirect user to notes section after login
|
||||
this.$router.push('/notes')
|
||||
vm.$router.push('/notes')
|
||||
} else {
|
||||
vm.$store.commit('destroyLoginToken')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('There was an error with log in request')
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'getRudeMessage'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,120 +1,132 @@
|
||||
<template>
|
||||
<div class="ui basic segment">
|
||||
<div class="ui basic segment no-fluf-segment">
|
||||
|
||||
<div class="ui equal width grid">
|
||||
<div class="ui grid" :class="{ 'mush-it-up':showOneColumn() }" ref="content">
|
||||
|
||||
<!-- <div class="ui row">{{ $store.getters.getIsUserOnMobile ? 'Mobile Device':'Normal Browser' }}</div> -->
|
||||
|
||||
<!-- mobile search menu -->
|
||||
<div class="ui mobile only row">
|
||||
<!-- Small screen new note button -->
|
||||
<div class="ui four wide column">
|
||||
<div @click="createNote" class="ui fluid green icon button">
|
||||
<i class="plus icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui twelve wide column">
|
||||
<div class="ui form">
|
||||
<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- search menu -->
|
||||
<div class="ui large screen only row">
|
||||
|
||||
<div class="ui two wide column">
|
||||
<div @click="createNote" class="ui fluid green button">
|
||||
<i class="plus icon"></i>
|
||||
New Note
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note filter options -->
|
||||
<div class="row">
|
||||
|
||||
<div class="ui five wide column">
|
||||
<div
|
||||
:class="{ 'sixteen wide column':showOneColumn(), 'eight wide column':!showOneColumn() }"
|
||||
>
|
||||
<div class="ui form">
|
||||
<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui nine wide column">
|
||||
|
||||
<router-link class="ui basic button" to="/help">Help</router-link>
|
||||
|
||||
<div v-on:click="toggleNightMode" class="ui basic icon button">
|
||||
<i class="eye icon"></i> Dark Theme:
|
||||
<span v-if="$store.getters.getIsNightMode">On</span>
|
||||
<span v-else>Off</span>
|
||||
</div>
|
||||
|
||||
<div v-on:click="toggleArchivedVisible" class="ui basic icon button">
|
||||
<i class="archive icon"></i> Archived:
|
||||
<span v-if="showArchived == 1">Visible</span>
|
||||
<span v-else>Hidden</span>
|
||||
</div>
|
||||
|
||||
<div class="ui right floated basic button"
|
||||
data-tooltip="Log Out" data-position="left center"
|
||||
v-on:click="destroyLoginToken"><i class="user icon"></i> {{username}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui row">
|
||||
|
||||
<!-- tags display -->
|
||||
<div class="ui two wide large screen only column" v-if="activeNoteId1 == null && activeNoteId2 == null">
|
||||
<div class="ui small basic fluid button" @click="reset">
|
||||
<i class="undo icon"></i>Reset Filters
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui section list">
|
||||
<div class="item" v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
|
||||
<div class="ui clickable basic fluid large label" :class="{ 'green':(searchTags.includes(tag.id)) }">
|
||||
{{ucWords(tag.text)}} <div class="detail">{{tag.usages}}</div>
|
||||
<div class="fields">
|
||||
<div class="ten wide field">
|
||||
<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<span class="ui fluid green button"
|
||||
v-if="showClear"
|
||||
@click="reset">
|
||||
<i class="undo icon"></i>Reset Filters
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Note title cards -->
|
||||
<div class="ui fourteen wide computer sixteen wide mobile column">
|
||||
<h2>
|
||||
({{notes.length}}) <fast-filters />
|
||||
<div
|
||||
:class="{ 'sixteen wide column':showOneColumn(), 'eight wide column':!showOneColumn() }"
|
||||
>
|
||||
<h2 class="ui right floated">
|
||||
<fast-filters />
|
||||
</h2>
|
||||
|
||||
<h3 v-if="searchTerm.length > 0 && notes.length == 0">No notes found. Check your spelling, try completing the word or using a different phrase.</h3>
|
||||
|
||||
<h3 v-if="searchTerm.length == 0 && notes.length == 0">Create your first note. Click the "New Note" button.</h3>
|
||||
|
||||
<div v-if="working"><div class="ui active inline loader"></div> Working...</div>
|
||||
|
||||
<div v-if="notes !== null && !working"
|
||||
class="note-card-display-area"
|
||||
:class="{'one-column':(activeNoteId1 != null || activeNoteId2 != null )}
|
||||
">
|
||||
<note-title-display-card
|
||||
v-for="note in notes"
|
||||
:onClick="openNote"
|
||||
:data="note"
|
||||
:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
|
||||
:key="note.id + note.color + note.note_highlights.length + note.attachment_highlights.length + ' -' + note.tag_highlights.length + '-' +note.title.length + '-' +note.subtext.length"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="commonTags.length > 0" class="sixteen wide column">
|
||||
<span v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
|
||||
<span class="ui clickable basic label" :class="{ 'green':(searchTags.includes(tag.id)) }">
|
||||
{{ucWords(tag.text)}} <span class="detail">{{tag.usages}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 v-if="fastFilters['withLinks'] == 1">Only showing notes containing Links</h2>
|
||||
<h2 v-if="fastFilters['withTags'] == 1">Only showing notse with Tags</h2>
|
||||
<h2 v-if="fastFilters['onlyArchived'] == 1">Only showing Archived notes.</h2>
|
||||
|
||||
<!-- Note title card display -->
|
||||
<div class="sixteen wide column">
|
||||
<h3 v-if="searchTerm.length > 0 && notes.length == 0">No notes found. Check your spelling, try completing the word or using a different phrase.</h3>
|
||||
|
||||
<h3 v-if="searchTerm.length == 0 && notes.length == 0">Create your first note. Click the "New Note" button.</h3>
|
||||
|
||||
<div v-if="working">
|
||||
<div class="ui active inline loader"></div> Working...
|
||||
</div>
|
||||
|
||||
<!-- Go to one wide column, do not do this on mobile interface -->
|
||||
<div v-if="notes !== null && notes.length > 0"
|
||||
:class="{'one-column':(
|
||||
(activeNoteId1 != null || activeNoteId2 != null) &&
|
||||
!$store.getters.getIsUserOnMobile
|
||||
)}">
|
||||
|
||||
<!-- pinned notes -->
|
||||
<div v-if="containsPinnednotes > 0" class="note-card-section">
|
||||
<h4><i class="green pin icon"></i>Pinned <span v-if="!working">({{containsPinnednotes}})</span></h4>
|
||||
<div class="note-card-display-area">
|
||||
<note-title-display-card
|
||||
v-for="note in notes"
|
||||
v-if="note.pinned"
|
||||
:onClick="openNote"
|
||||
:data="note"
|
||||
:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
|
||||
:key="note.id + note.color + note.note_highlights.length + note.attachment_highlights.length + ' -' + note.tag_highlights.length + '-' +note.title.length + '-' +note.subtext.length"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- normal notes -->
|
||||
<div v-if="containsNormalNotes > 0" class="note-card-section">
|
||||
<h4>Notes <span v-if="!working">({{containsNormalNotes}})</span></h4>
|
||||
<div class="note-card-display-area">
|
||||
<note-title-display-card
|
||||
v-for="note in notes"
|
||||
v-if="note.note_highlights && !note.pinned"
|
||||
:onClick="openNote"
|
||||
:data="note"
|
||||
:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
|
||||
:key="note.id + note.color + note.note_highlights.length + note.attachment_highlights.length + ' -' + note.tag_highlights.length + '-' +note.title.length + '-' +note.subtext.length"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- found in text -->
|
||||
<div v-if="containsTextResults" class="note-card-section">
|
||||
<h4><i class="green paragraph icon"></i> Found in Text ({{containsTextResults}})</h4>
|
||||
<div class="note-card-display-area">
|
||||
<note-title-display-card
|
||||
v-for="note in notes"
|
||||
v-if="note.note_highlights && note.note_highlights.length"
|
||||
:textResults="true"
|
||||
:onClick="openNote"
|
||||
:data="note"
|
||||
:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
|
||||
:key="note.id + note.color + note.note_highlights.length + note.attachment_highlights.length + ' -' + note.tag_highlights.length + '-' +note.title.length + '-' +note.subtext.length"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<input-notes v-if="activeNoteId1 != null" :noteid="activeNoteId1" :position="activeNote1Position" />
|
||||
<input-notes v-if="activeNoteId2 != null" :noteid="activeNoteId2" :position="activeNote2Position" />
|
||||
|
||||
<div v-if="openAttachmentEdit">
|
||||
<edit-attachment :note-id="editAttchmentId" :key="editAttchmentId" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios';
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'SearchBar',
|
||||
@@ -122,32 +134,62 @@
|
||||
'input-notes': require('@/components/NoteInputPanel.vue').default,
|
||||
'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
|
||||
'fast-filters': require('@/components/FastFilters.vue').default,
|
||||
'edit-attachment': require('@/components/AttachmentEditor.vue').default,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
username:'',
|
||||
initComponent: true,
|
||||
commonTags: [],
|
||||
searchTerm: '',
|
||||
searchTags: [],
|
||||
notes: [],
|
||||
highlights: [],
|
||||
searchDebounce: null,
|
||||
fastFilters: {},
|
||||
showArchived: 0,
|
||||
working: false,
|
||||
//Load up notes in batches
|
||||
firstLoadBatchSize: 30, //First set of rapidly loaded notes
|
||||
batchSize: 100, //Size of batch loaded when user scrolls through current batch
|
||||
batchOffset: 0, //Tracks the current batch that has been loaded
|
||||
loadingBatchTimeout: null, //Limit how quickly batches can be loaded
|
||||
loadingInProgress: false,
|
||||
|
||||
//Clear button is not visible
|
||||
showClear: false,
|
||||
initialPostData: null,
|
||||
currentPostData: null,
|
||||
|
||||
containsNormalNotes: 0,
|
||||
containsPinnednotes: 0,
|
||||
containsTextResults: 0,
|
||||
containsTagResults: 0,
|
||||
containsAttachmentResults: 0,
|
||||
|
||||
//Currently open notes in app
|
||||
activeNoteId1: null,
|
||||
activeNoteId2: null,
|
||||
|
||||
//Position determines how note is Positioned
|
||||
activeNote1Position: 0,
|
||||
activeNote2Position: 0,
|
||||
|
||||
//Attchment to edit. Only 1 for now
|
||||
openAttachmentEdit: false,
|
||||
editAttchmentId: null,
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
let username = this.$store.getters.getUsername
|
||||
this.username = this.ucWords(username)
|
||||
this.$parent.loginGateway()
|
||||
|
||||
this.$bus.$on('open_edit_attachment', noteId => {
|
||||
this.openAttachmentEdit = true
|
||||
this.editAttchmentId = noteId
|
||||
})
|
||||
this.$bus.$on('close_edit_attachment', noteId => {
|
||||
this.openAttachmentEdit = false
|
||||
this.editAttchmentId = null
|
||||
})
|
||||
|
||||
this.$bus.$on('close_active_note', position => {
|
||||
this.closeNote(position)
|
||||
@@ -157,24 +199,51 @@
|
||||
})
|
||||
this.$bus.$on('update_fast_filters', newFilter => {
|
||||
this.fastFilters = newFilter
|
||||
this.search()
|
||||
this.search(true, this.batchSize, false)
|
||||
})
|
||||
|
||||
//New note button pushes open note event
|
||||
this.$bus.$on('open_note', noteId => {
|
||||
this.openNote(noteId)
|
||||
})
|
||||
|
||||
//Mount notes on load if note ID is set
|
||||
if(this.$route.params && this.$route.params.id){
|
||||
const id = this.$route.params.id
|
||||
console.log('About to load note ', id)
|
||||
this.openNote(id)
|
||||
}
|
||||
window.addEventListener('scroll', this.onScroll)
|
||||
|
||||
|
||||
//Load tinymce into the page only do it once
|
||||
if(document.querySelectorAll('[data-mceload]').length == 0){
|
||||
let tinyMceIncluder = document.createElement('script')
|
||||
tinyMceIncluder.setAttribute('src', '/api/static/assets/tinymce/tinymce.min.js')
|
||||
tinyMceIncluder.setAttribute('data-mceload','loaded')
|
||||
document.head.appendChild(tinyMceIncluder)
|
||||
}
|
||||
|
||||
},
|
||||
beforeDestroy(){
|
||||
window.removeEventListener('scroll', this.onScroll)
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.search()
|
||||
//Load a super fast batch
|
||||
this.search(true, this.firstLoadBatchSize, 0)
|
||||
.then( () => {
|
||||
//Load a larger batch once first batch has loaded
|
||||
this.search(false, this.batchSize, true).then( () => {
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
showOneColumn(){
|
||||
//If note 1 or 2 is open, show one column. Or if the user is on mobile
|
||||
return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
|
||||
!this.$store.getters.getIsUserOnMobile
|
||||
},
|
||||
openNote(id){
|
||||
|
||||
//Do not open same note twice
|
||||
@@ -196,7 +265,6 @@
|
||||
this.activeNote2Position = 2 //Left side of page
|
||||
return
|
||||
}
|
||||
|
||||
//2 notes open
|
||||
if(this.activeNoteId2 != null && this.activeNoteId1 == null){
|
||||
this.activeNoteId1 = id
|
||||
@@ -236,33 +304,116 @@
|
||||
|
||||
this.search()
|
||||
},
|
||||
search(showLoading = true){
|
||||
onScroll(e){
|
||||
|
||||
//Add archived to fast filters
|
||||
this.fastFilters['archived'] = 0
|
||||
if(this.showArchived == 1){
|
||||
this.fastFilters['archived'] = 1
|
||||
}
|
||||
clearTimeout(this.loadingBatchTimeout)
|
||||
this.loadingBatchTimeout = setTimeout(() => {
|
||||
|
||||
let postData = {
|
||||
searchQuery: this.searchTerm,
|
||||
searchTags: this.searchTags,
|
||||
fastFilters: this.fastFilters,
|
||||
}
|
||||
//Distance to bottom of page
|
||||
const bottomOfWindow =
|
||||
Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
|
||||
+ window.innerHeight
|
||||
|
||||
//height of page
|
||||
const offsetHeight = this.$refs.content.clientHeight
|
||||
|
||||
//Determine percentage down the page
|
||||
const percentageDown = Math.round( (bottomOfWindow/offsetHeight)*100 )
|
||||
|
||||
// console.log( percentageDown + '%' )
|
||||
|
||||
//If greater than 80 of the way down the page, load the next batch
|
||||
if(percentageDown >= 80){
|
||||
|
||||
console.log('loading batch')
|
||||
this.search(false, this.batchSize, true)
|
||||
}
|
||||
|
||||
}, 50)
|
||||
|
||||
if(showLoading){
|
||||
this.working = true
|
||||
}
|
||||
|
||||
return
|
||||
},
|
||||
search(showLoading = true, notesInNextLoad = null, mergeExisting = false){
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
//Perform search
|
||||
let vm = this
|
||||
axios.post('/api/note/search', postData).
|
||||
then(response => {
|
||||
vm.commonTags = response.data.tags
|
||||
vm.notes = response.data.notes
|
||||
vm.highlights = response.data.highlights
|
||||
this.working = false
|
||||
if(this.loadingInProgress){
|
||||
return resolve()
|
||||
}
|
||||
|
||||
//Remove all filter limits
|
||||
delete this.fastFilters.limitSize
|
||||
delete this.fastFilters.limitOffset
|
||||
|
||||
let postData = {
|
||||
searchQuery: this.searchTerm,
|
||||
searchTags: this.searchTags,
|
||||
fastFilters: this.fastFilters,
|
||||
}
|
||||
|
||||
if(showLoading){
|
||||
this.working = true
|
||||
}
|
||||
|
||||
//Save initial post data on first load
|
||||
if(this.initialPostData == null){
|
||||
this.initialPostData = JSON.stringify(postData)
|
||||
}
|
||||
//If post data is not the same as initial, show clear button
|
||||
if(JSON.stringify(postData) != this.initialPostData){
|
||||
this.showClear = true
|
||||
}
|
||||
|
||||
if(notesInNextLoad && notesInNextLoad > 0){
|
||||
//Create limit based off of the number of notes already loaded
|
||||
postData.fastFilters.limitSize = notesInNextLoad
|
||||
postData.fastFilters.limitOffset = this.batchOffset
|
||||
}
|
||||
|
||||
//Perform search - or die
|
||||
this.loadingInProgress = true
|
||||
axios.post('/api/note/search', postData).
|
||||
then(response => {
|
||||
|
||||
if(!mergeExisting){
|
||||
this.containsNormalNotes = 0
|
||||
this.containsPinnednotes = 0
|
||||
this.containsTextResults = 0
|
||||
this.batchOffset = 0 // Reset batch offset if we are not merging note batches
|
||||
|
||||
this.commonTags = []
|
||||
this.notes = []
|
||||
}
|
||||
|
||||
//Save the number of notes just loaded
|
||||
this.batchOffset += response.data.notes.length
|
||||
|
||||
//Mush the two new sets of data together
|
||||
this.commonTags = this.commonTags.concat(response.data.tags)
|
||||
this.notes = this.notes.concat(response.data.notes)
|
||||
|
||||
|
||||
//Go through each note and see which section to display
|
||||
response.data.notes.forEach(note => {
|
||||
|
||||
if(note.note_highlights.length > 0){
|
||||
this.containsTextResults++
|
||||
return
|
||||
}
|
||||
|
||||
if(note.pinned == 1){
|
||||
this.containsPinnednotes++
|
||||
return
|
||||
}
|
||||
|
||||
this.containsNormalNotes++
|
||||
})
|
||||
|
||||
this.working = false
|
||||
this.loadingInProgress = false
|
||||
|
||||
return resolve(true)
|
||||
})
|
||||
})
|
||||
},
|
||||
searchKeyUp(){
|
||||
@@ -270,19 +421,7 @@
|
||||
clearTimeout(vm.searchDebounce)
|
||||
vm.searchDebounce = setTimeout(() => {
|
||||
vm.search()
|
||||
}, 300)
|
||||
},
|
||||
createNote(event){
|
||||
const title = ''
|
||||
let vm = this
|
||||
|
||||
axios.post('/api/note/create', {title})
|
||||
.then(response => {
|
||||
|
||||
if(response.data && response.data.id){
|
||||
vm.openNote(response.data.id)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
ucWords(str){
|
||||
return (str + '')
|
||||
@@ -291,31 +430,20 @@
|
||||
})
|
||||
},
|
||||
reset(){
|
||||
this.showClear = false
|
||||
this.searchTerm = ''
|
||||
this.searchTags = []
|
||||
this.fastFilters = {}
|
||||
this.$bus.$emit('reset_fast_filters')
|
||||
this.search()
|
||||
},
|
||||
destroyLoginToken() {
|
||||
this.$store.commit('destroyLoginToken')
|
||||
this.$router.push('/')
|
||||
},
|
||||
toggleNightMode(){
|
||||
this.$store.commit('toggleNightMode')
|
||||
},
|
||||
toggleArchivedVisible(){
|
||||
if(this.showArchived == 0){
|
||||
this.showArchived = 1
|
||||
} else {
|
||||
this.showArchived = 0
|
||||
}
|
||||
this.search()
|
||||
this.search(true, this.firstLoadBatchSize, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
.mush-it-up {
|
||||
width: calc(50% - 130px);
|
||||
}
|
||||
.detail {
|
||||
float: right;
|
||||
}
|
||||
@@ -323,4 +451,14 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.display-area-title {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.note-card-section {
|
||||
/*padding-bottom: 15px;*/
|
||||
}
|
||||
.note-card-section + .note-card-section {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
</style>
|
||||
120
client/src/pages/QuickPage.vue
Normal file
120
client/src/pages/QuickPage.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="ui basic segment no-fluf-segment">
|
||||
<div class="ui grid">
|
||||
|
||||
<div class="ui sixteen wide column">
|
||||
<h2 class="ui header">
|
||||
<i class="coffee icon"></i>
|
||||
<div class="content">
|
||||
Quick
|
||||
<div class="sub header">Add new information with great speed</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="ui sixteen wide column">
|
||||
<div class="ui form">
|
||||
<div class="field">
|
||||
<textarea
|
||||
class="quick-note-input"
|
||||
rows="1"
|
||||
ref="fastInput"
|
||||
v-model="newText"
|
||||
v-on:keydown="checkKeyup"
|
||||
placeholder="Push to the top of the quick note."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div v-on:click="appendQuickNote" class="ui green button">Save (CRTL + Enter)</div>
|
||||
<div v-if="quickNoteId" v-on:click="openNoteEdit" class="ui right floated basic button">Edit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fun" v-html="savedQuickNoteText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style type="text/css" scoped>
|
||||
.quick-note-input {
|
||||
box-sizing: border-box !important;
|
||||
resize: none !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
newText: '',
|
||||
savedQuickNoteText: '',
|
||||
quickNoteId: null
|
||||
}
|
||||
},
|
||||
beforeCreate: function(){
|
||||
//
|
||||
// Perform Login check
|
||||
//
|
||||
this.$parent.loginGateway()
|
||||
},
|
||||
mounted: function(){
|
||||
|
||||
if(this.$refs.fastInput){
|
||||
//Load up note text
|
||||
this.getQuickNote()
|
||||
|
||||
//Set focus to input pane
|
||||
this.$nextTick(() => {
|
||||
this.$refs.fastInput.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loggedIn () {
|
||||
return this.$store.getters.getLoggedIn
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openNoteEdit(){
|
||||
this.$router.push({'path':'/notes/open/'+this.quickNoteId})
|
||||
},
|
||||
checkKeyup(event){
|
||||
|
||||
let element = event.target
|
||||
let padding = 22
|
||||
|
||||
element.style.height = 'auto';
|
||||
element.style.height = (element.scrollHeight + padding) +'px';
|
||||
|
||||
//If command+enter or control+enter is pressed, submit
|
||||
if((event.metaKey || event.ctrlKey) && [13].includes(event.keyCode)){
|
||||
this.appendQuickNote()
|
||||
}
|
||||
},
|
||||
appendQuickNote(){
|
||||
|
||||
//Don't submit empty note
|
||||
if(this.newText.trim() == ''){ return }
|
||||
|
||||
axios.post('/api/quick-note/update', { 'pushText':this.newText } )
|
||||
.then( results => {
|
||||
|
||||
this.newText = '' //Clear text area
|
||||
this.$refs.fastInput.style.height = 'auto' //Back to normal size
|
||||
|
||||
this.savedQuickNoteText = results.data.text
|
||||
this.quickNoteId = results.data.id
|
||||
})
|
||||
},
|
||||
getQuickNote (){
|
||||
axios.post('/api/quick-note/get')
|
||||
.then( results => {
|
||||
this.savedQuickNoteText = results.data.text
|
||||
this.quickNoteId = results.data.id
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
client/src/pages/SharePage.vue
Normal file
49
client/src/pages/SharePage.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="ui basic segment">
|
||||
<div class="ui container">
|
||||
<div class="fun" :style="{'color':color}" v-if="noteText" v-html="noteText"></div>
|
||||
</div>
|
||||
<div class="ui basic segment"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'SharePage',
|
||||
data(){
|
||||
return {
|
||||
noteText: null,
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
//Mount notes on load if note ID is set
|
||||
if(this.$route.params && this.$route.params.id){
|
||||
const id = this.$route.params.id
|
||||
this.openNote(id)
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openNote(noteId){
|
||||
axios.post('/api/public/note', {'noteId': noteId})
|
||||
.then( response => {
|
||||
|
||||
let colors = JSON.parse(response.data.color)
|
||||
|
||||
if(colors && colors.noteBackground){
|
||||
document.body.style.background = colors.noteBackground
|
||||
}
|
||||
if(colors && colors.noteText){
|
||||
this.color = colors.noteText
|
||||
}
|
||||
|
||||
this.noteText = response.data.text
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -1,10 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
import HomePage from '@/pages/HomePage'
|
||||
import LoginPage from '@/pages/LoginPage'
|
||||
//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 LoginPage = () => import('@/pages/LoginPage')
|
||||
|
||||
// import HelpPage from '@/pages/HelpPage'
|
||||
const HelpPage = () => import('@/pages/HelpPage')
|
||||
|
||||
import NotesPage from '@/pages/NotesPage'
|
||||
import HelpPage from '@/pages/HelpPage'
|
||||
import SharePage from '@/pages/SharePage'
|
||||
import QuickPage from '@/pages/QuickPage'
|
||||
import AttachmentsPage from '@/pages/AttachmentsPage'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@@ -40,5 +50,29 @@ export default new Router({
|
||||
meta: {title:'Help'},
|
||||
component: HelpPage
|
||||
},
|
||||
{
|
||||
path: '/share/:id',
|
||||
name: 'Share',
|
||||
meta: {title:'Shared'},
|
||||
component: SharePage
|
||||
},
|
||||
{
|
||||
path: '/quick',
|
||||
name: 'Quick',
|
||||
meta: {title:'Quick'},
|
||||
component: QuickPage
|
||||
},
|
||||
{
|
||||
path: '/attachments',
|
||||
name: 'Attachments',
|
||||
meta: {title:'Attachments'},
|
||||
component: AttachmentsPage
|
||||
},
|
||||
{
|
||||
path: '/attachments/note/:id',
|
||||
name: 'Attachments',
|
||||
meta: {title:'Attachments'},
|
||||
component: AttachmentsPage
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@@ -6,17 +6,12 @@ Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
count: 0,
|
||||
message: 'Get out me yard ya wankers',
|
||||
token: null,
|
||||
username: null,
|
||||
nightMode: false,
|
||||
isUserOnMobile: false,
|
||||
},
|
||||
mutations: {
|
||||
increment (state) {
|
||||
state.count++
|
||||
},
|
||||
setLoginToken(state, userData){
|
||||
|
||||
const username = userData.username
|
||||
@@ -29,7 +24,7 @@ export default new Vuex.Store({
|
||||
localStorage.setItem('username', username)
|
||||
|
||||
//Set default token to axios, every request will have header
|
||||
axios.defaults.headers.common['Authorization'] = token
|
||||
axios.defaults.headers.common['authorizationtoken'] = token
|
||||
|
||||
state.token = token
|
||||
state.username = username
|
||||
@@ -39,7 +34,7 @@ export default new Vuex.Store({
|
||||
//Remove login token from local storage and from headers
|
||||
localStorage.removeItem('loginToken')
|
||||
localStorage.removeItem('username')
|
||||
delete axios.defaults.headers.common['Authorization']
|
||||
delete axios.defaults.headers.common['authorizationtoken']
|
||||
state.token = null
|
||||
state.username = null
|
||||
},
|
||||
@@ -54,6 +49,7 @@ export default new Vuex.Store({
|
||||
'background_color': '#fff',
|
||||
'text_color': '#3d3d3d',
|
||||
'outline_color': 'rgba(34,36,38,.15)',
|
||||
'border_color': 'rgba(34,36,38,.20)',
|
||||
}
|
||||
//Night mode colors
|
||||
if(state.nightMode){
|
||||
@@ -61,6 +57,7 @@ export default new Vuex.Store({
|
||||
'background_color': '#000',
|
||||
'text_color': '#a98457',
|
||||
'outline_color': '#a98457',
|
||||
'border_color': '#a98457',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,9 +81,6 @@ export default new Vuex.Store({
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
getRudeMessage: state => {
|
||||
return state.message
|
||||
},
|
||||
getUsername: state => {
|
||||
return state.username
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user