* Added more version icons
* Added working sign to notes when archived or tagged
* Big sexy marketing update
* Clicking Tags now opens them in their tag category
This commit is contained in:
Max G 2020-07-03 03:25:38 +00:00
parent 8b711ab508
commit 2ae84ab73e
5 changed files with 204 additions and 98 deletions

View File

@ -385,7 +385,7 @@
location.reload(true) location.reload(true)
}, },
getVersionIcon(){ getVersionIcon(){
const icons = ['cat','crow','dog','dove','dragon','fish','frog','hippo','horse','kiwi bird','otter','spider', 'smile', 'robot', 'hat wizard', 'microchip', 'atom', 'grin tongue squint', 'radiation'] const icons = ['cat','crow','dog','dove','dragon','fish','frog','hippo','horse','kiwi bird','otter','spider', 'smile', 'robot', 'hat wizard', 'microchip', 'atom', 'grin tongue squint', 'radiation', 'ghost', 'dna', 'burn', 'brain', 'moon', 'torii gate']
const index = ( parseInt(this.version.replace(/\./g,'')) % (icons.length)) const index = ( parseInt(this.version.replace(/\./g,'')) % (icons.length))
return icons[index] return icons[index]

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="note-title-display-card" <div class="note-title-display-card"
:style="{'background-color':color, 'color':fontColor, 'border-color':color }" :style="{'background-color':color, 'color':fontColor, 'border-color':color }"
:class="{'currently-open':currentlyOpen, 'bgboy':triggerClosedAnimation, 'title-view':titleView }" :class="{'currently-open':(currentlyOpen || showWorking), 'bgboy':triggerClosedAnimation, 'title-view':titleView }"
> >
@ -19,7 +19,7 @@
</span> </span>
</span> </span>
<span v-if="note.title == '' && note.subtext == '' && note.encrypted == 0"> <span v-if="note.title == '' && note.subtext == ''">
Empty Note Empty Note
</span> </span>
@ -62,7 +62,7 @@
<div class="icon-bar"> <div class="icon-bar">
<span class="tags" v-if="note.tags"> <span class="tags" v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span> <span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">{{ tag.split(':')[0] }}</span>
<br> <br>
</span> </span>
@ -177,14 +177,19 @@
this.$router.push('/attachments/note/'+this.note.id) this.$router.push('/attachments/note/'+this.note.id)
}, },
pinNote(){ //togglePinned() <- old name pinNote(){ //togglePinned() <- old name
this.showWorking = true
let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id} let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
axios.post('/api/note/setpinned', postData) axios.post('/api/note/setpinned', postData)
.then(data => { .then(data => {
this.showWorking = false
// this.$bus.$emit('update_single_note', this.note.id) // this.$bus.$emit('update_single_note', this.note.id)
}) })
.catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') }) .catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') })
}, },
archiveNote(){ //toggleArchived() <- old name archiveNote(){ //toggleArchived() <- old name
this.showWorking = true
let postData = {'archived': !this.note.archived, 'noteId':this.note.id} let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
axios.post('/api/note/setarchived', postData) axios.post('/api/note/setarchived', postData)
.then(data => { .then(data => {
@ -201,6 +206,9 @@
.catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') }) .catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') })
}, },
trashNote(){ //toggleArchived() <- old name trashNote(){ //toggleArchived() <- old name
this.showWorking = true
let postData = {'trashed': !this.note.trashed, 'noteId':this.note.id} let postData = {'trashed': !this.note.trashed, 'noteId':this.note.id}
axios.post('/api/note/settrashed', postData) axios.post('/api/note/settrashed', postData)
.then(data => { .then(data => {
@ -256,6 +264,7 @@
beenClicked: false, beenClicked: false,
showTagSlideMenu: false, showTagSlideMenu: false,
triggerClosedAnimation: false, //Show just closed animation triggerClosedAnimation: false, //Show just closed animation
showWorking: false
} }
}, },
computed: { computed: {
@ -524,7 +533,7 @@
height: calc(100% + 30px); height: calc(100% + 30px);
} }
.currently-open:after { .currently-open:after {
content: 'Open'; content: '...';
position: absolute; position: absolute;
cursor: default; cursor: default;
top: 0; top: 0;

View File

@ -77,13 +77,19 @@
} }
.home-main img { .home-main img {
max-height: 400px !important; max-height: 250px;
} }
.white-link { .white-link {
text-decoration: underline; text-decoration: underline;
color: white; color: white;
} }
@media only screen and (max-width: 740px) {
.column > img {
max-height: 125px;
}
}
</style> </style>
<template> <template>
@ -92,27 +98,6 @@
<div class="row hero fadeBg" :style="{ 'height':(height+'px') }"> <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> --> <!-- <div class="one wide large screen only column"></div> -->
<!-- desktop column - large screen only --> <!-- desktop column - large screen only -->
@ -136,6 +121,27 @@
</div> </div>
<!-- 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>
<!-- Go to notes button --> <!-- Go to notes button -->
<div class="row" v-if="$parent.loggedIn"> <div class="row" v-if="$parent.loggedIn">
<div class="sixteen wide middle algined center aligned column"> <div class="sixteen wide middle algined center aligned column">
@ -151,90 +157,171 @@
<div class="ui text container"> <div class="ui text container">
<h2> <h2>
<i class="plug icon"></i> <i class="plug icon"></i>
Sign Up Now - Only a Username and Password required</h2> Sign Up Now - Only a Username and Password required
</h2>
<login-form :thin="true" /> <login-form :thin="true" />
</div> </div>
</div> </div>
</div> </div>
<!-- set --> <!-- Overview -->
<div class="middle aligned centered row"> <div class="middle aligned centered row">
<div class="six wide right aligned column">
<h2>Solid Scribe is a browser based note application that focuses on ease of use while keeping your data private</h2>
<h3>Tools to organize and collaborate on notes while maintaining security and respecting your privacy.</h3>
</div>
<div class="six wide column"> <div class="six wide column">
<h2>Solid Scribe focuses on powerful text editing and user privacy</h2>
<h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3>
</div>
<div class="four wide column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/idea.svg" alt="Explosion of New Ideas"> <img loading="lazy" width="100%" src="/api/static/assets/marketing/idea.svg" alt="Explosion of New Ideas">
</div> </div>
</div> </div>
<div class="middle aligned centered green row"> <!-- features list -->
<div class="six wide right aligned column"> <div class="middle aligned centered row">
<div class="sixteen wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Features</h1>
</div>
<div class="six wide column">
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey lock icon"></i>
<i class="bottom left corner yellow key icon"></i>
</i>
Privacy Focused
<div class="sub header">All note text is encrypted. No one can read your notes. None of your data is shared.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey list icon"></i>
<i class="bottom left corner green check icon"></i>
</i>
To Do Lists
<div class="sub header">Create To Do lists that are always synced, work on mobile and can be sorted.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey file icon"></i>
<i class="bottom left corner blue pen icon"></i>
</i>
Document Editing Tools
<div class="sub header">Bold, Underline, Title, Add Links, Add Tables Color Text, Color Background and more.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey tags icon"></i>
<i class="bottom left corner purple plus icon"></i>
</i>
Tag Notes
<div class="sub header">Easily add and edit tags on notes then sort notes by tag.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey images icon"></i>
<i class="bottom left corner teal paperclip icon"></i>
</i>
Add Images
<div class="sub header">Upload images to notes, add search text to the images to find them later.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey cloud moon icon"></i>
<i class="bottom left corner red eye icon"></i>
</i>
Night Mode
<div class="sub header">Pure black night theme with an even darker flux theme.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey share alternate icon"></i>
<i class="bottom left corner share icon"></i>
</i>
Share Encrypted Notes
<div class="sub header">Share notes with friends without compromising security. And its easy to disable sharing.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey users icon"></i>
<i class="bottom left corner olive exchange icon"></i>
</i>
Collaborative Note Editing
<div class="sub header">Notes instantly update in real time everywhere the note is open.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey search icon"></i>
<i class="bottom left corner orange font icon"></i>
</i>
Keyword Search
<div class="sub header">Easily search all notes. Encrypted search index ensures privacy and convenience.</div>
</div>
</h2>
<h2 class="ui dividing header">
<div class="content">
<i class="icons">
<i class="grey search icon"></i>
<i class="bottom left corner pink paperclip icon"></i>
</i>
Search Attachments
<div class="sub header">Add text to Images and links than can be searched.</div>
</div>
</h2>
</div>
<div class="four wide column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="">
</div>
</div>
<div class="middle aligned centered row">
<div class="four wide right aligned column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/secure.svg" alt="marketing mumbo jumbo"> <img loading="lazy" width="100%" src="/api/static/assets/marketing/secure.svg" alt="marketing mumbo jumbo">
</div> </div>
<div class="six wide column"> <div class="six wide column">
<h2>All Note text is encrypted</h2> <h2>Only you can read your notes. </h2>
<h3>Only you can read your notes. <a class="white-link" target="_blank" href="https://www.forbes.com/sites/zakdoffman/2019/01/30/facebook-has-just-been-caught-spying-on-users-private-messages-and-data-again/#1e27e00a31ce"> Employees can not snoop your account</a>. <a class="white-link" target="_blank" href="https://mashable.com/article/google-reading-your-emails-response/">No one can read your data for advertising</a>. Note text is completely unreadable without your password.</h3> <h3>Employees can not <a target="_blank" href="https://www.forbes.com/sites/zakdoffman/2019/01/30/facebook-has-just-been-caught-spying-on-users-private-messages-and-data-again/#1e27e00a31ce"> snoop your account</a>. No one can <a target="_blank" href="https://mashable.com/article/google-reading-your-emails-response/">read your data for advertising</a>. Notes are completely unreadable without your password.</h3>
</div> </div>
</div> </div>
<!-- set --> <div class="middle aligned centered green row">
<div class="middle aligned centered row">
<div class="six wide column">
<h2>Organize your notes</h2>
<h3>Tag, Pin, Color, Archive, Attach Images, Share Encrypted Notes and Search</h3>
</div>
<div class="six wide column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/gardening.svg" alt="Pruning the mind garden">
</div>
</div>
<div class="middle aligned centered row">
<div class="six wide right aligned column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/cloud.svg" alt="Girl falling into the spiral of digital chaos">
</div>
<div class="six wide column"> <div class="six wide column">
<h2>Extremely accessible - Nothing to install</h2> <h2>Extremely accessible - Nothing to install</h2>
<h3>Works on mobile or desktop browsers. <br>Behaves like an installed app on mobile phones.</h3> <h3>Works on mobile or desktop browsers. <br>Behaves like an installed app on mobile phones.</h3>
</div> </div>
</div> <div class="four wide right aligned column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/cloud.svg" alt="Girl falling into the spiral of digital chaos">
<!-- set -->
<div class="middle aligned centered row">
<div class="six wide right aligned column">
<h2>Secure Search</h2>
<h3>Keyword search using an encrypted search index helps you find what you need without compromising security.</h3>
</div>
<div class="six wide column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/solution.svg" alt="Hypercube of Solutions">
</div> </div>
</div> </div>
<div class="middle aligned centered row"> <div class="middle aligned centered row">
<div class="six wide right aligned column"> <div class="four wide right aligned column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/plan.svg" alt="Scheme for planetary destruction"> <img loading="lazy" width="100%" src="/api/static/assets/marketing/robot.svg" alt="Shrunken man near giant tablet">
</div>
<div class="six wide column">
<h2>Create Lists with Check Boxes</h2>
<h3>Todo lists are supported. With options to removed checked items, sort by completed and un-check all.</h3>
</div>
</div>
<!-- set -->
<div class="middle aligned centered row">
<div class="six wide right aligned column">
<h2>Powerful Text Editing</h2>
<h3>A plethora of editing tools are provided for coloring, underlining, bolding, attaching images and more.</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 right aligned column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="Shrunken man near giant tablet">
</div> </div>
<div class="six wide column"> <div class="six wide column">
<h2>Secure Data Sharing</h2> <h2>Secure Data Sharing</h2>
@ -242,17 +329,23 @@
</div> </div>
</div> </div>
<!-- set --> <!-- set -->
<!-- <div class="middle aligned centered row"> <div class="middle aligned centered row">
<div class="six wide right aligned column">
<h2>Ice Cream</h2>
<h3>Get excited without all the screaming</h3>
</div>
<div class="six wide column"> <div class="six wide column">
<h2>Leave your Ad Blockers turned on</h2>
<h3>SolidScribe doesn't load any trackers or ads. It was designed to run on
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>, with
<a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/" target="_blank">uBlock Origin</a> and a
<a href="https://pi-hole.net/" target="_blank">Pi-hole</a> on the network.</h3>
</div>
<div class="four 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 "> <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> </div>
<!--
<div class="middle aligned centered row"> <div class="middle aligned centered row">
<div class="six wide right aligned column"> <div class="six wide right aligned column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/add.svg" alt="A shpere of newness"> <img loading="lazy" width="100%" src="/api/static/assets/marketing/add.svg" alt="A shpere of newness">
@ -291,17 +384,14 @@
<br> <br>
<br> <br>
<br> <br>
<span class="ui button" v-on:click="showRealInformation">About</span>
</div> </div>
</div> </div>
<div v-if="realInformation" class="middle aligned centered row" ref="real"> <div v-if="true" class="middle aligned centered row">
<div class="six wide column"> <div class="six wide column">
<h2 class="ui center aligned"> <h2>Solid Scribe was created by one passionate developer</h2>
Why Does this App exist?
</h2>
<p> <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. 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>
<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. 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.
@ -309,7 +399,13 @@
<p> <p>
If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i> If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i>
</p> </p>
<p>Generic Marketing Images - <a target="_blank" href="https://undraw.co/">https://unDraw.co/</a></p> <p>If you want to help me out, I would love a small Bitcoin donation.</p>
<p>
<a href="https://btc3.trezor.io/address/3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG" target="_blank">
<img loading="lazy" width="160px" src="/api/static/assets/marketing/wallet.png" alt="3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG">
</a>
</p>
<p>Awesomely Generic Marketing Images - <a target="_blank" href="https://undraw.co/">https://unDraw.co/</a></p>
</div> </div>
<div class="four wide column"> <div class="four wide column">
<img loading="lazy" width="100%" src="/api/static/assets/marketing/watching.svg" alt="Drinking the blood of the elderly"> <img loading="lazy" width="100%" src="/api/static/assets/marketing/watching.svg" alt="Drinking the blood of the elderly">

View File

@ -111,6 +111,7 @@
<div class="note-card-display-area"> <div class="note-card-display-area">
<note-title-display-card <note-title-display-card
v-on:tagClick="tagId => toggleTagFilter(tagId)"
v-for="note in section" v-for="note in section"
:ref="'note-'+note.id" :ref="'note-'+note.id"
:onClick="openNote" :onClick="openNote"

View File

@ -961,7 +961,7 @@ Note.search = (userId, searchQuery, searchTags, fastFilters, masterKey) => {
note.pinned, note.pinned,
note.archived, note.archived,
note.trashed, note.trashed,
GROUP_CONCAT(DISTINCT tag.text) as tags, GROUP_CONCAT(DISTINCT tag.text,":",tag.id) as tags,
GROUP_CONCAT(DISTINCT attachment.file_location) as thumbs, GROUP_CONCAT(DISTINCT attachment.file_location) as thumbs,
shareUser.username as shareUsername, shareUser.username as shareUsername,
note.shared, note.shared,