From 69a4bcb238b347a139bfb1192413b45c8b9d7e36 Mon Sep 17 00:00:00 2001
From: Eugenij <eugenijm@protonmail.com>
Date: Mon, 15 Jul 2019 16:42:27 +0000
Subject: New search

---
 src/components/search_bar/search_bar.js  | 27 ++++++++++++
 src/components/search_bar/search_bar.vue | 73 ++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/components/search_bar/search_bar.js
 create mode 100644 src/components/search_bar/search_bar.vue

(limited to 'src/components/search_bar')

diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
new file mode 100644
index 00000000..b8a792ee
--- /dev/null
+++ b/src/components/search_bar/search_bar.js
@@ -0,0 +1,27 @@
+const SearchBar = {
+  data: () => ({
+    searchTerm: undefined,
+    hidden: true,
+    error: false,
+    loading: false
+  }),
+  watch: {
+    '$route': function (route) {
+      if (route.name === 'search') {
+        this.searchTerm = route.query.query
+      }
+    }
+  },
+  methods: {
+    find (searchTerm) {
+      this.$router.push({ name: 'search', query: { query: searchTerm } })
+      this.$refs.searchInput.focus()
+    },
+    toggleHidden () {
+      this.hidden = !this.hidden
+      this.$emit('toggled', this.hidden)
+    }
+  }
+}
+
+export default SearchBar
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
new file mode 100644
index 00000000..4d5a1aec
--- /dev/null
+++ b/src/components/search_bar/search_bar.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="search-bar-container">
+      <i
+        v-if="loading"
+        class="icon-spin4 finder-icon animate-spin-slow"
+      />
+      <a
+        v-if="hidden"
+        href="#"
+        :title="$t('nav.search')"
+      ><i
+        class="button-icon icon-search"
+        @click.prevent.stop="toggleHidden"
+      /></a>
+      <template v-else>
+        <input
+          id="search-bar-input"
+          ref="searchInput"
+          v-model="searchTerm"
+          class="search-bar-input"
+          :placeholder="$t('nav.search')"
+          type="text"
+          @keyup.enter="find(searchTerm)"
+        >
+        <button
+          class="btn search-button"
+          @click="find(searchTerm)"
+        >
+          <i class="icon-search" />
+        </button>
+        <i
+          class="button-icon icon-cancel"
+          @click.prevent.stop="toggleHidden"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script src="./search_bar.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.search-bar-container {
+  max-width: 100%;
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
+  justify-content: flex-end;
+
+  .search-bar-input,
+  .search-button {
+    height: 29px;
+  }
+
+  .search-bar-input {
+    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
+    max-width: calc(100% - 30px - 30px - 20px);
+  }
+
+  .search-button {
+    margin-left: .5em;
+    margin-right: .5em;
+  }
+
+  .icon-cancel {
+    cursor: pointer;
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From 254648991d4eb706c09b90f21a2e0616b6aaa976 Mon Sep 17 00:00:00 2001
From: Eugenij <eugenijm@protonmail.com>
Date: Wed, 31 Jul 2019 17:39:35 +0000
Subject: Focus on the search input when the search icon is clicked

---
 src/components/search_bar/search_bar.js | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/components/search_bar')

diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index b8a792ee..d7d85676 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -20,6 +20,11 @@ const SearchBar = {
     toggleHidden () {
       this.hidden = !this.hidden
       this.$emit('toggled', this.hidden)
+      this.$nextTick(() => {
+        if (!this.hidden) {
+          this.$refs.searchInput.focus()
+        }
+      })
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2