attach files in description

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/AttachmentDragAndDrop.vue

@@ -207,8 +207,4 @@ export default {
 		margin: 20px 20px 60px 20px;
 	}
 
-	.modal__content button {
-		float: right;
-		margin: 40px 3px 3px 0;
-	}
 </style>

src/components/card/AttachmentList.vue

@@ -21,54 +21,87 @@
   -->
 
 <template>
-	<div class="attachment-list">
+	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
-		<ul>
+		<button class="icon-upload" @click="clickAddNewAttachmment()">
-			<li v-for="attachment in attachments"
+			{{ t('deck', 'Upload attachment') }}
-				:key="attachment.id"
+		</button>
-				class="attachment">
+		<input ref="localAttachments"
-				<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
+			type="file"
-				<div class="details">
+			style="display: none;"
-					<a :href="attachmentUrl(attachment)" target="_blank">
+			multiple
-						<div class="filename">
+			@change="handleUploadFile">
-							<span class="basename">{{ attachment.data }}</span>
+		<div class="attachment-list">
-						</div>
+			<ul>
-						<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
+				<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
-						<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
+					<a class="fileicon" :style="mimetypeForAttachment('none')" />
-						<span class="filedate">{{ attachment.createdBy }}</span>
+					<div class="details">
-					</a>
+						<a>
-				</div>
+							<div class="filename">
-				<Actions v-if="selectable">
+								<span class="basename">{{ attachment.name }}</span>
-					<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
+							</div>
-						{{ t('deck', 'Add this attachment') }}
+							<progress :value="attachment.progress" max="100" />
-					</ActionButton>
+						</a>
-				</Actions>
+					</div>
-				<Actions v-if="removable">
+				</li>
-					<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="$emit('restoreAttachment', attachment)">
+				<div class="attachment-list">
-						{{ t('deck', 'Restore Attachment') }}
+					<ul>
-					</ActionButton>
+						<li v-for="attachment in attachments"
-				</Actions>
+							:key="attachment.id"
-			</li>
+							class="attachment">
-		</ul>
+							<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
-	</div>
+							<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 v-if="selectable">
+								<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="$emit('deleteAttachment', attachment)">
+									{{ t('deck', 'Delete Attachment') }}
+								</ActionButton>
+
+								<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
+									{{ t('deck', 'Restore Attachment') }}
+								</ActionButton>
+							</Actions>
+						</li>
+					</ul>
+				</div>
+			</ul>
+		</div>
+	</AttachmentDragAndDrop>
 </template>
 
 <script>
 import { Actions, ActionButton } from '@nextcloud/vue'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
+import { mapState } from 'vuex'
+import { loadState } from '@nextcloud/initial-state'
+import attachmentUpload from '../../mixins/attachmentUpload'
+const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 export default {
 	name: 'AttachmentList',
 	components: {
 		Actions,
 		ActionButton,
+		AttachmentDragAndDrop,
 	},
-	mixins: [relativeDate],
+	mixins: [relativeDate, attachmentUpload],
+
 	props: {
 		cardId: {
 			type: Number,
@@ -83,6 +116,15 @@ export default {
 			required: false,
 		},
 	},
+	data() {
+		return {
+			modalShow: false,
+			file: '',
+			overwriteAttachment: null,
+			isDraggingOver: false,
+			maxUploadSize: maxUploadSizeState,
+		}
+	},
 	computed: {
 		attachments() {
 			return [...this.$store.getters.attachmentsByCard(this.cardId)].sort((a, b) => b.id - a.id)
@@ -102,14 +144,45 @@ export default {
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
 		},
+		...mapState({
+			currentBoard: state => state.currentBoard,
+		}),
+		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')
+			}
+		},
 	},
-	watch: {
+	created() {
-
+		this.$store.dispatch('fetchAttachments', this.cardId)
+	},
+	methods: {
+		handleUploadFile(event) {
+			const files = event.target.files ?? []
+			for (const file of files) {
+				this.onLocalAttachmentSelected(file)
+			}
+			event.target.value = ''
+		},
+		clickAddNewAttachmment() {
+			this.$refs.localAttachments.click()
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+
+	.icon-upload {
+		padding-left: 35px;
+		background-position: 10px center;
+	}
+
 	.attachment-list {
 		&.selector {
 			padding: 10px;

src/components/card/CardSidebar.vue

@@ -633,7 +633,6 @@ export default {
 		width: 25vw;
 		min-width: 250px;
 		min-height: 120px;
-		text-align: center;
 		margin: 20px 20px 60px 20px;
 		padding-bottom: 20px;
 	}

src/components/card/CardSidebarTabAttachments.vue

@@ -21,118 +21,27 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="card.id" class="drop-upload--sidebar">
+	<AttachmentList
-		<button class="icon-upload" @click="clickAddNewAttachmment()">
+		:card-id="card.id"
-			{{ t('deck', 'Upload attachment') }}
+		:removable="true"
-		</button>
+		@deleteAttachment="deleteAttachment"
-		<input ref="localAttachments"
+		@restoreAttachment="restoreAttachment" />
-			type="file"
-			style="display: none;"
-			multiple
-			@change="handleUploadFile">
-		<div class="attachment-list">
-			<ul>
-				<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
-					<a class="fileicon" :style="mimetypeForAttachment('none')" />
-					<div class="details">
-						<a>
-							<div class="filename">
-								<span class="basename">{{ attachment.name }}</span>
-							</div>
-							<progress :value="attachment.progress" max="100" />
-						</a>
-					</div>
-				</li>
-
-				<AttachmentList
-					:card-id="card.id"
-					:removable="true"
-					@deleteAttachment="deleteAttachment"
-					@restoreAttachment="restoreAttachment" />
-			</ul>
-		</div>
-	</AttachmentDragAndDrop>
 </template>
 
 <script>
-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: {
-		AttachmentDragAndDrop,
 		AttachmentList,
 	},
-	mixins: [ attachmentUpload ],
 	props: {
 		card: {
 			type: Object,
 			default: null,
 		},
 	},
-	data() {
-		return {
-			modalShow: false,
-			file: '',
-			overwriteAttachment: null,
-			isDraggingOver: false,
-			maxUploadSize: maxUploadSizeState,
-		}
-	},
-	computed: {
-		...mapState({
-			currentBoard: state => state.currentBoard,
-		}),
-		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')
-			}
-		},
-		attachments() {
-			return [...this.$store.getters.attachmentsByCard(this.card.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
-			}
-		},
-		cardId() {
-			return this.card.id
-		},
-	},
-	watch: {
-		card(newCard) {
-			this.$store.dispatch('fetchAttachments', newCard.id)
-		},
-	},
-	created() {
-		this.$store.dispatch('fetchAttachments', this.card.id)
-	},
 	methods: {
-		handleUploadFile(event) {
-			const files = event.target.files ?? []
-			for (const file of files) {
-				this.onLocalAttachmentSelected(file)
-			}
-			event.target.value = ''
-		},
-		clickAddNewAttachmment() {
-			this.$refs.localAttachments.click()
-		},
 		deleteAttachment(attachment) {
 			this.$store.dispatch('deleteAttachment', attachment)
 		},
@@ -142,94 +51,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped lang="scss">
-	.icon-upload {
-		padding-left: 35px;
-		background-position: 10px center;
-	}
-
-	.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>