iridium/neko-custom
Archived
2
0
Fork 0
Code Pull Requests Activity

frontend improvements

Browse Source
This commit is contained in:
William Harrell 2022-11-16 20:58:39 -05:00
parent b65df3e3bf
commit 4885c2d69e
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/files.vue
View File

@ -18,6 +18,7 @@
<p v-if="downloads.length > 0">Downloads</p> <p v-if="downloads.length > 0">Downloads</p>
<div v-for="download in downloads" :key="download.id" class="transfers-list-item"> <div v-for="download in downloads" :key="download.id" class="transfers-list-item">
<div class="transfer-info"> <div class="transfer-info">
<i class="fas transfer-status" :class="{ 'fa-arrows-rotate': download.status !== 'completed', 'fa-check': download.status === 'completed' }"></i>
<p>{{ download.name }}</p> <p>{{ download.name }}</p>
<p class="file-size">{{ Math.min(100, Math.round(download.progress / download.size * 100))}}%</p> <p class="file-size">{{ Math.min(100, Math.round(download.progress / download.size * 100))}}%</p>
<i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(download)"></i> <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(download)"></i>
@ -28,6 +29,7 @@
<p v-if="uploads.length > 0">Uploads</p> <p v-if="uploads.length > 0">Uploads</p>
<div v-for="upload in uploads" :key="upload.id" class="transfers-list-item"> <div v-for="upload in uploads" :key="upload.id" class="transfers-list-item">
<div class="transfer-info"> <div class="transfer-info">
<i class="fas transfer-status" :class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }"></i>
<p>{{ upload.name }}</p> <p>{{ upload.name }}</p>
<p class="file-size">{{ Math.min(100, Math.round(upload.progress / upload.size * 100))}}%</p> <p class="file-size">{{ Math.min(100, Math.round(upload.progress / upload.size * 100))}}%</p>
<i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(upload)"></i> <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(upload)"></i>
@ -97,7 +99,7 @@
flex-direction: row; flex-direction: row;
} }
.file-icon { .file-icon, .transfer-status {
width: 14px; width: 14px;
margin-right: 0.5em; margin-right: 0.5em;
} }
@ -286,6 +288,9 @@
document.body.appendChild(link) document.body.appendChild(link)
link.click() link.click()
document.body.removeChild(link) document.body.removeChild(link)
transfer.progress = transfer.size
transfer.status = 'completed'
}).catch((err) => { }).catch((err) => {
this.$log.error(err) this.$log.error(err)
}) })
@ -370,15 +375,31 @@
} }
const ext = parts[parts.length - 1] const ext = parts[parts.length - 1]
switch (ext) { switch (ext) {
case 'mp3': case 'aac':
case 'flac': case 'flac':
case 'midi':
case 'mp3':
case 'ogg':
case 'wav':
className += 'fa-music' className += 'fa-music'
break break
case 'webm':
case 'mp4':
case 'mkv': case 'mkv':
case 'mov':
case 'mpeg':
case 'mp4':
case 'webm':
className += 'fa-film' className += 'fa-film'
break break
case 'bmp':
case 'gif':
case 'jpeg':
case 'jpg':
case 'png':
case 'svg':
case 'tiff':
case 'webp':
className += 'fa-image'
break;
default: default:
className += 'fa-file' className += 'fa-file'
} }