From 38440e229b1b4ce0bc19fe7c7c65eef1bb102e6d Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:13:05 -0400
Subject: [PATCH] Add right placement transition for dialog

---
 .../transition/dialog/transition-dialog.vue   | 42 ++++++++++++-------
 app/src/components/v-dialog/v-dialog.vue      | 38 ++++++++++++-----
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/app/src/components/transition/dialog/transition-dialog.vue b/app/src/components/transition/dialog/transition-dialog.vue
index 74e1e393fc..451d0ed13b 100644
--- a/app/src/components/transition/dialog/transition-dialog.vue
+++ b/app/src/components/transition/dialog/transition-dialog.vue
@@ -6,23 +6,33 @@
 
 <style lang="scss">
 /** @NOTE this is not scoped on purpose. The children are outside of the tree (portal) */
-// .dialog-enter-active,
-// .dialog-leave-active {
-// 	transition: opacity var(--slow) var(--transition);
+.dialog-enter-active,
+.dialog-leave-active {
+	transition: opacity var(--slow) var(--transition);
 
-// 	& > *:not(.v-overlay) {
-// 		transform: translateY(0px);
-// 		transition: transform var(--slow) var(--transition-in);
-// 	}
-// }
+	&.center > *:not(.v-overlay) {
+		transform: translateY(0px);
+		transition: transform var(--slow) var(--transition-in);
+	}
 
-// .dialog-enter,
-// .dialog-leave-to {
-// 	opacity: 0;
+	&.right > *:not(.v-overlay) {
+		transform: translateX(0px);
+		transition: transform var(--slow) var(--transition-in);
+	}
+}
 
-// 	& > *:not(.v-overlay) {
-// 		transform: translateY(50px);
-// 		transition: transform var(--slow) var(--transition-out);
-// 	}
-// }
+.dialog-enter,
+.dialog-leave-to {
+	opacity: 0;
+
+	&.center > *:not(.v-overlay) {
+		transform: translateY(50px);
+		transition: transform var(--slow) var(--transition-out);
+	}
+
+	&.right > *:not(.v-overlay) {
+		transform: translateX(50px);
+		transition: transform var(--slow) var(--transition-out);
+	}
+}
 </style>
diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 3fe4cf11d6..a411cd4d69 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -99,16 +99,29 @@ export default defineComponent({
 	display: flex;
 	width: 100%;
 	height: 100%;
-	transition: opacity var(--medium) var(--transition);
+
+	::v-deep > * {
+		z-index: 2;
+		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
+	}
 
 	&.center {
 		align-items: center;
 		justify-content: center;
+
+		&.nudge > ::v-deep *:not(:first-child) {
+			animation: nudge 200ms;
+		}
 	}
 
 	&.right {
 		align-items: center;
 		justify-content: flex-end;
+
+		&.nudge > ::v-deep *:not(:first-child) {
+			transform-origin: right;
+			animation: shake 200ms;
+		}
 	}
 
 	::v-deep .v-card {
@@ -125,15 +138,6 @@ export default defineComponent({
 	.v-overlay {
 		--v-overlay-z-index: 1;
 	}
-
-	&.nudge {
-		animation: nudge 200ms;
-	}
-
-	::v-deep > * {
-		z-index: 2;
-		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
-	}
 }
 
 @keyframes nudge {
@@ -149,4 +153,18 @@ export default defineComponent({
 		transform: scale(1);
 	}
 }
+
+@keyframes shake {
+	0% {
+		transform: scaleX(1);
+	}
+
+	50% {
+		transform: scaleX(0.98);
+	}
+
+	100% {
+		transform: scaleX(1);
+	}
+}
 </style>