feat: shared folder file listing
This commit is contained in:
Ramires Viana
parent
1ce3068a99
commit
e119bc55ea
|
|
@ -191,10 +191,10 @@ table th {
|
|||
}
|
||||
}
|
||||
|
||||
.share__box, .share__box__download {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
.share__box, .share__box__header {
|
||||
background: var(--surfacePrimary) !important;
|
||||
color: var(--textPrimary);
|
||||
}
|
||||
.share__box__download {
|
||||
.share__box__header {
|
||||
border-bottom-color: var(--divider);
|
||||
}
|
||||
|
|
@ -1,29 +1,58 @@
|
|||
.share__box {
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
|
||||
background: #fff;
|
||||
display: block;
|
||||
border-radius: 0.2em;
|
||||
width: 90%;
|
||||
max-width: 25em;
|
||||
margin: 6em auto;
|
||||
.share {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.share__box__download {
|
||||
@media (max-width: 736px) {
|
||||
.share {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.share__box {
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
|
||||
background: #fff;
|
||||
border-radius: 0.2em;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.share__box__header {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.share__box__info {
|
||||
.share__box__body {
|
||||
padding: 2em 3em;
|
||||
}
|
||||
|
||||
.share__box__title {
|
||||
margin-top: .2em;
|
||||
margin: 0 0 2em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.share__box__info {
|
||||
text-align: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.share__box__items {
|
||||
text-align: left;
|
||||
flex: 10 0 15em;
|
||||
}
|
||||
|
||||
.share__box__items #listing.list .item {
|
||||
cursor: auto;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.share__box__items #listing.list .item .name {
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="share" v-if="loaded">
|
||||
<a target="_blank" :href="link">
|
||||
<div class="share__box">
|
||||
<div class="share__box__download" v-if="file.isDir">{{ $t('download.downloadFolder') }}</div>
|
||||
<div class="share__box__download" v-else>{{ $t('download.downloadFile') }}</div>
|
||||
<div class="share__box__info">
|
||||
<div class="share__box share__box__info">
|
||||
<a target="_blank" :href="link">
|
||||
<div class="share__box__header" v-if="file.isDir">{{ $t('download.downloadFolder') }}</div>
|
||||
<div class="share__box__header" v-else>{{ $t('download.downloadFile') }}</div>
|
||||
<div class="share__box__body">
|
||||
<svg v-if="file.isDir" fill="#40c4ff" height="150" viewBox="0 0 24 24" width="150" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
|
|
@ -16,8 +16,30 @@
|
|||
<h1 class="share__box__title">{{ file.name }}</h1>
|
||||
<qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="file.isDir" class="share__box share__box__items">
|
||||
<div class="share__box__header" v-if="file.isDir">{{ $t('files.files') }}</div>
|
||||
|
||||
<div id="listing" class="list">
|
||||
<div class="item" v-for="(item) in file.items.slice(0, this.showLimit)" :key="base64(item.name)">
|
||||
<div>
|
||||
<i v-if="item.isDir" class="material-icons">folder</i>
|
||||
<i v-else-if="item.type==='image'" class="material-icons">insert_photo</i>
|
||||
<i v-else class="material-icons">insert_drive_file</i>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="name">{{ item.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="file.items.length > showLimit" class="item">
|
||||
<div>
|
||||
<p class="name"> + {{ file.items.length - showLimit }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,7 +56,8 @@ export default {
|
|||
data: () => ({
|
||||
loaded: false,
|
||||
notFound: false,
|
||||
file: null
|
||||
file: null,
|
||||
showLimit: 500
|
||||
}),
|
||||
watch: {
|
||||
'$route': 'fetchData'
|
||||
|
|
@ -54,6 +77,9 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
base64: function (name) {
|
||||
return window.btoa(unescape(encodeURIComponent(name)))
|
||||
},
|
||||
fetchData: async function () {
|
||||
try {
|
||||
this.file = await api.getHash(this.hash)
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ var withHashFile = func(fn handleFunc) handleFunc {
|
|||
Fs: d.user.Fs,
|
||||
Path: link.Path,
|
||||
Modify: d.user.Perm.Modify,
|
||||
Expand: false,
|
||||
Expand: true,
|
||||
Checker: d,
|
||||
})
|
||||
if err != nil {
|
||||
|
|
@ -54,7 +54,15 @@ func ifPathWithName(r *http.Request) string {
|
|||
}
|
||||
|
||||
var publicShareHandler = withHashFile(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
|
||||
return renderJSON(w, r, d.raw)
|
||||
file := d.raw.(*files.FileInfo)
|
||||
|
||||
if file.IsDir {
|
||||
file.Listing.Sorting = files.Sorting{By: "name", Asc: false}
|
||||
file.Listing.ApplySort()
|
||||
return renderJSON(w, r, file)
|
||||
}
|
||||
|
||||
return renderJSON(w, r, file)
|
||||
})
|
||||
|
||||
var publicDlHandler = withHashFile(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue