SolidScribe/client/src/components/NoteTitleDisplayCard.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.stop="onClick(note.id)">

				<div class="sixteen wide column overflow-hidden">
					<h3  class="clickable">{{note.title}}</h3>
					<p v-if="!isShowingSearchResults()" class="clickable">{{note.subtext}}</p>
					<!-- 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" v-html="cleanHighlight(highlight)"></div>
					</div>
				</div>
				
<!-- 				<div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
					
				</div> -->

			</div>

			<!-- Toolbar on the bottom  -->
			<div class="bottom aligned row icon-bar" @click.self.stop="onClick(note.id)">
				<div class="six wide column clickable" @click.stop="onClick(note.id)">
					{{$helpers.timeAgo(note.updated)}} 
					<!-- {{(note.chars.toLocaleString())}} -->
				</div>

				<div class="ten wide right aligned column split-spans">
					
					<delete-button class="hover-hide" :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">
						<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)
				// this.$bus.$emit('open_edit_attachment', 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">

	.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>