github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add previewer title and loading indicator

pull/1026/head
Ramires Viana 2020-07-14 01:19:48 +00:00
parent 0727496601
commit 716396a726
3 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/themes/dark.css
View File

@ -16,7 +16,7 @@ body {
#loading { #loading {
background: var(--background); background: var(--background);
} }
#loading .spinner div { #loading .spinner div, #previewer .loading .spinner div {
background: var(--icon); background: var(--icon);
} }

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

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

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

@ -125,8 +125,13 @@
height: 3.7em; height: 3.7em;
} }
#previewer .action:first-of-type { #previewer .bar .title {
margin-right: auto; margin-right: auto;
padding: 0 1em;
line-height: 2.7em;
overflow: hidden;
word-break: break-word;
color: #fff;
} }
#previewer .action i { #previewer .action i {
@ -219,6 +224,11 @@
font-size: 1.2em; font-size: 1.2em;
} }
#previewer .loading {
height: 100%;
width: 100%;
}
#editor-container #editor { #editor-container #editor {
height: calc(100vh - 8.2em); height: calc(100vh - 8.2em);
} }