Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

I need to get back into using git. The hell is wrong with me!?

Browse Source
This commit is contained in:
Max G
2019-12-20 05:50:50 +00:00
parent 7b77bd37f3
commit 8d07a8e11a
135 changed files with 53273 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
client/src/components/NoteTitleDisplayCard.vue
View File

@@ -1,67 +1,59 @@
<template>
<div class="note-title-display-card fade-in-fwd"
:style="{'background-color':color, 'color':fontColor}"
<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" v-if="isShowingSearchResults()">
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
<h4><i class="paragraph icon"></i> Found in Text</h4>
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="cleanHighlight(highlight)"></div>
</div>
<div v-if="note.attachment_highlights.length > 0" class="term-usage">
<h4><i class="linkify icon"></i> Found in URL</h4>
<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="cleanHighlight(highlight)"></div>
</div>
<div v-if="note.tag_highlights.length > 0" class="term-usage">
<h4><i class="tags icon"></i> Found in Tags</h4>
<div class="usage-row" v-for="highlight in note.tag_highlights">
<span
v-for="tag in splitTags(highlight)"
class="ui label"
>
<span v-html="tag"></span>
</span>
</div>
</div>
</div>
<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">
<p class="clickable">{{note.subtext}}</p>
</div>
<!-- <div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
</div> -->
</div>
<div class="bottom aligned row" @click.self.stop="onClick(note.id)">
<!-- 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)}}
{{$helpers.timeAgo(note.updated)}}
<!-- {{(note.chars.toLocaleString())}} -->
</div>
<div class="ten wide right aligned column split-spans">
<span v-if="note.pinned == 1" data-tooltip="Pinned">
<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-tooltip="Archived">
<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">
<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-tooltip="Note has 1 tag">
<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`">
<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>
<delete-button :note-id="note.id" />
</div>
</div>
@@ -73,7 +65,7 @@
export default {
name: 'NoteTitleDisplayCard',
props: [ 'onClick', 'data', 'currentlyOpen' ],
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
components: {
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
},
@@ -93,37 +85,70 @@
},
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, //'#FFF',
fontColor: null, //'#000'
color: null,
fontColor: null,
noteIcon: null,
iconColor: null,
}
},
beforeMount(){
this.note = this.data
if(this.note.color != null && this.note.color != '#FFF'){
this.color = this.note.color
this.fontColor = '#FFF'
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-bottom: 10px;
/*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;
@@ -133,22 +158,44 @@
.note-title-display-card {
position: relative;
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
margin: 0 15px 15px 0;
padding: 1em;
/*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% - 15px);
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 1px 2px -0 rgba(34,36,38,.50);
/*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%;
/*margin-right: 65%;*/
/*width: 33%;*/
width: 100%;
}
.overflow-hidden {
overflow: hidden;
@@ -162,6 +209,7 @@
.currently-open:after {
content: 'Open';
position: absolute;
cursor: default;
top: 0;
bottom: 0;
left: 0;
@@ -176,10 +224,18 @@
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: 100%;
margin: 15px 0 0 0;
width: calc(100% + 10px);
margin: 0px -5px 10px -5px;
padding: 15px;
}
}
</style>