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,4 +1,15 @@
 <template>
+  <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>
@@ -12,6 +23,7 @@
         <span>Loading...</span>
       </h2>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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,19 +15,39 @@
       <button v-show="showSaveButton" aria-label="Save" class="action" id="save-button">
         <i class="material-icons" title="Save">save</i>
       </button>
+
+      <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="$store.commit('multiple', true)" aria-label="Select multiple" class="action">
+        <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: {

assets/src/css/base.css

@@ -116,3 +116,18 @@ main {
   margin: 0 1em 1em auto;
   width: calc(100% - 19em);
 }
+
+#breadcrumbs span,
+#breadcrumbs {
+  display: flex;
+  align-items: center;
+  color: #6f6f6f;
+}
+
+#breadcrumbs .chevron {
+
+}
+
+#breadcrumbs a {
+  color: inherit
+}

assets/src/css/header.css

@@ -11,6 +11,11 @@ header {
   display: flex;
 }
 
+header .overlay {
+  width: 0;
+  height: 0;
+}
+
 header a,
 header a:hover {
   color: inherit;
@@ -45,6 +50,10 @@ header>div div {
   position: relative;
 }
 
+header > div:last-child div {
+  display: flex;
+}
+
 header>div:first-child {
   height: 4em;
 }
@@ -57,44 +66,10 @@ header .search-button {
   display: none;
 }
 
-
-/* * * * * * * * * * * * * * * *
- *         MORE??       *
- * * * * * * * * * * * * * * * */
-
 #more {
   display: none;
 }
 
-#file-only {
-  display: inline-block;
-  border-right: 1px solid rgba(0, 0, 0, 0.075);
-  padding-right: .3em;
-  margin-right: .3em;
-  transition: .2s ease opacity, visibility;
-  visibility: visible;
-}
-
-#file-only.disabled {
-  opacity: 0;
-  visibility: hidden;
-}
-
-#download ul.active {
-  top: 0;
-  right: 0;
-}
-
-#more ul.active {
-  right: .5em;
-  top: 4.5em;
-}
-
-
-/* * * * * * * * * * * * * * * *
- *          SEARCH BAR         *
- * * * * * * * * * * * * * * * */
-
 #search {
   position: relative;
   height: 100%;

assets/src/css/mobile.css

@@ -12,6 +12,66 @@
 }
 
 @media (max-width: 736px) {
+  #more {
+    display: inherit
+  }
+  header .overlay {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  #dropdown {
+    position: fixed;
+    top: 1em;
+    right: 1em;
+    display: block;
+    background-color: #fff;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    transform: scale(0);
+    transition: .1s ease-in-out transform;
+    z-index: 99999;
+  }
+  #dropdown > div {
+    display: block;
+  }
+  #dropdown.active {
+    transform: scale(1);
+  }
+  #dropdown .action {
+    display: flex;
+    align-items: center;
+    border-radius: 0;
+    width: 100%;
+  }
+  #dropdown .action span:not(.counter) {
+    display: inline-block;
+    padding: .4em;
+  }
+  #dropdown .counter {
+    left: 2.25em;
+  }
+  #file-selection {
+    position: fixed;
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    width: 95%;
+    max-width: 16em;
+  }
+  #file-selection .action {
+    border-radius: 50%;
+    width: auto;
+  }
+  #file-selection > span {
+    display: inline-block;
+    margin-left: 1em;
+    color: #6f6f6f;
+    margin-right: auto;
+  }
   nav {
     top: 0;
     z-index: 99999;