Little green more note indicator.

fixes #23
Testing new note display cards that use flexbox
2020-03-01 00:54:54 +00:00 · 2020-02-27 07:14:29 +00:00 · 2020-02-27 04:50:08 +00:00
7 changed files with 215 additions and 96 deletions
--- a/client/src/assets/semantic-helper.css
+++ b/client/src/assets/semantic-helper.css
@ -199,12 +199,16 @@ a:hover {
 /* squire text styles */
 	.squire-box {
 		border: none;
-		height: calc(100% - 69px);
+		/*height: calc(100% - 69px);*/
+
+		min-height: calc(100% - 0px);
+		background-color: rgba(255,200,0,0.0);
+		/*margin-bottom: 15px;*/
+
 		box-sizing: border-box;
 		padding: 10px 15px 10px;
-		background: transparent;
+		/*background: transparent;*/
 		overflow-x: scroll; 
-		/*color: var(--text_color);*/
 		font-size: 1.2em;
 		line-height: 1.5em;
 		word-wrap: break-word;
@ -225,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;
@ -245,6 +250,7 @@ a:hover {
 		max-width:100%;
 		height: auto;
 		max-height: 200px;
+		margin: 10px 0 0;
 	}
 	.squire-box img {
 		max-width:100%;
--- a/client/src/components/NoteInputPanel.vue
+++ b/client/src/components/NoteInputPanel.vue
@ -4,10 +4,12 @@
 		id="InputNotes" 
 		class="master-note-edit" 
 		@keyup.esc="close" 
-		:class="[{'size-down':(sizeDown == true), 'padded-bottom':extraToolbarsVisible },  'position-'+position ]" 
+		:class="[{ 'size-down':(sizeDown == true) },  'position-'+position ]" 
 		:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
 	>

+	<div class="input-container-wrapper">
+
 		<!-- Loading indicator  -->
 		<div v-if="loading" class="loading-note">
 			<div class="ui active dimmer">
@ -34,10 +36,27 @@
 			<nm-button v-if="usersOnNote > 1" icon="green user circle" />

 			<nm-button icon="ellipsis horizontal" v-on:click.native="showNoteOptions = !showNoteOptions" />
-
 		</div>

-		<div id="squire-id" class="squire-box" ref="squirebox"></div>
+		<!-- Squire box grows -->
+		<div class="note-wrapper">
+
+			<div id="squire-id" class="squire-box" ref="squirebox"></div>
+
+			<!-- bottom stats -->
+			<div class="ui basic segment">
+				<div class="ui grid">
+					<div class="sixteen wide column">
+						<div class="ui basic compact button">
+							Status: {{ statusText }}
+						</div>
+						<div class="ui basic compact button" :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
+							Last Change: {{ $helpers.timeAgo(updated) }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>

 		<!-- && this.$store.getters.getIsUserOnMobile -->
 		<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
@ -108,7 +127,9 @@
 			</div>
 		</div>

-		<!-- Side slide menus for colors, tags and images -->
+	</div>
+
+		<!-- Side slide menus for colors, tags, images and other options -->
 	
 		<side-slide-menu v-if="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
 			<color-picker
@ -211,6 +232,8 @@
 				modified: false,
 				noteText: '',
 				rawTextId: 0,
+				created: '',
+				updated: '',
 				shareUsername: null,
 				diffNoteText: '',
 				statusText: 'Saved',
@ -299,6 +322,11 @@
 				this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' })
 				this.setText(this.noteText)

+				//focus on open, not on mobile, thats annoying
+				if(!this.$store.getters.getIsUserOnMobile){
+					this.editor.focus()
+				}
+
 				//Click Event - Open links when clicked in editor or toggle checks
 				this.editor.addEventListener('click', e => {

@ -693,10 +721,12 @@
 						this.rawTextId = response.data.rawTextId
 						this.shareUsername = response.data.shareUsername

+						this.created = response.data.created
+						this.updated = response.data.updated
+
 						vm.noteText = response.data.text
 						vm.diffNoteText = response.data.text

-						vm.updated = response.data.updated
 						vm.lastNoteHash = vm.hashString(response.data.text)
 						//Set up note colors
 						if(response.data.color){
@ -1031,23 +1061,52 @@
 <style type="text/css" scoped>

 	/* squire styles */
+	.input-container-wrapper {
+
+		display: block;
+		height: 100%;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+
+		display: flex;
+		flex-direction: column;
+	}
+	/*Three main elements nested in panel */
+		.note-menu {
+			/*position: absolute;*/
+			top: 0;/*
+			left: 0;
+			right: 0;*/
+
+			flex-grow: 0;
+		}
+		.note-wrapper {
+			flex-grow: 1;
+			overflow: scroll;
+		}
+
+
+

 	/*Settings manager styles */
 	.all-settings {
 		/*border-top: 1px solid #534c68;*/
 		background: #221f2b;
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		left: 0;
+		/*position: absolute;*/
+		/*bottom: 40px;*/
+		/*right: 0;*/
+		/*left: 0;*/
 		z-index: 99;
 		/*border: 1px solid;*/
 		/*background-color: var(--background_color);*/
 		/*border-color: var(--border_color);*/
-		box-sizing: border-box;
+		/*box-sizing: border-box;*/
 		/*border-radius: 7px;*/
 		/*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/
 		/*padding: 1.2em 0 0;*/
+		flex-grow: 0;
 	}
 	.low-settings {
 		bottom: 0px;
@ -1060,6 +1119,7 @@
 	/*End Settings manager styles */


+
 	/* container styles change based on mobile and number of open screens */
 	.master-note-edit {
 		position: fixed;
@ -1070,9 +1130,9 @@
 		box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
 		z-index: 1001;
 		/*overflow-x: scroll;*/
-	}
-	.padded-bottom {
-		padding-bottom: 20px;
+
+		overflow-y: scroll;
+		overflow-x: hidden;
 	}
 	.loading-note {
 		position: absolute;
@ -1104,6 +1164,14 @@
 		left: 0%;
 		right: 50%;
 	}
+	.master-note-edit.position-3 {
+		display: inline-block;
+		position: inherit;
+		width: 100%;
+		min-height: 200px;
+		height: auto;
+		box-shadow: none;
+	}

 	.size-down {
 		animation: size-down 0.5s ease;
--- a/client/src/components/NoteTitleDisplayCard.vue
+++ b/client/src/components/NoteTitleDisplayCard.vue
@ -3,92 +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>

+				<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>

-					<!-- 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="note.title == '' && note.subtext == ''">
+					Empty Note
+				</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>
+				<span v-if="noteIcon" class="badge">
+					<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
+				</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>
+				<!-- Title display  -->
+				<span v-if="note.title.length > 0" 
+					data-test-id="title"
+					class="big-text"
+					v-html="note.title"></span>
+
+				<!-- Sub text display -->
+				<span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
+					data-test-id="subtext"
+					class="small-text"
+					v-html="note.subtext"></span>
+
+				<!-- 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  -->
-			<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>

@ -105,6 +100,7 @@
 		},
 		methods:{
 			cardClicked(){
+				// console.log(this.note)
 				this.beenClicked = true
 				this.onClick(this.note.id)
 			},
@ -204,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 {
@ -240,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);
@ -252,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 {
@ -302,6 +303,20 @@
 	.note-title-display-card:hover .hover-hide {
 		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 {
@ -337,9 +352,8 @@
 	}

 	.badge {
-		position: absolute;
-		top: 7px;
-		right: 6px;
+		display: inline-block;
+		float: right;
 	}

 	/* Tweak mobile display to show only one column */
--- a/client/src/pages/NotesPage.vue
+++ b/client/src/pages/NotesPage.vue
@ -44,6 +44,12 @@

 			</div>

+<!-- 			<div class="one wide column"></div>
+				<div class="fourteen wide column">
+					<input-notes :noteid="3153" :position="3" ref="note3" />
+				</div>
+			<div class="one wide column"></div> -->
+
 			<h2 v-if="fastFilters['withLinks'] == 1">Notes with Links</h2>
 			<h2 v-if="fastFilters['withTags'] == 1">Notes with Tags</h2>
 			<h2 v-if="fastFilters['onlyArchived'] == 1">Archived Notes</h2>
--- a/client/src/stores/mainStore.js
+++ b/client/src/stores/mainStore.js
@ -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)',
 				}
 			}

--- a/server/helpers/ProcessText.js
+++ b/server/helpers/ProcessText.js
@ -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

@ -144,7 +168,7 @@ ProcessText.deduceNoteTitle = (inString) => {
 				cleanCutString = cutString
 			}

-			finalLines.push(cleanCutString + '...')
+			finalLines.push(cleanCutString + '... <i class="green caret down icon"></i>')
 			break;
 		}

--- a/server/models/Note.js
+++ b/server/models/Note.js
@ -331,6 +331,7 @@ Note.get = (userId, noteId) => {
 			SELECT 
 				note_raw_text.text, 
 				note_raw_text.updated as updated,
+				note.created,
 				note.pinned,
 				note.archived,
 				note.color,