chore: move files to frontend

frontend/src/components/buttons/Copy.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/Delete.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/Download.vue

@@ -0,0 +1,35 @@
+<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'])
+  },
+  methods: {
+    download: function () {
+      if (!this.isListing) {
+        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>

frontend/src/components/buttons/Info.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/Move.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/Rename.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/Share.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/Shell.vue

@@ -0,0 +1,17 @@
+<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>

frontend/src/components/buttons/SwitchView.vue

@@ -0,0 +1,40 @@
+<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>

frontend/src/components/buttons/Upload.vue

@@ -0,0 +1,17 @@
+<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 () {
+      document.getElementById('upload-input').click()
+    }
+  }
+}
+</script>