From 778734419de314d4cb64d07109bbab73f8e2e42a Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Tue, 18 Aug 2020 12:47:23 +0000
Subject: [PATCH 1/2] feat: preview mobile dropdown

---
 frontend/src/components/Header.vue        |  3 ++-
 frontend/src/components/files/Preview.vue | 25 +++++++++++++++++++----
 frontend/src/store/getters.js             |  1 +
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index d9542864..0866fdba 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header v-if="!isEditor">
+  <header v-if="!isEditor && !isPreview">
     <div>
       <button @click="openSidebar" :aria-label="$t('buttons.toggleSidebar')" :title="$t('buttons.toggleSidebar')" class="action">
         <i class="material-icons">menu</i>
@@ -108,6 +108,7 @@ export default {
       'selectedCount',
       'isFiles',
       'isEditor',
+      'isPreview',
       'isListing',
       'isLogged'
     ]),
diff --git a/frontend/src/components/files/Preview.vue b/frontend/src/components/files/Preview.vue
index 2e89b92c..519e259a 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/frontend/src/components/files/Preview.vue
@@ -9,10 +9,16 @@
         <span>{{ this.name }}</span>
       </div>
 
-      <rename-button :disabled="loading" v-if="user.perm.rename"></rename-button>
-      <delete-button :disabled="loading" v-if="user.perm.delete"></delete-button>
-      <download-button :disabled="loading" v-if="user.perm.download"></download-button>
-      <info-button :disabled="loading"></info-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>
+
+      <div id="dropdown" :class="{ active : showMore }">
+        <rename-button :disabled="loading" v-if="user.perm.rename"></rename-button>
+        <delete-button :disabled="loading" v-if="user.perm.delete"></delete-button>
+        <download-button :disabled="loading" v-if="user.perm.download"></download-button>
+        <info-button :disabled="loading"></info-button>
+      </div>
     </div>
 
     <div class="loading" v-if="loading">
@@ -51,6 +57,8 @@
         </a>
       </div>
     </template>
+
+    <div v-show="showMore" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
@@ -109,6 +117,9 @@ export default {
     },
     raw () {
       return `${this.previewUrl}&inline=true`
+    },
+    showMore () {
+      return this.$store.state.show === 'more'
     }
   },
   watch: {
@@ -189,6 +200,12 @@ export default {
 
         return
       }
+    },
+    openMore () {
+      this.$store.commit('showHover', 'more')
+    },
+    resetPrompts () {
+      this.$store.commit('closeHovers')
     }
   }
 }
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 0f9925f4..11ad60ab 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -3,6 +3,7 @@ const getters = {
   isFiles: state => !state.loading && state.route.name === 'Files',
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
+  isPreview: state => state.previewMode,
   selectedCount: state => state.selected.length,
   progress : state => {
     if (state.upload.progress.length == 0) {

From 3d2cb838d111ee61047599f49e76de80c821f341 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Tue, 18 Aug 2020 13:08:58 +0000
Subject: [PATCH 2/2] feat: preview size button

---
 .../src/components/buttons/PreviewSize.vue    | 22 +++++++++++++++++++
 .../src/components/files/ExtendedImage.vue    |  7 ++++++
 frontend/src/components/files/Preview.vue     | 16 +++++++++++---
 frontend/src/utils/constants.js               |  4 +++-
 http/static.go                                |  1 +
 5 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/buttons/PreviewSize.vue

diff --git a/frontend/src/components/buttons/PreviewSize.vue b/frontend/src/components/buttons/PreviewSize.vue
new file mode 100644
index 00000000..3183b56f
--- /dev/null
+++ b/frontend/src/components/buttons/PreviewSize.vue
@@ -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>
diff --git a/frontend/src/components/files/ExtendedImage.vue b/frontend/src/components/files/ExtendedImage.vue
index aeb27981..4cfe247e 100644
--- a/frontend/src/components/files/ExtendedImage.vue
+++ b/frontend/src/components/files/ExtendedImage.vue
@@ -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
diff --git a/frontend/src/components/files/Preview.vue b/frontend/src/components/files/Preview.vue
index 519e259a..7a2ded1b 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/frontend/src/components/files/Preview.vue
@@ -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
     }
   }
 }
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 49a06dc6..e4689dae 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -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
 }
diff --git a/http/static.go b/http/static.go
index 117095c9..32ed3fa1 100644
--- a/http/static.go
+++ b/http/static.go
@@ -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 != "" {