icons on search bar

5 files changed, 65 insertions, 6 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 8c9cb8ef792..f91aa3c5ad7 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -109,7 +109,7 @@ class Dispatcher
       when 'projects:group_links:index'
         new GroupsSelect()
       when 'search:show'
-        new SearchDropdowns()
+        new Search()
 
     switch path.first()
       when 'admin'
diff --git a/app/assets/javascripts/search_dropdowns.js.coffee b/app/assets/javascripts/search.js.coffee
index 747483d1d8b..cf978390aed 100644
--- a/app/assets/javascripts/search_dropdowns.js.coffee
+++ b/app/assets/javascripts/search.js.coffee
@@ -1,5 +1,7 @@
-class @SearchDropdowns
+class @Search
   constructor: ->
+    @eventListeners()
+
     $('.js-search-group-dropdown').glDropdown(
       selectable: true
       filterable: true
@@ -40,5 +42,27 @@ class @SearchDropdowns
         @submitSearch()
     )
 
+  eventListeners: ->
+    $(document)
+      .off 'keyup', '.js-search-input'
+      .on 'keyup', '.js-search-input', @searchKeyUp
+
+    $(document)
+      .off 'click', '.js-search-clear'
+      .on 'click', '.js-search-clear', @clearSearchField
+
   submitSearch: ->
     $('.js-search-form').submit()
+
+  searchKeyUp: ->
+    $input = $(@)
+
+    if $input.val() is ''
+      $('.js-search-clear').addClass 'hidden'
+    else
+      $('.js-search-clear').removeClass 'hidden'
+
+  clearSearchField: ->
+    $('.js-search-input')
+      .val ''
+      .trigger 'keyup'
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 4f5b4bae208..2b2ba2c7862 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -169,6 +169,19 @@
     }
   }
 
+  .search-icon {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    color: $gray-darkest;
+    pointer-events: none;
+  }
+
+  .search-text-input {
+    padding-left: $gl-padding + 15px;
+    padding-right: $gl-padding + 15px;
+  }
+
   .btn-search {
     width: 100%;
     margin-top: 5px;
@@ -197,3 +210,20 @@
     }
   }
 }
+
+.search-clear {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  padding: 0;
+  color: $gray-darkest;
+  line-height: 0;
+  background: none;
+  border: 0;
+
+  &:hover,
+  &:focus {
+    color: $gl-link-color;
+    outline: none;
+  }
+}
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index 58dac4b7bc0..fd598767393 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -9,7 +9,7 @@
       = @group.name
     - else
       Any
-    %b.caret
+    = icon("chevron-down")
   .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
     .dropdown-title
       %span Filter results by group
@@ -26,7 +26,7 @@
       = @project.name_with_namespace
     - else
       Any
-    %b.caret
+    = icon("chevron-down")
   .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
     .dropdown-title
       %span Filter results by project
diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml
index 24115ec3298..3139be1cd37 100644
--- a/app/views/search/_form.html.haml
+++ b/app/views/search/_form.html.haml
@@ -4,7 +4,12 @@
 
   .search-holder
     .search-field-holder
-      = search_field_tag :search, params[:search], placeholder: "Search for projects, issues etc", class: "form-control search-text-input", id: "dashboard_search", autofocus: true, spellcheck: false
+      = search_field_tag :search, params[:search], placeholder: "Search for projects, issues etc", class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false
+      = icon("search", class: "search-icon")
+      %button.search-clear.js-search-clear{ class: ("hidden" if !params[:search].present?), type: "button", tabindex: "-1" }
+        = icon("times-circle")
+        %span.sr-only
+          Clear search
     - unless params[:snippets].eql? 'true'
       = render 'filter' if current_user
-    = button_tag 'Search', class: "btn btn-success btn-search"
+    = button_tag "Search", class: "btn btn-success btn-search"