chore: header bar component

frontend/src/components/Header.vue

@@ -1,185 +0,0 @@
-<template>
-  <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>
-      </button>
-      <img :src="logoURL" alt="File Browser">
-      <search v-if="isLogged"></search>
-    </div>
-    <div>
-      <template v-if="isLogged || isSharing">
-        <button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
-          <i class="material-icons">search</i>
-        </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>
-
-        <!-- Menu that shows on listing AND mobile when there are files selected -->
-        <div id="file-selection" v-if="isMobile && isListing && !isSharing">
-          <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-          <share-button v-show="showShareButton"></share-button>
-          <rename-button v-show="showRenameButton"></rename-button>
-          <copy-button v-show="showCopyButton"></copy-button>
-          <move-button v-show="showMoveButton"></move-button>
-          <delete-button v-show="showDeleteButton"></delete-button>
-        </div>
-
-        <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div id="dropdown" :class="{ active: showMore }">
-          <div v-if="!isListing || !isMobile">
-            <share-button v-show="showShareButton"></share-button>
-            <rename-button v-show="showRenameButton"></rename-button>
-            <copy-button v-show="showCopyButton"></copy-button>
-            <move-button v-show="showMoveButton"></move-button>
-            <delete-button v-show="showDeleteButton"></delete-button>
-          </div>
-
-          <shell-button v-if="isExecEnabled && !isSharing && user.perm.execute" />
-          <switch-button v-show="isListing"></switch-button>
-          <download-button v-show="showDownloadButton"></download-button>
-          <upload-button v-show="showUpload"></upload-button>
-          <info-button v-show="isFiles"></info-button>
-
-          <button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
-            <i class="material-icons">check_circle</i>
-            <span>{{ $t('buttons.select') }}</span>
-          </button>
-        </div>
-      </template>
-
-      <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-    </div>
-  </header>
-</template>
-
-<script>
-import Search from './Search'
-import InfoButton from './buttons/Info'
-import DeleteButton from './buttons/Delete'
-import RenameButton from './buttons/Rename'
-import UploadButton from './buttons/Upload'
-import DownloadButton from './buttons/Download'
-import SwitchButton from './buttons/SwitchView'
-import MoveButton from './buttons/Move'
-import CopyButton from './buttons/Copy'
-import ShareButton from './buttons/Share'
-import ShellButton from './buttons/Shell'
-import {mapGetters, mapState} from 'vuex'
-import { logoURL, enableExec } from '@/utils/constants'
-import * as api from '@/api'
-import buttons from '@/utils/buttons'
-
-export default {
-  name: 'header-layout',
-  components: {
-    Search,
-    InfoButton,
-    DeleteButton,
-    ShareButton,
-    RenameButton,
-    DownloadButton,
-    CopyButton,
-    UploadButton,
-    SwitchButton,
-    MoveButton,
-    ShellButton
-  },
-  data: function () {
-    return {
-      width: window.innerWidth,
-      pluginData: {
-        api,
-        buttons,
-        'store': this.$store,
-        'router': this.$router
-      }
-    }
-  },
-  created () {
-    window.addEventListener('resize', () => {
-      this.width = window.innerWidth
-    })
-  },
-  computed: {
-    ...mapGetters([
-      'selectedCount',
-      'isFiles',
-      'isEditor',
-      'isPreview',
-      'isListing',
-      'isLogged',
-      'isSharing'
-    ]),
-    ...mapState([
-      'req',
-      'user',
-      'loading',
-      'reload',
-      'multiple'
-    ]),
-    logoURL: () => logoURL,
-    isExecEnabled: () => enableExec,
-    isMobile () {
-      return this.width <= 736
-    },
-    showUpload () {
-      return this.isListing && this.user.perm.create
-    },
-    showDownloadButton () {
-      return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
-    },
-    showDeleteButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount !== 0 && this.user.perm.delete)
-        : this.user.perm.delete)
-    },
-    showRenameButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showShareButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.share)
-        : this.user.perm.share)
-    },
-    showMoveButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showCopyButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.create)
-        : this.user.perm.create)
-    },
-    showMore () {
-      return (this.isFiles || this.isSharing) && this.$store.state.show === 'more'
-    },
-    showOverlay () {
-      return this.showMore
-    }
-  },
-  methods: {
-    openSidebar () {
-      this.$store.commit('showHover', 'sidebar')
-    },
-    openMore () {
-      this.$store.commit('showHover', 'more')
-    },
-    openSearch () {
-      this.$store.commit('showHover', 'search')
-    },
-    toggleMultipleSelection () {
-      this.$store.commit('multiple', !this.multiple)
-      this.resetPrompts()
-    },
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

frontend/src/components/files/Editor.vue

@@ -1,18 +1,13 @@
 <template>
   <div id="editor-container">
-    <div class="bar">
-      <button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
-        <i class="material-icons">close</i>
-      </button>
+    <header-bar>
+      <action icon="close" :label="$t('buttons.close')" @action="close()" />
+      <title>{{ req.name }}</title>
 
-      <div class="title">
-        <span>{{ req.name }}</span>
-      </div>
-
-      <button @click="save" v-show="user.perm.modify" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" id="save-button" class="action">
-        <i class="material-icons">save</i>
-      </button>
-    </div>
+      <template #actions>
+        <action id="save-button" icon="save" :label="$t('buttons.save')" @action="save()" />
+      </template>
+    </header-bar>
 
     <div id="breadcrumbs">
       <span><i class="material-icons">home</i></span>
@@ -30,16 +25,23 @@
 <script>
 import { mapState } from 'vuex'
 import { files as api } from '@/api'
+import { theme } from '@/utils/constants'
 import buttons from '@/utils/buttons'
 import url from '@/utils/url'
 
 import ace from 'ace-builds/src-min-noconflict/ace.js'
 import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
 import 'ace-builds/webpack-resolver'
-import { theme } from '@/utils/constants'
+
+import HeaderBar from '@/components/header/HeaderBar'
+import Action from '@/components/header/Action'
 
 export default {
   name: 'editor',
+  components: {
+    HeaderBar,
+    Action
+  },
   data: function () {
     return {}
   },
@@ -82,7 +84,7 @@ export default {
     window.removeEventListener('keydown', this.keyEvent)
     this.editor.destroy();
   },
-  mounted: function () {    
+  mounted: function () {
     const fileContent = this.req.content || '';
 
     this.editor = ace.edit('editor', {
@@ -126,6 +128,10 @@ export default {
         buttons.done(button)
         this.$showError(e)
       }
+    },
+    close () {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
     }
   }
 }

frontend/src/components/files/Preview.vue

@@ -1,24 +1,17 @@
 <template>
   <div id="previewer" @mousemove="toggleNavigation" @touchstart="toggleNavigation">
-    <div class="bar">
-      <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
-        <i class="material-icons">close</i>
-      </button>
+    <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" />
 
-      <div class="title">{{ this.name }}</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>
-
-      <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>
+      <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" />
+      </template>
+    </header-bar>
 
     <div class="loading" v-if="loading">
       <div class="spinner">
@@ -56,17 +49,18 @@
     <button @click="next" @mouseover="hoverNav = true" @mouseleave="hoverNav = false" :class="{ hidden: !hasNext || !showNav }" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
       <i class="material-icons">chevron_right</i>
     </button>
-
-    <div v-show="showMore" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import url from '@/utils/url'
-import { baseURL, resizePreview } from '@/utils/constants'
 import { files as api } from '@/api'
+import { baseURL, resizePreview } from '@/utils/constants'
+import url from '@/utils/url'
 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'
@@ -84,6 +78,8 @@ const mediaTypes = [
 export default {
   name: 'preview',
   components: {
+    HeaderBar,
+    Action,
     PreviewSizeButton,
     InfoButton,
     DeleteButton,
@@ -251,7 +247,11 @@ export default {
         this.showNav = false || this.hoverNav
         this.navTimeout = null
       }, 1500);
-    }, 500)
+    }, 500),
+    close () {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
+    }
   }
 }
 </script>

frontend/src/components/header/Action.vue

@@ -0,0 +1,17 @@
+<template>
+    <button @click="$emit('action')" :aria-label="label" :title="label" class="action">
+    <i class="material-icons">{{ icon }}</i>
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'action',
+  props: [ 'icon', 'label' ]
+}
+</script>
+
+<style>
+
+</style>

frontend/src/components/header/HeaderBar.vue

@@ -0,0 +1,47 @@
+<template>
+  <header>
+    <img v-if="showLogo !== undefined" :src="logoURL" />
+    <action v-if="showMenu !== undefined" class="menu-button" icon="menu" :label="$t('buttons.toggleSidebar')" @action="openSidebar()" />
+
+    <slot />
+
+    <div id="dropdown" :class="{ active: this.$store.state.show === 'more' }">
+      <slot name="actions" />
+    </div>
+
+    <action v-if="this.$slots.actions" id="more" icon="more_vert" :label="$t('buttons.more')" @action="$store.commit('showHover', 'more')" />
+
+    <div class="overlay" v-show="this.$store.state.show == 'more'" @click="$store.commit('closeHovers')" />
+  </header>
+</template>
+
+<script>
+import { logoURL } from '@/utils/constants'
+
+import Action from '@/components/header/Action'
+
+export default {
+  name: 'header-bar',
+  props: [
+    'showLogo',
+    'showMenu',
+  ],
+  components: {
+    Action
+  },
+  data: function () {
+    return {
+      logoURL
+    }
+  },
+  methods: {
+    openSidebar () {
+      this.$store.commit('showHover', 'sidebar')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>