* Made dispay of last edit smaller on note title display card

* Made note menu buttons look better on mobile
* Moved around some note menu buttons
* Added a color picker with a rip off of google colors
* Added a remove formatting button
* Hide pin and archive icons, they appear green on hover, in the buttons
* Further simplified display card logic, now it just adds an end tag and returns the data
* Changed highlight text color to show colors (works on chrome...)

client/src/Helpers.js

@@ -44,7 +44,7 @@ helpers.timeAgo = (time) => {
 			if (typeof format[2] == 'string') {
 				return format[list_choice]
 			} else {
-				return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token
+				return Math.floor(seconds / format[2]) + ' ' + format[1]// + ' ' + token
 			}
 		}
 	}

client/src/assets/semantic-helper.css

@@ -32,8 +32,8 @@ html {
 }
 
 div.ui.basic.segment.no-fluf-segment {
-		margin-top: 0px;
+	margin-top: 0px;
-	}
+}
 
 /* Night mode modifiers */
 
@@ -182,6 +182,11 @@ a:hover {
 
 /* Shrink button text for mobile */
 @media only screen and (max-width: 740px) {
+	.note-menu > .nm-button {
+		font-size: 1.4em;
+		padding: 10px 1px;
+		min-width: 40px;
+	}
 	.note-menu .nm-button span {
 		font-size: 0.7em;
 		line-height: 0.4em;
@@ -238,6 +243,11 @@ a:hover {
 		/*border-bottom: 1px solid #ccc;*/
 		scrollbar-width: none;
 	}
+	.squire-box::selection, 
+	.squire-box::-moz-selection {
+		background: #cce2ffa6;
+		color: inherit;
+	}
 	/*Makes the first line real big */
 	.squire-box:focus {
 		outline: none;

client/src/components/GlobalSiteMenu.vue

@@ -257,7 +257,7 @@
 		},
 		data: function(){ 
 			return {
-				version: '1.0.3',
+				version: '1.0.4',
 				username: '',
 				collapsed: false,
 				mobile: false,

client/src/components/NoteInputPanel.vue

@@ -21,20 +21,22 @@
 
 			<nm-button tip="Close" bottom-tip="true" v-on:click.native="close" icon="close" />
 
-			<nm-button tip="Numbered List" bottom-tip="true" v-on:click.native="toggleList('ol')" icon="list ol" />
+			<nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
-			
-			<nm-button tip="Task List" bottom-tip="true" v-on:click.native="toggleList('ul')" icon="tasks" />
 			
 			<nm-button tip="Bold" bottom-tip="true" v-on:click.native="toggleBold()" icon="bold" />
 			
 			<nm-button tip="Quote" bottom-tip="true" v-on:click.native="toggleItalic()" icon="quote left" />
 
-			<nm-button tip="Title" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" />
+			<nm-button tip="Big Text" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" />
 
 			<nm-button tip="Indent" bottom-tip="true" v-on:click.native="editor.increaseQuoteLevel()" icon="indent" />
 
 			<nm-button tip="Outdent" bottom-tip="true" v-on:click.native="editor.decreaseQuoteLevel()" icon="outdent" />
 
+			<nm-button tip="Remove Formatting" bottom-tip="true" v-on:click.native="removeFormatting()" icon="remove format icon" />
+
+			<nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" text="Undo" />
+
 			<nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" />
 
 		</div>
@@ -149,13 +151,9 @@
 
 			<div class="note-menu shrink-icons-on-mobile">
 
-				<!-- Tags  -->
+				<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" />
-				<nm-button
+
-					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)"
+				<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" />
-					icon="tags"
-					text="Tags"
-					tip="Tags"
-				></nm-button>
 	
 				<!-- colors button -->
 				<nm-button
@@ -165,6 +163,14 @@
 					tip="Note Color"
 				></nm-button>
 
+				<!-- Tags  -->
+				<nm-button
+					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)"
+					icon="tags"
+					text="Tags"
+					tip="Tags"
+				></nm-button>
+
 				<!-- add images panel -->
 				<nm-button
 					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)"
@@ -178,8 +184,6 @@
 					class="nm-button" 
 					:noteId="noteid" />
 
-				<nm-button v-on:click.native="undoCustom()" icon="undo" tip="Undo" text="Undo" />
-
 				<nm-button 
 					icon="ellipsis horizontal" 
 					text="Options"
@@ -191,6 +195,13 @@
 
 	</div>
 
+		<!-- color picker -->
+		<color-tooltip 
+			v-if="colorpicker" 
+			v-on:color="color => modifyColor(color)"
+			v-on:close="colorpicker = false"
+		/>
+
 		<!-- Side slide menus for colors, tags, images and other options -->
 	
 		<side-slide-menu v-show="colors" v-on:close="colors = false" name="colors">
@@ -331,6 +342,7 @@
 			'simple-attachment-note': () => import('@/components/SimpleAttachmentNoteComponent.vue'),
 			'share-note-component': () => import('@/components/ShareNoteComponent.vue'),
 
+			'color-tooltip':require('@/components/TextColorTooltipComponent.vue').default,
 			'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
 		},
 		data(){
@@ -377,6 +389,7 @@
                 colors: false, 
                 images: false,
                 options: false,
+                colorpicker: false,
 
                 //Encryption options
                 passwordHint: '',
@@ -565,6 +578,10 @@
 					this.editor.setSelection(squireRange)
 				}
 			},
+			removeFormatting(){
+				this.selectLineIfNoSelect()
+				this.editor.removeAllFormatting()
+			},
 			modifyFont(inSize){
 
 				this.selectLineIfNoSelect()
@@ -577,6 +594,12 @@
 					this.editor.setFontSize(inSize)
 				}
 			},
+			modifyColor(color){
+
+				this.selectLineIfNoSelect()
+				//Set color of font
+				this.editor.setTextColour(color)
+			},
 			toggleList(type){
 
 				//Undo list if its already a lits

client/src/components/NoteTitleDisplayCard.vue

@@ -68,22 +68,23 @@
 			<div class="tool-bar" @click.self="cardClicked">
 				<div class="icon-bar">
 
-					<span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted>
+<!-- 					<span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted>
 						<i class="green pin icon"></i>
 					</span>
 					<span v-if="note.archived == 1" data-position="top left" data-tooltip="Archived" data-inverted>
 						<i class="green archive icon"></i>
-					</span>
+					</span> -->
 					
-					<span v-if="note.tags">
+					<span class="tags" v-if="note.tags">
 						<span  v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
+						<br>
 					</span>
 
-					<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
+					<span data-tooltip="Edited" class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
-						Last Edit {{$helpers.timeAgo(note.updated)}}
+						{{$helpers.timeAgo(note.updated)}}
 					</span>
 
-					<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
+					<span class="teeny-buttons" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
 
 						<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
 							<i class="tags icon"></i>
@@ -93,13 +94,13 @@
 							data-tooltip="Archive"
 							:data-tooltip="note.archived ? 'Un-Archive':'Archive' " 
 							data-inverted v-on:click="archiveNote">
-							<i class="archive icon"></i>
+							<i class="archive icon" :class="{'green':note.archived}"></i>
 						</i>
 
 						<i class="teeny-button" 
 							:data-tooltip="note.pinned ? 'Un-Pin':'Pin' " 
 							data-inverted v-on:click="pinNote">
-							<i class="pin icon"></i>
+							<i class="pin icon" :class="{'green':note.pinned}"></i>
 						</i>
 
 						<delete-button class="teeny-button" :note-id="note.id" />
@@ -289,6 +290,21 @@
 </script>
 <style type="text/css">
 
+	.teeny-buttons {
+		float: right;
+		width: 65%;
+		text-align: right;
+	}
+	.time-ago-display {
+		width: 35%;
+		float: left;
+		text-align: center;
+	}
+	.tags {
+		width: 100%;
+		display: inline-block;
+	}
+
 	.teeny-button {
 		border: 1px solid var(--border_color);
 		border-radius: 5px;
@@ -381,7 +397,7 @@
 	}
 	.icon-bar {
 		display: inline-block;
-		padding: 0 10px 0;
+		padding: 5px 10px 0;
 		opacity: 1;
 		width: 100%;
 	}
@@ -442,11 +458,6 @@
 		align-self: flex-end;
 		flex-grow: 0;
 	}
-	.time-ago-display {
-		display: inline-block;
-		width: 100%;
-		text-align: right;
-	}
 	
 
 	.one-column .note-title-display-card {

client/src/components/TextColorTooltipComponent.vue

@@ -0,0 +1,94 @@
+<style type="text/css" scoped>
+	.colors {
+		position: absolute;
+		z-index: 1005;
+		top: 42px;
+		/*height: 100px;*/
+		width: 415px;
+		left: 0;
+	}
+	.colors-container {
+		max-width: 400px;
+	}
+	.dot {
+		display: inline-block;
+		width: 30px;
+		height: 30px;
+		border-radius: 30px;
+		box-shadow: 0px 1px 3px 0px #3e3e3e;
+		margin: 7px 7px 0 0;
+		cursor: pointer;
+	}
+	.shade {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1004;
+		background-color: transparent;
+		width: 100vw;
+		height: 100vh;
+		cursor: pointer;
+	}
+	@media only screen and (max-width: 740px) {
+		.colors {
+			position: fixed;
+			width: 100%;
+			left: 0;
+			right: 0;
+			top: 0;
+		}
+	}
+</style>
+
+<template>
+	<div>
+		<div class="colors">
+			<div class="ui raised segment">
+				<div class="colors-container">
+					<span 
+						v-for="(color,index) in colors" 
+						class="dot"
+						v-on:click="onColorClick(index)"
+						:style="`background-color: ${color};`">
+					</span>
+				</div>
+			</div>
+		</div>
+		<div class="shade" v-on:click="close"></div>
+	</div>
+</template>
+
+<script>
+
+
+	export default {
+		components:{
+			'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
+		},
+		data: function(){ 
+			return {
+				hover: false,
+				colors: [null,'rgb(67,67,67)','rgb(102,102,102)','rgb(153,153,153)','rgb(183,183,183)','rgb(204,204,204)','rgb(217,217,217)','rgb(239,239,239)','rgb(243,243,243)','rgb(255,255,255)','rgb(152,0,0)','rgb(255,0,0)','rgb(255,153,0)','rgb(255,255,0)','rgb(0,255,0)','rgb(0,255,255)','rgb(74,134,232)','rgb(0,0,255)','rgb(153,0,255)','rgb(255,0,255)','rgb(230,184,175)','rgb(244,204,204)','rgb(252,229,205)','rgb(255,242,204)','rgb(217,234,211)','rgb(208,224,227)','rgb(201,218,248)','rgb(207,226,243)','rgb(217,210,233)','rgb(234,209,220)','rgb(221,126,107)','rgb(234,153,153)','rgb(249,203,156)','rgb(255,229,153)','rgb(182,215,168)','rgb(162,196,201)','rgb(164,194,244)','rgb(159,197,232)','rgb(180,167,214)','rgb(213,166,189)','rgb(204,65,37)','rgb(224,102,102)','rgb(246,178,107)','rgb(255,217,102)','rgb(147,196,125)','rgb(118,165,175)','rgb(109,158,235)','rgb(111,168,220)','rgb(142,124,195)','rgb(194,123,160)','rgb(166,28,0)','rgb(204,0,0)','rgb(230,145,56)','rgb(241,194,50)','rgb(106,168,79)','rgb(69,129,142)','rgb(60,120,216)','rgb(61,133,198)','rgb(103,78,167)','rgb(166,77,121)','rgb(133,32,12)','rgb(153,0,0)','rgb(180,95,6)','rgb(191,144,0)','rgb(56,118,29)','rgb(19,79,92)','rgb(17,85,204)','rgb(11,83,148)','rgb(53,28,117)','rgb(116,27,71)','rgb(91,15,0)','rgb(102,0,0)','rgb(120,63,4)','rgb(127,96,0)','rgb(39,78,19)','rgb(12,52,61)','rgb(28,69,135)','rgb(7,55,99)','rgb(32,18,77)','rgb(76,17,48)'
+				],
+			}
+		},
+		beforeCreate: function(){
+		},
+		mounted: function(){			
+		},
+		methods: {
+			close(){
+				this.$emit('close')
+			},
+			onColorClick(index){
+
+				this.$emit('color',this.colors[index])
+				this.$nextTick( () => {
+					this.close()
+				})
+			},
+		}
+	}
+</script>

server/helpers/ProcessText.js

@@ -67,7 +67,7 @@ ProcessText.deduceNoteTitle = (inTitle, inString) => {
 	}
 
 	//Remove inline styles that may be added by editor
-	inString = inString.replace(/style=".*?"/g,'')
+	// inString = inString.replace(/style=".*?"/g,'')
 
 	const tagFreeLength = ProcessText.removeHtml(inString).length
 
@@ -77,14 +77,15 @@ ProcessText.deduceNoteTitle = (inTitle, inString) => {
 	// Still needs, links to open in a new window.
 
 	sub = ProcessText.stripDoubleBlankLines(inString)
-	if(tagFreeLength > 200){
+	// if(tagFreeLength > 200){
-		sub += '... <i class="green caret down icon"></i>'
+	// 	sub += '... <i class="green caret down icon"></i>'
-	}
+	// }
+	inString += '</end>'
 
 	return {title, sub}
 
 	//Emergency ending tag if truncated. This will help regex find all the lines
-	inString += '</end>'
+	
 
 	//Match full line and closing tag or just closing tag
 	let lines = inString.match(/[<[a-zA-Z0-9]+>(.*?)<\/[a-zA-Z0-9]+>|<\/[a-zA-Z0-9>]+?>/gms)

server/models/Note.js

@@ -591,7 +591,7 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 			let searchParams = [userId]
 			let noteSearchQuery = `
 				SELECT note.id, 
-					SUBSTRING(note_raw_text.text, 1, 300) as text, 
+					SUBSTRING(note_raw_text.text, 1, 500) as text, 
 					note_raw_text.title as title,
 					note_raw_text.updated as updated, 
 					opened,