429 lines
10 KiB
Vue
429 lines
10 KiB
Vue
<template>
|
|
<div class="note-title-display-card"
|
|
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
|
|
:class="{'currently-open':currentlyOpen}"
|
|
>
|
|
|
|
|
|
<!-- 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 class="subtext" v-if="note.shared == 2">
|
|
You Shared
|
|
<span v-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"
|
|
data-test-id="title"
|
|
class="big-text"
|
|
v-html="note.title"></span>
|
|
|
|
<!-- Sub text display -->
|
|
<span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
|
|
data-test-id="subtext"
|
|
class="small-text"
|
|
v-html="note.subtext"></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">
|
|
<!-- {{$helpers.timeAgo(note.updated)}} -->
|
|
|
|
<span v-if="note.tags">
|
|
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
|
|
</span>
|
|
|
|
<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-position="top right" data-tooltip="Archived" data-inverted="">
|
|
<i class="green archive icon"></i>
|
|
</span>
|
|
|
|
<!-- :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" -->
|
|
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
|
|
|
|
<!-- <span class="teeny-button" data-tooltip="Archive" data-inverted>
|
|
<i class="archive icon"></i>
|
|
</span> -->
|
|
|
|
<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="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)">
|
|
<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(){
|
|
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)
|
|
})
|
|
},
|
|
toggleTags(state){
|
|
|
|
this.showTagSlideMenu = state
|
|
|
|
if(state == false){
|
|
this.$bus.$emit('update_single_note', this.note.id)
|
|
}
|
|
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
note: null,
|
|
color: null,
|
|
fontColor: null,
|
|
noteIcon: null,
|
|
iconColor: null,
|
|
beenClicked: false,
|
|
showTagSlideMenu: 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-button {
|
|
border: 1px solid var(--border_color);
|
|
border-radius: 5px;
|
|
padding: 0px 0px 0px 4px;
|
|
text-align: center;
|
|
margin: 0 0 0 5px;
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
color: var(--text_color);
|
|
background-color: var(--background_color);
|
|
}
|
|
|
|
/*Strict font sizes for card display*/
|
|
.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 2px 0 rgba(34,36,38,.15);*/
|
|
box-shadow: 0 0px 5px 1px rgba(34,36,38,0);
|
|
margin: 5px;
|
|
/*padding: 0.7em 1em;*/
|
|
border-radius: .28571429rem;
|
|
border: 1px solid;
|
|
border-color: var(--border_color);
|
|
/*width: calc(33.333% - 10px);*/
|
|
width: calc(25% - 10px);
|
|
/*transition: box-shadow 0.3s;*/
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
|
|
line-height: 1.8rem;
|
|
letter-spacing: 0.02rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.note-title-display-card:hover {
|
|
/*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 {
|
|
display: inline-block;
|
|
padding: 0 10px 0;
|
|
opacity: 1;
|
|
width: 100%;
|
|
/*margin-top: -2.2rem;*/
|
|
}
|
|
.hover-hide {
|
|
opacity: 0.0;
|
|
}
|
|
.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 {
|
|
/*margin-right: 65%;*/
|
|
/*width: 33%;*/
|
|
width: 100%;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
</style> |