diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue index fc4922d7..1c81bc8e 100644 --- a/src/components/FilterTile.vue +++ b/src/components/FilterTile.vue @@ -6,7 +6,12 @@ id="filter-tiles" v-model="input" placeholder="Start typing to filter tiles..." - v-on:input="userIsTypingSomething" /> + v-on:input="userIsTypingSomething" + @keydown.esc="clearFilterInput" /> +
@@ -24,6 +29,11 @@ export default { methods: { userIsTypingSomething () { this.$emit('user-is-searchin', this.input) + }, + clearFilterInput () { + console.log('Esc key pressed') + this.input = '' + this.userIsTypingSomething() } } } @@ -65,6 +75,18 @@ export default { background: #607d8b4a; } } + .clear-search { + position: absolute; + margin: 1em 0 0 -2em; + color: #1CA8DD; + opacity: 0.5; + border-radius: 50px; + cursor: pointer; + &:hover { + opacity: 1; + background: #282a32; + } + } } .space-filler { flex: 1;