* Tags can now be toggled by clicking

* Side slide component now respects note colors

client/src/components/NoteInputPanel.vue

@@ -118,13 +118,13 @@
 			/>
 		</side-slide-menu>
 
-		<side-slide-menu v-if="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags">
+		<side-slide-menu v-if="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags" :style-object="styleObject">
 			<div class="ui basic segment">
 				<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
 			</div>
 		</side-slide-menu>
 
-		<side-slide-menu v-if="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images">
+		<side-slide-menu v-if="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images" :style-object="styleObject">
 			<div class="ui basic segment">
 				<simple-attachment-note
 					v-on:close="showFilesSideMenu = false"
@@ -134,7 +134,7 @@
 			</div>
 		</side-slide-menu>
 
-		<side-slide-menu v-if="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options">
+		<side-slide-menu v-if="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options" :style-object="styleObject">
 			<div class="ui basic padded segment">
 				<div class="ui grid">
 					<div class="sixteen wide column">

client/src/components/NoteTagEdit.vue

@@ -13,7 +13,7 @@
 				<div class="sixteen wide column">
 					<h3>All Tags</h3>
 					<div v-if="allTags.length > 0">
-						<div class="ui icon large label" v-for="tag in allTags" :class="{ 'green':isTagOnNote(tag.id) }">
+						<div class="ui icon large label clickable" v-for="tag in allTags" :class="{ 'green':isTagOnNote(tag.id) }" v-on:click="toggleTag(tag.text, tag.id, tag.entryId)">
 							 {{ ucWords(tag.text) }}
 						</div>
 					</div>
@@ -42,7 +42,7 @@
 					v-on:focus="onFocus"
 				/>
 				<div class="suggestion-box" v-if="suggestions.length > 0">
-					<div class="suggestion-item" v-for="(item, index) in suggestions" :class="{ 'active':(index == selection) }" v-on:click="onClickTag(index)">
+					<div class="suggestion-item" v-for="(item, index) in suggestions" :class="{ 'active':(index == selection) }" v-on:click="onSuggestionClick(index)">
 						{{ucWords(item.text)}} <span class="suggestion-tip" v-if="index == selection">Press Enter to add</span>
 					</div>
 				</div>
@@ -98,6 +98,7 @@
 						return true
 					}
 				}
+				return false
 			},
 			getTagTextById(id){
 				let tag = this.getTagById(id)
@@ -171,9 +172,38 @@
 					}
 				}, 300)
 			},
-			onClickTag(index){
+			onSuggestionClick(index){
 				this.newTagInput = this.suggestions[index].text
 				this.addTag()
+			},
+			toggleTag(tagText, id){
+
+				//remove tag
+				if(this.isTagOnNote(id)){
+
+					//Find database ID for tag					
+					let entryId = null
+					this.noteTagIds.forEach(tag => {
+						if(tag.tagId == id){
+							entryId = tag.entryId
+							return
+						}
+					})
+
+					//Submit database entry to be removed
+					if(entryId){
+						this.removeTag(entryId)
+					}
+					return
+				}
+
+				//Add Tag
+				this.newTagInput = tagText
+				this.addTag()
+				return
+				
+
+				
 			},
 			addTag(){
 
@@ -228,6 +258,8 @@
 			},
 			removeTag(tagId){
 
+				console.log(tagId)
+
 				let postData = {
 					'tagId':tagId,
 					'noteId':this.noteId
@@ -255,9 +287,6 @@
 
 	/* note tag edit area */
 	.full-tag-area {
-		
-		color: var(--text_color);
-		background-color: var(--background_color);
 		/*padding: 15px;*/
 		/*border: 1px solid;*/
 		border-color: var(--border_color);

client/src/components/SideSlideMenuComponent.vue

@@ -8,13 +8,16 @@
 		z-index: 400;
 		overflow: hidden;
 		height: 100%;
+
+		color: var(--text_color);
+		background-color: var(--background_color);
 	}
 	.slide-content {
 		box-sizing: border-box;
 		/*padding: 1em 1.5em;*/
 		height: calc(100% - 43px);
 		border-right: 1px solid var(--menu-border);
-		background-color: var(--background_color);
+		/*background-color: var(--background_color);*/
 		overflow-x: scroll;
 	}
 	.slide-shadow {
@@ -71,7 +74,7 @@
 	<transition name="modal-fade">
 		<div>
 
-			<div class="slide-container">
+			<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
 
 				<!-- content of the editor  -->
 				<div class="slide-content">
@@ -94,13 +97,15 @@
 <script>
 	export default {
 		name: 'SideSlideMenu',
-		props: [ 'name' ],
+		props: [ 'name', 'styleObject' ],
 		components: {
 			'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
 		},
 		data () {
 			return {
-				items: []
+				items: [],
+				bgColor: null,
+				textColor: null,
 			}
 		},
 		beforeMount(){
@@ -116,6 +121,17 @@
 		},
 		mounted(){
 
+			//If note style object is set, use that on the slide menu
+			if(this.styleObject && this.styleObject.noteText){
+				this.textColor = this.styleObject.noteText
+			}
+
+			if(this.styleObject && this.styleObject.noteBackground){
+				this.bgColor = this.styleObject.noteBackground
+				console.log(this.bgColor)
+			}
+
+			
 			//Close all other panels that are not this one
 			this.$nextTick( () => {
 				this.$bus.$emit('destroy_all_other_side_panels', this.name)