Mobile interface :)

Former-commit-id: e79f1477c572712812bff35e889dcd40bdd4b53c [formerly b0bc8f1ca07a70c3677b835039c37e829a1bda37] [formerly d36856934e188cfd989977229c048b71dabd5a22 [formerly 1645a8830ec0a674f6684113a3058ba00ffcd88a]]
Former-commit-id: f055189acbc2c0a431683c46d8662bc5c910663f [formerly 9e521e32ec949532dc7dce003534f5fe726254f7]
Former-commit-id: 132cc78a5eda743ea6e1a3675442819ad87cbcf2

assets/src/components/Files.vue

@@ -1,16 +1,28 @@
 <template>
-  <div v-if="error">
-    <not-found v-if="error === 404"></not-found>
-    <forbidden v-else-if="error === 403"></forbidden>
-    <internal-error v-else></internal-error>
-  </div>
-  <editor v-else-if="isEditor"></editor>
-  <listing :class="{ multiple }" v-else-if="isListing"></listing>
-  <preview v-else-if="isPreview"></preview>
-  <div v-else>
-    <h2 class="message">
-      <span>Loading...</span>
-    </h2>
+  <div>
+    <div id="breadcrumbs">
+      <router-link to="/files/">
+        <i class="material-icons">home</i>
+      </router-link>
+
+      <span v-for="link in breadcrumbs" :key="link.name">
+        <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
+        <router-link :to="link.url">{{ link.name }}</router-link>
+      </span>
+    </div>
+    <div v-if="error">
+      <not-found v-if="error === 404"></not-found>
+      <forbidden v-else-if="error === 403"></forbidden>
+      <internal-error v-else></internal-error>
+    </div>
+    <editor v-else-if="isEditor"></editor>
+    <listing :class="{ multiple }" v-else-if="isListing"></listing>
+    <preview v-else-if="isPreview"></preview>
+    <div v-else>
+      <h2 class="message">
+        <span>Loading...</span>
+      </h2>
+    </div>
   </div>
 </template>
 
@@ -53,6 +65,30 @@ export default {
     },
     isEditor () {
       return this.req.kind === 'editor' && !this.loading
+    },
+    breadcrumbs () {
+      let parts = this.$route.path.split('/')
+
+      if (parts[0] === '') {
+        parts.shift()
+      }
+
+      if (parts[parts.length - 1] === '') {
+        parts.pop()
+      }
+
+      let breadcrumbs = []
+
+      for (let i = 0; i < parts.length; i++) {
+        if (i === 0) {
+          breadcrumbs.push({ name: parts[i], url: '/' + parts[i] + '/' })
+        } else {
+          breadcrumbs.push({ name: parts[i], url: breadcrumbs[i - 1].url + parts[i] + '/' })
+        }
+      }
+
+      breadcrumbs.shift()
+      return breadcrumbs
     }
   },
   data: function () {

assets/src/components/Header.vue

@@ -15,18 +15,38 @@
       <button v-show="showSaveButton" aria-label="Save" class="action" id="save-button">
         <i class="material-icons" title="Save">save</i>
       </button>
-      <rename-button v-show="showRenameButton"></rename-button>
-      <move-button v-show="showMoveButton"></move-button>
-      <delete-button v-show="showDeleteButton"></delete-button>
-      <switch-button v-show="showSwitchButton"></switch-button>
-      <download-button v-show="showCommonButton"></download-button>
-      <upload-button v-show="showUpload"></upload-button>
-      <info-button v-show="showCommonButton"></info-button>
 
-      <button v-show="showSelectButton" @click="$store.commit('multiple', true)" aria-label="Select multiple" class="action">
-        <i class="material-icons">check_circle</i>
-        <span>Select</span>
+      <button @click="openMore" id="more" aria-label="More" title="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 && req.kind === 'listing'">
+        <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
+        <rename-button v-show="showRenameButton"></rename-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">
+          <rename-button v-show="showRenameButton"></rename-button>
+          <move-button v-show="showMoveButton"></move-button>
+          <delete-button v-show="showDeleteButton"></delete-button>
+        </div>
+
+        <switch-button v-show="showSwitchButton"></switch-button>
+        <download-button v-show="showCommonButton"></download-button>
+        <upload-button v-show="showUpload"></upload-button>
+        <info-button v-show="showCommonButton"></info-button>
+
+        <button v-show="showSelectButton" @click="openSelect" aria-label="Select multiple" class="action">
+          <i class="material-icons">check_circle</i>
+          <span>Select</span>
+        </button>
+      </div>
+      <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
     </div>
   </header>
 </template>
@@ -54,6 +74,16 @@ export default {
     SwitchButton,
     MoveButton
   },
+  data: function () {
+    return {
+      width: window.innerWidth
+    }
+  },
+  created () {
+    window.addEventListener('resize', () => {
+      this.width = window.innerWidth
+    })
+  },
   computed: {
     ...mapGetters([
       'selectedCount'
@@ -65,6 +95,12 @@ export default {
       'reload',
       'multiple'
     ]),
+    isMobile () {
+      return this.width <= 736
+    },
+    isListing () {
+      return this.req.kind === 'listing'
+    },
     showSelectButton () {
       return this.req.kind === 'listing' && !this.loading && this.$route.name === 'Files'
     },
@@ -121,14 +157,31 @@ export default {
       }
 
       return false
+    },
+    showMore () {
+      if (this.$route.name !== 'Files' || this.loading) return false
+      return (this.$store.state.show === 'more')
+    },
+    showOverlay () {
+      return (this.$store.state.show === 'more')
     }
   },
   methods: {
     openSidebar () {
       this.$store.commit('showHover', 'sidebar')
     },
+    openMore () {
+      this.$store.commit('showHover', 'more')
+    },
     openSearch () {
       this.$store.commit('showHover', 'search')
+    },
+    openSelect () {
+      this.$store.commit('multiple', true)
+      this.resetPrompts()
+    },
+    resetPrompts () {
+      this.$store.commit('closeHovers')
     }
   }
 }

assets/src/components/Main.vue

@@ -23,6 +23,13 @@ export default {
     SiteHeader,
     Prompts
   },
+  watch: {
+    '$route': function () {
+      this.$store.commit('resetSelected')
+      this.$store.commit('multiple', false)
+      if (this.$store.state.show !== 'success') this.$store.commit('closeHovers')
+    }
+  },
   mounted () {
     this.updateCSS()
   },

assets/src/components/buttons/SwitchView.vue

@@ -10,6 +10,9 @@ export default {
   name: 'switch-button',
   methods: {
     change: function (event) {
+      // If we are on mobile we should close the dropdown.
+      this.$store.commit('closeHovers')
+
       let display = 'mosaic'
 
       if (this.$store.state.req.display === 'mosaic') {

assets/src/components/prompts/Prompts.vue

@@ -55,7 +55,7 @@ export default {
     showNewDir: function () { return this.show === 'newDir' },
     showDownload: function () { return this.show === 'download' },
     showOverlay: function () {
-      return (this.show !== null && this.show !== 'search')
+      return (this.show !== null && this.show !== 'search' && this.show !== 'more')
     }
   },
   methods: {