Tweaked display of note cards, again

* Added an option to pin notes, on the main screen

client/src/components/GlobalSiteMenu.vue

@@ -198,7 +198,7 @@
 
 			<div class="menu-section" v-if="loggedIn" data-tooltip="Click to log out" data-inverted="" data-position="right center">
 				<div v-if="loggedIn" v-on:click="destroyLoginToken" class="menu-item menu-button">
-					<i class="user outline icon"></i>{{ucWords($store.getters.getUsername)}}
+					<i v-if="userIcon" class="user outline icon"></i>{{ usernameDisplay }}
 				</div>
 			</div>		
 
@@ -225,6 +225,7 @@
 				mobile: false,
 				disableNewNote: false,
 				menuOpen: true,
+				userIcon: true,
 			}
 		},
 		beforeCreate: function(){
@@ -246,7 +247,19 @@
 			loggedIn () {
 				//Map logged in from state
 				return this.$store.getters.getLoggedIn
-			}
+			},
+			usernameDisplay() {
+
+				//Remove Emails from username, limit length to 16 chars
+				let name = this.$store.getters.getUsername
+				let splitName = name.split('@')
+				if(splitName.length > 1){
+					name = splitName.shift()
+					this.userIcon = false
+				}
+
+				return this.ucWords(name.substring(0, 16))
+			},
 		},
 		methods: {
 			menuClicked(){

client/src/components/NoteDeleteButtonComponent.vue

@@ -1,7 +1,7 @@
 <template>
 	<span>
 		<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right">
-			<i class="grey trash alternate icon"></i>
+			<i class="trash alternate icon"></i>
 		</span>
 		<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="top right" data-inverted="">
 			<i class="red trash alternate icon"></i>

client/src/components/NoteTitleDisplayCard.vue

@@ -62,11 +62,13 @@
 			<!-- Toolbar on the bottom  -->
 			<div class="tool-bar" @click.self="cardClicked">
 
-				<div class="icon-bar" @click="cardClicked">
+				<div class="icon-bar">
 					<!-- {{$helpers.timeAgo(note.updated)}}  -->
+					
 					<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 v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
 						<i class="green pin icon"></i>
 					</span>
@@ -74,7 +76,23 @@
 						<i class="green archive icon"></i>
 					</span>
 
-					<delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
+					<!-- :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" -->
+					<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
+
+<!-- 						<span class="teeny-button" data-tooltip="Archive" data-inverted>
+							<i class="archive icon"></i>
+						</span> -->
+
+						<i class="teeny-button" data-tooltip="Pin" data-inverted v-on:click="pinNote">
+							<i class="pin icon"></i>
+						</i>
+
+						<delete-button class="teeny-button"  :note-id="note.id" />
+
+					</span>
+
+					
+
 				</div>
 
 				<div v-if="getThumbs.length > 0">
@@ -92,6 +110,8 @@
 
 <script>
 
+	import axios from 'axios'
+
 	export default {
 	name: 'NoteTitleDisplayCard',
 		props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
@@ -123,6 +143,14 @@
 			openEditAttachment(){
 				this.$router.push('/attachments/note/'+this.note.id)
 			},
+			pinNote(){
+				let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
+				axios.post('/api/note/setpinned', postData)
+				.then(data => {
+					this.$bus.$emit('update_single_note', this.note.id)
+				})
+				
+			},
 		},
 		data () {
 			return {
@@ -190,6 +218,18 @@
 </script>
 <style type="text/css">
 
+	.teeny-button {
+		border: 1px solid var(--border_color);
+		border-radius: 5px;
+		padding: 0px 0px 0px 4px;
+		text-align: center;
+		margin: 0 0 0 5px;
+		display: inline-block;
+		min-width: 30px;
+		color: var(--text_color);
+		background-color: var(--background_color);
+	}
+
 	/*Strict font sizes for card display*/
 	.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
 		/*font-size: 1.0em !important;*/
@@ -198,10 +238,12 @@
 	.small-text > p, , .small-text > h1, .small-text > h2 {
 		margin-bottom: 0.5em;
 	}
-	.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
+	.big-text > p:first-child,
+	.big-text > h1, .big-text > h2 {
 		/*font-size: 1.3em !important;*/
 		font-size: 17px !important;
 		font-weight: bold;
+		margin-bottom: 0.5em;
 	}
 	.big-text > p, .big-text > h1, .big-text > h2 {
 		margin-bottom: 0.3em;
@@ -269,14 +311,15 @@
 		font-size: 0.7em;
 		padding: 5px 5px;
 		border: 1px solid var(--border_color);
-		margin: 5px 3px 0 0;
+		margin: 0 3px 5px 0;
 		border-radius: 3px;
 		white-space: nowrap;
-		max-width: 100px;
+		max-width: 175px;
 		overflow: hidden;
 		display: inline-block;
 		line-height: 0.8em;
 		text-overflow: ellipsis;
+		float: left;
 	}
 	.tiny-thumb-box {
 		max-height: 70px;

client/src/pages/NotesPage.vue

@@ -69,7 +69,7 @@
 			<div class="sixteen wide column">
 
 				<h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0">
-					No Notes Yet. Create one when you feel ready.
+					No Notes Yet. Thats ok. Create one when you feel ready.
 				</h3>
 
 				<!-- Go to one wide column, do not do this on mobile interface -->
@@ -205,7 +205,10 @@
 				if(modified){
 					this.updateSingleNote(noteId)
 				}
-				
+			})
+
+			this.$bus.$on('update_single_note', (noteId) => {
+				this.updateSingleNote(noteId)
 			})
 
 			this.$bus.$on('note_deleted', (noteId) => {
@@ -460,7 +463,7 @@
 
 								//Don't move notes that were not changed
 								if(note.updated == newNote.updated){
-									return
+									// return
 								}
 
 								//Compare note tags, if they changed, reload tags

server/models/Note.js

@@ -202,6 +202,21 @@ Note.update = (io, userId, noteId, noteText, color, pinned, archived) => {
 	})
 }
 
+Note.setPinned = (userId, noteId, pinnedBoolean) => {
+	return new Promise((resolve, reject) => {
+
+		const pinned = pinnedBoolean ? 1:0
+
+		//Update other note attributes
+		return db.promise()
+		.query('UPDATE note SET pinned = ? WHERE id = ? AND user_id = ? LIMIT 1', 
+		[pinned, noteId, userId])
+		.then((rows, fields) => {
+			resolve(true)
+		})
+	})
+}
+
 //
 // Delete a note and all its remaining parts
 //

server/routes/noteController.js

@@ -62,6 +62,16 @@ router.post('/difftext', function (req, res) {
 	})
 })
 
+//
+// Update single note attributes
+//
+router.post('/setpinned', function (req, res) {
+	Notes.setPinned(userId, req.body.noteId, req.body.pinned)
+	.then( results => {
+		res.send(results)
+	})
+})
+
 //
 // Share Note Actions
 //