Fix styling and attachment count assignment

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

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;

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;

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"

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)
 			}
 		},
 	},