Infra-Mirrors/ots
1
0
Fork 0
mirror of https://github.com/Luzifer/ots.git synced 2024-06-29 07:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/secret-display.vue
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"
:href="file.url"
:download="file.name"
@click="$set(hasDownloaded, file.name, true)"
> >
<a <i :class="fasFileType(file.type)" />
:href="file.url" <span>{{ file.name }}</span>
:download="file.name" <span class="ms-auto">{{ bytesToHuman(file.size) }}</span>
>{{ file.name }}</a> <i
({{ bytesToHuman(file.size) }}) v-if="!hasDownloaded[file.name]"
</li> class="fas fa-fw fa-download ms-2 text-warning"
</ul> />
<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