From 67083b8fce153f15aaa47aa63c31845ca9a5470f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Tue, 17 Mar 2020 11:11:27 +0100
Subject: [PATCH 1/2] new mixin and component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 package-lock.json                             |  10 +-
 src/components/AttachmentDragAndDrop.vue      | 188 ++++++++++++++++++
 .../card/CardSidebarTabAttachments.vue        |  92 +--------
 src/components/cards/CardItem.vue             | 135 +++++++------
 src/mixins/attachmentUpload.js                |  68 +++++++
 5 files changed, 340 insertions(+), 153 deletions(-)
 create mode 100644 src/components/AttachmentDragAndDrop.vue
 create mode 100644 src/mixins/attachmentUpload.js

diff --git a/package-lock.json b/package-lock.json
index 8bb5ea268..3c6723d4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12604,7 +12604,7 @@
 		},
 		"mkdirp": {
 			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+			"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
 			"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
 			"dev": true,
 			"requires": {
@@ -13212,7 +13212,7 @@
 		},
 		"os-homedir": {
 			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+			"resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
 			"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
 			"dev": true
 		},
@@ -13229,7 +13229,7 @@
 		},
 		"os-tmpdir": {
 			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+			"resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
 			"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
 			"dev": true
 		},
@@ -13409,7 +13409,7 @@
 		},
 		"path-is-absolute": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
 		},
 		"path-key": {
@@ -16325,7 +16325,7 @@
 		},
 		"string_decoder": {
 			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+			"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
 			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
 			"requires": {
 				"safe-buffer": "~5.1.0"
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
new file mode 100644
index 000000000..b174a35ee
--- /dev/null
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -0,0 +1,188 @@
+<!--
+  - @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+  -
+  - @author Jakob Röhrl <jakob.roehrl@web.de>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="attachments-drag-zone"
+		@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
+		@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
+		@drop.prevent="handleDropFiles">
+		<slot />
+		<transition name="fade" mode="out-in">
+			<div
+				v-show="isDraggingOver"
+				class="dragover">
+				<div class="drop-hint">
+					<div
+						class="drop-hint__icon"
+						:class="{
+							'icon-upload' : !isReadOnly,
+							'icon-error' : isReadOnly}" />
+					<h2
+						class="drop-hint__text">
+						{{ dropHintText }}
+					</h2>
+				</div>
+			</div>
+		</transition>
+
+		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
+			<div class="modal__content">
+				<h2>{{ t('deck', 'File already exists') }}</h2>
+				<p>
+					{{ t('deck', 'A file with the name {filename} already exists.', {filename: file.name}) }}
+				</p>
+				<p>
+					{{ t('deck', 'Do you want to overwrite it?') }}
+				</p>
+				<button class="primary" @click="overrideAttachment">
+					{{ t('deck', 'Overwrite file') }}
+				</button>
+				<button @click="modalShow=false">
+					{{ t('deck', 'Keep existing file') }}
+				</button>
+			</div>
+		</Modal>
+	</div>
+</template>
+
+<script>
+import { Modal } from '@nextcloud/vue'
+import attachmentUpload from '../mixins/attachmentUpload'
+import { loadState } from '@nextcloud/initial-state'
+const maxUploadSizeState = loadState('deck', 'maxUploadSize')
+
+export default {
+	name: 'AttachmentDragAndDrop',
+	components: { Modal },
+	mixins: [ attachmentUpload ],
+	props: {
+		cardId: {
+			type: Number,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			modalShow: false,
+			file: '',
+			overwriteAttachment: null,
+			isDraggingOver: false,
+			maxUploadSize: maxUploadSizeState,
+		}
+	},
+	computed: {
+		isReadOnly() {
+			return !this.$store.getters.canEdit
+		},
+		dropHintText() {
+			if (this.isReadOnly) {
+				return t('deck', 'This board is read only')
+			} else {
+				return t('deck', 'Drop your files to upload')
+			}
+		},
+	},
+	methods: {
+		dragEnter() {
+
+		},
+		dragLeave() {
+
+		},
+		handleDropFiles(event) {
+			this.isDraggingOver = false
+			if (this.isReadOnly) {
+				return
+			}
+			this.onLocalAttachmentSelected(event.dataTransfer.files[0])
+			event.dataTransfer.value = ''
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+
+	.attachments-drag-zone {
+		flex-grow: 1;
+	}
+
+	.dragover {
+		position: absolute;
+		top: 20%;
+		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;
+	}
+
+	.drop-hint {
+		margin: auto;
+		&__icon {
+			background-size: 48px;
+			height: 48px;
+			margin-bottom: 16px;
+		}
+	}
+
+	.fade {
+		&-enter {
+			opacity: 0;
+		}
+		&-enter-to {
+			opacity: .9;
+		}
+		&-leave {
+			opacity: .9;
+		}
+		&-leave-to {
+			opacity: 0;
+		}
+		&-enter-active,
+		&-leave-active {
+			transition: opacity 150ms ease-in-out;
+		}
+	}
+
+	.icon-upload {
+		padding-left: 35px;
+		background-position: 10px center;
+	}
+
+	.modal__content {
+		width: 25vw;
+		min-width: 250px;
+		height: 120px;
+		text-align: center;
+		margin: 20px 20px 60px 20px;
+	}
+
+	.modal__content button {
+		float: right;
+		margin: 40px 3px 3px 0;
+	}
+</style>
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index d101603f3..6d15387ad 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -21,10 +21,7 @@
   -->
 
 <template>
-	<div class="attachments-drag-zone"
-		@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
-		@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
-		@drop.prevent="handleDropFiles">
+	<AttachmentDragAndDrop :card-id="card.id">
 		<button class="icon-upload" @click="clickAddNewAttachmment()">
 			{{ t('settings', 'Upload attachment') }}
 		</button>
@@ -61,52 +58,17 @@
 				</li>
 			</ul>
 		</div>
-
-		<transition name="fade" mode="out-in">
-			<div
-				v-show="isDraggingOver"
-				class="dragover">
-				<div class="drop-hint">
-					<div
-						class="drop-hint__icon"
-						:class="{
-							'icon-upload' : !isReadOnly,
-							'icon-error' : isReadOnly}" />
-					<h2
-						class="drop-hint__text">
-						{{ dropHintText }}
-					</h2>
-				</div>
-			</div>
-		</transition>
-
-		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
-			<div class="modal__content">
-				<h2>{{ t('deck', 'File already exists') }}</h2>
-				<p>
-					{{ t('deck', 'A file with the name {filename} already exists.', {filename: file.name}) }}
-				</p>
-				<p>
-					{{ t('deck', 'Do you want to overwrite it?') }}
-				</p>
-				<button class="primary" @click="overrideAttachment">
-					{{ t('deck', 'Overwrite file') }}
-				</button>
-				<button @click="modalShow=false">
-					{{ t('deck', 'Keep existing file') }}
-				</button>
-			</div>
-		</Modal>
-	</div>
+	</AttachmentDragAndDrop>
 </template>
 
 <script>
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
-import { showError } from '@nextcloud/dialogs'
+import { Actions, ActionButton } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import relativeDate from '../../mixins/relativeDate'
 import { mapState } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
+import attachmentUpload from '../../mixins/attachmentUpload'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 export default {
@@ -114,9 +76,9 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
-		Modal,
+		AttachmentDragAndDrop,
 	},
-	mixins: [ relativeDate ],
+	mixins: [ relativeDate, attachmentUpload ],
 	props: {
 		card: {
 			type: Object,
@@ -164,6 +126,9 @@ export default {
 		attachmentUrl() {
 			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
 		},
+		cardId() {
+			return this.card.id
+		},
 	},
 	created: function() {
 		this.$store.dispatch('fetchAttachments', this.card.id)
@@ -190,50 +155,13 @@ export default {
 		clickAddNewAttachmment() {
 			this.$refs.localAttachments.click()
 		},
-		async onLocalAttachmentSelected(file) {
-			if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
-				showError(
-					t('deck', `Failed to upload {name}`, { name: file.name }) + ' - '
-						+ t('deck', 'Maximum file size of {size} exceeded', { size: formatFileSize(this.maxUploadSize) })
-				)
-				event.target.value = ''
-				return
-			}
 
-			const bodyFormData = new FormData()
-			bodyFormData.append('cardId', this.card.id)
-			bodyFormData.append('type', 'deck_file')
-			bodyFormData.append('file', file)
-			try {
-				await this.$store.dispatch('createAttachment', { cardId: this.card.id, formData: bodyFormData })
-			} catch (err) {
-				if (err.response.data.status === 409) {
-					this.overwriteAttachment = err.response.data.data
-					this.modalShow = true
-				} else {
-					showError(err.response.data.message)
-				}
-			}
-		},
 		deleteAttachment(attachment) {
 			this.$store.dispatch('deleteAttachment', attachment)
 		},
 		restoreAttachment(attachment) {
 			this.$store.dispatch('restoreAttachment', attachment)
 		},
-		overrideAttachment() {
-			const bodyFormData = new FormData()
-			bodyFormData.append('cardId', this.card.id)
-			bodyFormData.append('type', 'deck_file')
-			bodyFormData.append('file', this.file)
-			this.$store.dispatch('updateAttachment', {
-				cardId: this.card.id,
-				attachmentId: this.overwriteAttachment.id,
-				formData: bodyFormData,
-			})
-
-			this.modalShow = false
-		},
 	},
 }
 </script>
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 0d584cc52..bf58b2e4e 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -25,75 +25,77 @@
   -->
 
 <template>
-	<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
-		tag="div"
-		class="card"
-		@click="openCard">
-		<div class="card-upper">
-			<h3 v-if="showArchived || !canEdit">
-				{{ card.title }}
-			</h3>
-			<h3 v-else-if="!editing">
-				<span @click.stop="startEditing(card)">{{ card.title }}</span>
-			</h3>
+	<AttachmentDragAndDrop :card-id="id">
+		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
+			tag="div"
+			class="card"
+			@click="openCard">
+			<div class="card-upper">
+				<h3 v-if="showArchived || !canEdit">
+					{{ card.title }}
+				</h3>
+				<h3 v-else-if="!editing">
+					<span @click.stop="startEditing(card)">{{ card.title }}</span>
+				</h3>
 
-			<form v-if="editing"
-				v-click-outside="cancelEdit"
-				class="dragDisabled"
-				@keyup.esc="cancelEdit"
-				@submit.prevent="finishedEdit(card)">
-				<input v-model="copiedCard.title" type="text" autofocus>
-				<input type="button" class="icon-confirm" @click="finishedEdit(card)">
-			</form>
+				<form v-if="editing"
+					v-click-outside="cancelEdit"
+					class="dragDisabled"
+					@keyup.esc="cancelEdit"
+					@submit.prevent="finishedEdit(card)">
+					<input v-model="copiedCard.title" type="text" autofocus>
+					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
+				</form>
 
-			<Actions v-if="canEdit && !editing" @click.stop.prevent>
-				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
-					{{ t('deck', 'Assign to me') }}
-				</ActionButton>
-				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
-					{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
-				</ActionButton>
-				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
-					{{ t('deck', 'Delete card') }}
-				</ActionButton>
-				<ActionButton icon="icon-external" @click.stop="modalShow=true">
-					{{ t('deck', 'Move card') }}
-				</ActionButton>
-				<ActionButton icon="icon-settings-dark" @click="openCard">
-					{{ t('deck', 'Card details') }}
-				</ActionButton>
-			</Actions>
-
-			<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
-				<div class="modal__content">
-					<Multiselect v-model="selectedBoard"
-						:placeholder="t('deck', 'Select a board')"
-						:options="boards"
-						label="title"
-						@select="loadStacksFromBoard" />
-					<Multiselect v-model="selectedStack"
-						:placeholder="t('deck', 'Select a stack')"
-						:options="stacksFromBoard"
-						label="title" />
-
-					<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
+				<Actions v-if="canEdit && !editing" @click.stop.prevent>
+					<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
+						{{ t('deck', 'Assign to me') }}
+					</ActionButton>
+					<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
+						{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
+					</ActionButton>
+					<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
+						{{ t('deck', 'Delete card') }}
+					</ActionButton>
+					<ActionButton icon="icon-external" @click.stop="modalShow=true">
 						{{ t('deck', 'Move card') }}
-					</button>
-					<button @click="modalShow=false">
-						{{ t('deck', 'Cancel') }}
-					</button>
-				</div>
-			</Modal>
+					</ActionButton>
+					<ActionButton icon="icon-settings-dark" @click="openCard">
+						{{ t('deck', 'Card details') }}
+					</ActionButton>
+				</Actions>
+
+				<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
+					<div class="modal__content">
+						<Multiselect v-model="selectedBoard"
+							:placeholder="t('deck', 'Select a board')"
+							:options="boards"
+							label="title"
+							@select="loadStacksFromBoard" />
+						<Multiselect v-model="selectedStack"
+							:placeholder="t('deck', 'Select a stack')"
+							:options="stacksFromBoard"
+							label="title" />
+
+						<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
+							{{ t('deck', 'Move card') }}
+						</button>
+						<button @click="modalShow=false">
+							{{ t('deck', 'Cancel') }}
+						</button>
+					</div>
+				</Modal>
+			</div>
+			<ul v-if="card.labels && card.labels.length > 0" class="labels" @click="openCard">
+				<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
+					<span>{{ label.title }}</span>
+				</li>
+			</ul>
+			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
+				<CardBadges :id="id" />
+			</div>
 		</div>
-		<ul v-if="card.labels && card.labels.length > 0" class="labels" @click="openCard">
-			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
-				<span>{{ label.title }}</span>
-			</li>
-		</ul>
-		<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
-			<CardBadges :id="id" />
-		</div>
-	</div>
+	</AttachmentDragAndDrop>
 </template>
 
 <script>
@@ -105,10 +107,11 @@ import axios from '@nextcloud/axios'
 import CardBadges from './CardBadges'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 
 export default {
 	name: 'CardItem',
-	components: { Modal, CardBadges, Actions, ActionButton, Multiselect },
+	components: { Modal, CardBadges, Actions, ActionButton, Multiselect, AttachmentDragAndDrop },
 	directives: {
 		ClickOutside,
 	},
diff --git a/src/mixins/attachmentUpload.js b/src/mixins/attachmentUpload.js
new file mode 100644
index 000000000..95f93fd8d
--- /dev/null
+++ b/src/mixins/attachmentUpload.js
@@ -0,0 +1,68 @@
+/*
+ * @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @author Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import { showError } from '@nextcloud/dialogs'
+import { formatFileSize } from '@nextcloud/files'
+
+export default {
+	methods: {
+		async onLocalAttachmentSelected(file) {
+			if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
+				showError(
+					t('deck', `Failed to upload {name}`, { name: file.name }) + ' - '
+						+ t('deck', 'Maximum file size of {size} exceeded', { size: formatFileSize(this.maxUploadSize) })
+				)
+				event.target.value = ''
+				return
+			}
+
+			const bodyFormData = new FormData()
+			bodyFormData.append('cardId', this.cardId)
+			bodyFormData.append('type', 'deck_file')
+			bodyFormData.append('file', file)
+			try {
+				await this.$store.dispatch('createAttachment', { cardId: this.cardId, formData: bodyFormData })
+			} catch (err) {
+				if (err.response.data.status === 409) {
+					this.overwriteAttachment = err.response.data.data
+					this.modalShow = true
+				} else {
+					showError(err.response.data.message)
+				}
+			}
+		},
+
+		overrideAttachment() {
+			const bodyFormData = new FormData()
+			bodyFormData.append('cardId', this.cardId)
+			bodyFormData.append('type', 'deck_file')
+			bodyFormData.append('file', this.file)
+			this.$store.dispatch('updateAttachment', {
+				cardId: this.cardId,
+				attachmentId: this.overwriteAttachment.id,
+				formData: bodyFormData,
+			})
+
+			this.modalShow = false
+		},
+
+	},
+}

From 2d639ed4701bcb1b5424c69412953b368a97a067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 29 Mar 2020 11:42:05 +0200
Subject: [PATCH 2/2] Fix styling and attachment count assignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/AttachmentDragAndDrop.vue      | 61 ++++++++++++++-----
 .../card/CardSidebarTabAttachments.vue        | 55 ++---------------
 src/components/cards/CardItem.vue             |  2 +-
 src/store/card.js                             |  6 +-
 4 files changed, 52 insertions(+), 72 deletions(-)

diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index b174a35ee..4c439424f 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -124,28 +124,62 @@ export default {
 
 	.attachments-drag-zone {
 		flex-grow: 1;
+		position: relative;
 	}
 
 	.dragover {
 		position: absolute;
+		background: var(--color-primary-light);
+		z-index: 11;
+		display: flex;
+		border-radius: var(--border-radius);
+		opacity: .9;
+		margin: auto;
+
+		.drop-hint {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			&__icon {
+				background-size: 32px;
+				background-position: center center;
+				height: 48px;
+				margin-bottom: 16px;
+			}
+
+			&__text {
+				line-height: 125%;
+				text-align: center;
+			}
+		}
+	}
+
+	.drop-upload--sidebar .dragover {
 		top: 20%;
 		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;
 	}
 
-	.drop-hint {
-		margin: auto;
-		&__icon {
-			background-size: 48px;
-			height: 48px;
-			margin-bottom: 16px;
+	.drop-upload--card .dragover {
+		border: 0;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+
+		h2 {
+			font-size: 13px;
+			margin: 0;
+		}
+
+		.drop-hint__icon {
+			margin: 0;
+			background-size: 16px;
+			height: 16px;
 		}
 	}
 
@@ -168,11 +202,6 @@ export default {
 		}
 	}
 
-	.icon-upload {
-		padding-left: 35px;
-		background-position: 10px center;
-	}
-
 	.modal__content {
 		width: 25vw;
 		min-width: 250px;
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index 6d15387ad..f22efe172 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="card.id">
+	<AttachmentDragAndDrop :card-id="card.id" class="drop-upload--sidebar">
 		<button class="icon-upload" @click="clickAddNewAttachmment()">
 			{{ t('settings', 'Upload attachment') }}
 		</button>
@@ -35,7 +35,7 @@
 					:key="attachment.id"
 					class="attachment"
 					style="display: flex;">
-					<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" />
+					<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
 					<div class="details">
 						<a :href="attachmentUrl(attachment)" target="_blank">
 							<div class="filename">
@@ -115,8 +115,8 @@ export default {
 			return (filesize) => formatFileSize(filesize)
 		},
 		mimetypeForAttachment() {
-			return (attachment) => {
-				const url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
+			return (mimetype) => {
+				const url = OC.MimeType.getIconUrl(mimetype)
 				const styles = {
 					'background-image': `url("${url}")`,
 				}
@@ -167,53 +167,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
-	.attachments-drag-zone {
-		flex-grow: 1;
-	}
-
-	.dragover {
-		position: absolute;
-		top: 20%;
-		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;
-	}
-
-	.drop-hint {
-		margin: auto;
-		&__icon {
-			background-size: 48px;
-			height: 48px;
-			margin-bottom: 16px;
-		}
-	}
-
-	.fade {
-		&-enter {
-			opacity: 0;
-		}
-		&-enter-to {
-			opacity: .9;
-		}
-		&-leave {
-			opacity: .9;
-		}
-		&-leave-to {
-			opacity: 0;
-		}
-		&-enter-active,
-		&-leave-active {
-			transition: opacity 150ms ease-in-out;
-		}
-	}
-
 	.icon-upload {
 		padding-left: 35px;
 		background-position: 10px center;
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index bf58b2e4e..ba8e8e553 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -25,7 +25,7 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="id">
+	<AttachmentDragAndDrop :card-id="id" class="drop-upload--card">
 		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
 			tag="div"
 			class="card"
diff --git a/src/store/card.js b/src/store/card.js
index 65fffffc1..306749c6b 100644
--- a/src/store/card.js
+++ b/src/store/card.js
@@ -143,15 +143,13 @@ export default {
 		cardIncreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				const existingCard = state.cards.find(_card => _card.id === cardId)
-				Vue.set(state.cards, existingCard.attachmentCount, existingCard.attachmentCount++)
+				Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount + 1)
 			}
 		},
 		cardDecreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				const existingCard = state.cards.find(_card => _card.id === cardId)
-				Vue.set(state.cards, existingCard.attachmentCount, existingCard.attachmentCount--)
+				Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount - 1)
 			}
 		},
 	},