client/src/components/NoteInputPanel.vue

@@ -3,7 +3,7 @@
 	<div 
 		id="InputNotes" 
 		class="master-note-edit" 
-		@keyup.esc="close()" 
+		@keyup.esc="close" 
 		:class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) },  'position-'+position ]" 
 		:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
 	>
@@ -19,7 +19,7 @@
 
 		<div class="note-menu">
 
-			<nm-button tip="Close" bottom-tip="true" v-on:click.native="close()" icon="close" />
+			<nm-button tip="Close" bottom-tip="true" v-on:click.native="close" icon="close" />
 
 			<nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
 			
@@ -35,7 +35,7 @@
 
 			<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" />
+			<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" />
 
@@ -151,9 +151,9 @@
 
 			<div class="note-menu shrink-icons-on-mobile">
 
-				<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" text="Check" />
+				<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" />
 
-				<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" text="List"/>
+				<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" />
 	
 				<!-- colors button -->
 				<nm-button

client/src/components/NoteTitleDisplayCard.vue

@@ -514,18 +514,18 @@
             linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
             linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
             /*Initial state, no BG*/
-	        background-size: 0 4px, 4px 0, 0 4px, 4px 0;
+	        background-size: 0 3px, 3px 0, 0 3px, 3px 0;
 	    }
-	    10% {
+	    15% {
 	    	/*Middre state, some filled */
-	        background-size: 100% 4px, 4px 0, 100% 4px, 4px 0;
+	        background-size: 100% 3px, 3px 0, 100% 3px, 3px 0;
-	    }
-	    20% {
-	    	/*final state, all filled */
-	        background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
 	    }
 	    30% {
-	    	background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
+	    	/*final state, all filled */
+	        background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
+	    }
+	    45% {
+	    	background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
 	    	background-image:   
 		    linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
             linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
@@ -547,7 +547,7 @@
     background-repeat: no-repeat;
     background-size:    100% 0, 0 100%, 100% 0, 0 100%;
     background-position: 0 0, 100% 0, 100% 100%, 0 100%;
-    animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
+    animation: bgin 2s cubic-bezier(0.19, 1, 0.22, 1) 1;
 }
 
 </style>

client/src/components/TagDisplayComponent.vue

@@ -1,109 +0,0 @@
-<template>
-	<div class="ui basic button shrinking">
-
-
-		<!-- Dropdown Button -->
-		<span v-if="activeTags.length == 0" v-on:click="menuOpen = true">
-			<i class="green tags icon"></i>
-			Tags
-			<i class="caret down icon"></i>
-		</span>
-		<!-- Remove Tag button -->
-		<span v-if="activeTags.length > 0" v-on:click="toggleActive()">
-			<i class="green tag icon"></i>
-			{{ getActiveTag() }}
-			<i class="caret right icon"></i>
-		</span>
-
-		<!-- hidden dropdown menu -->
-		<div class="dropdown-menu" v-if="menuOpen">
-			<div class="ui raised segment">
-					<div class="ui clickable basic label" v-for="tag in tags">
-						<span v-on:click="onClick(tag.id)">
-								{{ ucWords(tag.text) }}
-								<span class="detail">{{tag.usages}}</span>
-							
-						</span>
-					</div>
-			</div>
-		</div>
-
-		<div class="shade" v-if="menuOpen" v-on:click="menuOpen = false"></div>
-		
-	</div>
-</template>
-
-<script>
-
-	export default {
-	name: 'TagDisplay',
-		props: [ 'tags', 'activeTags' ],
-		components: {
-		},
-		methods:{
-			toggleActive(){
-				this.menuOpen = false
-				const current = this.activeTags[0]
-				this.onClick( current )
-			},
-			onClick(tagId){
-				this.menuOpen = false
-				this.$emit('tagClick', tagId)
-			},
-			ucWords(str){
-				return (str + '')
-				.replace(/^(.)|\s+(.)/g, function ($1) {
-					return $1.toUpperCase()
-				})
-			},
-			getActiveTag(){
-				let text = 'Tags'
-
-				if(this.activeTags.length == 0){
-					return text
-				}
-
-				this.tags.forEach(tag => {
-					if( this.activeTags.includes(tag.id) ){
-						text = this.ucWords(tag.text)
-					}
-				})
-
-				return text
-			},
-		},
-		data () {
-			return {
-				menuOpen: false,
-			}
-		},
-		beforeMount(){
-
-		}
-	}
-</script>
-<style type="text/css">
-	.dropdown-menu {
-		position: absolute;
-		/*width: 70vw;*/
-		z-index: 1005;
-		left: 0;
-		right: 0;
-		max-width: 600px;
-		text-align: left;
-	}
-	.dropdown-menu .label {
-		margin: 0 5px 5px 0;
-	}
-	.shade {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 1004;
-		background-color: transparent;
-		width: 100vw;
-		height: 100vh;
-	}
-</style>

client/src/components/TextColorTooltipComponent.vue

@@ -4,11 +4,11 @@
 		z-index: 1005;
 		top: 42px;
 		/*height: 100px;*/
-		/*width: 415px;*/
+		width: 415px;
 		left: 0;
 	}
 	.colors-container {
-		max-width: 370px;
+		max-width: 400px;
 	}
 	.dot {
 		display: inline-block;
@@ -29,10 +29,12 @@
 		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;

client/src/pages/NotesPage.vue

@@ -29,13 +29,6 @@
 							<i class="green lock alternate icon"></i>Locked
 							<!-- <span>{{ $store.getters.totals['encryptedNotes'] }}</span> -->
 						</div>
-
-						<tag-display 
-							v-if="commonTags.length > 0" 
-							:tags="commonTags" 
-							:active-tags="searchTags"
-							v-on:tagClick="tagId => toggleTagFilter(tagId)"
-						/>
 						
 					</div>
 
@@ -65,6 +58,16 @@
 			<h2 v-if="fastFilters['onlyShowSharedNotes'] == 1">Shared Notes</h2>
 			<h2 v-if="fastFilters['onlyShowEncrypted'] == 1">Password Protected Notes</h2>
 
+			<!-- tags section  -->
+			<div v-if="commonTags.length > 0" class="sixteen wide column">
+				<h4 class="ui tiny dividing header"><i class="green tags icon"></i>Tags</h4>
+				<span v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
+					<span class="ui clickable basic label" :class="{ 'green':(searchTags.includes(tag.id)) }">
+					{{ucWords(tag.text)}} <span class="detail">{{tag.usages}}</span>
+					</span>
+				</span>
+			</div>
+
 			<!-- Note title card display  -->
 			<div class="sixteen wide column">
 
@@ -141,8 +144,7 @@
 			'fast-filters': require('@/components/FastFilters.vue').default,
 			'search-input': require('@/components/SearchInput.vue').default,
 			'attachment-display': require('@/components/AttachmentDisplayCard').default,
-			'counter':require('@/components/AnimatedCounterComponent.vue').default,
+			'counter':require('@/components/AnimatedCounterComponent.vue').default
-			'tag-display':require('@/components/TagDisplayComponent.vue').default,
 		},
 		data () {
 			return {
@@ -215,11 +217,10 @@
 			this.$store.dispatch('fetchAndUpdateUserTotals')
 
 			this.$bus.$on('close_active_note', ({position, noteId, modified}) => {
-
 				this.closeNote(position)
 				this.$store.dispatch('fetchAndUpdateUserTotals')
 				if(modified){
-					this.updateSingleNote(parseInt(noteId))
+					this.updateSingleNote(noteId)
 				}
 			})
 
@@ -661,6 +662,12 @@
 				})
 
 			},
+			ucWords(str){
+				return (str + '')
+				.replace(/^(.)|\s+(.)/g, function ($1) {
+					return $1.toUpperCase()
+				})
+			},
 			reset(){
 				this.showClear = false
 				this.searchTerm = ''