styles

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

package-lock.json

@@ -3485,6 +3485,21 @@
 				}
 			}
 		},
+		"@nextcloud/files": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-1.0.0.tgz",
+			"integrity": "sha512-HJF+eavX8BymQ83jGkluNyQ8zrbFfuiQwunSe140sbQ042pjyljSUACf/WyvVAeqaCj7cIeYMPQBtvykom0+cg==",
+			"requires": {
+				"core-js": "3.5.0"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.5.0",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
+					"integrity": "sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw=="
+				}
+			}
+		},
 		"@nextcloud/l10n": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-1.1.0.tgz",

package.json

@@ -33,6 +33,7 @@
 		"@nextcloud/axios": "^1.3.1",
 		"@nextcloud/l10n": "^1.1.0",
 		"@nextcloud/dialogs": "^1.2.1",
+		"@nextcloud/files": "^1.0.0",
 		"@nextcloud/moment": "^1.1.0",
 		"@nextcloud/router": "^1.0.0",
 		"@nextcloud/vue": "^1.4.0",

src/components/card/CardSidebarTabAttachments.vue

@@ -29,25 +29,23 @@
 			type="file"
 			style="display: none;"
 			@change="onLocalAttachmentSelected">
-		<attachment-list-component>
-			<div class="attachment-list-wrapper">
 		<div class="attachment-list">
 			<ul>
-						<li v-for="attachment in attachments" :key="attachment.id" class="attachment">
+				<li v-for="attachment in attachments"
-							<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" 
+					:key="attachment.id"
-								style="background-image: url(&quot;/apps/theming/img/core/filetypes/image.svg?v=13&quot;);"></a>
+					class="attachment"
+					style="display: flex;">
+					<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" />
 					<div class="details">
 						<a :href="attachmentUrl(attachment)" target="_blank">
 							<div class="filename">
 								<span class="basename">{{ attachment.data }}</span>
-											<span class="extension">.xxx</span>
 							</div>
-										<span class="filesize">{{ attachment.extendedData.filesize }}</span>
+							<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
-										<span class="filedate">{{ attachment.createdAt }}</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') }}
@@ -57,12 +55,9 @@
 							{{ t('deck', 'Restore Attachment') }}
 						</ActionButton>
 					</Actions>
-							
 				</li>
 			</ul>
 		</div>
-			</div>
-		</attachment-list-component>
 
 		<Modal v-if="modalShow" title="File already exists" @close="modalShow=false">
 			<div class="modal__content">
@@ -89,6 +84,8 @@
 <script>
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
+import { formatFileSize } from '@nextcloud/files'
+import relativeDate from '../../mixins/relativeDate'
 
 export default {
 	name: 'CardSidebarTabAttachments',
@@ -97,6 +94,7 @@ export default {
 		ActionButton,
 		Modal,
 	},
+	mixins: [ relativeDate ],
 	props: {
 		card: {
 			type: Object,
@@ -107,13 +105,16 @@ export default {
 		return {
 			modalShow: false,
 			file: '',
-			overwriteAttachment: null
+			overwriteAttachment: null,
 		}
 	},
 	computed: {
 		attachments() {
 			return this.$store.getters.attachmentsByCard(this.card.id)
 		},
+		formattedFileSize() {
+			return (filesize) => formatFileSize(filesize)
+		},
 
 	},
 	created: function() {
@@ -164,7 +165,7 @@ export default {
 			this.$store.dispatch('updateAttachment', {
 				cardId: this.card.id,
 				attachmentId: this.overwriteAttachment.id,
-				formData: bodyFormData 
+				formData: bodyFormData,
 			})
 
 			this.modalShow = false
@@ -187,15 +188,6 @@ export default {
 		margin: 40px 3px 3px 0;
 	}
 
-	.attachment-list-wrapper {
-		position: fixed;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(darkgray, 0.5);
-		left: 0;
-		top: 0;
-		z-index: 300;
-	}
 	.attachment-list {
 		&.selector {
 			padding: 10px;

src/services/AttachmentApi.js

@@ -52,7 +52,6 @@ export class AttachmentApi {
 		   url: this.url(`/cards/${cardId}/attachment/${attachmentId}`),
 		   data: formData,
 	   })
-	   console.log(response)
 	   return response.data
 	}
 

src/store/attachment.js

@@ -62,7 +62,7 @@ export default {
 		deleteAttachment(state, deletedAttachment) {
 			const existingIndex = state.attachments[deletedAttachment.cardId].findIndex(a => a.id === deletedAttachment.id)
 			if (existingIndex !== -1) {
-				//state.attachments[deletedAttachment.cardId].splice(existingIndex, 1)
+				// state.attachments[deletedAttachment.cardId].splice(existingIndex, 1)
 				state.attachments[deletedAttachment.cardId][existingIndex].deletedAt = -1
 			}
 		},