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

Testing new note display cards that use flexbox

Browse Source 
Testing new simplified text processes, for smaller notes, it just sends all the text
This commit is contained in:
Max G 2020-02-27 07:14:29 +00:00
parent 72b7f8946a
commit b838f9f571
4 changed files with 117 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/assets/semantic-helper.css
View File

@ -229,17 +229,18 @@ a:hover {
.squire-box a { .squire-box a {
cursor: pointer; cursor: pointer;
} }
.note-card-text i, /* .note-card-text i,
.squire-box i { .squire-box i {
padding: 0.5em 0.99em; padding: 0.5em 0.99em;
border: 1px solid #CCC; border: 1px solid #CCC;
margin: 1px; margin: 1px;
border-radius: 9px; border-radius: 9px;
display: inline-block; display: inline-block;
} }*/
.squire-box p { .squire-box p {
margin-bottom: 0; margin-bottom: 0;
} }
.note-card-text blockquote,
.squire-box blockquote { .squire-box blockquote {
margin: 0; margin: 0;
padding: 0.8em; padding: 0.8em;
@ -249,6 +250,7 @@ a:hover {
max-width:100%; max-width:100%;
height: auto; height: auto;
max-height: 200px; max-height: 200px;
margin: 10px 0 0;
} }
.squire-box img { .squire-box img {
max-width:100%; max-width:100%;

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

@ -3,17 +3,10 @@
:style="{'background-color':color, 'color':fontColor, 'border-color':color }" :style="{'background-color':color, 'color':fontColor, 'border-color':color }"
:class="{'currently-open':currentlyOpen}" :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 --> <!-- Show title and snippet below it -->
<div class="top aligned row" @click.self="cardClicked"> <div class="overflow-hidden note-card-text" @click="cardClicked">
<div class="sixteen wide column overflow-hidden note-card-text" @click="cardClicked">
<span class="subtext" v-if="note.shareUsername"> <span class="subtext" v-if="note.shareUsername">
Shared by {{ note.shareUsername }} Shared by {{ note.shareUsername }}
@ -33,43 +26,43 @@
</span> </span>
</span> </span>
<div v-if="note.title == '' && note.subtext == ''"> <span v-if="note.title == '' && note.subtext == ''">
Empty Note Empty Note
</div> </span>
<span v-if="noteIcon" class="badge">
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
</span>
<!-- Title display --> <!-- Title display -->
<div v-if="note.title.length > 0" <span v-if="note.title.length > 0"
data-test-id="title" data-test-id="title"
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }" class="big-text"
v-html="note.title"></div> v-html="note.title"></span>
<!-- Sub text display --> <!-- Sub text display -->
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()" <span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
data-test-id="subtext" data-test-id="subtext"
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }" class="small-text"
v-html="note.subtext"></div> v-html="note.subtext"></span>
<!-- Display highlights from solr results --> <!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage"> <span v-if="note.note_highlights.length > 0" class="term-usage">
<div <span
class="usage-row" class="usage-row"
v-for="highlight in note.note_highlights" v-for="highlight in note.note_highlights"
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }" :class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
v-html="cleanHighlight(highlight)"></div> v-html="cleanHighlight(highlight)"></span>
</div> </span>
</div> </div>
</div>
<!-- Toolbar on the bottom --> <!-- Toolbar on the bottom -->
<div class="bottom aligned row" @click.self="cardClicked"> <div class="tool-bar" @click.self="cardClicked">
<div class="sixteen wide column">
<div class="ui grid reduced-padding">
<div class="thirteen wide column clickable icon-bar" @click="cardClicked"> <div class="icon-bar" @click="cardClicked">
<!-- {{$helpers.timeAgo(note.updated)}} --> <!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags"> <span v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span> <span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
@ -80,19 +73,17 @@
<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted=""> <span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
<i class="green archive icon"></i> <i class="green archive icon"></i>
</span> </span>
</div>
<div class="three wide right aligned column"> <delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
</div> </div>
<div class="row" v-if="getThumbs.length > 0"> <div v-if="getThumbs.length > 0">
<div class="tiny-thumb-box" v-on:click="openEditAttachment"> <div class="tiny-thumb-box" v-on:click="openEditAttachment">
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`"> <img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
@ -209,7 +200,7 @@
} }
.big-text, .big-text > p, .big-text > h1, .big-text > h2 { .big-text, .big-text > p, .big-text > h1, .big-text > h2 {
/*font-size: 1.3em !important;*/ /*font-size: 1.3em !important;*/
font-size: 16px !important; font-size: 17px !important;
font-weight: bold; font-weight: bold;
} }
.big-text > p, .big-text > h1, .big-text > h2 { .big-text > p, .big-text > h1, .big-text > h2 {
@ -245,7 +236,7 @@
/*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/ /*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/
box-shadow: 0 0px 5px 1px rgba(34,36,38,0); box-shadow: 0 0px 5px 1px rgba(34,36,38,0);
margin: 5px; margin: 5px;
padding: 0.7em 1em; /*padding: 0.7em 1em;*/
border-radius: .28571429rem; border-radius: .28571429rem;
border: 1px solid; border: 1px solid;
border-color: var(--border_color); border-color: var(--border_color);
@ -257,13 +248,18 @@
line-height: 1.8rem; line-height: 1.8rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
display: flex;
flex-direction: column;
} }
.note-title-display-card:hover { .note-title-display-card:hover {
/*box-shadow: 0 3px 6px -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); box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);
} }
.icon-bar { .icon-bar {
opacity: 0.8; display: inline-block;
padding: 0 10px 0;
opacity: 1;
width: 100%;
/*margin-top: -2.2rem;*/ /*margin-top: -2.2rem;*/
} }
.hover-hide { .hover-hide {
@ -308,6 +304,20 @@
opacity: 1; opacity: 1;
} }
.note-card-text {
width: 100%;
display: inline-block;
align-self: flex-start;
flex-grow: 1;
padding: 10px 10px 0;
}
.tool-bar {
width: 100%;
display: inline-block;
align-self: flex-end;
flex-grow: 0;
}
.one-column .note-title-display-card { .one-column .note-title-display-card {
/*margin-right: 65%;*/ /*margin-right: 65%;*/
@ -342,9 +352,8 @@
} }
.badge { .badge {
position: absolute; display: inline-block;
top: 7px; float: right;
right: 6px;
} }
/* Tweak mobile display to show only one column */ /* Tweak mobile display to show only one column */

6
client/src/stores/mainStore.js
View File

@ -51,8 +51,8 @@ export default new Vuex.Store({
let themeColors = { let themeColors = {
'background_color': '#fff', 'background_color': '#fff',
'text_color': '#3d3d3d', 'text_color': '#3d3d3d',
'outline_color': 'rgba(34,36,38,.15)', 'outline_color': 'rgba(34,36,38,0.15)',
'border_color': 'rgba(34,36,38,.20)', 'border_color': 'rgba(34,36,38,0.20)',
} }
//Night mode colors //Night mode colors
if(state.nightMode){ if(state.nightMode){
@ -60,7 +60,7 @@ export default new Vuex.Store({
'background_color': '#000', 'background_color': '#000',
'text_color': '#a98457', 'text_color': '#a98457',
'outline_color': '#a98457', 'outline_color': '#a98457',
'border_color': '#a98457', 'border_color': 'rgba(255, 255, 255, 0.31)',
} }
} }

28
server/helpers/ProcessText.js
View File

@ -14,6 +14,18 @@ ProcessText.removeHtml = (string) => {
.trim() .trim()
} }
//Remove Empty HTML lines from a string
ProcessText.stripBlankHtmlLines = (string) => {
if(string == undefined || string == null || string.length == 0){
return ''
}
//Blank lines look like this -> <p><br></p>
return string.replace(/\<p\>\<br\>\<\/p\>/g,'')
}
ProcessText.getUrlsFromString = (string) => { ProcessText.getUrlsFromString = (string) => {
const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm
return string.match(urlPattern) return string.match(urlPattern)
@ -40,7 +52,19 @@ ProcessText.deduceNoteTitle = (inString) => {
//Remove inline styles that may be added by editor //Remove inline styles that may be added by editor
inString = inString.replace(/style=".*?"/g,'') inString = inString.replace(/style=".*?"/g,'')
// inString = inString.replace('</a>','')
const tagFreeLength = ProcessText.removeHtml(inString).length
if(tagFreeLength < 100){
title = ProcessText.stripBlankHtmlLines(inString)
return {title, sub}
}
//Primare Case - Short notes
if(tagFreeLength < 300){
sub = ProcessText.stripBlankHtmlLines(inString)
return {title, sub}
}
//Emergency ending tag if truncated. This will help regex find all the lines //Emergency ending tag if truncated. This will help regex find all the lines
inString += '</end>' inString += '</end>'
@ -60,7 +84,7 @@ ProcessText.deduceNoteTitle = (inString) => {
const endTags = ['</o','</l','</u'] const endTags = ['</o','</l','</u']
let totalLines = Math.min(lines.length, 6) let totalLines = Math.min(lines.length, 6)
let charLimit = 250 let charLimit = 400
let listStart = false let listStart = false
let noTitleJustList = false let noTitleJustList = false