From be521d7d76fac2daa48ad17d330a61d3bbc236ba Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 15 Apr 2016 15:55:31 +0100
Subject: [PATCH] icons on search bar

---
 app/assets/javascripts/dispatcher.js.coffee   |  2 +-
 ...h_dropdowns.js.coffee => search.js.coffee} | 26 +++++++++++++++-
 app/assets/stylesheets/pages/search.scss      | 30 +++++++++++++++++++
 app/views/search/_filter.html.haml            |  4 +--
 app/views/search/_form.html.haml              |  9 ++++--
 5 files changed, 65 insertions(+), 6 deletions(-)
 rename app/assets/javascripts/{search_dropdowns.js.coffee => search.js.coffee} (64%)

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 8c9cb8ef79..f91aa3c5ad 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
similarity index 64%
rename from app/assets/javascripts/search_dropdowns.js.coffee
rename to app/assets/javascripts/search.js.coffee
index 747483d1d8..cf978390ae 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 4f5b4bae20..2b2ba2c786 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 58dac4b7bc..fd59876739 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 24115ec329..3139be1cd3 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"