SolidScribe/client/src/components/NoteTitleDisplayCard.vue
Max G abb4e20ec3 I swear, I'm going to start doing regular commits
+ Added a ton of shit
+ About to add socket.io oh god.
2020-01-03 01:26:55 +00:00

266 lines
6.6 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" @click="e => onClick(note.id, e)">
<!-- 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 icon-bar" @click.self="onClick(note.id)">
<div class="six wide column clickable" @click="onClick(note.id)">
{{$helpers.timeAgo(note.updated)}}
</div>
<div class="ten wide right aligned column">
<!-- ALways show delete button on mobile -->
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<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>
<span v-if="note.attachment_count > 0" v-on:click.stop="openEditAttachment" class="clickable">
<i class="linkify icon"></i> {{note.attachment_count}}
</span>
<span v-if="note.tag_count == 1" data-position="top right" data-tooltip="Note has 1 tag" data-inverted="">
<i class="tags icon"></i> {{note.tag_count}}
</span>
<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`" data-position="top right" data-inverted="">
<i class="tags icon"></i> {{note.tag_count}}
</span>
</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(/&nbsp;/g, '').replace(/<br>/g,'')
.replace(/<p><\/p>/g,'').replace(/<p>&nbsp;<\/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;
}
.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;
}
.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: 1em 1.5em;
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
width: calc(33.333% - 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;
}
.hover-hide {
opacity: 0.0;
}
.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;
padding: 15px;
}
}
</style>