06b8f0ad6a
Updated marketing Added some keyboard shortcuts Added settings page Added accent theming Added beta 2FA
640 lines
16 KiB
Vue
640 lines
16 KiB
Vue
<template>
|
|
<div class="note-title-display-card"
|
|
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
|
|
:class="{'currently-open':(currentlyOpen || showWorking), 'bgboy':triggerClosedAnimation, 'title-view':titleView }"
|
|
>
|
|
|
|
|
|
<!-- Show title and snippet below it -->
|
|
<div class="overflow-hidden note-card-text" @click="cardClicked" v-if="!titleView">
|
|
|
|
<span class="subtext" v-if="note.shareUsername">
|
|
Shared by {{ note.shareUsername }}
|
|
|
|
<span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
|
|
New
|
|
</span>
|
|
<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
|
|
Updated
|
|
</span>
|
|
</span>
|
|
|
|
<span v-if="note.title == '' && note.subtext == ''">
|
|
Empty Note
|
|
</span>
|
|
|
|
<span v-if="noteIcon" class="badge">
|
|
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
|
|
</span>
|
|
|
|
<!-- Title display -->
|
|
<span v-if="note.title.length > 0"
|
|
class="big-text"><p>{{ note.title }}</p></span>
|
|
|
|
<!-- Sub text display -->
|
|
<span v-if="note.subtext.length > 0"
|
|
class="small-text"
|
|
v-html="note.subtext"></span>
|
|
|
|
|
|
<div class="ui fluid basic button" v-if="note.encrypted == 1">
|
|
<i class="green lock icon"></i>
|
|
Locked
|
|
</div>
|
|
|
|
<span class="subtext" v-if="note.shared == 2">
|
|
You Shared this note
|
|
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
|
|
Updated
|
|
</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div v-if="titleView" class="single-line-text" @click="cardClicked">
|
|
<span class="title-line" v-if="note.title.length > 0">{{ note.title }}<br></span>
|
|
<span class="sub-line" v-if="note.subtext.length > 0">{{ removeHtml(note.subtext) }}</span>
|
|
<span v-if="note.title.length == 0 && note.title.length == 0">Empty Note</span>
|
|
</div>
|
|
|
|
<!-- Toolbar on the bottom -->
|
|
<div class="tool-bar" @click.self="cardClicked" v-if="!titleView">
|
|
<div class="icon-bar">
|
|
|
|
<span class="tags" v-if="note.tags">
|
|
<span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">{{ tag.split(':')[0] }}</span>
|
|
<br>
|
|
</span>
|
|
|
|
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
|
|
{{$helpers.timeAgo( note.updated )}}
|
|
</span>
|
|
|
|
<span class="teeny-buttons" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
|
|
|
|
<span v-if="!note.trashed">
|
|
|
|
<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
|
|
<i class="tags icon"></i>
|
|
</i>
|
|
|
|
<i class="teeny-button"
|
|
data-tooltip="Archive"
|
|
:data-tooltip="note.archived ? 'Un-Archive':'Archive' "
|
|
data-inverted v-on:click="archiveNote">
|
|
<i class="archive icon" :class="{'green':note.archived}"></i>
|
|
</i>
|
|
|
|
<i class="teeny-button"
|
|
:data-tooltip="note.pinned ? 'Un-Pin':'Pin' "
|
|
data-inverted v-on:click="pinNote">
|
|
<i class="pin icon" :class="{'green':note.pinned}"></i>
|
|
</i>
|
|
|
|
<i class="teeny-button"
|
|
data-tooltip="Move to Trash"
|
|
data-inverted v-on:click="trashNote()">
|
|
<i class="trash icon"></i>
|
|
</i>
|
|
</span>
|
|
|
|
<!-- Trash note options -->
|
|
<span v-if="note.trashed">
|
|
<i class="teeny-button"
|
|
data-tooltip="Un-Trash"
|
|
data-inverted v-on:click="trashNote()">
|
|
<i class="reply icon"></i>
|
|
</i>
|
|
<delete-button class="teeny-button" :note-id="note.id" />
|
|
</span>
|
|
|
|
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="getThumbs.length > 0">
|
|
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
|
|
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true" :skip-history="true">
|
|
<div class="ui basic segment">
|
|
<note-tag-edit :noteId="note.id" :key="'display-tags-for-note-'+note.id"/>
|
|
</div>
|
|
</side-slide-menu>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'NoteTitleDisplayCard',
|
|
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults', 'titleView' ],
|
|
components: {
|
|
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
|
|
'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
|
|
'side-slide-menu': require('@/components/SideSlideMenuComponent.vue').default,
|
|
},
|
|
methods:{
|
|
cardClicked(){
|
|
// console.log(this.note)
|
|
this.beenClicked = true
|
|
this.onClick(this.note.id)
|
|
},
|
|
removeHtml(string){
|
|
if(string == undefined || string == null || string.length == 0){
|
|
return ''
|
|
}
|
|
|
|
return string
|
|
.replace(/&[[#A-Za-z0-9]+A-Za-z0-9]+;/g,' ') //Rip out all HTML entities
|
|
.replace(/<[^>]+>/g, ' ') //Rip out all HTML tags
|
|
.replace(/\s+/g, ' ') //Remove all whitespace
|
|
.trim()
|
|
},
|
|
cleanHighlight(text){
|
|
//Basically just remove whitespace
|
|
let updated = text.replace(/ /g, '').replace(/<br>/g,'')
|
|
.replace(/<p><\/p>/g,'').replace(/<p> <\/p>/g,'')
|
|
|
|
return updated
|
|
},
|
|
splitTags(text){
|
|
return text.split(',')
|
|
},
|
|
openEditAttachment(){
|
|
this.$router.push('/attachments/note/'+this.note.id)
|
|
},
|
|
pinNote(){ //togglePinned() <- old name
|
|
this.showWorking = true
|
|
let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
|
|
axios.post('/api/note/setpinned', postData)
|
|
.then(data => {
|
|
this.showWorking = false
|
|
// this.$bus.$emit('update_single_note', this.note.id)
|
|
})
|
|
.catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') })
|
|
},
|
|
archiveNote(){ //toggleArchived() <- old name
|
|
|
|
this.showWorking = true
|
|
|
|
let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
|
|
axios.post('/api/note/setarchived', postData)
|
|
.then(data => {
|
|
|
|
//Show message so no one worries where note went
|
|
let message = 'Moved to Archive'
|
|
if(postData.archived != 1){
|
|
message = 'Moved to main list'
|
|
}
|
|
this.$bus.$emit('notification', message)
|
|
|
|
// this.$bus.$emit('update_single_note', this.note.id)
|
|
})
|
|
.catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') })
|
|
},
|
|
trashNote(){ //toggleArchived() <- old name
|
|
|
|
this.showWorking = true
|
|
|
|
let postData = {'trashed': !this.note.trashed, 'noteId':this.note.id}
|
|
axios.post('/api/note/settrashed', postData)
|
|
.then(data => {
|
|
|
|
//Show message so no one worries where note went
|
|
let message = 'Moved to Trash'
|
|
if(postData.trashed == 0){
|
|
message = 'Moved to main list'
|
|
}
|
|
this.$bus.$emit('notification', message)
|
|
|
|
})
|
|
.catch(error => { this.$bus.$emit('notification', 'Failed to Trash Note') })
|
|
},
|
|
toggleTags(state){
|
|
|
|
this.showTagSlideMenu = state
|
|
|
|
if(state == false){
|
|
this.$bus.$emit('update_single_note', this.note.id)
|
|
}
|
|
|
|
},
|
|
justClosed(){
|
|
|
|
// Scroll note into view
|
|
this.$el.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'center',
|
|
inline: 'center'
|
|
})
|
|
|
|
//After scroll, trigger green outline animation
|
|
setTimeout(() => {
|
|
|
|
this.triggerClosedAnimation = true
|
|
setTimeout(()=>{
|
|
//After 3 seconds, hide it
|
|
this.triggerClosedAnimation = false
|
|
}, 3000)
|
|
|
|
}, 500)
|
|
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
note: null,
|
|
color: null,
|
|
fontColor: null,
|
|
noteIcon: null,
|
|
iconColor: null,
|
|
beenClicked: false,
|
|
showTagSlideMenu: false,
|
|
triggerClosedAnimation: false, //Show just closed animation
|
|
showWorking: false
|
|
}
|
|
},
|
|
computed: {
|
|
getThumbs(){
|
|
if(!this.note.thumbs){
|
|
return []
|
|
}
|
|
|
|
let notDisplaying = []
|
|
|
|
//Remove images displaying in text from the thumbnails
|
|
this.note.thumbs.forEach( path => {
|
|
|
|
const titleLocation = String(this.note.title).indexOf(path)
|
|
const subtextLocation = String(this.note.subtext).indexOf(path)
|
|
|
|
if(titleLocation != -1 || subtextLocation != -1){
|
|
return
|
|
}
|
|
|
|
notDisplaying.push(path)
|
|
})
|
|
|
|
return notDisplaying
|
|
}
|
|
},
|
|
beforeMount(){
|
|
|
|
this.note = this.data
|
|
|
|
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">
|
|
|
|
.teeny-buttons {
|
|
float: right;
|
|
width: 65%;
|
|
text-align: right;
|
|
}
|
|
.time-ago-display {
|
|
width: 35%;
|
|
float: left;
|
|
text-align: center;
|
|
}
|
|
.tags {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.teeny-button {
|
|
border: 1px solid var(--border_color);
|
|
border-radius: 5px;
|
|
padding: 0px 0px 0px 4px;
|
|
text-align: center;
|
|
margin: 0 0 3px 5px;
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
color: var(--text_color);
|
|
background-color: var(--small_element_bg_color);
|
|
}
|
|
.subtext {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
/*Strict font sizes for card display*/
|
|
.small-text {
|
|
max-height: 267px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
|
|
/*font-size: 1.0em !important;*/
|
|
font-size: 14px !important;
|
|
}
|
|
.small-text > p, , .small-text > h1, .small-text > h2 {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.big-text > p:first-child,
|
|
.big-text > h1, .big-text > h2 {
|
|
/*font-size: 1.3em !important;*/
|
|
font-size: 20px !important;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.big-text > p, .big-text > h1, .big-text > h2 {
|
|
margin-bottom: 0.3em;
|
|
}
|
|
|
|
.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-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;
|
|
border-top: 1px solid #DDD;
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
.note-title-display-card {
|
|
position: relative;
|
|
background-color: var(--small_element_bg_color);
|
|
/*The subtle shadow*/
|
|
/*box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46);*/
|
|
transition: box-shadow ease 0.5s, transform linear 0.1s;
|
|
margin: 5px;
|
|
/*padding: 0.7em 1em;*/
|
|
border-radius: .28571429rem;
|
|
border: 1px solid transparent;
|
|
border-color: var(--border_color);
|
|
/*width: calc(33.333% - 10px);*/
|
|
width: calc(25% - 10px);
|
|
/*min-width: 190px;*/
|
|
min-height: 130px;
|
|
/*transition: box-shadow 0.3s;*/
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
|
|
line-height: 1.8rem;
|
|
letter-spacing: 0.05rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
}
|
|
.note-title-display-card:hover {
|
|
/*box-shadow: 0px 2px 2px 1px rgba(210, 211, 211, 0.8);*/
|
|
/*transform: translateY(-2px);*/
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
|
}
|
|
.note-title-display-card.title-view {
|
|
width: 100%;
|
|
min-height: 20px;
|
|
max-width: none;
|
|
/*box-shadow: 0px 0px 1px 1px rgba(210, 211, 211, 0.46);*/
|
|
}
|
|
|
|
.single-line-text {
|
|
width: calc(100% - 25px);
|
|
margin: 5px 10px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
box-sizing: border-box;
|
|
}
|
|
.title-line {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
padding: 0 20px 0 0;
|
|
}
|
|
|
|
.icon-bar {
|
|
display: inline-block;
|
|
padding: 5px 10px 0;
|
|
opacity: 1;
|
|
width: 100%;
|
|
}
|
|
.hover-hide {
|
|
opacity: 0.0;
|
|
transition: opacity ease 0.6s;
|
|
}
|
|
.little-tag {
|
|
font-size: 0.7em;
|
|
padding: 5px 5px;
|
|
border: 1px solid var(--border_color);
|
|
margin: 0 3px 5px 0;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
max-width: 175px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
line-height: 0.8em;
|
|
text-overflow: ellipsis;
|
|
float: left;
|
|
}
|
|
.tiny-thumb-box {
|
|
max-height: 70px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
display: inline-block;
|
|
background-color: rgba(200, 200, 200, 0.2);
|
|
white-space: nowrap;
|
|
overflow-x: scroll;
|
|
border: 1px solid var(--border_color);
|
|
border-left: none;
|
|
border-right: none;
|
|
text-align: center;
|
|
scrollbar-width: none;
|
|
}
|
|
.tiny-thumb {
|
|
max-height: 70px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.note-title-display-card:hover .icon-bar {
|
|
opacity: 1;
|
|
}
|
|
.note-title-display-card:hover .hover-hide {
|
|
opacity: 1;
|
|
}
|
|
|
|
.note-card-text {
|
|
width: 100%;
|
|
display: inline-block;
|
|
align-self: flex-start;
|
|
flex-grow: 1;
|
|
padding: 10px 10px 0;
|
|
}
|
|
.tool-bar {
|
|
width: 100%;
|
|
display: inline-block;
|
|
align-self: flex-end;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
|
|
.one-column .note-title-display-card {
|
|
width: 100%;
|
|
max-width: none;
|
|
/*margin: 0px -5px 10px -5px;*/
|
|
}
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
.overflow-hidden p, .overflow-hidden h3 {
|
|
word-break: break-word;
|
|
}
|
|
.max-height {
|
|
height: calc(100% + 30px);
|
|
}
|
|
.currently-open:after {
|
|
content: '...';
|
|
position: absolute;
|
|
cursor: default;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #000000b0;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #cecece;
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
/* Break points determine when display cards shrink */
|
|
@media only screen and (max-width: 700px) {
|
|
.note-title-display-card {
|
|
width: calc(100% + 10px);
|
|
margin: 0px -5px 10px -5px;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 700px) and (max-width: 900px) {
|
|
.note-title-display-card {
|
|
width: calc(50% - 10px);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 900px) and (max-width: 1100px) {
|
|
.note-title-display-card {
|
|
width: calc(33.33333% - 10px);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1100px) and (max-width: 1300px) {
|
|
.note-title-display-card {
|
|
width: calc(25% - 10px);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1300px) and (max-width: 1800px) {
|
|
.note-title-display-card {
|
|
width: calc(20% - 10px);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1800px) {
|
|
.note-title-display-card {
|
|
width: calc(16.66666% - 10px);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Animations for cool border effects*/
|
|
@keyframes bgin {
|
|
0% {
|
|
background-image:
|
|
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* TopLeft to Right */
|
|
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%), /* TopRight to Bottom */
|
|
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* BottomLeft to Right*/
|
|
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%); /* TopLeft to Bottom */
|
|
/*Initial state, no BG*/
|
|
background-size: 0 4px, 4px 0, 0 4px, 4px 0;
|
|
}
|
|
10% {
|
|
/*Middre state, some filled */
|
|
background-size: 100% 4px, 4px 0, 100% 4px, 4px 0;
|
|
}
|
|
20% {
|
|
/*final state, all filled */
|
|
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
|
|
}
|
|
30% {
|
|
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
|
|
background-image:
|
|
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* TopLeft to Right */
|
|
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%), /* TopRight to Bottom */
|
|
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* BottomLeft to Right*/
|
|
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%); /* TopLeft to Bottom */
|
|
}
|
|
100% {
|
|
background-image:
|
|
linear-gradient(to right, transparent 50%, transparent 100%), /* TopLeft to Right */
|
|
linear-gradient(to bottom, transparent 50%, transparent 100%), /* TopRight to Bottom */
|
|
linear-gradient(to right, transparent 50%, transparent 100%), /* BottomLeft to Right*/
|
|
linear-gradient(to bottom, transparent 50%, transparent 100%); /* TopLeft to Bottom */
|
|
}
|
|
}
|
|
|
|
.bgboy {
|
|
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 0, 0 100%, 100% 0, 0 100%;
|
|
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
|
animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
|
|
}
|
|
|
|
</style> |