c11f1b1b6f
* Menus open and close based on URL, allowing for back button on note menus to close Minor Updates: * Made night mode buttons green * Widend the global menu * Added a version display * Made the create note button real big * Made the creane note button more visible on mobile * Hide the note button if there are no notes * Changed quick menu item to "Quick Note" * Added reload option if version is clicked * Moved around menu buttons at the bottom of the note * Moved tags back into the main footer on note * Disabled hiding of toolbar on mobile when editor focused * Updated locked note display on main title card * Put last edit on note display * Tweaked display styles to be more minimal, added fade-in on hover * Added solid scribe to all title displays on the site * Reactivated help page and put some good help on it...decent help * Increased max upload size for files to 5MB * Shortened text on title display cards to make them all the same size
540 lines
14 KiB
Vue
540 lines
14 KiB
Vue
<template>
|
|
<div class="note-title-display-card"
|
|
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
|
|
:class="{'currently-open':currentlyOpen, 'bgboy':triggerClosedAnimation}"
|
|
>
|
|
|
|
|
|
<!-- Show title and snippet below it -->
|
|
<div class="overflow-hidden note-card-text" @click="cardClicked">
|
|
|
|
<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 == '' && note.encrypted == 0">
|
|
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"
|
|
data-test-id="title"
|
|
class="big-text"><p>{{ note.title }}</p></span>
|
|
|
|
<!-- Sub text display -->
|
|
<span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
|
|
data-test-id="subtext"
|
|
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>
|
|
|
|
<!-- Display highlights from solr results -->
|
|
<span v-if="note.note_highlights.length > 0" class="term-usage">
|
|
<span
|
|
class="usage-row"
|
|
v-for="highlight in note.note_highlights"
|
|
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
|
|
v-html="cleanHighlight(highlight)"></span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Toolbar on the bottom -->
|
|
<div class="tool-bar" @click.self="cardClicked">
|
|
<div class="icon-bar">
|
|
|
|
<span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted>
|
|
<i class="green pin icon"></i>
|
|
</span>
|
|
<span v-if="note.archived == 1" data-position="top left" data-tooltip="Archived" data-inverted>
|
|
<i class="green archive icon"></i>
|
|
</span>
|
|
|
|
<span v-if="note.tags">
|
|
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
|
|
</span>
|
|
|
|
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
|
|
Last Edit {{$helpers.timeAgo(note.updated)}}
|
|
</span>
|
|
|
|
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
|
|
|
|
<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"></i>
|
|
</i>
|
|
|
|
<i class="teeny-button"
|
|
:data-tooltip="note.pinned ? 'Un-Pin':'Pin' "
|
|
data-inverted v-on:click="pinNote">
|
|
<i class="pin icon"></i>
|
|
</i>
|
|
|
|
<delete-button class="teeny-button" :note-id="note.id" />
|
|
|
|
</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' ],
|
|
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)
|
|
},
|
|
cleanHighlight(text){
|
|
//Basically just remove whitespace
|
|
let updated = text.replace(/ /g, '').replace(/<br>/g,'')
|
|
.replace(/<p><\/p>/g,'').replace(/<p> <\/p>/g,'')
|
|
|
|
return updated
|
|
},
|
|
isShowingSearchResults(){
|
|
if(this.note.note_highlights.length > 0 || this.note.attachment_highlights.length > 0 || this.note.tag_highlights.length > 0){
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
splitTags(text){
|
|
return text.split(',')
|
|
},
|
|
openEditAttachment(){
|
|
this.$router.push('/attachments/note/'+this.note.id)
|
|
},
|
|
pinNote(){ //togglePinned() <- old name
|
|
let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
|
|
axios.post('/api/note/setpinned', postData)
|
|
.then(data => {
|
|
this.$bus.$emit('update_single_note', this.note.id)
|
|
})
|
|
},
|
|
archiveNote(){ //toggleArchived() <- old name
|
|
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 = 'Move to main list'
|
|
}
|
|
this.$bus.$emit('notification', message)
|
|
|
|
this.$bus.$emit('update_single_note', this.note.id)
|
|
})
|
|
},
|
|
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
|
|
}
|
|
},
|
|
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-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(--background_color);
|
|
}
|
|
|
|
/*Strict font sizes for card display*/
|
|
.small-text {
|
|
max-height: 261px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
|
|
/*font-size: 1.0em !important;*/
|
|
font-size: 15px !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: 17px !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;
|
|
/*box-shadow: 0 1px 3px 0 rgba(34,36,38,.15);*/
|
|
/*box-shadow: 0 0px 5px 1px rgba(34,36,38,0);*/
|
|
/*box-shadow: 0 1px 3px 0 rgba(34,36,38,.15);*/
|
|
box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46);
|
|
transition: box-shadow ease 0.3s;
|
|
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);
|
|
max-width: 300px;
|
|
min-width: 190px;
|
|
min-height: 130px;
|
|
/*transition: box-shadow 0.3s;*/
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
|
|
line-height: 1.8rem;
|
|
letter-spacing: 0.02rem;
|
|
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);
|
|
}
|
|
.icon-bar {
|
|
display: inline-block;
|
|
padding: 0 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;
|
|
}
|
|
.time-ago-display {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
.one-column .note-title-display-card {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
.overflow-hidden p, .overflow-hidden h3 {
|
|
word-break: break-word;
|
|
}
|
|
.max-height {
|
|
height: calc(100% + 30px);
|
|
}
|
|
.currently-open:after {
|
|
content: 'Open';
|
|
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;
|
|
}
|
|
|
|
/* Tweak mobile display to show only one column */
|
|
@media only screen and (max-width: 740px) {
|
|
.note-title-display-card {
|
|
width: calc(100% + 10px);
|
|
margin: 0px -5px 10px -5px;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/*Animations for cool border effects*/
|
|
@keyframes bgin {
|
|
0% {
|
|
background-image:
|
|
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
|
|
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
|
|
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
|
|
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
|
|
/*Initial state, no BG*/
|
|
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
|
|
}
|
|
15% {
|
|
/*Middre state, some filled */
|
|
background-size: 100% 3px, 3px 0, 100% 3px, 3px 0;
|
|
}
|
|
30% {
|
|
/*final state, all filled */
|
|
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
|
|
}
|
|
45% {
|
|
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
|
|
background-image:
|
|
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
|
|
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
|
|
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
|
|
linear-gradient(to bottom, #21BA45 50%, #21BA45 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 2s cubic-bezier(0.19, 1, 0.22, 1) 1;
|
|
}
|
|
|
|
</style> |