Open search with CTRL-F (only on listing view)

Former-commit-id: 78aa15e759c2722dbca02050755e5942db42f8d6 [formerly 7bfb864d64a33cf8cd4500c0a9d38bd8d6f0923c] [formerly c0c4fbb505206e8d0f1d407cd83cde5d73953d05 [formerly ba0b15e191ff8b411263b7a276f8f650c0a64e45]]
Former-commit-id: 1f7b22be44b1aa90c97e85533912dd84bd995b80 [formerly 813fb33e5e50f99668cd5316706c1685c0c5bcb7]
Former-commit-id: d11141cd3cae38139277a93580e41b14033dc33a

assets/src/components/Listing.vue

@@ -109,12 +109,14 @@ export default {
     this.resizeEvent()
 
     // Add the needed event listeners to the window and document.
+    window.addEventListener('keydown', this.keyEvent)
     window.addEventListener('resize', this.resizeEvent)
     document.addEventListener('dragover', this.preventDefault)
     document.addEventListener('drop', this.drop)
   },
   beforeDestroy () {
     // Remove event listeners before destroying this page.
+    window.removeEventListener('keydown', this.keyEvent)
     window.removeEventListener('resize', this.resizeEvent)
     document.removeEventListener('dragover', this.preventDefault)
     document.removeEventListener('drop', this.drop)
@@ -123,6 +125,18 @@ export default {
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
+    keyEvent (event) {
+      if (!event.ctrlKey && !event.metaKey) {
+        return
+      }
+
+      if (String.fromCharCode(event.which).toLowerCase() !== 'f') {
+        return
+      }
+
+      event.preventDefault()
+      this.$store.commit('showHover', 'search')
+    },
     preventDefault (event) {
       // Wrapper around prevent default.
       event.preventDefault()

assets/src/components/Search.vue

@@ -8,6 +8,8 @@
       <input type="text"
         @keyup="keyup"
         @keyup.enter="submit"
+        ref="input"
+        :autofocus="active"
         v-model.trim="value"
         aria-label="Write here to search"
         :placeholder="placeholder">
@@ -41,18 +43,32 @@ export default {
   data: function () {
     return {
       value: '',
+      active: false,
       ongoing: false,
       scrollable: null,
       search: [],
       commands: []
     }
   },
+  watch: {
+    show (val, old) {
+      this.active = (val === 'search')
+
+      // If the hover was search and now it's something else
+      // we should blur the input.
+      if (old === 'search' && val !== 'search') {
+        this.$refs.input.blur()
+      }
+
+      // If we are starting to show the search box, we should
+      // focus the input.
+      if (val === 'search') {
+        this.$refs.input.focus()
+      }
+    }
+  },
   computed: {
     ...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) {