From 473c89fee5a770608065e0e6c2dc1ce7f31636d8 Mon Sep 17 00:00:00 2001
From: profi248 <kostal.david8@gmail.com>
Date: Sat, 2 Jan 2021 15:10:42 +0100
Subject: [PATCH] transitions via Vue transitions + CSS variable

---
 src/styles/components/task.scss    |   4 +-
 src/styles/theme/variables.scss    |   1 +
 src/views/tasks/TaskDetailView.vue | 256 +++++++++++++++--------------
 3 files changed, 134 insertions(+), 127 deletions(-)

diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 628bb036e..eb22e00ff 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -255,8 +255,8 @@
   background-color: transparent;
 }
 
-.flash-background {
-  animation: flash-background 0.75s ease 1;
+.flash-background-enter, .flash-background-enter-active  {
+  animation: flash-background $flash-background-duration ease 1;
 }
 
 @keyframes flash-background {
diff --git a/src/styles/theme/variables.scss b/src/styles/theme/variables.scss
index b9dcf591d..efdc4df15 100644
--- a/src/styles/theme/variables.scss
+++ b/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;
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 528dd7fae..70eb47b8a 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -28,129 +28,145 @@
 								v-model="task.assignees"
 							/>
 						</div>
-						<div class="column" ref="priorityParent" v-if="activeFields.priority">
-							<!-- Priority -->
-							<div class="detail-title">
-								<icon :icon="['far', 'star']"/>
-								Priority
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.priority">
+								<!-- Priority -->
+								<div class="detail-title">
+									<icon :icon="['far', 'star']"/>
+									Priority
+								</div>
+								<priority-select
+									:disabled="!canWrite"
+									@change="saveTask"
+									ref="priority"
+									v-model="task.priority"/>
 							</div>
-							<priority-select
-								:disabled="!canWrite"
-								@change="saveTask"
-								ref="priority"
-								v-model="task.priority"/>
-						</div>
-						<div class="column" ref="dueDateParent" v-if="activeFields.dueDate">
-							<!-- Due Date -->
-							<div class="detail-title">
-								<icon icon="calendar"/>
-								Due Date
+						</transition>
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.dueDate">
+								<!-- Due Date -->
+								<div class="detail-title">
+									<icon icon="calendar"/>
+									Due Date
+								</div>
+								<div class="date-input">
+									<datepicker
+										v-model="task.dueDate"
+										@close-on-change="() => saveTask()"
+										choose-date-label="Click here to set a due date"
+										:disabled="taskService.loading || !canWrite"
+										ref="dueDate"
+										/>
+									<a @click="() => {task.dueDate = null;saveTask()}" v-if="task.dueDate && canWrite" class="remove">
+										<span class="icon is-small">
+											<icon icon="times"></icon>
+										</span>
+									</a>
+								</div>
 							</div>
-							<div class="date-input">
-								<datepicker
-									v-model="task.dueDate"
-									@close-on-change="() => saveTask()"
-									choose-date-label="Click here to set a due date"
-									:disabled="taskService.loading || !canWrite"
-									ref="dueDate"
+						</transition>
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.percentDone">
+								<!-- Percent Done -->
+								<div class="detail-title">
+									<icon icon="percent"/>
+									Percent Done
+								</div>
+								<percent-done-select
+									:disabled="!canWrite"
+									@change="saveTask"
+									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">
+									<icon icon="calendar-week"/>
+									Start Date
+								</div>
+								<div class="date-input">
+									<datepicker
+										v-model="task.startDate"
+										@close-on-change="() => saveTask()"
+										choose-date-label="Click here to set a start date"
+										:disabled="taskService.loading || !canWrite"
+										ref="startDate"
 									/>
-								<a @click="() => {task.dueDate = null;saveTask()}" v-if="task.dueDate && canWrite" class="remove">
-									<span class="icon is-small">
-										<icon icon="times"></icon>
-									</span>
-								</a>
+									<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite" class="remove">
+										<span class="icon is-small">
+											<icon icon="times"></icon>
+										</span>
+									</a>
+								</div>
 							</div>
-						</div>
-						<div class="column" ref="percentDoneParent" v-if="activeFields.percentDone">
-							<!-- Percent Done -->
-							<div class="detail-title">
-								<icon icon="percent"/>
-								Percent Done
+						</transition>
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.endDate">
+								<!-- End Date -->
+								<div class="detail-title">
+									<icon icon="calendar-week"/>
+									End Date
+								</div>
+								<div class="date-input">
+									<datepicker
+										v-model="task.endDate"
+										@close-on-change="() => saveTask()"
+										choose-date-label="Click here to set an end date"
+										:disabled="taskService.loading || !canWrite"
+										ref="endDate"
+									/>
+									<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite" class="remove">
+										<span class="icon is-small">
+											<icon icon="times"></icon>
+										</span>
+									</a>
+								</div>
 							</div>
-							<percent-done-select
-								:disabled="!canWrite"
-								@change="saveTask"
-								ref="percentDone"
-								v-model="task.percentDone"/>
-						</div>
-						<div class="column" ref="startDateParent" v-if="activeFields.startDate">
-							<!-- Start Date -->
-							<div class="detail-title">
-								<icon icon="calendar-week"/>
-								Start Date
+						</transition>
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.reminders">
+								<!-- Reminders -->
+								<div class="detail-title">
+									<icon icon="history"/>
+									Reminders
+								</div>
+								<reminders
+									:disabled="!canWrite"
+									@change="saveTask"
+									ref="reminders"
+									v-model="task.reminderDates"/>
 							</div>
-							<div class="date-input">
-								<datepicker
-									v-model="task.startDate"
-									@close-on-change="() => saveTask()"
-									choose-date-label="Click here to set a start date"
-									:disabled="taskService.loading || !canWrite"
-									ref="startDate"
-								/>
-								<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite" class="remove">
-									<span class="icon is-small">
-										<icon icon="times"></icon>
-									</span>
-								</a>
+						</transition>
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.repeatAfter">
+								<!-- Repeat after -->
+								<div class="detail-title">
+									<icon :icon="['far', 'clock']"/>
+									Repeat
+								</div>
+								<repeat-after
+									:disabled="!canWrite"
+									@change="saveTask"
+									ref="repeatAfter"
+									v-model="task"/>
 							</div>
-						</div>
-						<div class="column" ref="endDateParent" v-if="activeFields.endDate">
-							<!-- End Date -->
-							<div class="detail-title">
-								<icon icon="calendar-week"/>
-								End Date
+						</transition>
+						<transition name="flash-background" appear>
+							<div class="column" v-if="activeFields.color">
+								<!-- Color -->
+								<div class="detail-title">
+									<icon icon="fill-drip"/>
+									Color
+								</div>
+								<color-picker
+									@change="saveTask"
+									menu-position="bottom"
+									ref="color"
+									v-model="taskColor"/>
 							</div>
-							<div class="date-input">
-								<datepicker
-									v-model="task.endDate"
-									@close-on-change="() => saveTask()"
-									choose-date-label="Click here to set an end date"
-									:disabled="taskService.loading || !canWrite"
-									ref="endDate"
-								/>
-								<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite" class="remove">
-									<span class="icon is-small">
-										<icon icon="times"></icon>
-									</span>
-								</a>
-							</div>
-						</div>
-						<div class="column" ref="remindersParent" v-if="activeFields.reminders">
-							<!-- Reminders -->
-							<div class="detail-title">
-								<icon icon="history"/>
-								Reminders
-							</div>
-							<reminders
-								:disabled="!canWrite"
-								@change="saveTask"
-								ref="reminders"
-								v-model="task.reminderDates"/>
-						</div>
-						<div class="column" ref="repeatAfterParent" v-if="activeFields.repeatAfter">
-							<!-- Repeat after -->
-							<div class="detail-title">
-								<icon :icon="['far', 'clock']"/>
-								Repeat
-							</div>
-							<repeat-after
-								:disabled="!canWrite"
-								@change="saveTask"
-								ref="repeatAfter"
-								v-model="task"/>
-						</div>
-						<div class="column" ref="colorParent" v-if="activeFields.color">
-							<!-- Color -->
-							<div class="detail-title">
-								<icon icon="fill-drip"/>
-								Color
-							</div>
-							<color-picker
-								@change="saveTask"
-								menu-position="bottom"
-								ref="color"
-								v-model="taskColor"/>
-						</div>
+						</transition>
 					</div>
 
 					<!-- Labels -->
@@ -548,16 +564,6 @@ export default {
 				if (this.$refs[fieldName]) {
 					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();