chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat: add upload file list with progress (#1825)

This commit is contained in:
Filippo Finke 2022-02-21 19:30:42 +01:00 committed by GitHub
parent 6f226fa549
commit cf85404dd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 325 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/prompts/UploadFiles.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div
v-if="filesInUploadCount > 0"
class="upload-files"
v-bind:class="{ closed: !open }"
>
<div class="card floating">
<div class="card-title">
<h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
<button
class="action"
@click="toggle"
aria-label="Toggle file upload list"
title="Toggle file upload list"
>
<i class="material-icons">{{
open ? "keyboard_arrow_down" : "keyboard_arrow_up"
}}</i>
</button>
</div>
<div class="card-content file-icons">
<div
class="file"
v-for="file in filesInUpload"
:key="file.id"
:data-type="file.type"
:aria-label="file.name"
>
<div class="file-name">
<i class="material-icons"></i> {{ file.name }}
</div>
<div class="file-progress">
<div v-bind:style="{ width: file.progress + '%' }"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "uploadFiles",
data: function () {
return {
open: false,
};
},
computed: {
...mapGetters(["filesInUpload", "filesInUploadCount"]),
},
methods: {
toggle: function () {
this.open = !this.open;
},
},
};
</script>

26
frontend/src/css/base.css
View File

@ -1,5 +1,5 @@
body { body {
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
padding-top: 4em; padding-top: 4em;
background-color: #fafafa; background-color: #fafafa;
color: #333333; color: #333333;
@ -13,7 +13,7 @@ body {
*:hover, *:hover,
*:active, *:active,
*:focus { *:focus {
outline: 0 outline: 0;
} }
a { a {
@ -44,7 +44,7 @@ i.spin {
} }
#app { #app {
transition: .2s ease padding; transition: 0.2s ease padding;
} }
#app.multiple { #app.multiple {
@ -63,7 +63,7 @@ nav .action {
display: block; display: block;
border-radius: 0; border-radius: 0;
font-size: 1.1em; font-size: 1.1em;
padding: .5em; padding: 0.5em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -97,8 +97,8 @@ main {
.breadcrumbs a { .breadcrumbs a {
color: inherit; color: inherit;
transition: .1s ease-in; transition: 0.1s ease-in;
border-radius: .125em; border-radius: 0.125em;
} }
.breadcrumbs a:hover { .breadcrumbs a:hover {
@ -106,10 +106,16 @@ main {
} }
.breadcrumbs span a { .breadcrumbs span a {
padding: .2em; padding: 0.2em;
} }
#progress { .files {
position: absolute;
bottom: 30px;
width: 100%;
}
.progress {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -118,11 +124,11 @@ main {
z-index: 9999999999; z-index: 9999999999;
} }
#progress div { .progress div {
height: 100%; height: 100%;
background-color: #40c4ff; background-color: #40c4ff;
width: 0; width: 0;
transition: .2s ease width; transition: 0.2s ease width;
} }
.break-word { .break-word {

252
frontend/src/css/listing-icons.css
View File

@ -2,202 +2,202 @@
/* General */ /* General */
#listing [aria-label^="."] { opacity: 0.33 } .file-icons [aria-label^="."] { opacity: 0.33 }
#listing [aria-label$=".bak"] { opacity: 0.33 } .file-icons [aria-label$=".bak"] { opacity: 0.33 }
#listing [data-type=audio] i::before { content: 'volume_up' } .file-icons [data-type=audio] i::before { content: 'volume_up' }
#listing [data-type=blob] i::before { content: 'insert_drive_file' } .file-icons [data-type=blob] i::before { content: 'insert_drive_file' }
#listing [data-type=image] i::before { content: 'image' } .file-icons [data-type=image] i::before { content: 'image' }
#listing [data-type=pdf] i::before { content: 'description' } .file-icons [data-type=pdf] i::before { content: 'description' }
#listing [data-type=text] i::before { content: 'description' } .file-icons [data-type=text] i::before { content: 'description' }
#listing [data-type=video] i::before { content: 'movie' } .file-icons [data-type=video] i::before { content: 'movie' }
/* #f90 - Image */ /* #f90 - Image */
#listing [aria-label$=".ai"] i::before, .file-icons [aria-label$=".ai"] i::before,
#listing [aria-label$=".odg"] i::before, .file-icons [aria-label$=".odg"] i::before,
#listing [aria-label$=".xcf"] i::before .file-icons [aria-label$=".xcf"] i::before
{ content: 'image' } { content: 'image' }
/* #f90 - Presentation */ /* #f90 - Presentation */
#listing [aria-label$=".odp"] i::before, .file-icons [aria-label$=".odp"] i::before,
#listing [aria-label$=".ppt"] i::before, .file-icons [aria-label$=".ppt"] i::before,
#listing [aria-label$=".pptx"] i::before .file-icons [aria-label$=".pptx"] i::before
{ content: 'slideshow' } { content: 'slideshow' }
/* #0f0 - Spreadsheet/Database */ /* #0f0 - Spreadsheet/Database */
#listing [aria-label$=".csv"] i::before, .file-icons [aria-label$=".csv"] i::before,
#listing [aria-label$=".db"] i::before, .file-icons [aria-label$=".db"] i::before,
#listing [aria-label$=".odb"] i::before, .file-icons [aria-label$=".odb"] i::before,
#listing [aria-label$=".ods"] i::before, .file-icons [aria-label$=".ods"] i::before,
#listing [aria-label$=".xls"] i::before, .file-icons [aria-label$=".xls"] i::before,
#listing [aria-label$=".xlsx"] i::before .file-icons [aria-label$=".xlsx"] i::before
{ content: 'border_all' } { content: 'border_all' }
/* #00f - Document */ /* #00f - Document */
#listing [aria-label$=".doc"] i::before, .file-icons [aria-label$=".doc"] i::before,
#listing [aria-label$=".docx"] i::before, .file-icons [aria-label$=".docx"] i::before,
#listing [aria-label$=".log"] i::before, .file-icons [aria-label$=".log"] i::before,
#listing [aria-label$=".odt"] i::before, .file-icons [aria-label$=".odt"] i::before,
#listing [aria-label$=".rtf"] i::before .file-icons [aria-label$=".rtf"] i::before
{ content: 'description' } { content: 'description' }
/* #999 - Code */ /* #999 - Code */
#listing [aria-label$=".c"] i::before, .file-icons [aria-label$=".c"] i::before,
#listing [aria-label$=".cpp"] i::before, .file-icons [aria-label$=".cpp"] i::before,
#listing [aria-label$=".cs"] i::before, .file-icons [aria-label$=".cs"] i::before,
#listing [aria-label$=".css"] i::before, .file-icons [aria-label$=".css"] i::before,
#listing [aria-label$=".go"] i::before, .file-icons [aria-label$=".go"] i::before,
#listing [aria-label$=".h"] i::before, .file-icons [aria-label$=".h"] i::before,
#listing [aria-label$=".html"] i::before, .file-icons [aria-label$=".html"] i::before,
#listing [aria-label$=".java"] i::before, .file-icons [aria-label$=".java"] i::before,
#listing [aria-label$=".js"] i::before, .file-icons [aria-label$=".js"] i::before,
#listing [aria-label$=".json"] i::before, .file-icons [aria-label$=".json"] i::before,
#listing [aria-label$=".kt"] i::before, .file-icons [aria-label$=".kt"] i::before,
#listing [aria-label$=".php"] i::before, .file-icons [aria-label$=".php"] i::before,
#listing [aria-label$=".py"] i::before, .file-icons [aria-label$=".py"] i::before,
#listing [aria-label$=".rb"] i::before, .file-icons [aria-label$=".rb"] i::before,
#listing [aria-label$=".rs"] i::before, .file-icons [aria-label$=".rs"] i::before,
#listing [aria-label$=".vue"] i::before, .file-icons [aria-label$=".vue"] i::before,
#listing [aria-label$=".xml"] i::before, .file-icons [aria-label$=".xml"] i::before,
#listing [aria-label$=".yml"] i::before .file-icons [aria-label$=".yml"] i::before
{ content: 'code' } { content: 'code' }
/* #999 - Executable */ /* #999 - Executable */
#listing [aria-label$=".apk"] i::before, .file-icons [aria-label$=".apk"] i::before,
#listing [aria-label$=".bat"] i::before, .file-icons [aria-label$=".bat"] i::before,
#listing [aria-label$=".exe"] i::before, .file-icons [aria-label$=".exe"] i::before,
#listing [aria-label$=".jar"] i::before, .file-icons [aria-label$=".jar"] i::before,
#listing [aria-label$=".ps1"] i::before, .file-icons [aria-label$=".ps1"] i::before,
#listing [aria-label$=".sh"] i::before .file-icons [aria-label$=".sh"] i::before
{ content: 'web_asset' } { content: 'web_asset' }
/* #999 - Installer */ /* #999 - Installer */
#listing [aria-label$=".deb"] i::before, .file-icons [aria-label$=".deb"] i::before,
#listing [aria-label$=".msi"] i::before, .file-icons [aria-label$=".msi"] i::before,
#listing [aria-label$=".pkg"] i::before, .file-icons [aria-label$=".pkg"] i::before,
#listing [aria-label$=".rpm"] i::before .file-icons [aria-label$=".rpm"] i::before
{ content: 'archive' } { content: 'archive' }
/* #999 - Compressed */ /* #999 - Compressed */
#listing [aria-label$=".7z"] i::before, .file-icons [aria-label$=".7z"] i::before,
#listing [aria-label$=".bz2"] i::before, .file-icons [aria-label$=".bz2"] i::before,
#listing [aria-label$=".cab"] i::before, .file-icons [aria-label$=".cab"] i::before,
#listing [aria-label$=".gz"] i::before, .file-icons [aria-label$=".gz"] i::before,
#listing [aria-label$=".rar"] i::before, .file-icons [aria-label$=".rar"] i::before,
#listing [aria-label$=".tar"] i::before, .file-icons [aria-label$=".tar"] i::before,
#listing [aria-label$=".xz"] i::before, .file-icons [aria-label$=".xz"] i::before,
#listing [aria-label$=".zip"] i::before, .file-icons [aria-label$=".zip"] i::before,
#listing [aria-label$=".zst"] i::before .file-icons [aria-label$=".zst"] i::before
{ content: 'folder_zip' } { content: 'folder_zip' }
/* #999 - Disk */ /* #999 - Disk */
#listing [aria-label$=".ccd"] i::before, .file-icons [aria-label$=".ccd"] i::before,
#listing [aria-label$=".dmg"] i::before, .file-icons [aria-label$=".dmg"] i::before,
#listing [aria-label$=".iso"] i::before, .file-icons [aria-label$=".iso"] i::before,
#listing [aria-label$=".mdf"] i::before, .file-icons [aria-label$=".mdf"] i::before,
#listing [aria-label$=".vdi"] i::before, .file-icons [aria-label$=".vdi"] i::before,
#listing [aria-label$=".vhd"] i::before, .file-icons [aria-label$=".vhd"] i::before,
#listing [aria-label$=".vmdk"] i::before, .file-icons [aria-label$=".vmdk"] i::before,
#listing [aria-label$=".wim"] i::before .file-icons [aria-label$=".wim"] i::before
{ content: 'album' } { content: 'album' }
/* #999 - Font */ /* #999 - Font */
#listing [aria-label$=".otf"] i::before, .file-icons [aria-label$=".otf"] i::before,
#listing [aria-label$=".ttf"] i::before, .file-icons [aria-label$=".ttf"] i::before,
#listing [aria-label$=".woff"] i::before, .file-icons [aria-label$=".woff"] i::before,
#listing [aria-label$=".woff2"] i::before .file-icons [aria-label$=".woff2"] i::before
{ content: 'font_download' } { content: 'font_download' }
/* Colors */ /* Colors */
/* General */ /* General */
#listing [data-type=audio] i { color: var(--icon-yellow) } .file-icons [data-type=audio] i { color: var(--icon-yellow) }
#listing [data-type=image] i { color: var(--icon-orange) } .file-icons [data-type=image] i { color: var(--icon-orange) }
#listing [data-type=video] i { color: var(--icon-violet) } .file-icons [data-type=video] i { color: var(--icon-violet) }
/* #f00 - Adobe/Oracle */ /* #f00 - Adobe/Oracle */
#listing [aria-label$=".ai"] i, .file-icons [aria-label$=".ai"] i,
#listing [aria-label$=".java"] i, .file-icons [aria-label$=".java"] i,
#listing [aria-label$=".jar"] i, .file-icons [aria-label$=".jar"] i,
#listing [aria-label$=".psd"] i, .file-icons [aria-label$=".psd"] i,
#listing [aria-label$=".rb"] i, .file-icons [aria-label$=".rb"] i,
#listing [data-type=pdf] i .file-icons [data-type=pdf] i
{ color: var(--icon-red) } { color: var(--icon-red) }
/* #f90 - Image/Presentation */ /* #f90 - Image/Presentation */
#listing [aria-label$=".html"] i, .file-icons [aria-label$=".html"] i,
#listing [aria-label$=".odg"] i, .file-icons [aria-label$=".odg"] i,
#listing [aria-label$=".odp"] i, .file-icons [aria-label$=".odp"] i,
#listing [aria-label$=".ppt"] i, .file-icons [aria-label$=".ppt"] i,
#listing [aria-label$=".pptx"] i, .file-icons [aria-label$=".pptx"] i,
#listing [aria-label$=".vue"] i, .file-icons [aria-label$=".vue"] i,
#listing [aria-label$=".xcf"] i .file-icons [aria-label$=".xcf"] i
{ color: var(--icon-orange) } { color: var(--icon-orange) }
/* #ff0 - Various */ /* #ff0 - Various */
#listing [aria-label$=".css"] i, .file-icons [aria-label$=".css"] i,
#listing [aria-label$=".js"] i, .file-icons [aria-label$=".js"] i,
#listing [aria-label$=".json"] i, .file-icons [aria-label$=".json"] i,
#listing [aria-label$=".zip"] i .file-icons [aria-label$=".zip"] i
{ color: var(--icon-yellow) } { color: var(--icon-yellow) }
/* #0f0 - Spreadsheet/Google */ /* #0f0 - Spreadsheet/Google */
#listing [aria-label$=".apk"] i, .file-icons [aria-label$=".apk"] i,
#listing [aria-label$=".dex"] i, .file-icons [aria-label$=".dex"] i,
#listing [aria-label$=".go"] i, .file-icons [aria-label$=".go"] i,
#listing [aria-label$=".ods"] i, .file-icons [aria-label$=".ods"] i,
#listing [aria-label$=".xls"] i, .file-icons [aria-label$=".xls"] i,
#listing [aria-label$=".xlsx"] i .file-icons [aria-label$=".xlsx"] i
{ color: var(--icon-green) } { color: var(--icon-green) }
/* #00f - Document/Microsoft/Apple/Closed */ /* #00f - Document/Microsoft/Apple/Closed */
#listing [aria-label$=".aac"] i, .file-icons [aria-label$=".aac"] i,
#listing [aria-label$=".bat"] i, .file-icons [aria-label$=".bat"] i,
#listing [aria-label$=".cab"] i, .file-icons [aria-label$=".cab"] i,
#listing [aria-label$=".cs"] i, .file-icons [aria-label$=".cs"] i,
#listing [aria-label$=".dmg"] i, .file-icons [aria-label$=".dmg"] i,
#listing [aria-label$=".doc"] i, .file-icons [aria-label$=".doc"] i,
#listing [aria-label$=".docx"] i, .file-icons [aria-label$=".docx"] i,
#listing [aria-label$=".emf"] i, .file-icons [aria-label$=".emf"] i,
#listing [aria-label$=".exe"] i, .file-icons [aria-label$=".exe"] i,
#listing [aria-label$=".ico"] i, .file-icons [aria-label$=".ico"] i,
#listing [aria-label$=".mp2"] i, .file-icons [aria-label$=".mp2"] i,
#listing [aria-label$=".mp3"] i, .file-icons [aria-label$=".mp3"] i,
#listing [aria-label$=".mp4"] i, .file-icons [aria-label$=".mp4"] i,
#listing [aria-label$=".mpg"] i, .file-icons [aria-label$=".mpg"] i,
#listing [aria-label$=".msi"] i, .file-icons [aria-label$=".msi"] i,
#listing [aria-label$=".odt"] i, .file-icons [aria-label$=".odt"] i,
#listing [aria-label$=".ps1"] i, .file-icons [aria-label$=".ps1"] i,
#listing [aria-label$=".rtf"] i, .file-icons [aria-label$=".rtf"] i,
#listing [aria-label$=".vob"] i, .file-icons [aria-label$=".vob"] i,
#listing [aria-label$=".wim"] i .file-icons [aria-label$=".wim"] i
{ color: var(--icon-blue) } { color: var(--icon-blue) }
/* #60f - Various */ /* #60f - Various */
#listing [aria-label$=".iso"] i, .file-icons [aria-label$=".iso"] i,
#listing [aria-label$=".php"] i, .file-icons [aria-label$=".php"] i,
#listing [aria-label$=".rar"] i .file-icons [aria-label$=".rar"] i
{ color: var(--icon-violet) } { color: var(--icon-violet) }
/* Overrides */ /* Overrides */
#listing [data-dir=true] i { color: var(--icon-blue) } .file-icons [data-dir=true] i { color: var(--icon-blue) }
#listing [data-dir=true] i::before { content: 'folder' } .file-icons [data-dir=true] i::before { content: 'folder' }
#listing [aria-selected=true] i { color: var(--item-selected) } .file-icons [aria-selected=true] i { color: var(--item-selected) }

1
frontend/src/css/styles.css
View File

@ -11,6 +11,7 @@
@import "./header.css"; @import "./header.css";
@import "./listing.css"; @import "./listing.css";
@import "./listing-icons.css"; @import "./listing-icons.css";
@import "./upload-files.css";
@import "./dashboard.css"; @import "./dashboard.css";
@import "./login.css"; @import "./login.css";

61
frontend/src/css/upload-files.css Normal file
View File

@ -0,0 +1,61 @@
.upload-files .card.floating {
left: auto;
top: auto;
margin: 0;
right: 0;
bottom: 0;
transform: none;
}
.upload-files .file {
margin-bottom: 8px;
}
.upload-files .file .file-name {
font-size: 1.1em;
display: flex;
align-items: center;
}
.upload-files .file .file-name i {
margin-right: 5px;
}
.upload-files .file .file-progress {
margin-top: 2px;
width: 100%;
height: 5px;
}
.upload-files .file .file-progress div {
height: 100%;
background-color: #40c4ff;
width: 0;
transition: 0.2s ease width;
border-radius: 10px;
}
.upload-files.closed .card-content {
display: none;
padding: 0em 1em 1em 1em;
}
.upload-files .card .card-title {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
padding: 1em 1em 0em;
}
.upload-files.closed .card-title {
font-size: 0.7em;
padding: 0.5em 1em;
}
@media (max-width: 450px) {
.upload-files .card.floating {
max-width: 100%;
width: 100%;
}
}

1
frontend/src/i18n/en.json
View File

@ -151,6 +151,7 @@
"show": "Show", "show": "Show",
"size": "Size", "size": "Size",
"upload": "Upload", "upload": "Upload",
"uploadFiles": "Uploading {files} files...",
"uploadMessage": "Select an option to upload.", "uploadMessage": "Select an option to upload.",
"optionalPassword": "Optional password" "optionalPassword": "Optional password"
}, },

30
frontend/src/store/getters.js
View File

@ -8,8 +8,36 @@ const getters = {
return 0; return 0;
} }
let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0);
let sum = state.upload.progress.reduce((acc, val) => acc + val); let sum = state.upload.progress.reduce((acc, val) => acc + val);
return Math.ceil((sum / state.upload.size) * 100); return Math.ceil((sum / totalSize) * 100);
},
filesInUploadCount: (state) => {
let total =
Object.keys(state.upload.uploads).length + state.upload.queue.length;
return total;
},
filesInUpload: (state) => {
let files = [];
for (let index in state.upload.uploads) {
let upload = state.upload.uploads[index];
let id = upload.id;
let type = upload.type;
let name = decodeURIComponent(upload.path.replace(/^.*[\\/]/, ""));
let progress = state.upload.progress[id];
let size = state.upload.sizes[id];
files.push({
id,
name,
progress: Math.ceil((progress / size) * 100),
type,
});
}
return files.sort((a, b) => a.progress - b.progress);
}, },
}; };

7
frontend/src/store/modules/upload.js
View File

@ -7,7 +7,7 @@ const UPLOADS_LIMIT = 5;
const state = { const state = {
id: 0, id: 0,
size: 0, sizes: [],
progress: [], progress: [],
queue: [], queue: [],
uploads: {}, uploads: {},
@ -19,12 +19,12 @@ const mutations = {
}, },
reset: (state) => { reset: (state) => {
state.id = 0; state.id = 0;
state.size = 0; state.sizes = [];
state.progress = []; state.progress = [];
}, },
addJob: (state, item) => { addJob: (state, item) => {
state.queue.push(item); state.queue.push(item);
state.size += item.file.size; state.sizes[state.id] = item.file.size;
state.id++; state.id++;
}, },
moveJob(state) { moveJob(state) {
@ -33,6 +33,7 @@ const mutations = {
Vue.set(state.uploads, item.id, item); Vue.set(state.uploads, item.id, item);
}, },
removeJob(state, id) { removeJob(state, id) {
Vue.delete(state.uploads, id);
delete state.uploads[id]; delete state.uploads[id];
}, },
}; };

10
frontend/src/utils/upload.js
View File

@ -99,6 +99,15 @@ export function scanFiles(dt) {
}); });
} }
function detectType(mimetype) {
if (mimetype.startsWith("video")) return "video";
if (mimetype.startsWith("audio")) return "audio";
if (mimetype.startsWith("image")) return "image";
if (mimetype.startsWith("pdf")) return "pdf";
if (mimetype.startsWith("text")) return "text";
return "blob";
}
export function handleFiles(files, base, overwrite = false) { export function handleFiles(files, base, overwrite = false) {
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
let id = store.state.upload.id; let id = store.state.upload.id;
@ -120,6 +129,7 @@ export function handleFiles(files, base, overwrite = false) {
path, path,
file, file,
overwrite, overwrite,
type: detectType(file.type),
}; };
store.dispatch("upload/upload", item); store.dispatch("upload/upload", item);

5
frontend/src/views/Layout.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="progress"> <div v-if="progress" class="progress">
<div v-bind:style="{ width: this.progress + '%' }"></div> <div v-bind:style="{ width: this.progress + '%' }"></div>
</div> </div>
<sidebar></sidebar> <sidebar></sidebar>
@ -9,6 +9,7 @@
<shell v-if="isExecEnabled && isLogged && user.perm.execute" /> <shell v-if="isExecEnabled && isLogged && user.perm.execute" />
</main> </main>
<prompts></prompts> <prompts></prompts>
<upload-files></upload-files>
</div> </div>
</template> </template>
@ -17,6 +18,7 @@ import { mapState, mapGetters } from "vuex";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import Prompts from "@/components/prompts/Prompts"; import Prompts from "@/components/prompts/Prompts";
import Shell from "@/components/Shell"; import Shell from "@/components/Shell";
import UploadFiles from "../components/prompts/UploadFiles";
import { enableExec } from "@/utils/constants"; import { enableExec } from "@/utils/constants";
export default { export default {
@ -25,6 +27,7 @@ export default {
Sidebar, Sidebar,
Prompts, Prompts,
Shell, Shell,
UploadFiles,
}, },
computed: { computed: {
...mapGetters(["isLogged", "progress"]), ...mapGetters(["isLogged", "progress"]),

2
frontend/src/views/Share.vue
View File

@ -114,7 +114,7 @@
<div class="share__box__header" v-if="req.isDir"> <div class="share__box__header" v-if="req.isDir">
{{ $t("files.files") }} {{ $t("files.files") }}
</div> </div>
<div id="listing" class="list"> <div id="listing" class="list file-icons">
<item <item
v-for="item in req.items.slice(0, this.showLimit)" v-for="item in req.items.slice(0, this.showLimit)"
:key="base64(item.name)" :key="base64(item.name)"

7
frontend/src/views/files/Listing.vue
View File

@ -146,7 +146,12 @@
multiple multiple
/> />
</div> </div>
<div v-else id="listing" ref="listing" :class="user.viewMode"> <div
v-else
id="listing"
ref="listing"
:class="user.viewMode + ' file-icons'"
>
<div> <div>
<div class="item header"> <div class="item header">
<div></div> <div></div>