From 631a19fa923dba2759603e6a8b224cb4d3e1a038 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 12 Nov 2022 17:06:53 +0100
Subject: [PATCH] feat: move transition in own component

---
 src/components/misc/CustomTransition.vue | 37 ++++++++++++
 src/styles/components/task.scss          | 13 -----
 src/views/tasks/TaskDetailView.vue       | 71 ++++++++++--------------
 3 files changed, 67 insertions(+), 54 deletions(-)
 create mode 100644 src/components/misc/CustomTransition.vue

diff --git a/src/components/misc/CustomTransition.vue b/src/components/misc/CustomTransition.vue
new file mode 100644
index 000000000..1bd48a6be
--- /dev/null
+++ b/src/components/misc/CustomTransition.vue
@@ -0,0 +1,37 @@
+<template>
+	<transition name="flash-background">
+		<slot  />
+	</transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	name: 'flash-background'
+}>()
+</script>
+
+<style scoped lang="scss">
+$flash-background-duration: 750ms;
+
+.flash-background-enter-from,
+.flash-background-enter-active {
+  animation: flash-background $flash-background-duration ease 1;
+}
+
+@keyframes flash-background {
+  0% {
+    background: var(--primary-light);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	@keyframes flash-background {
+		0% {
+			background: transparent;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 4a2b565e1..df2be197e 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -1,17 +1,4 @@
 // FIXME: should be in TaskDetailView.vue
 .link-share-container:not(.has-background) .task-view {
   background: transparent;
-}
-
-// FIXME: should be a prop of TaskDetailView.vue
-.modal-container .task-view {
-  border-radius: $radius;
-  padding: 1rem;
-  color: var(--text);
-  background-color: var(--site-background) !important;
-
-  @media screen and (max-width: 800px) {
-    border-radius: 0;
-    padding-top: 2rem;
-  }
 }
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 61f99266e..f0099c14f 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -41,7 +41,7 @@
 								v-model="task.assignees"
 							/>
 						</div>
-						<transition name="flash-background" appear>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.priority">
 								<!-- Priority -->
 								<div class="detail-title">
@@ -54,8 +54,8 @@
 									:ref="e => setFieldRef('priority', e)"
 									v-model="task.priority"/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.dueDate">
 								<!-- Due Date -->
 								<div class="detail-title">
@@ -80,8 +80,8 @@
 									</BaseButton>
 								</div>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.percentDone">
 								<!-- Progress -->
 								<div class="detail-title">
@@ -94,8 +94,8 @@
 									:ref="e => setFieldRef('percentDone', e)"
 									v-model="task.percentDone"/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.startDate">
 								<!-- Start Date -->
 								<div class="detail-title">
@@ -121,8 +121,8 @@
 									</BaseButton>
 								</div>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.endDate">
 								<!-- End Date -->
 								<div class="detail-title">
@@ -147,8 +147,8 @@
 									</BaseButton>
 								</div>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.reminders">
 								<!-- Reminders -->
 								<div class="detail-title">
@@ -162,8 +162,8 @@
 									@update:model-value="saveTask"
 								/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.repeatAfter">
 								<!-- Repeat after -->
 								<div class="is-flex is-justify-content-space-between">
@@ -190,8 +190,8 @@
 									}"
 								/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.color">
 								<!-- Color -->
 								<div class="detail-title">
@@ -205,7 +205,7 @@
 									@update:model-value="saveTask"
 								/>
 							</div>
-						</transition>
+						</CustomTransition>
 					</div>
 
 					<!-- Labels -->
@@ -480,6 +480,7 @@ import RelatedTasks from '@/components/tasks/partials/relatedTasks.vue'
 import Reminders from '@/components/tasks/partials/reminders.vue'
 import RepeatAfter from '@/components/tasks/partials/repeatAfter.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import {uploadFile} from '@/helpers/attachments'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
@@ -798,8 +799,6 @@ async function setPercentDone(percentDone: number) {
 </script>
 
 <style lang="scss" scoped>
-$flash-background-duration: 750ms;
-
 .task-view-container {
 	// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
 	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
@@ -820,6 +819,18 @@ $flash-background-duration: 750ms;
   }
 }
 
+.is-modal .task-view {
+  border-radius: $radius;
+  padding: 1rem;
+  color: var(--text);
+  background-color: var(--site-background) !important;
+
+  @media screen and (max-width: 800px) {
+    border-radius: 0;
+    padding-top: 2rem;
+  }
+}
+
 .task-view * {
 	transition: opacity 50ms ease;
 }
@@ -996,33 +1007,11 @@ line-height: 1;
 	padding-left: .25rem;
 }
 
-.flash-background-enter-from,
-.flash-background-enter-active {
-  animation: flash-background $flash-background-duration ease 1;
-}
-
-@keyframes flash-background {
-  0% {
-    background: var(--primary-light);
-  }
-  100% {
-    background: transparent;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-	@keyframes flash-background {
-		0% {
-			background: transparent;
-		}
-	}
-}
-
 @include modal-transition();
 
 .detail-content {
   @media print {
-	width: 100% !important;
+		width: 100% !important;
   }
 }
 </style>
\ No newline at end of file