Updates on search and something

_assets/src/components/Main.vue

@@ -9,6 +9,9 @@
         <search></search>
       </div>
       <div>
+        <button @click="openSearch" aria-label="Search" title="Search" class="search-button action">
+          <i class="material-icons">search</i>
+        </button>
         <rename-button v-show="!loading && showRenameButton()"></rename-button>
         <move-button v-show="!loading && showMoveButton()"></move-button>
         <delete-button v-show="!loading && showDeleteButton()"></delete-button>
@@ -141,7 +144,7 @@ export default {
     window.addEventListener('keydown', (event) => {
       // Esc!
       if (event.keyCode === 27) {
-        this.$store.commit('closePrompts')
+        this.$store.commit('closeHovers')
 
         // Unselect all files and folders.
         if (this.req.kind === 'listing') {
@@ -159,20 +162,20 @@ export default {
       // Del!
       if (event.keyCode === 46) {
         if (this.showDeleteButton()) {
-          this.$store.commit('showPrompt', 'delete')
+          this.$store.commit('showHover', 'delete')
         }
       }
 
       // F1!
       if (event.keyCode === 112) {
         event.preventDefault()
-        this.$store.commit('showPrompt', 'help')
+        this.$store.commit('showHover', 'help')
       }
 
       // F2!
       if (event.keyCode === 113) {
         if (this.showRenameButton()) {
-          this.$store.commit('showPrompt', 'rename')
+          this.$store.commit('showHover', 'rename')
         }
       }
 
@@ -201,7 +204,7 @@ export default {
       // Reset selected items and multiple selection.
       this.$store.commit('resetSelected')
       this.$store.commit('multiple', false)
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
 
       let url = this.$route.path
       if (url === '') url = '/'
@@ -224,6 +227,9 @@ export default {
         this.loading = false
       })
     },
+    openSearch () {
+      this.$store.commit('showHover', 'search')
+    },
     showUpload: function () {
       if (this.req.kind === 'editor') return false
       return this.user.allowNew

_assets/src/components/Search.vue

@@ -41,7 +41,6 @@ export default {
   data: function () {
     return {
       value: '',
-      active: false,
       ongoing: false,
       scrollable: null,
       search: [],
@@ -49,7 +48,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(['user']),
+    ...mapState(['user', 'show']),
+    // Computed property for activeness of search.
+    active () {
+      return (this.show === 'search')
+    },
     // Placeholder value.
     placeholder: function () {
       if (this.user.allowCommands && this.user.commands.length > 0) {
@@ -88,14 +91,14 @@ export default {
     // when it's pressed, it closes the search window.
     window.addEventListener('keydown', (event) => {
       if (event.keyCode === 27) {
-        this.active = false
+        this.$store.commit('closeHovers')
       }
     })
   },
   methods: {
     // Sets the search to active.
     open: function (event) {
-      this.active = true
+      this.$store.commit('showHover', 'search')
     },
     // Closes the search and prevents the event
     // of propagating so it doesn't trigger the
@@ -103,7 +106,7 @@ export default {
     close: function (event) {
       event.stopPropagation()
       event.preventDefault()
-      this.active = false
+      this.$store.commit('closeHovers')
     },
     // Checks if the current input is a supported command.
     supported: function () {
@@ -127,7 +130,6 @@ export default {
         return
       }
 
-      this.active = true
       this.search.length = 0
       this.commands.length = 0
     },

_assets/src/components/Sidebar.vue

@@ -6,12 +6,12 @@
     </router-link>
 
     <div v-if="user.allowNew">
-      <button @click="$store.commit('showPrompt', 'newDir')" aria-label="New directory" title="New directory" class="action">
+      <button @click="$store.commit('showHover', 'newDir')" aria-label="New directory" title="New directory" class="action">
         <i class="material-icons">create_new_folder</i>
         <span>New folder</span>
       </button>
 
-      <button @click="$store.commit('showPrompt', 'newFile')" aria-label="New file" title="New file" class="action">
+      <button @click="$store.commit('showHover', 'newFile')" aria-label="New file" title="New file" class="action">
         <i class="material-icons">note_add</i>
         <span>New file</span>
       </button>
@@ -60,7 +60,7 @@ export default {
   },
   methods: {
     help: function () {
-      this.$store.commit('showPrompt', 'help')
+      this.$store.commit('showHover', 'help')
     },
     logout: auth.logout
   }

_assets/src/components/buttons/DeleteButton.vue

@@ -10,7 +10,7 @@ export default {
   name: 'delete-button',
   methods: {
     show: function (event) {
-      this.$store.commit('showPrompt', 'delete')
+      this.$store.commit('showHover', 'delete')
     }
   }
 }

_assets/src/components/buttons/DownloadButton.vue

@@ -28,7 +28,7 @@ export default {
         return
       }
 
-      this.$store.commit('showPrompt', 'download')
+      this.$store.commit('showHover', 'download')
     }
   }
 }

_assets/src/components/buttons/InfoButton.vue

@@ -1,10 +1,17 @@
 <template>
-  <button title="Info" aria-label="Info" class="action" @click="$store.commit('showPrompt', 'info')">
+  <button title="Info" aria-label="Info" class="action" @click="show">
     <i class="material-icons">info</i>
     <span>Info</span>
   </button>
 </template>
 
 <script>
-export default {name: 'info-button'}
+export default {
+  name: 'info-button',
+  methods: {
+    show: function (event) {
+      this.$store.commit('showHover', 'info')
+    }
+  }
+}
 </script>

_assets/src/components/buttons/MoveButton.vue

@@ -1,10 +1,17 @@
 <template>
-  <button @click="this.$store.commit('showPrompt', 'move')" aria-label="Move" title="Move" class="action">
+  <button @click="show" aria-label="Move" title="Move" class="action">
     <i class="material-icons">forward</i>
     <span>Move file</span>
   </button>
 </template>
 
 <script>
-export default {name: 'move-button'}
+export default {
+  name: 'move-button',
+  methods: {
+    show: function (event) {
+      this.$store.commit('showHover', 'move')
+    }
+  }
+}
 </script>

_assets/src/components/buttons/RenameButton.vue

@@ -1,10 +1,17 @@
 <template>
-  <button @click="this.$store.commit('showPrompt', 'rename')" aria-label="Rename" title="Rename" class="action">
+  <button @click="show" aria-label="Rename" title="Rename" class="action">
     <i class="material-icons">mode_edit</i>
     <span>Rename</span>
   </button>
 </template>
 
 <script>
-export default {name: 'rename-button'}
+export default {
+  name: 'rename-button',
+  methods: {
+    show: function (event) {
+      this.$store.commit('showHover', 'rename')
+    }
+  }
+}
 </script>

_assets/src/components/prompts/Delete.vue

@@ -5,7 +5,7 @@
     <p v-show="req.kind === 'listing'">Are you sure you want to delete {{ selectedCount }} file(s)?</p>
     <div>
       <button @click="submit" autofocus>Delete</button>
-      <button @click="closePrompts" class="cancel">Cancel</button>
+      <button @click="closeHovers" class="cancel">Cancel</button>
     </div>
   </div>
 </template>
@@ -22,9 +22,9 @@ export default {
     ...mapState(['req', 'selected'])
   },
   methods: {
-    ...mapMutations(['closePrompts']),
+    ...mapMutations(['closeHovers']),
     submit: function (event) {
-      this.closePrompts()
+      this.closeHovers()
       // buttons.setLoading('delete')
 
       if (this.req.kind !== 'listing') {

_assets/src/components/prompts/Download.vue

@@ -34,7 +34,7 @@ export default {
         api.download(format, ...files)
       }
 
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
     }
   }
 }

_assets/src/components/prompts/Help.vue

@@ -20,7 +20,7 @@
     </ul>
 
     <div>
-      <button type="submit" @click="$store.commit('closePrompts')" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('closeHovers')" class="ok">OK</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/Info.vue

@@ -21,7 +21,7 @@
     </section>
 
     <div>
-      <button type="submit" @click="$store.commit('closePrompts')" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('closeHovers')" class="ok">OK</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/Move.vue

@@ -11,7 +11,7 @@
 
     <div>
       <button class="ok" @click="move">Move</button>
-      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
+      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/NewDir.vue

@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
+      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
     </div>
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
     }
   }
 }

_assets/src/components/prompts/NewFile.vue

@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
+      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
     </div>
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
     }
   }
 }

_assets/src/components/prompts/Prompts.vue

@@ -37,20 +37,22 @@ export default {
     Help
   },
   computed: {
-    ...mapState(['prompt']),
-    showInfo: function () { return this.prompt === 'info' },
-    showHelp: function () { return this.prompt === 'help' },
-    showDelete: function () { return this.prompt === 'delete' },
-    showRename: function () { return this.prompt === 'rename' },
-    showMove: function () { return this.prompt === 'move' },
-    showNewFile: function () { return this.prompt === 'newFile' },
-    showNewDir: function () { return this.prompt === 'newDir' },
-    showDownload: function () { return this.prompt === 'download' },
-    showOverlay: function () { return this.prompt !== null }
+    ...mapState(['show']),
+    showInfo: function () { return this.show === 'info' },
+    showHelp: function () { return this.show === 'help' },
+    showDelete: function () { return this.show === 'delete' },
+    showRename: function () { return this.show === 'rename' },
+    showMove: function () { return this.show === 'move' },
+    showNewFile: function () { return this.show === 'newFile' },
+    showNewDir: function () { return this.show === 'newDir' },
+    showDownload: function () { return this.show === 'download' },
+    showOverlay: function () {
+      return (this.show !== null && this.show !== 'search')
+    }
   },
   methods: {
     resetPrompts () {
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
     }
   }
 }

_assets/src/components/prompts/Rename.vue

@@ -25,7 +25,7 @@ export default {
   computed: mapState(['req', 'selected', 'selectedCount']),
   methods: {
     cancel: function (event) {
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
     },
     oldName: function () {
       if (this.req.kind !== 'listing') {
@@ -68,7 +68,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('closePrompts')
+      this.$store.commit('closeHovers')
       return
     }
   }

_assets/src/css/header.css

@@ -53,6 +53,10 @@ header>div:last-child {
   justify-content: flex-end;
 }
 
+header .search-button {
+  display: none;
+}
+
 
 /* * * * * * * * * * * * * * * *
  *         MORE??       *

_assets/src/css/mobile.css

@@ -22,6 +22,7 @@
     transition: .2s ease-in-out left;
     left: -14em;
   }
+  header .search-button,
   header>div:first-child>.action {
     display: inherit;
   }
@@ -36,4 +37,10 @@
     margin: 0 1em;
     width: calc(100% - 2em);
   }
+  #search {
+    display: none;
+  }
+  #search.active {
+    display: block;
+  }
 }

_assets/src/store/mutations.js

@@ -1,6 +1,6 @@
 const mutations = {
-  closePrompts: (state) => { state.prompt = null },
-  showPrompt: (state, value) => { state.prompt = value },
+  closeHovers: state => { state.show = null },
+  showHover: (state, value) => { state.show = value },
   setReload: (state, value) => { state.reload = value },
   setUser: (state, value) => (state.user = value),
   setJWT: (state, value) => (state.jwt = value),

_assets/src/store/store.js

@@ -13,7 +13,7 @@ const state = {
   reload: false,
   selected: [],
   multiple: false,
-  prompt: null
+  show: null
 }
 
 export default new Vuex.Store({