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 {
background: var(--background);
}
#loading .spinner div {
#loading .spinner div, #previewer .loading .spinner div {
background: var(--icon);
}

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 !== '')
},

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

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