From 990cadd7444d29a34774dab1353013e29b2078ac Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Tue, 4 Jul 2017 11:47:24 +0100
Subject: [PATCH] Updates on search design

---
 _assets/src/components/Search.vue |  54 ++++++++---
 _assets/src/css/header.css        | 149 +++++++++++++++---------------
 2 files changed, 116 insertions(+), 87 deletions(-)

diff --git a/_assets/src/components/Search.vue b/_assets/src/components/Search.vue
index 31316ff2..71350e8c 100644
--- a/_assets/src/components/Search.vue
+++ b/_assets/src/components/Search.vue
@@ -1,15 +1,18 @@
 <template>
-  <div id="search" v-on:mouseleave="hover = false" v-on:click="click" v-bind:class="{ active: focus || hover, ongoing }">
-    <i class="material-icons" title="Search">search</i>
-    <input type="text"
-      v-model.trim="value"
-      v-on:focus="focus = true"
-      v-on:blur="focus = false"
-      v-on:keyup="keyup"
-      v-on:keyup.enter="submit"
-      aria-label="Write here to search"
-      :placeholder="placeholder()">
-    <div v-on:mouseover="hover = true">
+  <div id="search" @click="active = true" v-bind:class="{ active , ongoing }">
+    <div id="input">
+      <button v-if="active" class="action" @click="close" >
+        <i class="material-icons">arrow_back</i>
+      </button>
+      <i v-else class="material-icons">search</i>
+      <input type="text"
+        v-model.trim="value"
+        @keyup="keyup"
+        @keyup.enter="submit"
+        aria-label="Write here to search"
+        :placeholder="placeholder()">
+    </div>
+    <div id="result">
       <div>
         <span v-if="search.length === 0 && commands.length === 0">{{ text() }}</span>
         <ul v-else-if="search.length > 0">
@@ -34,8 +37,7 @@ export default {
   data: function () {
     return {
       value: '',
-      hover: false,
-      focus: false,
+      active: false,
       ongoing: false,
       scrollable: null,
       search: [],
@@ -44,9 +46,21 @@ export default {
   },
   computed: mapState(['user']),
   mounted: function () {
-    this.scrollable = document.querySelector('#search > div')
+    this.scrollable = document.querySelector('#search #result')
+
+    window.addEventListener('keydown', (event) => {
+      // Esc!
+      if (event.keyCode === 27) {
+        this.active = false
+      }
+    })
   },
   methods: {
+    close: function (event) {
+      event.stopPropagation()
+      event.preventDefault()
+      this.active = false
+    },
     placeholder: function () {
       if (this.user.allowCommands && this.user.commands.length > 0) {
         return 'Search or execute a command...'
@@ -55,6 +69,10 @@ export default {
       return 'Search...'
     },
     text: function () {
+      if (this.ongoing) {
+        return ''
+      }
+
       if (this.value.length === 0) {
         if (this.user.allowCommands && this.user.commands.length > 0) {
           return `Search or use one of your supported commands: ${this.user.commands.join(', ')}.`
@@ -69,7 +87,13 @@ export default {
         return 'Press enter to execute.'
       }
     },
-    keyup: function () {
+    keyup: function (event) {
+      if (event.keyCode === 27) {
+        this.active = false
+        return
+      }
+
+      this.active = true
       this.search.length = 0
       this.commands.length = 0
     },
diff --git a/_assets/src/css/header.css b/_assets/src/css/header.css
index a2c0e331..403000ad 100644
--- a/_assets/src/css/header.css
+++ b/_assets/src/css/header.css
@@ -85,22 +85,40 @@ header > div:last-child {
 
 #search {
     position: relative;
-    display: flex;
     height: 100%;
-    padding: 0.75em;
-    vertical-align: middle;
-    border-radius: 0.3em;
-    background-color: #f5f5f5;
-    transition: .1s ease all;
     width: 100%;
     max-width: 25em;
 }
 
 #search.active {
-    background-color: #fff;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  z-index: 9999;
+}
+
+#search #input {
+  background-color: #f5f5f5;
+  display: flex;
+  padding: 0.75em;
+  border-radius: 0.3em;
+  transition: .1s ease all;
+  align-items: center;
+  z-index: 2;
+}
+
+#search.active #input {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  height: 4em;
+}
+
+#search.active > div {
+  border-radius: 0 !important;
 }
 
 #search.active i,
@@ -108,12 +126,8 @@ header > div:last-child {
     color: #212121;
 }
 
-#search i,
-#search input {
-    vertical-align: middle;
-}
-
-#search i {
+#search #input > .action,
+#search #input > i {
     margin-right: 0.3em;
     user-select: none;
 }
@@ -125,85 +139,76 @@ header > div:last-child {
     background-color: transparent;
 }
 
-#search.active div {
-    visibility: visible;
-    opacity: 1;
-    top: 100%;
+#search #result {
+  visibility: visible;
+  max-height: none;
+  background-color: #fff;
+  text-align: left;
+  color: #ccc;
+  padding: 0;
+  height: 0;
+  transition: .1s ease height, .1s ease padding;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 1;
+}
+
+#search.active #result {
+  padding: .5em;
+  height: calc(100% - 4em);
 }
 
 #search ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 #search li {
-    margin-bottom: .5em;
+  margin-bottom: .5em;
 }
 
-#search>div {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    left: 0;
-    z-index: 999999;
-    background-color: #fff;
-    text-align: left;
-    color: #ccc;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12);
-    padding: .5em;
-    border-bottom-left-radius: .3em;
-    border-bottom-right-radius: .3em;
-    transition: .1s ease all;
-    visibility: hidden;
-    opacity: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-height: 50vh;
+#search #result div {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
 }
 
-#search>div div {
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    word-wrap: break-word;
+#search #result p {
+  width: 100%;
+  text-align: center;
+  display: none;
+  margin: 0;
+  max-width: none;
 }
 
-#search>div p {
-    width: 100%;
-    text-align: center;
-    display: none;
-    margin: 0;
-    max-width: none;
+#search.ongoing #result p {
+  display: block;
 }
 
-#search.ongoing p {
-    display: block;
-}
-
-#search.active div i,
-#sidebar #search.active div i {
-    color: #ccc;
-    text-align: center;
-    margin: 0 auto;
-    display: table;
+#search.active #result i {
+  color: #ccc;
+  text-align: center;
+  margin: 0 auto;
+  display: table;
 }
 
 #search::-webkit-input-placeholder {
-    color: rgba(255, 255, 255, .5);
+  color: rgba(255, 255, 255, .5);
 }
 
 #search:-moz-placeholder {
-    opacity: 1;
-    color: rgba(255, 255, 255, .5);
+  opacity: 1;
+  color: rgba(255, 255, 255, .5);
 }
 
 #search::-moz-placeholder {
-    opacity: 1;
-    color: rgba(255, 255, 255, .5);
+  opacity: 1;
+  color: rgba(255, 255, 255, .5);
 }
 
 #search:-ms-input-placeholder {
-    color: rgba(255, 255, 255, .5);
-}
\ No newline at end of file
+  color: rgba(255, 255, 255, .5);
+}