zias/wolk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: shared item information

Browse Source
This commit is contained in:
Ramires Viana
2020-11-04 13:45:19 +00:00
parent 4e48ffc14d
commit 36cacdf598
3 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,34 +1,37 @@
<template>
<div class="share" v-if="loaded">
<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"/>
</svg>
<svg v-else fill="#40c4ff" height="150" viewBox="0 0 24 24" width="150" xmlns="http://www.w3.org/2000/svg">
<path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<h1 class="share__box__title">{{ file.name }}</h1>
<div class="share__box__header">
{{ file.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
</div>
<div class="share__box__element share__box__center share__box__icon">
<i class="material-icons">{{ file.isDir ? 'folder' : 'insert_drive_file'}}</i>
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.displayName') }}</strong> {{ file.name }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.size') }}:</strong> {{ humanSize }}
</div>
<div class="share__box__element share__box__center">
<a target="_blank" :href="link" class="button button--flat">{{ $t('buttons.download') }}</a>
</div>
<div class="share__box__element share__box__center">
<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 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>
<i class="material-icons">{{ item.isDir ? 'folder' : (item.type==='image') ? 'insert_photo' : 'insert_drive_file' }}</i>
</div>
<div>
<p class="name">{{ item.name }}</p>
</div>
@@ -46,6 +49,8 @@
<script>
import { share as api } from '@/api'
import { baseURL } from '@/utils/constants'
import filesize from 'filesize'
import moment from 'moment'
import QrcodeVue from 'qrcode.vue'
export default {
@@ -75,6 +80,16 @@ export default {
fullLink: function () {
return window.location.origin + this.link
},
humanSize: function () {
if (this.file.isDir) {
return this.file.items.length
}
return filesize(this.file.size)
},
humanTime: function () {
return moment(this.file.modified).fromNow()
}
},
methods: {
base64: function (name) {