From 9b8bb8f00006224d79b7fd52d9dd9661658a6641 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Tue, 21 Apr 2020 11:19:59 +0200
Subject: [PATCH 1/3] add attachments to desc
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>
---
 src/components/card/AttachmentList.vue | 187 +++++++++++++++++++++++++
 src/components/card/CardSidebar.vue    | 158 ++++++++++++++++++++-
 2 files changed, 340 insertions(+), 5 deletions(-)
 create mode 100644 src/components/card/AttachmentList.vue

diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
new file mode 100644
index 000000000..d7c972722
--- /dev/null
+++ b/src/components/card/AttachmentList.vue
@@ -0,0 +1,187 @@
+<!--
+  - @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="attachment-list">
+		<ul>
+			<li v-for="attachment in attachments"
+				:key="attachment.id"
+				class="attachment">
+				<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
+				<div class="details">
+					<a :href="attachmentUrl(attachment)" target="_blank">
+						<div class="filename">
+							<span class="basename">{{ attachment.data }}</span>
+						</div>
+						<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
+						<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
+						<span class="filedate">{{ attachment.createdBy }}</span>
+					</a>
+				</div>
+				<Actions>
+					<ActionButton icon="icon-confirm" @click="addAttachment(attachment)">
+						{{ t('deck', 'Add this attachment') }}
+					</ActionButton>
+				</Actions>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import { Actions, ActionButton } from '@nextcloud/vue'
+import relativeDate from '../../mixins/relativeDate'
+import { formatFileSize } from '@nextcloud/files'
+
+export default {
+	name: 'AttachmentList',
+	components: {
+		Actions,
+		ActionButton,
+	},
+	mixins: [relativeDate],
+	props: {
+		cardId: {
+			type: Number,
+			required: true,
+		},
+	},
+	data() {
+		return {
+
+		}
+	},
+	computed: {
+		attachments() {
+			return [...this.$store.getters.attachmentsByCard(this.cardId)].sort((a, b) => b.id - a.id)
+		},
+		mimetypeForAttachment() {
+			return (mimetype) => {
+				const url = OC.MimeType.getIconUrl(mimetype)
+				const styles = {
+					'background-image': `url("${url}")`,
+				}
+				return styles
+			}
+		},
+		attachmentUrl() {
+			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
+		},
+		formattedFileSize() {
+			return (filesize) => formatFileSize(filesize)
+		},
+	},
+	watch: {
+
+	},
+	methods: {
+
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.attachment-list {
+		&.selector {
+			padding: 10px;
+			position: absolute;
+			width: 30%;
+			max-width: 500px;
+			min-width: 200px;
+			max-height: 50%;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			background-color: #eee;
+			z-index: 2;
+			border-radius: 3px;
+			box-shadow: 0 0 3px darkgray;
+			overflow: scroll;
+		}
+		h3.attachment-selector {
+			margin: 0 0 10px;
+			padding: 0;
+			.icon-close {
+				display: inline-block;
+				float: right;
+			}
+		}
+
+		li.attachment {
+			display: flex;
+			padding: 3px;
+			min-height: 44px;
+
+			&.deleted {
+				opacity: .5;
+			}
+
+			.fileicon {
+				display: inline-block;
+				min-width: 32px;
+				width: 32px;
+				height: 32px;
+				background-size: contain;
+			}
+			.details {
+				flex-grow: 1;
+				flex-shrink: 1;
+				min-width: 0;
+				flex-basis: 50%;
+				line-height: 110%;
+				padding: 2px;
+			}
+			.filename {
+				width: 70%;
+				display: flex;
+				.basename {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					padding-bottom: 2px;
+				}
+				.extension {
+					opacity: 0.7;
+				}
+			}
+			.filesize, .filedate {
+				font-size: 90%;
+				color: darkgray;
+			}
+			.app-popover-menu-utils {
+				position: relative;
+				right: -10px;
+				button {
+					height: 32px;
+					width: 42px;
+				}
+			}
+			button.icon-history {
+				width: 44px;
+			}
+			progress {
+				margin-top: 3px;
+			}
+		}
+	}
+
+</style>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 6485581a6..eef4cef20 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -127,6 +127,11 @@
 					href="https://deck.readthedocs.io/en/latest/Markdown/"
 					target="_blank"
 					class="icon icon-info" />
+				<Actions v-if="canEdit">
+					<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
+						{{ t('deck', 'Add Attachment') }}
+					</ActionButton>
+				</Actions>
 				<Actions v-if="canEdit">
 					<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
 						{{ t('deck', 'Edit description') }}
@@ -170,11 +175,22 @@
 			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
 		</AppSidebarTab>
+		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+			<div class="modal__content">
+				<h3>{{ t('deck', 'Choose attachment') }}</h3>
+				<!-- <Actions>
+					<ActionButton icon="icon-close" @click="modalShow=false">
+						{{ t('deck', 'Cancel') }}
+					</ActionButton>
+				</Actions> -->
+				<AttachmentList :card-id="currentCard.id" />
+			</div>
+		</Modal>
 	</AppSidebar>
 </template>
 
 <script>
-import { Avatar, Actions, ActionButton, Multiselect, AppSidebar, AppSidebarTab, DatetimePicker } from '@nextcloud/vue'
+import { Avatar, Actions, ActionButton, Multiselect, AppSidebar, AppSidebarTab, DatetimePicker, Modal } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
 import Color from '../../mixins/color'
 import { CollectionList } from 'nextcloud-vue-collections'
@@ -183,6 +199,9 @@ import CardSidebarTabComments from './CardSidebarTabComments'
 import CardSidebarTabActivity from './CardSidebarTabActivity'
 import MarkdownIt from 'markdown-it'
 import MarkdownItTaskLists from 'markdown-it-task-lists'
+import { formatFileSize } from '@nextcloud/files'
+import relativeDate from '../../mixins/relativeDate'
+import AttachmentList from './AttachmentList'
 
 const markdownIt = new MarkdownIt()
 markdownIt.use(MarkdownItTaskLists, { enabled: true, label: true, labelAfter: true })
@@ -204,10 +223,10 @@ export default {
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
+		Modal,
+		AttachmentList,
 	},
-	mixins: [
-		Color,
-	],
+	mixins: [Color, relativeDate],
 	props: {
 		id: {
 			type: Number,
@@ -237,6 +256,7 @@ export default {
 			descriptionSaving: false,
 			hasActivity: capabilities && capabilities.activity,
 			hasComments: !!OC.appswebroots['comments'],
+			modalShow: false,
 		}
 	},
 	computed: {
@@ -244,6 +264,24 @@ export default {
 			currentBoard: state => state.currentBoard,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
+		attachments() {
+			return [...this.$store.getters.attachmentsByCard(this.id)].sort((a, b) => b.id - a.id)
+		},
+		mimetypeForAttachment() {
+			return (mimetype) => {
+				const url = OC.MimeType.getIconUrl(mimetype)
+				const styles = {
+					'background-image': `url("${url}")`,
+				}
+				return styles
+			}
+		},
+		attachmentUrl() {
+			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
+		},
+		formattedFileSize() {
+			return (filesize) => formatFileSize(filesize)
+		},
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},
@@ -330,6 +368,19 @@ export default {
 		hideEditor() {
 			this.descriptionEditing = false
 		},
+		showAttachmentModal() {
+			this.modalShow = true
+		},
+		addAttachment(attachment) {
+			const descString = this.$refs.markdownEditor.easymde.value()
+			let embed = ''
+			if (attachment.extendedData.mimetype.includes('image')) {
+				embed = '!'
+			}
+			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
+			this.$refs.markdownEditor.easymde.value(descString + '\n' + attachmentString)
+			this.modalShow = false
+		},
 		clickedPreview(e) {
 			if (e.target.getAttribute('type') === 'checkbox') {
 				const clickedIndex = [...document.querySelector('#description-preview').querySelectorAll('input')].findIndex((li) => li.id === e.target.id)
@@ -455,7 +506,7 @@ export default {
 		margin-bottom: 5px;
 		color: var(--color-text-maxcontrast);
 
-		.icon-info {
+		.icon-info, .icon-attach {
 			display: inline-block;
 			width: 32px;
 			height: 16px;
@@ -542,4 +593,101 @@ export default {
 		}
 	}
 
+	.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;
+	}
+
+	.attachment-list {
+		&.selector {
+			padding: 10px;
+			position: absolute;
+			width: 30%;
+			max-width: 500px;
+			min-width: 200px;
+			max-height: 50%;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			background-color: #eee;
+			z-index: 2;
+			border-radius: 3px;
+			box-shadow: 0 0 3px darkgray;
+			overflow: scroll;
+		}
+		h3.attachment-selector {
+			margin: 0 0 10px;
+			padding: 0;
+			.icon-close {
+				display: inline-block;
+				float: right;
+			}
+		}
+
+		li.attachment {
+			display: flex;
+			padding: 3px;
+			min-height: 44px;
+
+			&.deleted {
+				opacity: .5;
+			}
+
+			.fileicon {
+				display: inline-block;
+				min-width: 32px;
+				width: 32px;
+				height: 32px;
+				background-size: contain;
+			}
+			.details {
+				flex-grow: 1;
+				flex-shrink: 1;
+				min-width: 0;
+				flex-basis: 50%;
+				line-height: 110%;
+				padding: 2px;
+			}
+			.filename {
+				width: 70%;
+				display: flex;
+				.basename {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					padding-bottom: 2px;
+				}
+				.extension {
+					opacity: 0.7;
+				}
+			}
+			.filesize, .filedate {
+				font-size: 90%;
+				color: darkgray;
+			}
+			.app-popover-menu-utils {
+				position: relative;
+				right: -10px;
+				button {
+					height: 32px;
+					width: 42px;
+				}
+			}
+			button.icon-history {
+				width: 44px;
+			}
+			progress {
+				margin-top: 3px;
+			}
+		}
+	}
+
 </style>

From 0659038d0b3b5c285d730ef5174254304e9882c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Fri, 24 Apr 2020 12:21:10 +0200
Subject: [PATCH 2/3] in component outsourced
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>
---
 src/components/card/AttachmentList.vue        | 42 ++++++++-
 src/components/card/CardSidebar.vue           | 91 ++-----------------
 .../card/CardSidebarTabAttachments.vue        | 58 +-----------
 3 files changed, 49 insertions(+), 142 deletions(-)

diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index d7c972722..57999fd8f 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -37,11 +37,20 @@
 						<span class="filedate">{{ attachment.createdBy }}</span>
 					</a>
 				</div>
-				<Actions>
-					<ActionButton icon="icon-confirm" @click="addAttachment(attachment)">
+				<Actions v-if="selectable">
+					<ActionButton icon="icon-confirm" @click="this.$emit('selectAttachment', attachment)">
 						{{ t('deck', 'Add this attachment') }}
 					</ActionButton>
 				</Actions>
+				<Actions v-if="removable">
+					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
+						{{ t('deck', 'Delete Attachment') }}
+					</ActionButton>
+
+					<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
+						{{ t('deck', 'Restore Attachment') }}
+					</ActionButton>
+				</Actions>
 			</li>
 		</ul>
 	</div>
@@ -64,6 +73,18 @@ export default {
 			type: Number,
 			required: true,
 		},
+		editor: {
+			type: Object,
+			required: false,
+		},
+		selectable: {
+			type: Boolean,
+			required: false,
+		},
+		removable: {
+			type: Boolean,
+			required: false,
+		},
 	},
 	data() {
 		return {
@@ -94,7 +115,22 @@ export default {
 
 	},
 	methods: {
-
+		addAttachment(attachment) {
+			const descString = this.editor.easymde.value()
+			let embed = ''
+			if (attachment.extendedData.mimetype.includes('image')) {
+				embed = '!'
+			}
+			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
+			this.editor.easymde.value(descString + '\n' + attachmentString)
+			this.modalShow = false
+		},
+		deleteAttachment(attachment) {
+			this.$store.dispatch('deleteAttachment', attachment)
+		},
+		restoreAttachment(attachment) {
+			this.$store.dispatch('restoreAttachment', attachment)
+		},
 	},
 }
 </script>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index eef4cef20..6e4174cac 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -183,7 +183,11 @@
 						{{ t('deck', 'Cancel') }}
 					</ActionButton>
 				</Actions> -->
-				<AttachmentList :card-id="currentCard.id" />
+				<AttachmentList
+					:card-id="currentCard.id"
+					:selectable="true"
+					:editor="$refs.markdownEditor"
+					@selectAttachment="addAttachment" />
 			</div>
 		</Modal>
 	</AppSidebar>
@@ -372,6 +376,7 @@ export default {
 			this.modalShow = true
 		},
 		addAttachment(attachment) {
+			console.log('hier')
 			const descString = this.$refs.markdownEditor.easymde.value()
 			let embed = ''
 			if (attachment.extendedData.mimetype.includes('image')) {
@@ -606,88 +611,4 @@ export default {
 		margin: 40px 3px 3px 0;
 	}
 
-	.attachment-list {
-		&.selector {
-			padding: 10px;
-			position: absolute;
-			width: 30%;
-			max-width: 500px;
-			min-width: 200px;
-			max-height: 50%;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			background-color: #eee;
-			z-index: 2;
-			border-radius: 3px;
-			box-shadow: 0 0 3px darkgray;
-			overflow: scroll;
-		}
-		h3.attachment-selector {
-			margin: 0 0 10px;
-			padding: 0;
-			.icon-close {
-				display: inline-block;
-				float: right;
-			}
-		}
-
-		li.attachment {
-			display: flex;
-			padding: 3px;
-			min-height: 44px;
-
-			&.deleted {
-				opacity: .5;
-			}
-
-			.fileicon {
-				display: inline-block;
-				min-width: 32px;
-				width: 32px;
-				height: 32px;
-				background-size: contain;
-			}
-			.details {
-				flex-grow: 1;
-				flex-shrink: 1;
-				min-width: 0;
-				flex-basis: 50%;
-				line-height: 110%;
-				padding: 2px;
-			}
-			.filename {
-				width: 70%;
-				display: flex;
-				.basename {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					padding-bottom: 2px;
-				}
-				.extension {
-					opacity: 0.7;
-				}
-			}
-			.filesize, .filedate {
-				font-size: 90%;
-				color: darkgray;
-			}
-			.app-popover-menu-utils {
-				position: relative;
-				right: -10px;
-				button {
-					height: 32px;
-					width: 42px;
-				}
-			}
-			button.icon-history {
-				width: 44px;
-			}
-			progress {
-				margin-top: 3px;
-			}
-		}
-	}
-
 </style>
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index c134a8263..5291c59f8 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -43,53 +43,28 @@
 						</a>
 					</div>
 				</li>
-				<li v-for="attachment in attachments"
-					:key="attachment.id"
-					class="attachment">
-					<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
-					<div class="details">
-						<a :href="attachmentUrl(attachment)" target="_blank">
-							<div class="filename">
-								<span class="basename">{{ attachment.data }}</span>
-							</div>
-							<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
-							<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
-							<span class="filedate">{{ attachment.createdBy }}</span>
-						</a>
-					</div>
-					<Actions>
-						<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
-							{{ t('deck', 'Delete Attachment') }}
-						</ActionButton>
 
-						<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
-							{{ t('deck', 'Restore Attachment') }}
-						</ActionButton>
-					</Actions>
-				</li>
+				<AttachmentList :card-id="card.id" :removable="true" />
 			</ul>
 		</div>
 	</AttachmentDragAndDrop>
 </template>
 
 <script>
-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'
+import AttachmentList from './AttachmentList'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {
-		Actions,
-		ActionButton,
 		AttachmentDragAndDrop,
+		AttachmentList,
 	},
-	mixins: [ relativeDate, attachmentUpload ],
+	mixins: [ attachmentUpload ],
 	props: {
 		card: {
 			type: Object,
@@ -122,9 +97,6 @@ export default {
 		attachments() {
 			return [...this.$store.getters.attachmentsByCard(this.card.id)].sort((a, b) => b.id - a.id)
 		},
-		formattedFileSize() {
-			return (filesize) => formatFileSize(filesize)
-		},
 		mimetypeForAttachment() {
 			return (mimetype) => {
 				const url = OC.MimeType.getIconUrl(mimetype)
@@ -134,9 +106,6 @@ export default {
 				return styles
 			}
 		},
-		attachmentUrl() {
-			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
-		},
 		cardId() {
 			return this.card.id
 		},
@@ -156,12 +125,6 @@ export default {
 			this.$refs.localAttachments.click()
 		},
 
-		deleteAttachment(attachment) {
-			this.$store.dispatch('deleteAttachment', attachment)
-		},
-		restoreAttachment(attachment) {
-			this.$store.dispatch('restoreAttachment', attachment)
-		},
 	},
 }
 </script>
@@ -172,19 +135,6 @@ export default {
 		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;
-	}
-
 	.attachment-list {
 		&.selector {
 			padding: 10px;

From 7c15a17aa4c28a08fee619d070f9cde9b26fbcad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 27 Apr 2020 12:23:49 +0200
Subject: [PATCH 3/3] Make sure event is properly emitted
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json                             |  8 +++---
 src/components/board/Board.vue                |  7 ++---
 src/components/card/AttachmentList.vue        | 28 ++-----------------
 src/components/card/CardSidebar.vue           | 17 +++++------
 .../card/CardSidebarTabAttachments.vue        | 13 +++++++--
 5 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index afc203af9..0377f74cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13962,7 +13962,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
 		},
@@ -13979,7 +13979,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
 		},
@@ -14181,7 +14181,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-is-inside": {
@@ -17293,7 +17293,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/board/Board.vue b/src/components/board/Board.vue
index 3d18bdfa2..50e388031 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -24,12 +24,12 @@
 	<div class="board-wrapper">
 		<Controls :board="board" />
 		<transition name="fade" mode="out-in">
-			<div v-if="loading" class="emptycontent" key="loading">
+			<div v-if="loading" key="loading" class="emptycontent">
 				<div class="icon icon-loading" />
 				<h2>{{ t('deck', 'Loading board') }}</h2>
 				<p />
 			</div>
-			<div v-else-if="board && !loading" class="board" key="board">
+			<div v-else-if="board && !loading" key="board" class="board">
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
@@ -39,13 +39,12 @@
 					</Draggable>
 				</Container>
 			</div>
-			<div v-else class="emptycontent" key="notfound">
+			<div v-else key="notfound" class="emptycontent">
 				<div class="icon icon-deck" />
 				<h2>{{ t('deck', 'Board not found') }}</h2>
 				<p />
 			</div>
 		</transition>
-
 	</div>
 </template>
 
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index 57999fd8f..67ae39117 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -38,16 +38,16 @@
 					</a>
 				</div>
 				<Actions v-if="selectable">
-					<ActionButton icon="icon-confirm" @click="this.$emit('selectAttachment', attachment)">
+					<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
 						{{ t('deck', 'Add this attachment') }}
 					</ActionButton>
 				</Actions>
 				<Actions v-if="removable">
-					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
+					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
 						{{ t('deck', 'Delete Attachment') }}
 					</ActionButton>
 
-					<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
+					<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
 						{{ t('deck', 'Restore Attachment') }}
 					</ActionButton>
 				</Actions>
@@ -73,10 +73,6 @@ export default {
 			type: Number,
 			required: true,
 		},
-		editor: {
-			type: Object,
-			required: false,
-		},
 		selectable: {
 			type: Boolean,
 			required: false,
@@ -114,24 +110,6 @@ export default {
 	watch: {
 
 	},
-	methods: {
-		addAttachment(attachment) {
-			const descString = this.editor.easymde.value()
-			let embed = ''
-			if (attachment.extendedData.mimetype.includes('image')) {
-				embed = '!'
-			}
-			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
-			this.editor.easymde.value(descString + '\n' + attachmentString)
-			this.modalShow = false
-		},
-		deleteAttachment(attachment) {
-			this.$store.dispatch('deleteAttachment', attachment)
-		},
-		restoreAttachment(attachment) {
-			this.$store.dispatch('restoreAttachment', attachment)
-		},
-	},
 }
 </script>
 
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 6e4174cac..7d253230f 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -178,15 +178,9 @@
 		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Choose attachment') }}</h3>
-				<!-- <Actions>
-					<ActionButton icon="icon-close" @click="modalShow=false">
-						{{ t('deck', 'Cancel') }}
-					</ActionButton>
-				</Actions> -->
 				<AttachmentList
 					:card-id="currentCard.id"
 					:selectable="true"
-					:editor="$refs.markdownEditor"
 					@selectAttachment="addAttachment" />
 			</div>
 		</Modal>
@@ -376,7 +370,6 @@ export default {
 			this.modalShow = true
 		},
 		addAttachment(attachment) {
-			console.log('hier')
 			const descString = this.$refs.markdownEditor.easymde.value()
 			let embed = ''
 			if (attachment.extendedData.mimetype.includes('image')) {
@@ -511,7 +504,7 @@ export default {
 		margin-bottom: 5px;
 		color: var(--color-text-maxcontrast);
 
-		.icon-info, .icon-attach {
+		.icon-info {
 			display: inline-block;
 			width: 32px;
 			height: 16px;
@@ -519,6 +512,13 @@ export default {
 			opacity: .7;
 		}
 
+		.icon-attach {
+			background-size: 16px;
+			float: right;
+			margin-top: -14px;
+			opacity: .7;
+		}
+
 		.icon-toggle, .icon-rename {
 			float: right;
 			margin-top: -14px;
@@ -604,6 +604,7 @@ export default {
 		height: 120px;
 		text-align: center;
 		margin: 20px 20px 60px 20px;
+		padding-bottom: 20px;
 	}
 
 	.modal__content button {
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index 5291c59f8..819423aa3 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -44,7 +44,11 @@
 					</div>
 				</li>
 
-				<AttachmentList :card-id="card.id" :removable="true" />
+				<AttachmentList
+					:card-id="card.id"
+					:removable="true"
+					@deleteAttachment="deleteAttachment"
+					@restoreAttachment="restoreAttachment" />
 			</ul>
 		</div>
 	</AttachmentDragAndDrop>
@@ -124,7 +128,12 @@ export default {
 		clickAddNewAttachmment() {
 			this.$refs.localAttachments.click()
 		},
-
+		deleteAttachment(attachment) {
+			this.$store.dispatch('deleteAttachment', attachment)
+		},
+		restoreAttachment(attachment) {
+			this.$store.dispatch('restoreAttachment', attachment)
+		},
 	},
 }
 </script>