Merge pull request #2035 from nextcloud/enh/attachFileInDesc

nextcloud · Jul 31, 2020 · ca9b8fe · ca9b8fe
2 parents 4d7940e + 7fccb03
commit ca9b8fe
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 204 deletions.
diff --git a/src/components/AttachmentDragAndDrop.vue b/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>
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
@@ -21,8 +21,27 @@
   -->
 
 <template>
-	<div class="attachment-list">
-		<ul>
+	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
+		<button class="icon-upload" @click="clickAddNewAttachmment()">
+			{{ t('deck', 'Upload attachment') }}
+		</button>
+		<input ref="localAttachments"
+			type="file"
+			style="display: none;"
+			multiple
+			@change="handleUploadFile">
+		<ul class="attachment-list">
+			<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>
 			<li v-for="attachment in attachments"
 				:key="attachment.id"
 				class="attachment">
@@ -53,22 +72,29 @@
 				</Actions>
 			</li>
 		</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 +109,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 +137,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;

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
@@ -633,14 +633,16 @@ export default {
 		width: 25vw;
 		min-width: 250px;
 		min-height: 120px;
-		text-align: center;
-		margin: 20px 20px 60px 20px;
+		margin: 20px;
 		padding-bottom: 20px;
-	}
+		display: flex;
+		flex-direction: column;
 
-	.modal__content button {
-		float: right;
-		margin: 40px 3px 3px 0;
+		&::v-deep .attachment-list {
+			flex-shrink: 1;
+			overflow: scroll;
+			max-height: 50vh;
+		}
 	}
 
 </style>
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
@@ -21,118 +21,27 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="card.id" class="drop-upload--sidebar">
-		<button class="icon-upload" @click="clickAddNewAttachmment()">
-			{{ t('deck', 'Upload attachment') }}
-		</button>
-		<input ref="localAttachments"
-			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>
+	<AttachmentList
+		:card-id="card.id"
+		:removable="true"
+		@deleteAttachment="deleteAttachment"
+		@restoreAttachment="restoreAttachment" />
 </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>
diff --git a/webpack.js b/webpack.js
@@ -32,5 +32,5 @@ const config = {
 	}
 };
 
-module.exports = merge(config, webpackConfig)
+module.exports = merge(webpackConfig, config)