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%;

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

@ -3,96 +3,87 @@
: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">
Shared by {{ note.shareUsername }}
<span class="subtext" v-if="note.shareUsername"> <span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
Shared by {{ note.shareUsername }} New
<span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
New
</span>
<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span> </span>
<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
<span class="subtext" v-if="note.shared == 2"> Updated
You Shared
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span> </span>
</span>
<div v-if="note.title == '' && note.subtext == ''"> <span class="subtext" v-if="note.shared == 2">
Empty Note You Shared
</div> <span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<span v-if="note.title == '' && note.subtext == ''">
Empty Note
</span>
<!-- Title display --> <span v-if="noteIcon" class="badge">
<div v-if="note.title.length > 0" <i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
data-test-id="title" </span>
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
v-html="note.title"></div>
<!-- Sub text display --> <!-- Title display -->
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()" <span v-if="note.title.length > 0"
data-test-id="subtext" data-test-id="title"
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }" class="big-text"
v-html="note.subtext"></div> v-html="note.title"></span>
<!-- Display highlights from solr results --> <!-- Sub text display -->
<div v-if="note.note_highlights.length > 0" class="term-usage"> <span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
<div data-test-id="subtext"
class="usage-row" class="small-text"
v-for="highlight in note.note_highlights" v-html="note.subtext"></span>
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
v-html="cleanHighlight(highlight)"></div>
</div>
</div> <!-- Display highlights from solr results -->
<span v-if="note.note_highlights.length > 0" class="term-usage">
<span
class="usage-row"
v-for="highlight in note.note_highlights"
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
v-html="cleanHighlight(highlight)"></span>
</span>
</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>
</span> </span>
<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted=""> <span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
<i class="green pin icon"></i> <i class="green pin icon"></i>
</span> </span>
<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="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
</div>
<div class="row" v-if="getThumbs.length > 0"> <delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<div class="tiny-thumb-box" v-on:click="openEditAttachment"> </div>
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div>
</div>
<div v-if="getThumbs.length > 0">
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</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