Cleanup and simplify animation

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/card/CardSidebar.vue

@@ -336,6 +336,11 @@ export default {
 		}
 	}
 
+	aside::v-deep section {
+		display: flex;
+		flex-direction: column;
+	}
+
 	.section-wrapper {
 		display: flex;
 		max-width: 100%;

src/components/card/CardSidebarTabAttachments.vue

@@ -21,9 +21,9 @@
   -->
 
 <template>
-	<div
+	<div class="attachments-drag-zone"
-		@dragover.prevent="isDraggingOver = true"
+		@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
-		@dragleave.prevent="isDraggingOver = false"
+		@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
 		@drop.prevent="handleDropFiles">
 		<button class="icon-upload" @click="clickAddNewAttachmment()">
 			{{ t('settings', 'Upload attachment') }}
@@ -62,7 +62,7 @@
 			</ul>
 		</div>
 
-		<transition name="slide" mode="out-in">
+		<transition name="fade" mode="out-in">
 			<div
 				v-show="isDraggingOver"
 				class="dragover">
@@ -109,7 +109,6 @@ import { mapState } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
-
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {
@@ -166,16 +165,16 @@ export default {
 			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
 		},
 	},
-	watch: {
-		'card': {
-			handler() {
-			},
-		},
-	},
 	created: function() {
 		this.$store.dispatch('fetchAttachments', this.card.id)
 	},
 	methods: {
+		dragEnter() {
+
+		},
+		dragLeave() {
+
+		},
 		handleDropFiles(event) {
 			this.isDraggingOver = false
 			if (this.isReadOnly) {
@@ -241,67 +240,51 @@ export default {
 
 <style scoped lang="scss">
 
-.dragover {
+	.attachments-drag-zone {
-	position: absolute;
+		flex-grow: 1;
-	top: 10%;
-	left: 10%;
-	width: 80%;
-	height: 80%;
-	background: var(--color-primary-light);
-	z-index: 11;
-	display: flex;
-	box-shadow: 0px 0px 36px var(--color-box-shadow);
-	border-radius: var(--border-radius);
-	opacity: 90%;
-}
-.drop-hint {
-	margin: auto;
-	&__icon {
-		background-size: 48px;
-		height: 48px;
-		margin-bottom: 16px;
 	}
-}
+
-.slide {
+	.dragover {
-	&-enter {
+		position: absolute;
-		transform: translateY(-50%);
+		top: 20%;
-		opacity: 0;
+		left: 10%;
+		width: 80%;
+		height: 60%;
+		background: var(--color-primary-light);
+		z-index: 11;
+		display: flex;
+		box-shadow: 0px 0px 36px var(--color-box-shadow);
+		border-radius: var(--border-radius);
+		opacity: .9;
 	}
-	&-enter-to {
+
-		transform: translateY(0);
+	.drop-hint {
-		opacity: 1;
+		margin: auto;
+		&__icon {
+			background-size: 48px;
+			height: 48px;
+			margin-bottom: 16px;
+		}
 	}
-	&-leave {
+
-		transform: translateY(0);
+	.fade {
-		opacity: 1;
+		&-enter {
+			opacity: 0;
+		}
+		&-enter-to {
+			opacity: .9;
+		}
+		&-leave {
+			opacity: .9;
+		}
+		&-leave-to {
+			opacity: 0;
+		}
+		&-enter-active,
+		&-leave-active {
+			transition: opacity 150ms ease-in-out;
+		}
 	}
-	&-leave-to {
-		transform: translateY(-50%);
-		opacity: 0;
-	}
-	&-enter-active,
-	&-leave-active {
-		transition: all 150ms ease-in-out;
-	}
-}
-.fade {
-	&-enter {
-		opacity: 0;
-	}
-	&-enter-to {
-		opacity: 1;
-	}
-	&-leave {
-		opacity: 1;
-	}
-	&-leave-to {
-		opacity: 0;
-	}
-	&-enter-active,
-	&-leave-active {
-		transition: all 150ms ease-in-out;
-	}
-}
 
 	.icon-upload {
 		padding-left: 35px;