From 0a5c0869cf80e66f0791c4951d25e2df02da9cce Mon Sep 17 00:00:00 2001
From: profi248 <kostal.david8@gmail.com>
Date: Sat, 2 Jan 2021 13:34:42 +0100
Subject: [PATCH] Make adding fields to tasks more intuitive

- briefly flash the background of (most) fields that have just been added
- scroll the newly added field into viewport if not visible already
---
 src/styles/components/task.scss    | 13 ++++++++++++
 src/views/tasks/TaskDetailView.vue | 34 ++++++++++++++++++++++--------
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 2ece6e716..628bb036e 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -254,3 +254,16 @@
 .link-share-container .task-view {
   background-color: transparent;
 }
+
+.flash-background {
+  animation: flash-background 0.75s ease 1;
+}
+
+@keyframes flash-background {
+  0% {
+    background: lighten($primary, 30);
+  }
+  100% {
+    background: transparent;
+  }
+}
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index b97ce3cee..528dd7fae 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -28,7 +28,7 @@
 								v-model="task.assignees"
 							/>
 						</div>
-						<div class="column" v-if="activeFields.priority">
+						<div class="column" ref="priorityParent" v-if="activeFields.priority">
 							<!-- Priority -->
 							<div class="detail-title">
 								<icon :icon="['far', 'star']"/>
@@ -40,7 +40,7 @@
 								ref="priority"
 								v-model="task.priority"/>
 						</div>
-						<div class="column" v-if="activeFields.dueDate">
+						<div class="column" ref="dueDateParent" v-if="activeFields.dueDate">
 							<!-- Due Date -->
 							<div class="detail-title">
 								<icon icon="calendar"/>
@@ -61,7 +61,7 @@
 								</a>
 							</div>
 						</div>
-						<div class="column" v-if="activeFields.percentDone">
+						<div class="column" ref="percentDoneParent" v-if="activeFields.percentDone">
 							<!-- Percent Done -->
 							<div class="detail-title">
 								<icon icon="percent"/>
@@ -73,7 +73,7 @@
 								ref="percentDone"
 								v-model="task.percentDone"/>
 						</div>
-						<div class="column" v-if="activeFields.startDate">
+						<div class="column" ref="startDateParent" v-if="activeFields.startDate">
 							<!-- Start Date -->
 							<div class="detail-title">
 								<icon icon="calendar-week"/>
@@ -94,7 +94,7 @@
 								</a>
 							</div>
 						</div>
-						<div class="column" v-if="activeFields.endDate">
+						<div class="column" ref="endDateParent" v-if="activeFields.endDate">
 							<!-- End Date -->
 							<div class="detail-title">
 								<icon icon="calendar-week"/>
@@ -115,7 +115,7 @@
 								</a>
 							</div>
 						</div>
-						<div class="column" v-if="activeFields.reminders">
+						<div class="column" ref="remindersParent" v-if="activeFields.reminders">
 							<!-- Reminders -->
 							<div class="detail-title">
 								<icon icon="history"/>
@@ -127,7 +127,7 @@
 								ref="reminders"
 								v-model="task.reminderDates"/>
 						</div>
-						<div class="column" v-if="activeFields.repeatAfter">
+						<div class="column" ref="repeatAfterParent" v-if="activeFields.repeatAfter">
 							<!-- Repeat after -->
 							<div class="detail-title">
 								<icon :icon="['far', 'clock']"/>
@@ -139,7 +139,7 @@
 								ref="repeatAfter"
 								v-model="task"/>
 						</div>
-						<div class="column" v-if="activeFields.color">
+						<div class="column" ref="colorParent" v-if="activeFields.color">
 							<!-- Color -->
 							<div class="detail-title">
 								<icon icon="fill-drip"/>
@@ -546,7 +546,23 @@ export default {
 			this.activeFields[fieldName] = true
 			this.$nextTick(() => {
 				if (this.$refs[fieldName]) {
-					this.$refs[fieldName].$el.focus()
+					this.$refs[fieldName].$el.focus();
+
+					// animate background flash with CSS animations (if the field's parent has a ref)
+					if (typeof this.$refs[fieldName + "Parent"] !== 'undefined')
+						this.$refs[fieldName + "Parent"].classList.add('flash-background');
+
+					// remove animation class after animation finishes
+					setTimeout(() => {
+						if (typeof this.$refs[fieldName + "Parent"] !== 'undefined')
+							this.$refs[fieldName + "Parent"].classList.remove('flash-background');
+					}, 750);
+
+					// scroll the field to the center of the screen if not in viewport already
+					const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect();
+
+					if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
+						this.$refs[fieldName].$el.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
 				}
 			})
 		},