From aa4de83de602784c06759108b1dd59454e94947d Mon Sep 17 00:00:00 2001
From: Max G <admin@internet.com>
Date: Mon, 30 Mar 2020 05:31:09 +0000
Subject: [PATCH] * More aggressive dark theme styles, changing default icon
 colors and notification colors * Better sortig of archived notes which
 clicking archived * Scroll to closed note and show animation on save * Better
 notification styles, more obvious

---
 client/src/assets/semantic-helper.css         | 16 ++--
 .../GlobalNotificationComponent.vue           | 44 ++++++++--
 client/src/components/NoteInputPanel.vue      |  4 +-
 .../src/components/NoteTitleDisplayCard.vue   | 82 ++++++++++++++++++-
 client/src/pages/NotesPage.vue                | 17 +++-
 5 files changed, 145 insertions(+), 18 deletions(-)

diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css
index c127384..763b895 100644
--- a/client/src/assets/semantic-helper.css
+++ b/client/src/assets/semantic-helper.css
@@ -37,11 +37,17 @@ div.ui.basic.segment.no-fluf-segment {
 
 /* Night mode modifiers */
 
-/*Make images sepia in night mode */
-.night-mode img {
-	filter: grayscale(50%) brightness(80%) sepia(80%);
-
-}
+	/*Make images sepia in night mode */
+	.night-mode img {
+		filter: grayscale(50%) brightness(80%) sepia(80%);
+	}
+	.night-mode i.green {
+		color: #877A61 !important;
+	}
+	.night-mode .green.label {
+		background-color: #877A61 !important;
+		border-color: #877A61 !important;
+	}
 
 /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
 body {
diff --git a/client/src/components/GlobalNotificationComponent.vue b/client/src/components/GlobalNotificationComponent.vue
index b63d22e..53e9880 100644
--- a/client/src/components/GlobalNotificationComponent.vue
+++ b/client/src/components/GlobalNotificationComponent.vue
@@ -3,18 +3,16 @@
 	.popup-body {
 		position: fixed;
 		bottom: 15px;
-		right: 15px;
+		left: 15px;
 		min-height: 50px;
 		min-width: 200px;
 		max-width: calc(100% - 20px);
 		z-index: 1002;
+
 		border-top: 2px solid #21ba45;
 		box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
 		border-top-right-radius: 4px;
 		border-top-left-radius: 4px;
-
-		color: white;
-		background-color: #21ba45;
 	}
 	.popup-row {
 		padding: 1em 5px;
@@ -33,11 +31,45 @@
 		border-top: 1px solid #FFF;
 	}
 
+	.slide-in-bottom {
+		animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	}
+	@keyframes slide-in-bottom {
+		0% {
+			transform: translateY(1000px);
+			opacity: 0;
+		}
+		100% {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	.color-fade {
+		animation: color-fade-animation 0.7s ease-out both;
+	}
+	@keyframes color-fade-animation {
+		0% {
+			color: black;
+			background-color: black;
+		}
+		50% {
+			color: black;
+			background-color: black;
+		}
+		100% {
+			color: white;
+			background-color: #21ba45;
+		}
+	}
+
+
+
 </style>
 
 <template>
-	<div class="popup-body" v-on:click="dismiss" v-if="notifications.length > 0">
-		<div class="popup-row" v-for="item in notifications">
+	<div class="popup-body slide-in-bottom" v-on:click="dismiss" v-if="notifications.length > 0">
+		<div class="popup-row color-fade" v-for="item in notifications">
 			<i class="disabled angle left icon"></i>
 			<span>{{ item }}</span>
 			<i class="disabled angle right icon"></i>
diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue
index 1c0886a..f94f17d 100644
--- a/client/src/components/NoteInputPanel.vue
+++ b/client/src/components/NoteInputPanel.vue
@@ -424,11 +424,11 @@
 
 			this.$io.emit('leave_room', this.rawTextId)
 
+			this.$bus.$off('new_file_upload')
+
 			document.removeEventListener('visibilitychange', this.checkForUpdatedNote)
 
 			this.editor.destroy()
-
-			this.$bus.$off('new_file_upload')
 			
 		},
 		mounted: function() {
diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue
index a3d601d..bb89e4e 100644
--- a/client/src/components/NoteTitleDisplayCard.vue
+++ b/client/src/components/NoteTitleDisplayCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="note-title-display-card" 
 		:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
-		:class="{'currently-open':currentlyOpen}"
+		:class="{'currently-open':currentlyOpen, 'bgboy':triggerClosedAnimation}"
 	>
 
 
@@ -164,17 +164,25 @@
 			openEditAttachment(){
 				this.$router.push('/attachments/note/'+this.note.id)
 			},
-			pinNote(){
+			pinNote(){ //togglePinned() <- old name
 				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)
 				})
 			},
-			archiveNote(){
+			archiveNote(){ //toggleArchived() <- old name
 				let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
 				axios.post('/api/note/setarchived', postData)
 				.then(data => {
+
+					//Show message so no one worries where note went
+					let message = 'Moved to Archive'
+					if(postData.archived != 1){
+						message = 'Move to main list'
+					}
+					this.$bus.$emit('notification', message)
+
 					this.$bus.$emit('update_single_note', this.note.id)
 				})
 			},
@@ -187,6 +195,27 @@
 				}
 				
 			},
+			justClosed(){
+
+				//Scroll note into view
+				this.$el.scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'center'
+				})
+
+				//After scroll, trigger green outline animation
+				setTimeout(() => {
+
+					this.triggerClosedAnimation = true
+					setTimeout(()=>{
+						//After 3 seconds, hide it
+						this.justClosed = false
+					}, 3000)
+
+				}, 500)
+				
+			},
 		},
 		data () {
 			return {
@@ -197,6 +226,7 @@
 				iconColor: null,
 				beenClicked: false,
 				showTagSlideMenu: false,
+				triggerClosedAnimation: false, //Show just closed animation
 			}
 		},
 		computed: {
@@ -444,4 +474,50 @@
 			margin: 0px -5px 10px -5px;
 		}
 	}
+
+	/*Animations for cool border effects*/
+	@keyframes bgin {
+    	0% {
+		    background-image:   
+		    linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
+            linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
+            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 2px, 2px 0, 0 2px, 2px 0;
+	    }
+	    15% {
+	    	/*Middre state, some filled */
+	        background-size: 100% 2px, 2px 0, 100% 2px, 2px 0;
+	    }
+	    30% {
+	    	/*final state, all filled */
+	        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
+	    }
+	    45% {
+	    	background-size: 100% 2px, 2px 100%, 100% 2px, 2px 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 */
+            linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
+            linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
+	    }
+	    100% {
+    	    background-image:
+    	    linear-gradient(to right, transparent 50%, transparent 100%), /* TopLeft to Right */
+            linear-gradient(to bottom, transparent 50%, transparent 100%), /* TopRight to Bottom */
+            linear-gradient(to right, transparent 50%, transparent 100%), /* BottomLeft to Right*/
+            linear-gradient(to bottom, transparent 50%, transparent 100%); /* TopLeft to Bottom */
+	    }
+	}
+
+.bgboy {
+
+	overflow: hidden;
+    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 2s cubic-bezier(0.19, 1, 0.22, 1) 1;
+}
+
 </style>
\ No newline at end of file
diff --git a/client/src/pages/NotesPage.vue b/client/src/pages/NotesPage.vue
index 5ebb7a2..8f0c5da 100644
--- a/client/src/pages/NotesPage.vue
+++ b/client/src/pages/NotesPage.vue
@@ -91,6 +91,7 @@
 						<div class="note-card-display-area">
 							<note-title-display-card 
 								v-for="note in section"
+								:ref="'note-'+note.id"
 								:onClick="openNote"
 								:data="note"
 								:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
@@ -451,6 +452,8 @@
 					}
 				}
 
+				
+
 				axios.post('/api/note/search', postData)
 				.then(results => {
 
@@ -489,6 +492,13 @@
 								this.noteSections[key].splice(index, 1)
 								this.noteSections[key].unshift(note)
 
+								this.$nextTick( () => {
+
+									if(this.$refs['note-'+noteId] && this.$refs['note-'+noteId][0]){
+										this.$refs['note-'+noteId][0].justClosed()
+									}
+								})
+
 								return
 							}
 						})
@@ -589,6 +599,7 @@
 				//Sort notes into defined sections
 				notes.forEach(note => {
 
+					//Show archived notes
 					if(note.archived == 1 && this.fastFilters.onlyArchived == 1){
 						this.noteSections.archived.push(note)
 						return
@@ -615,8 +626,10 @@
 						this.noteSections.pinned.push(note)
 						return
 					}
-
-					this.noteSections.notes.push(note)
+					//If the note is not archived, push it.
+					if(note.archived != 1 && this.fastFilters.onlyArchived != 1){
+						this.noteSections.notes.push(note)
+					}
 				})
 
 			},