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

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

@ -3,96 +3,87 @@
: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.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">
Shared by {{ note.shareUsername }}
<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 v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
New
</span>
<span class="subtext" v-if="note.shared == 2">
You Shared
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<div v-if="note.title == '' && note.subtext == ''">
Empty Note
</div>
<span class="subtext" v-if="note.shared == 2">
You Shared
<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 -->
<div v-if="note.title.length > 0"
data-test-id="title"
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
v-html="note.title"></div>
<span v-if="noteIcon" class="badge">
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
</span>
<!-- Sub text display -->
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()"
data-test-id="subtext"
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }"
v-html="note.subtext"></div>
<!-- Title display -->
<span v-if="note.title.length > 0"
data-test-id="title"
class="big-text"
v-html="note.title"></span>
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
<div
class="usage-row"
v-for="highlight in note.note_highlights"
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
v-html="cleanHighlight(highlight)"></div>
</div>
<!-- Sub text display -->
<span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
data-test-id="subtext"
class="small-text"
v-html="note.subtext"></span>
</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>
<!-- Toolbar on the bottom -->
<div class="bottom aligned row" @click.self="cardClicked">
<div class="sixteen wide column">
<div class="ui grid reduced-padding">
<div class="tool-bar" @click.self="cardClicked">
<div class="thirteen wide column clickable icon-bar" @click="cardClicked">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
</span>
<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>
</div>
<div class="three wide right aligned column">
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
</div>
<div class="icon-bar" @click="cardClicked">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
</span>
<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>
<div class="row" 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>
<delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
</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>
@ -209,7 +200,7 @@
}
.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
/*font-size: 1.3em !important;*/
font-size: 16px !important;
font-size: 17px !important;
font-weight: bold;
}
.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 0px 5px 1px rgba(34,36,38,0);
margin: 5px;
padding: 0.7em 1em;
/*padding: 0.7em 1em;*/
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
@ -257,13 +248,18 @@
line-height: 1.8rem;
letter-spacing: 0.02rem;
display: flex;
flex-direction: column;
}
.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;
display: inline-block;
padding: 0 10px 0;
opacity: 1;
width: 100%;
/*margin-top: -2.2rem;*/
}
.hover-hide {
@ -308,6 +304,20 @@
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 {
/*margin-right: 65%;*/
@ -342,9 +352,8 @@
}
.badge {
position: absolute;
top: 7px;
right: 6px;
display: inline-block;
float: right;
}
/* 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 = {
'background_color': '#fff',
'text_color': '#3d3d3d',
'outline_color': 'rgba(34,36,38,.15)',
'border_color': 'rgba(34,36,38,.20)',
'outline_color': 'rgba(34,36,38,0.15)',
'border_color': 'rgba(34,36,38,0.20)',
}
//Night mode colors
if(state.nightMode){
@ -60,7 +60,7 @@ export default new Vuex.Store({
'background_color': '#000',
'text_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()
}
//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) => {
const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm
return string.match(urlPattern)
@ -40,7 +52,19 @@ ProcessText.deduceNoteTitle = (inString) => {
//Remove inline styles that may be added by editor
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
inString += '</end>'
@ -60,7 +84,7 @@ ProcessText.deduceNoteTitle = (inString) => {
const endTags = ['</o','</l','</u']
let totalLines = Math.min(lines.length, 6)
let charLimit = 250
let charLimit = 400
let listStart = false
let noTitleJustList = false