[#149] Make attachments stand out more (#152)

This commit is contained in:
Knut Ahlers 2023-11-22 13:04:23 +01:00 committed by GitHub
parent 4bbff364c9
commit eb2bce3119
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -52,19 +52,28 @@
</div> </div>
<template v-if="files.length > 0"> <template v-if="files.length > 0">
<p v-html="$t('text-attached-files')" /> <p v-html="$t('text-attached-files')" />
<ul> <div class="list-group mb-3">
<li <a
v-for="file in files" v-for="file in files"
:key="file.name" :key="file.name"
class="font-monospace" class="list-group-item list-group-item-action font-monospace d-flex align-items-center"
>
<a
:href="file.url" :href="file.url"
:download="file.name" :download="file.name"
>{{ file.name }}</a> @click="$set(hasDownloaded, file.name, true)"
({{ bytesToHuman(file.size) }}) >
</li> <i :class="fasFileType(file.type)" />
</ul> <span>{{ file.name }}</span>
<span class="ms-auto">{{ bytesToHuman(file.size) }}</span>
<i
v-if="!hasDownloaded[file.name]"
class="fas fa-fw fa-download ms-2 text-warning"
/>
<i
v-else
class="fas fa-fw fa-circle-check ms-2 text-success"
/>
</a>
</div>
</template> </template>
<p v-html="$t('text-hint-burned')" /> <p v-html="$t('text-hint-burned')" />
</template> </template>
@ -84,6 +93,7 @@ export default {
data() { data() {
return { return {
files: [], files: [],
hasDownloaded: {},
popover: null, popover: null,
secret: null, secret: null,
secretContentBlobURL: null, secretContentBlobURL: null,
@ -94,6 +104,23 @@ export default {
methods: { methods: {
bytesToHuman, bytesToHuman,
fasFileType(type) {
return [
'fas',
'fa-fw',
'me-2',
...[
{ icon: ['fa-file-pdf'], match: /application\/pdf/ },
{ icon: ['fa-file-audio'], match: /^audio\// },
{ icon: ['fa-file-image'], match: /^image\// },
{ icon: ['fa-file-lines'], match: /^text\// },
{ icon: ['fa-file-video'], match: /^video\// },
{ icon: ['fa-file-zipper'], match: /^application\/(gzip|x-tar|zip)$/ },
{ icon: ['fa-file-circle-question'], match: /.*/ },
].filter(el => el.match.test(type))[0].icon,
].join(' ')
},
// requestSecret requests the encrypted secret from the backend // requestSecret requests the encrypted secret from the backend
requestSecret() { requestSecret() {
this.secretLoading = true this.secretLoading = true
@ -129,7 +156,7 @@ export default {
file.arrayBuffer() file.arrayBuffer()
.then(ab => { .then(ab => {
const blobURL = window.URL.createObjectURL(new Blob([ab], { type: file.type })) const blobURL = window.URL.createObjectURL(new Blob([ab], { type: file.type }))
this.files.push({ name: file.name, size: ab.byteLength, url: blobURL }) this.files.push({ name: file.name, size: ab.byteLength, type: file.type, url: blobURL })
}) })
}) })
this.secretLoading = false this.secretLoading = false