From 6dfe753d389ca4d2fd754a42113f9af05f5f91e5 Mon Sep 17 00:00:00 2001
From: Max G <admin@internet.com>
Date: Sun, 29 Mar 2020 23:01:37 +0000
Subject: [PATCH] Small change to make user all note option menus fade in

---
 client/src/components/NoteInputPanel.vue      | 10 ++++-----
 .../src/components/SideSlideMenuComponent.vue | 22 ++++++++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue
index 8e5b4ad..1c0886a 100644
--- a/client/src/components/NoteInputPanel.vue
+++ b/client/src/components/NoteInputPanel.vue
@@ -191,7 +191,7 @@
 
 		<!-- Side slide menus for colors, tags, images and other options -->
 	
-		<side-slide-menu v-if="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
+		<side-slide-menu v-show="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
 			<color-picker
 				@changeColor="onChangeColor"
 				@close="onCloseColorChanger"
@@ -199,13 +199,13 @@
 			/>
 		</side-slide-menu>
 
-		<side-slide-menu v-if="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags" :style-object="styleObject">
+		<side-slide-menu v-show="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" :style-object="styleObject">
+		<side-slide-menu v-show="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images" :style-object="styleObject">
 			<div class="ui basic segment">
 				<simple-attachment-note
 					v-on:close="showFilesSideMenu = false"
@@ -215,7 +215,7 @@
 			</div>
 		</side-slide-menu>
 
-		<side-slide-menu v-if="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options" :style-object="styleObject">
+		<side-slide-menu v-show="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">
@@ -257,7 +257,7 @@
 			</div>
 		</side-slide-menu>
 
-		<side-slide-menu v-if="passwordEnterVisible" v-on:close="passwordEnterVisible = false" :fullShadow="true" name="encrypt note">
+		<side-slide-menu v-show="passwordEnterVisible" v-on:close="passwordEnterVisible = false" :fullShadow="true" name="encrypt note">
 			<div class="ui basic segment" v-if="isDecrypted && isEncrypted">
 				<p>Note Decrypted</p>
 				<div class="ui green button" v-on:click="lockNote">Lock Note</div>
diff --git a/client/src/components/SideSlideMenuComponent.vue b/client/src/components/SideSlideMenuComponent.vue
index 04d9c8f..f37f08a 100644
--- a/client/src/components/SideSlideMenuComponent.vue
+++ b/client/src/components/SideSlideMenuComponent.vue
@@ -64,20 +64,26 @@
 
 	}
 
-	.modal-fade-enter,
-	.modal-fade-leave-active {
-		opacity: 0;
-	}
 
-	.modal-fade-enter-active,
-	.modal-fade-leave-active {
-		transition: opacity .5s ease;
+	/*.fade-enter-active {*/
+		animation: fade-in .3s;
+	}
+	/*.fade-leave-active {*/
+		animation: fade-in .1s reverse;
+	}
+	@keyframes fade-in {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
 	}
 
 </style>
 
 <template>
-	<transition name="modal-fade">
+	<!-- <transition name="fade"> -->
 		<div>
 
 			<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">