From 16b0d0360159aed24cae41fabc4a88a37e9d9711 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 8 Nov 2021 15:46:39 +0100
Subject: [PATCH] fix: readd modal transitions

---
 src/components/home/contentAuth.vue            |  2 ++
 src/components/modal/modal.vue                 | 15 +--------------
 src/components/sharing/linkSharing.vue         |  2 ++
 src/components/sharing/userTeam.vue            |  4 ++++
 src/components/tasks/partials/attachments.vue  |  2 ++
 src/components/tasks/partials/comments.vue     |  2 ++
 src/components/tasks/partials/relatedTasks.vue |  2 ++
 src/styles/common-imports.scss                 |  2 ++
 src/styles/mixins.scss                         | 12 ++++++++++++
 src/views/list/views/Kanban.vue                |  2 ++
 src/views/tasks/TaskDetailView.vue             |  2 ++
 src/views/teams/EditTeam.vue                   |  2 ++
 12 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 src/styles/mixins.scss

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index f85b7ca78..bc36bc7ff 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -248,4 +248,6 @@ store.dispatch('labels/loadAllLabels')
 		display: none;
 	}
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index d218b8017..b7bb4083f 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- FIXME: transition should not be included in the modal -->
 	<transition name="modal">
 		<section
 			v-if="enabled"
@@ -196,18 +197,4 @@ export default {
 		}
 	}
 }
-
-
-
-/* Transitions */
-
-.modal-enter,
-.modal-leave-active {
-  opacity: 0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  transform: scale(0.9);
-}
 </style>
\ No newline at end of file
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index d07577ded..99da29b98 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -264,4 +264,6 @@ export default {
 .sharables-list:not(.card-content) {
   overflow-y: auto
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index 007cfaa68..7b7debddc 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -365,3 +365,7 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+@include modal-transition();
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index a01a62014..db469869a 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -382,4 +382,6 @@ export default {
     transform: translate3d(0, -4px, 0);
   }
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index d5db45c33..6565960cc 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -339,4 +339,6 @@ export default {
 .media-content {
 	width: calc(100% - 48px - 2rem);
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 0b2be060b..c22bfc43a 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -364,4 +364,6 @@ export default {
 :deep(.multiselect .search-results button) {
 	padding: 0.5rem;
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/styles/common-imports.scss b/src/styles/common-imports.scss
index 5ca35fc42..a9e163e3a 100644
--- a/src/styles/common-imports.scss
+++ b/src/styles/common-imports.scss
@@ -16,6 +16,8 @@
 // since $tablet is defined by bulma we can just define it after importing the utilities
 $mobile: math.div($tablet, 2);
 
+@import "mixins";
+
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $vikunja-font: 'Quicksand', sans-serif;
 
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 000000000..687355e73
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,12 @@
+/* Transitions */
+@mixin modal-transition() {
+	.modal-enter,
+	.modal-leave-active {
+		opacity: 0;
+	}
+
+	.modal-enter .modal-container,
+	.modal-leave-active .modal-container {
+		transform: scale(0.9);
+	}
+}
\ No newline at end of file
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 59687fb70..587cb985d 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -740,4 +740,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 .move-card-leave-active {
 	display: none;
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 6336a1a7c..07443d9ec 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -932,4 +932,6 @@ $flash-background-duration: 750ms;
     background: transparent;
   }
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 059530e8e..31c690f90 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -308,4 +308,6 @@ export default {
     padding: 0;
   }
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file