feat: preview mobile dropdown

filebrowser · Aug 18, 2020 · 7787344 · 7787344
1 parent be8683f
commit 7787344
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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) {