mirrors/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2025-11-26 14:25:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add previewer title and loading indicator

Browse Source
This commit is contained in:
Ramires Viana
2020-07-14 01:19:48 +00:00
parent 0727496601
commit 716396a726
3 changed files with 38 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/files/Preview.vue
View File

@@ -5,18 +5,33 @@
<i class="material-icons">close</i>
</button>
<rename-button v-if="user.perm.rename"></rename-button>
<delete-button v-if="user.perm.delete"></delete-button>
<download-button v-if="user.perm.download"></download-button>
<info-button></info-button>
<template v-if="!loading">
<div class="title">
<span>{{ req.name }}</span>
</div>
<rename-button v-if="user.perm.rename"></rename-button>
<delete-button v-if="user.perm.delete"></delete-button>
<download-button v-if="user.perm.download"></download-button>
<info-button></info-button>
</template>
</div>
<button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
<i class="material-icons">chevron_left</i>
</button>
<button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
<i class="material-icons">chevron_right</i>
</button>
<div class="loading" v-if="loading">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<template v-if="!loading">
<button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
<i class="material-icons">chevron_left</i>
</button>
<button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
<i class="material-icons">chevron_right</i>
</button>
<div class="preview">
<ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
@@ -76,7 +91,7 @@ export default {
}
},
computed: {
...mapState(['req', 'user', 'oldReq', 'jwt']),
...mapState(['req', 'user', 'oldReq', 'jwt', 'loading']),
hasPrevious () {
return (this.previousLink !== '')
},