Commit a257f489 authored by Clement Ho's avatar Clement Ho

Add clear search button

parent 823185ec
......@@ -29,9 +29,23 @@
bindEvents() {
const input = document.querySelector('.filtered-search');
const clearSearch = document.querySelector('.clear-search');
input.addEventListener('input', this.tokenize.bind(this));
input.addEventListener('keydown', this.checkForEnter.bind(this));
clearSearch.addEventListener('click', this.clearSearch.bind(this));
}
clearSearch(event) {
event.stopPropagation();
event.preventDefault();
this.clearTokens();
const input = document.querySelector('.filtered-search');
input.value = '';
event.target.classList.add('hidden');
}
clearTokens() {
......@@ -64,12 +78,19 @@
// Trim the last space value
document.querySelector('.filtered-search').value = inputValue.trim();
if (inputValue.trim()) {
document.querySelector('.clear-search').classList.remove('hidden');
}
}
tokenize(event) {
// Re-calculate tokens
this.clearTokens();
// Enable clear button
document.querySelector('.clear-search').classList.remove('hidden');
// TODO: Current implementation does not support token values that have valid spaces in them
// Example/ label:community contribution
const input = event.target.value;
......
......@@ -39,11 +39,29 @@
color: #444;
}
}
.fa-filter {
position: absolute;
left: 10px;
top: 10px;
left: 10px;
color: $gray-darkest;
}
.fa-times {
right: 10px;
color: $gray-darkest;
}
.clear-search {
width: 35px;
background-color: transparent;
border: none;
position: absolute;
right: 0px;
height: 100%;
outline: none;
&:hover .fa-times {
color: #444;
}
}
}
......@@ -14,6 +14,8 @@
.filtered-search-input-container
%input.form-control.filtered-search{ placeholder: 'Search or filter results...' }
= icon('filter')
%button.clear-search.hidden
= icon('times')
.pull-right
- if boards_page
#js-boards-seach.issue-boards-search
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment