diff options
| -rw-r--r-- | app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 21 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 22 | ||||
| -rw-r--r-- | app/views/shared/issuable/_search_bar.html.haml | 2 |
3 files changed, 43 insertions, 2 deletions
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 7acdabe3ef2..ad988fe2072 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -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; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index a565642ba38..b192455f5f0 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -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; + } + } } diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml index db9011d5d57..5e759301a04 100644 --- a/app/views/shared/issuable/_search_bar.html.haml +++ b/app/views/shared/issuable/_search_bar.html.haml @@ -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 |