feat: preview size button

This commit is contained in:
Ramires Viana 2020-08-18 13:08:58 +00:00
parent 778734419d
commit 3d2cb838d1
5 changed files with 46 additions and 4 deletions

View File

@ -0,0 +1,22 @@
<template>
<button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="$emit('change-size')">
<i class="material-icons">{{ this.icon }}</i>
<span>{{ $t('buttons.info') }}</span>
</button>
</template>
<script>
export default {
name: 'preview-size-button',
props: [ 'size' ],
computed: {
icon () {
if (this.size) {
return 'photo_size_select_large'
}
return 'hd'
}
}
}
</script>

View File

@ -77,6 +77,13 @@ export default {
window.removeEventListener('resize', this.onResize)
document.removeEventListener('mouseup', this.onMouseUp)
},
watch: {
src: function () {
this.scale = 1
this.setZoom()
this.setCenter()
}
},
methods: {
onLoad() {
let img = this.$refs.imgex

View File

@ -9,6 +9,7 @@
<span>{{ this.name }}</span>
</div>
<preview-size-button v-if="isResizeEnabled && this.req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading"></preview-size-button>
<button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
<i class="material-icons">more_vert</i>
</button>
@ -65,8 +66,9 @@
<script>
import { mapState } from 'vuex'
import url from '@/utils/url'
import { baseURL } from '@/utils/constants'
import { baseURL, resizePreview } from '@/utils/constants'
import { files as api } from '@/api'
import PreviewSizeButton from '@/components/buttons/PreviewSize'
import InfoButton from '@/components/buttons/Info'
import DeleteButton from '@/components/buttons/Delete'
import RenameButton from '@/components/buttons/Rename'
@ -83,6 +85,7 @@ const mediaTypes = [
export default {
name: 'preview',
components: {
PreviewSizeButton,
InfoButton,
DeleteButton,
RenameButton,
@ -95,7 +98,8 @@ export default {
nextLink: '',
listing: null,
name: '',
subtitles: []
subtitles: [],
fullSize: false
}
},
computed: {
@ -110,7 +114,7 @@ export default {
return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
},
previewUrl () {
if (this.req.type === 'image') {
if (this.req.type === 'image' && !this.fullSize) {
return `${baseURL}/api/preview/big${url.encodePath(this.req.path)}?auth=${this.jwt}`
}
return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
@ -120,6 +124,9 @@ export default {
},
showMore () {
return this.$store.state.show === 'more'
},
isResizeEnabled () {
return resizePreview
}
},
watch: {
@ -206,6 +213,9 @@ export default {
},
resetPrompts () {
this.$store.commit('closeHovers')
},
toggleSize () {
this.fullSize = !this.fullSize
}
}
}

View File

@ -12,6 +12,7 @@ const authMethod = window.FileBrowser.AuthMethod
const loginPage = window.FileBrowser.LoginPage
const theme = window.FileBrowser.Theme
const enableThumbs = window.FileBrowser.EnableThumbs
const resizePreview = window.FileBrowser.ResizePreview
export {
name,
@ -26,5 +27,6 @@ export {
authMethod,
loginPage,
theme,
enableThumbs
enableThumbs,
resizePreview
}

View File

@ -40,6 +40,7 @@ func handleWithStaticData(w http.ResponseWriter, _ *http.Request, d *data, box *
"ReCaptcha": false,
"Theme": d.settings.Branding.Theme,
"EnableThumbs": d.server.EnableThumbnails,
"ResizePreview": d.server.ResizePreview,
}
if d.settings.Branding.Files != "" {