From 057307181e48a57d58760128e8b4056b8282198b Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Mon, 1 Mar 2021 13:41:35 +0000
Subject: [PATCH] chore: removed header buttons components

---
 frontend/src/components/buttons/Copy.vue      | 17 ----
 frontend/src/components/buttons/Delete.vue    | 17 ----
 frontend/src/components/buttons/Download.vue  | 35 --------
 frontend/src/components/buttons/Info.vue      | 17 ----
 frontend/src/components/buttons/Move.vue      | 17 ----
 .../src/components/buttons/PreviewSize.vue    | 22 -----
 frontend/src/components/buttons/Rename.vue    | 17 ----
 frontend/src/components/buttons/Share.vue     | 17 ----
 frontend/src/components/buttons/Shell.vue     | 17 ----
 .../src/components/buttons/SwitchView.vue     | 40 ---------
 frontend/src/components/buttons/Upload.vue    | 21 -----
 frontend/src/components/header/Action.vue     | 19 ++++-
 frontend/src/views/Share.vue                  | 20 +++--
 frontend/src/views/files/Listing.vue          | 84 +++++++++++--------
 frontend/src/views/files/Preview.vue          | 29 +++----
 15 files changed, 87 insertions(+), 302 deletions(-)
 delete mode 100644 frontend/src/components/buttons/Copy.vue
 delete mode 100644 frontend/src/components/buttons/Delete.vue
 delete mode 100644 frontend/src/components/buttons/Download.vue
 delete mode 100644 frontend/src/components/buttons/Info.vue
 delete mode 100644 frontend/src/components/buttons/Move.vue
 delete mode 100644 frontend/src/components/buttons/PreviewSize.vue
 delete mode 100644 frontend/src/components/buttons/Rename.vue
 delete mode 100644 frontend/src/components/buttons/Share.vue
 delete mode 100644 frontend/src/components/buttons/Shell.vue
 delete mode 100644 frontend/src/components/buttons/SwitchView.vue
 delete mode 100644 frontend/src/components/buttons/Upload.vue

diff --git a/frontend/src/components/buttons/Copy.vue b/frontend/src/components/buttons/Copy.vue
deleted file mode 100644
index 84f4ce70..00000000
--- a/frontend/src/components/buttons/Copy.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.copy')" :title="$t('buttons.copy')" class="action" id="copy-button">
-    <i class="material-icons">content_copy</i>
-    <span>{{ $t('buttons.copyFile') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'copy-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'copy')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Delete.vue b/frontend/src/components/buttons/Delete.vue
deleted file mode 100644
index 5901ba78..00000000
--- a/frontend/src/components/buttons/Delete.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')" class="action" id="delete-button">
-    <i class="material-icons">delete</i>
-    <span>{{ $t('buttons.delete') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'delete-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'delete')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Download.vue b/frontend/src/components/buttons/Download.vue
deleted file mode 100644
index 3798771f..00000000
--- a/frontend/src/components/buttons/Download.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <button @click="download" :aria-label="$t('buttons.download')" :title="$t('buttons.download')" id="download-button" class="action">
-    <i class="material-icons">file_download</i>
-    <span>{{ $t('buttons.download') }}</span>
-    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
-  </button>
-</template>
-
-<script>
-import {mapGetters, mapState} from 'vuex'
-import { files as api } from '@/api'
-
-export default {
-  name: 'download-button',
-  computed: {
-    ...mapState(['req', 'selected']),
-    ...mapGetters(['isListing', 'selectedCount', 'isSharing'])
-  },
-  methods: {
-    download: function () {
-      if (!this.isListing && !this.isSharing) {
-        api.download(null, this.$route.path)
-        return
-      }
-
-      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
-        api.download(null, this.req.items[this.selected[0]].url)
-        return
-      }
-
-      this.$store.commit('showHover', 'download')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Info.vue b/frontend/src/components/buttons/Info.vue
deleted file mode 100644
index 4b20e798..00000000
--- a/frontend/src/components/buttons/Info.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="show">
-    <i class="material-icons">info</i>
-    <span>{{ $t('buttons.info') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'info-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'info')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Move.vue b/frontend/src/components/buttons/Move.vue
deleted file mode 100644
index 3c1985fc..00000000
--- a/frontend/src/components/buttons/Move.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.move')" :title="$t('buttons.move')" class="action" id="move-button">
-    <i class="material-icons">forward</i>
-    <span>{{ $t('buttons.moveFile') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'move-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'move')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/PreviewSize.vue b/frontend/src/components/buttons/PreviewSize.vue
deleted file mode 100644
index 3183b56f..00000000
--- a/frontend/src/components/buttons/PreviewSize.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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/buttons/Rename.vue b/frontend/src/components/buttons/Rename.vue
deleted file mode 100644
index 6eb61e39..00000000
--- a/frontend/src/components/buttons/Rename.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.rename')" :title="$t('buttons.rename')" class="action" id="rename-button">
-    <i class="material-icons">mode_edit</i>
-    <span>{{ $t('buttons.rename') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'rename-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'rename')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Share.vue b/frontend/src/components/buttons/Share.vue
deleted file mode 100644
index d9a2ec6a..00000000
--- a/frontend/src/components/buttons/Share.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.share')" :title="$t('buttons.share')" class="action">
-    <i class="material-icons">share</i>
-    <span>{{ $t('buttons.share') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'share-button',
-  methods: {
-    show () {
-      this.$store.commit('showHover', 'share')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Shell.vue b/frontend/src/components/buttons/Shell.vue
deleted file mode 100644
index a60e5602..00000000
--- a/frontend/src/components/buttons/Shell.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.shell')" :title="$t('buttons.shell')" class="action">
-    <i class="material-icons">code</i>
-    <span>{{ $t('buttons.shell') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'shell-button',
-  methods: {
-    show: function () {
-      this.$store.commit('toggleShell')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/SwitchView.vue b/frontend/src/components/buttons/SwitchView.vue
deleted file mode 100644
index eea4bba5..00000000
--- a/frontend/src/components/buttons/SwitchView.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <button @click="change" :aria-label="$t('buttons.switchView')" :title="$t('buttons.switchView')" class="action" id="switch-view-button">
-    <i class="material-icons">{{ icon }}</i>
-    <span>{{ $t('buttons.switchView') }}</span>
-  </button>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import { users as api } from '@/api'
-
-export default {
-  name: 'switch-button',
-  computed: {
-    ...mapState(['user']),
-    icon: function () {
-      if (this.user.viewMode === 'mosaic') return 'view_list'
-      return 'view_module'
-    }
-  },
-  methods: {
-    ...mapMutations([ 'updateUser', 'closeHovers' ]),
-    change: async function () {
-      this.closeHovers()
-
-      const data = {
-        id: this.user.id,
-        viewMode: (this.icon === 'view_list') ? 'list' : 'mosaic'
-      }
-
-      try {
-        await api.update(data, ['viewMode'])
-        this.updateUser(data)
-      } catch (e) {
-        this.$showError(e)
-      }
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/buttons/Upload.vue b/frontend/src/components/buttons/Upload.vue
deleted file mode 100644
index 9e7f07bd..00000000
--- a/frontend/src/components/buttons/Upload.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <button @click="upload" :aria-label="$t('buttons.upload')" :title="$t('buttons.upload')" class="action" id="upload-button">
-    <i class="material-icons">file_upload</i>
-    <span>{{ $t('buttons.upload') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'upload-button',
-  methods: {
-    upload: function () {
-      if (typeof(DataTransferItem.prototype.webkitGetAsEntry) !== 'undefined') {
-        this.$store.commit('showHover', 'upload')
-      } else {
-        document.getElementById('upload-input').click();
-      }
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/header/Action.vue b/frontend/src/components/header/Action.vue
index 5c4bc8fe..7279f9ce 100644
--- a/frontend/src/components/header/Action.vue
+++ b/frontend/src/components/header/Action.vue
@@ -1,14 +1,29 @@
 <template>
-    <button @click="$emit('action')" :aria-label="label" :title="label" class="action">
+    <button @click="action" :aria-label="label" :title="label" class="action">
     <i class="material-icons">{{ icon }}</i>
     <span>{{ label }}</span>
+    <span v-if="counter > 0" class="counter">{{ counter }}</span>
   </button>
 </template>
 
 <script>
 export default {
   name: 'action',
-  props: [ 'icon', 'label' ]
+  props: [
+    'icon',
+    'label',
+    'counter',
+    'show'
+  ],
+  methods: {
+    action: function () {
+      if (this.show) {
+        this.$store.commit('showHover', this.show)
+      }
+
+      this.$emit('action')
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index fdb9d7f7..43f7de22 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -3,10 +3,8 @@
     <header-bar showMenu showLogo>
       <title />
 
-      <template #actions v-if="!error">
-        <download-button v-if="selectedCount" />
-        <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
-      </template>
+      <action v-if="selectedCount" icon="file_download" :label="$t('buttons.download')" @action="download" :counter="selectedCount" />
+      <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
     </header-bar>
 
     <div v-if="!loading">
@@ -107,14 +105,13 @@
 
 <script>
 import {mapState, mapMutations, mapGetters} from 'vuex';
-import { share as api } from '@/api'
+import { files, share as api } from '@/api'
 import { baseURL } from '@/utils/constants'
 import filesize from 'filesize'
 import moment from 'moment'
 
 import HeaderBar from '@/components/header/HeaderBar'
 import Action from '@/components/header/Action'
-import DownloadButton from '@/components/buttons/Download'
 import Errors from '@/views/Errors'
 import QrcodeVue from 'qrcode.vue'
 import Item from "@/components/files/ListingItem"
@@ -124,7 +121,6 @@ export default {
   components: {
     HeaderBar,
     Action,
-    DownloadButton,
     Item,
     QrcodeVue,
     Errors
@@ -151,7 +147,7 @@ export default {
     window.removeEventListener('keydown', this.keyEvent)
   },
   computed: {
-    ...mapState(['hash', 'req', 'loading', 'multiple']),
+    ...mapState(['hash', 'req', 'loading', 'multiple', 'selected']),
     ...mapGetters(['selectedCount', 'selectedCount']),
     icon: function () {
       if (this.req.isDir) return 'folder'
@@ -262,6 +258,14 @@ export default {
     },
     toggleMultipleSelection () {
       this.$store.commit('multiple', !this.multiple)
+    },
+    download () {
+      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
+        files.download(null, this.req.items[this.selected[0]].url)
+        return
+      }
+
+      this.$store.commit('showHover', 'download')
     }
   }
 }
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 48bafe5f..9c5a6325 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -6,29 +6,29 @@
 
       <template #actions>
         <template v-if="!isMobile">
-          <share-button v-if="headerButtons.share" />
-          <rename-button v-if="headerButtons.rename" />
-          <copy-button v-if="headerButtons.copy" />
-          <move-button v-if="headerButtons.move" />
-          <delete-button v-if="headerButtons.delete" />
+          <action v-if="headerButtons.share" icon="share" :label="$t('buttons.share')" show="share" />
+          <action v-if="headerButtons.rename" icon="mode_edit" :label="$t('buttons.rename')" show="rename" />
+          <action v-if="headerButtons.copy" icon="content_copy" :label="$t('buttons.copyFile')" show="copy" />
+          <action v-if="headerButtons.move" icon="forward" :label="$t('buttons.moveFile')" show="move" />
+          <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
         </template>
 
-        <shell-button v-if="headerButtons.shell" />
-        <switch-button />
-        <download-button v-if="headerButtons.download" />
-        <upload-button v-if="headerButtons.upload" />
-        <info-button />
+        <action v-if="headerButtons.shell" icon="code" :label="$t('buttons.shell')" @action="$store.commit('toggleShell')" />
+        <action :icon="user.viewMode  === 'mosaic' ? 'view_list' : 'view_module'" :label="$t('buttons.switchView')" @action="switchView" />
+        <action icon="file_download" :label="$t('buttons.download')" @action="download" :counter="selectedCount" />
+        <action icon="file_upload" :label="$t('buttons.upload')" @action="upload" />
+        <action icon="info" :label="$t('buttons.info')" show="info" />
         <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
       </template>
     </header-bar>
 
     <div v-if="isMobile" id="file-selection">
       <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-      <share-button v-if="headerButtons.share" />
-      <rename-button v-if="headerButtons.rename" />
-      <copy-button v-if="headerButtons.copy" />
-      <move-button v-if="headerButtons.move" />
-      <delete-button v-if="headerButtons.delete" />
+      <action v-if="headerButtons.share" icon="share" :label="$t('buttons.share')" show="share" />
+      <action v-if="headerButtons.rename" icon="mode_edit" :label="$t('buttons.rename')" show="rename" />
+      <action v-if="headerButtons.copy" icon="content_copy" :label="$t('buttons.copyFile')" show="copy" />
+      <action v-if="headerButtons.move" icon="forward" :label="$t('buttons.moveFile')" show="move" />
+      <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
     </div>
 
     <div v-if="(req.numDirs + req.numFiles) == 0">
@@ -128,16 +128,6 @@ import css from '@/utils/css'
 import HeaderBar from '@/components/header/HeaderBar'
 import Action from '@/components/header/Action'
 import Search from '@/components/Search'
-import InfoButton from '@/components/buttons/Info'
-import DeleteButton from '@/components/buttons/Delete'
-import RenameButton from '@/components/buttons/Rename'
-import UploadButton from '@/components/buttons/Upload'
-import DownloadButton from '@/components/buttons/Download'
-import SwitchButton from '@/components/buttons/SwitchView'
-import MoveButton from '@/components/buttons/Move'
-import CopyButton from '@/components/buttons/Copy'
-import ShareButton from '@/components/buttons/Share'
-import ShellButton from '@/components/buttons/Shell'
 import Item from '@/components/files/ListingItem'
 
 export default {
@@ -146,16 +136,6 @@ export default {
     HeaderBar,
     Action,
     Search,
-    InfoButton,
-    DeleteButton,
-    ShareButton,
-    RenameButton,
-    DownloadButton,
-    CopyButton,
-    UploadButton,
-    SwitchButton,
-    MoveButton,
-    ShellButton,
     Item
   },
   data: function () {
@@ -241,8 +221,8 @@ export default {
         delete: this.selectedCount > 0 && this.user.perm.delete,
         rename: this.selectedCount === 1 && this.user.perm.rename,
         share: this.selectedCount === 1 && this.user.perm.share,
-        move: this.selectedCount === 1 && this.user.perm.rename,
-        copy: this.selectedCount === 1 && this.user.perm.create,
+        move: this.selectedCount > 0 && this.user.perm.rename,
+        copy: this.selectedCount > 0 && this.user.perm.create,
       }
     },
     isMobile () {
@@ -586,6 +566,36 @@ export default {
     },
     windowsResize () {
       this.width = window.innerWidth
+    },
+    download() {
+      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
+        api.download(null, this.req.items[this.selected[0]].url)
+        return
+      }
+
+      this.$store.commit('showHover', 'download')
+    },
+    switchView: async function () {
+      this.$store.commit('closeHovers')
+
+      const data = {
+        id: this.user.id,
+        viewMode: (this.user.viewMode === 'mosaic') ? 'list' : 'mosaic'
+      }
+
+      try {
+        await users.update(data, ['viewMode'])
+        this.$store.commit('updateUser', data)
+      } catch (e) {
+        this.$showError(e)
+      }
+    },
+    upload: function () {
+      if (typeof(DataTransferItem.prototype.webkitGetAsEntry) !== 'undefined') {
+        this.$store.commit('showHover', 'upload')
+      } else {
+        document.getElementById('upload-input').click();
+      }
     }
   }
 }
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index 30a0a9a7..f9c0c17f 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -3,13 +3,13 @@
     <header-bar>
       <action icon="close" :label="$t('buttons.close')" @action="close()" />
       <title>{{ name }}</title>
-      <preview-size-button v-if="isResizeEnabled && req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading" />
+      <action :disabled="loading" v-if="isResizeEnabled && req.type === 'image'" :icon="fullSize ? 'photo_size_select_large' : 'hd'" @action="toggleSize" />
 
       <template #actions>
-        <rename-button :disabled="loading" v-if="user.perm.rename" />
-        <delete-button :disabled="loading" v-if="user.perm.delete" />
-        <download-button :disabled="loading" v-if="user.perm.download" />
-        <info-button :disabled="loading" />
+        <action :disabled="loading" icon="mode_edit" :label="$t('buttons.rename')" show="rename" />
+        <action :disabled="loading" icon="delete" :label="$t('buttons.delete')" show="delete" />
+        <action :disabled="loading" icon="file_download" :label="$t('buttons.download')" @action="download" />
+        <action :disabled="loading" icon="info" :label="$t('buttons.info')" show="info" />
       </template>
     </header-bar>
 
@@ -33,11 +33,11 @@
             :src="sub"
             :label="'Subtitle ' + index" :default="index === 0">
           Sorry, your browser doesn't support embedded videos,
-          but don't worry, you can <a :href="download">download it</a>
+          but don't worry, you can <a :href="downloadUrl">download it</a>
           and watch it with your favorite video player!
         </video>
         <object v-else-if="req.extension.toLowerCase() == '.pdf'" class="pdf" :data="raw"></object>
-        <a v-else-if="req.type == 'blob'" :href="download">
+        <a v-else-if="req.type == 'blob'" :href="downloadUrl">
           <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
         </a>
       </div>
@@ -61,11 +61,6 @@ import throttle from 'lodash.throttle'
 
 import HeaderBar from '@/components/header/HeaderBar'
 import Action from '@/components/header/Action'
-import PreviewSizeButton from '@/components/buttons/PreviewSize'
-import InfoButton from '@/components/buttons/Info'
-import DeleteButton from '@/components/buttons/Delete'
-import RenameButton from '@/components/buttons/Rename'
-import DownloadButton from '@/components/buttons/Download'
 import ExtendedImage from '@/components/files/ExtendedImage'
 
 const mediaTypes = [
@@ -80,11 +75,6 @@ export default {
   components: {
     HeaderBar,
     Action,
-    PreviewSizeButton,
-    InfoButton,
-    DeleteButton,
-    RenameButton,
-    DownloadButton,
     ExtendedImage
   },
   data: function () {
@@ -108,7 +98,7 @@ export default {
     hasNext () {
       return (this.nextLink !== '')
     },
-    download () {
+    downloadUrl () {
       return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
     },
     previewUrl () {
@@ -251,6 +241,9 @@ export default {
     close () {
       let uri = url.removeLastDir(this.$route.path) + '/'
       this.$router.push({ path: uri })
+    },
+    download() {
+      api.download(null, this.$route.path)
     }
   }
 }