8833a213a7
* When a user gets a new shared message, it will popup instantly * When a new website is scraped, it will update in real time * Various other little bug fixes and improvements * Sharing displays correct notes and handles shared notes correctly * Tags were not displaying on notes, they do now. They better.
308 lines
7.5 KiB
Vue
308 lines
7.5 KiB
Vue
<template>
|
|
<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.self="onClick(note.id)">
|
|
|
|
<div class="sixteen wide column overflow-hidden note-card-text" @click="e => onClick(note.id, e)">
|
|
|
|
<div class="subtext" v-if="note.shareUsername">Shared by {{ note.shareUsername }}</div>
|
|
<div class="subtext" v-if="note.shared == 2">You Shared</div>
|
|
|
|
|
|
<!-- Title display -->
|
|
<div v-if="note.title.length > 0"
|
|
data-test-id="title"
|
|
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
|
|
v-html="note.title"></div>
|
|
|
|
<!-- Sub text display -->
|
|
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()"
|
|
data-test-id="subtext"
|
|
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }"
|
|
v-html="note.subtext"></div>
|
|
|
|
<!-- 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"
|
|
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
|
|
v-html="cleanHighlight(highlight)"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Toolbar on the bottom -->
|
|
<div class="bottom aligned row" @click.self="onClick(note.id)">
|
|
<div class="sixteen wide column">
|
|
<div class="ui grid reduced-padding">
|
|
|
|
<div class="thirteen wide column clickable icon-bar" @click="onClick(note.id)">
|
|
<!-- {{$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>
|
|
</div>
|
|
<div class="three wide right aligned column">
|
|
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
|
|
</div>
|
|
|
|
<div class="row" v-if="note.thumbs">
|
|
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
|
|
<img v-for="thumb in note.thumbs.split(',').reverse()" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'NoteTitleDisplayCard',
|
|
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
|
|
components: {
|
|
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
|
|
},
|
|
methods:{
|
|
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)
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
note: null,
|
|
color: null,
|
|
fontColor: null,
|
|
noteIcon: null,
|
|
iconColor: null,
|
|
}
|
|
},
|
|
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">
|
|
|
|
/*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, .big-text > p, .big-text > h1, .big-text > h2 {
|
|
/*font-size: 1.3em !important;*/
|
|
font-size: 16px !important;
|
|
font-weight: bold;
|
|
}
|
|
.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;
|
|
}
|
|
.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 {
|
|
opacity: 0.8;
|
|
/*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: 5px 3px 0 0;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
max-width: 100px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
line-height: 0.8em;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
.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 {
|
|
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: calc(100% + 10px);
|
|
margin: 0px -5px 10px -5px;
|
|
}
|
|
}
|
|
</style> |