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

* Updated color picker interface

Browse Source 
* Updated note status bar
* Added fast filters
* Added pinned and archived notes options
* Added loading indicators to notes and loading of notes
* updated tag edit area
* Updated how search results are displayed
* Fixed bug with opening and closing two notes one after another
* Added mobile detection to global store
* Added a lot of style tweaks and UX tweaks
This commit is contained in:
Max G
2019-09-10 18:10:11 +00:00
parent dd0205a3c1
commit 7b77bd37f3
14 changed files with 620 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,50 +1,71 @@
<template>
<div class="note-title-display-card fade-in-fwd" :style="{'background-color':color, 'color':fontColor}">
<div class="note-title-display-card fade-in-fwd"
:style="{'background-color':color, 'color':fontColor}"
:class="{'currently-open':currentlyOpen}"
>
<div class="ui grid max-height">
<div class="top aligned row">
<!-- 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 @click="onClick(note.id)" class="clickable">{{note.title}}</h3>
<h3 class="clickable">{{note.title}}</h3>
</div>
<div class="sixteen wide column overflow-hidden">
<p @click="onClick(note.id)" class="clickable">{{note.subtext}}</p>
<p class="clickable">{{note.subtext}}</p>
</div>
</div>
<div class="bottom aligned row">
<div class="ten wide column clickable" @click="onClick(note.id)">Edited: {{$helpers.timeAgo(note.updated)}}</div>
<div class="bottom aligned row" @click.self.stop="onClick(note.id)">
<div class="six wide column clickable" @click.stop="onClick(note.id)">
{{$helpers.timeAgo(note.updated)}}
</div>
<div class="six wide right aligned column">
<span v-if="note.attachment_count > 0" class>
<i class="grey linkify icon"></i> {{note.attachment_count}}
<div class="ten wide right aligned column split-spans">
<span v-if="note.pinned == 1" data-tooltip="Pinned">
<i class="green pin icon"></i>
</span>
<span v-if="note.archived == 1" data-tooltip="Archived">
<i class="green archive icon"></i>
</span>
<span v-if="note.attachment_count > 0">
<i class="linkify icon"></i> {{note.attachment_count}}
</span>
<span v-if="note.tag_count == 1" data-tooltip="Note has 1 tag">
<i class="grey tags icon"></i> {{note.tag_count}}
<i class="tags icon"></i> {{note.tag_count}}
</span>
<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`">
<i class="grey tags icon"></i> {{note.tag_count}}
<i class="tags icon"></i> {{note.tag_count}}
</span>
<delete-button :note-id="note.id" />
</div>
</div>
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
<p><i class="paragraph icon"></i> Note Text</p>
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="highlight"></div>
</div>
<div v-if="note.attachment_highlights.length > 0" class="term-usage">
<p><i class="linkify icon"></i> Note URL Text</p>
<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="highlight"></div>
</div>
<div v-if="note.tag_highlights.length > 0" class="term-usage">
<i class="tags icon"></i> Tag
<div class="ui icon large label" v-for="highlight in note.tag_highlights" v-html="highlight"></div>
</div>
</div>
</div>
</div>
</template>
@@ -52,10 +73,28 @@
export default {
name: 'NoteTitleDisplayCard',
props: [ 'onClick', 'data' ],
props: [ 'onClick', 'data', 'currentlyOpen' ],
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(',')
}
},
data () {
return {
note: null,
@@ -77,13 +116,13 @@
<style type="text/css">
.term-usage {
border-top: 1px solid #DDD;
padding: 10px;
border-bottom: 1px solid #DDD;
padding-bottom: 10px;
margin-bottom: 10px;
width: 100%;
}
.term-usage em {
color: green;
background-color: white;
font-weight: bold;
}
.usage-row + .usage-row {
@@ -100,12 +139,16 @@
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
width: 31.5%;
/*transition: width 0.2s;*/
width: calc(33.333% - 15px);
transition: box-shadow 0.3s;
box-sizing: border-box;
}
.note-title-display-card:hover {
box-shadow: 0 1px 2px -0 rgba(34,36,38,.50);
}
.one-column .note-title-display-card {
margin-right: 65%;
width: 18%;
width: 33%;
}
.overflow-hidden {
overflow: hidden;
@@ -116,6 +159,22 @@
.max-height {
height: calc(100% + 30px);
}
.currently-open:after {
content: 'Open';
position: absolute;
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;
}
@media only screen and (max-width: 740px) {
.note-title-display-card {