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
-		@dragover.prevent="isDraggingOver = true"
-		@dragleave.prevent="isDraggingOver = false"
+	<div class="attachments-drag-zone"
+		@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
+		@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 {
+		flex-grow: 1;
+	}
+
+	.dragover {
 		position: absolute;
-	top: 10%;
+		top: 20%;
 		left: 10%;
 		width: 80%;
-	height: 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: 90%;
-}
-.drop-hint {
+		opacity: .9;
+	}
+
+	.drop-hint {
 		margin: auto;
 		&__icon {
 			background-size: 48px;
 			height: 48px;
 			margin-bottom: 16px;
 		}
-}
-.slide {
-	&-enter {
-		transform: translateY(-50%);
-		opacity: 0;
 	}
-	&-enter-to {
-		transform: translateY(0);
-		opacity: 1;
-	}
-	&-leave {
-		transform: translateY(0);
-		opacity: 1;
-	}
-	&-leave-to {
-		transform: translateY(-50%);
-		opacity: 0;
-	}
-	&-enter-active,
-	&-leave-active {
-		transition: all 150ms ease-in-out;
-	}
-}
-.fade {
+
+	.fade {
 		&-enter {
 			opacity: 0;
 		}
 		&-enter-to {
-		opacity: 1;
+			opacity: .9;
 		}
 		&-leave {
-		opacity: 1;
+			opacity: .9;
 		}
 		&-leave-to {
 			opacity: 0;
 		}
 		&-enter-active,
 		&-leave-active {
-		transition: all 150ms ease-in-out;
+			transition: opacity 150ms ease-in-out;
+		}
 	}
-}
 
 	.icon-upload {
 		padding-left: 35px;