Make adding fields to tasks more intuitive (#365)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/365
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: profi248 <kostal.david8@gmail.com>
Co-committed-by: profi248 <kostal.david8@gmail.com>

src/styles/components/task.scss

@@ -254,3 +254,16 @@
 .link-share-container .task-view {
   background-color: transparent;
 }
+
+.flash-background-enter, .flash-background-enter-active  {
+  animation: flash-background $flash-background-duration ease 1;
+}
+
+@keyframes flash-background {
+  0% {
+    background: lighten($primary, 30);
+  }
+  100% {
+    background: transparent;
+  }
+}

src/styles/theme/variables.scss

@@ -17,6 +17,7 @@ $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
 $light-background: #F1F5F8;
 $transition-duration: 100ms;
+$flash-background-duration: 750ms;
 $transparent-background-light: rgba($light-background, 0.9);
 
 $vikunja-font: 'Quicksand', sans-serif;

src/views/tasks/TaskDetailView.vue

@@ -28,6 +28,7 @@
 								v-model="task.assignees"
 							/>
 						</div>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.priority">
 								<!-- Priority -->
 								<div class="detail-title">
@@ -40,6 +41,8 @@
 									ref="priority"
 									v-model="task.priority"/>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.dueDate">
 								<!-- Due Date -->
 								<div class="detail-title">
@@ -61,6 +64,8 @@
 									</a>
 								</div>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.percentDone">
 								<!-- Percent Done -->
 								<div class="detail-title">
@@ -73,6 +78,8 @@
 									ref="percentDone"
 									v-model="task.percentDone"/>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.startDate">
 								<!-- Start Date -->
 								<div class="detail-title">
@@ -94,6 +101,8 @@
 									</a>
 								</div>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.endDate">
 								<!-- End Date -->
 								<div class="detail-title">
@@ -115,6 +124,8 @@
 									</a>
 								</div>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.reminders">
 								<!-- Reminders -->
 								<div class="detail-title">
@@ -127,6 +138,8 @@
 									ref="reminders"
 									v-model="task.reminderDates"/>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.repeatAfter">
 								<!-- Repeat after -->
 								<div class="detail-title">
@@ -139,6 +152,8 @@
 									ref="repeatAfter"
 									v-model="task"/>
 							</div>
+						</transition>
+						<transition name="flash-background" appear>
 							<div class="column" v-if="activeFields.color">
 								<!-- Color -->
 								<div class="detail-title">
@@ -151,6 +166,7 @@
 									ref="color"
 									v-model="taskColor"/>
 							</div>
+						</transition>
 					</div>
 
 					<!-- Labels -->
@@ -546,7 +562,13 @@ export default {
 			this.activeFields[fieldName] = true
 			this.$nextTick(() => {
 				if (this.$refs[fieldName]) {
-					this.$refs[fieldName].$el.focus()
+					this.$refs[fieldName].$el.focus();
+
+					// 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"});
 				}
 			})
 		},