Add ability to clear location badge

app/assets/javascripts/search_autocomplete.js.coffee

@@ -27,6 +27,7 @@ class @SearchAutocomplete
     @groupInputEl = @getElement('#group_id')
     @searchCodeInputEl = @getElement('#search_code')
     @repositoryInputEl = @getElement('#repository_ref')
+    @clearInput = @getElement('.js-clear-input')
 
     @saveOriginalState()
 
@@ -59,6 +60,7 @@ class @SearchAutocomplete
     @searchInput.on 'keydown', @onSearchInputKeyDown
     @searchInput.on 'focus', @onSearchInputFocus
     @searchInput.on 'blur', @onSearchInputBlur
+    @clearInput.on 'click', @onRemoveLocationClick
 
   enableAutocomplete: ->
     return if @autocomplete
@@ -150,12 +152,25 @@ class @SearchAutocomplete
   onSearchInputFocus: =>
     @wrap.addClass('search-active')
 
-  onSearchInputBlur: =>
-    @wrap.removeClass('search-active')
+  onRemoveLocationClick: (e) =>
+    e.preventDefault()
+    @removeLocationBadge()
+    @searchInput.val('').focus()
+    @skipBlurEvent = true
 
-    # If input is blank then restore state
-    if @searchInput.val() is ''
-      @restoreOriginalState()
+  onSearchInputBlur: (e) =>
+    @skipBlurEvent = false
+
+    # We should wait to make sure we are not clearing the input instead
+    setTimeout( =>
+      return if @skipBlurEvent
+
+      @wrap.removeClass('search-active')
+
+      # If input is blank then restore state
+      if @searchInput.val() is ''
+        @restoreOriginalState()
+    , 100)
 
   addLocationBadge: (item) ->
     category = if item.category? then "#{item.category}: " else ''
@@ -165,6 +180,7 @@ class @SearchAutocomplete
               <i class='location-text'>#{category}#{value}</i>
             </span>"
     @locationBadgeEl.html(html)
+    @wrap.addClass('has-location-badge')
 
   restoreOriginalState: ->
     inputs = Object.keys @originalState
@@ -208,6 +224,8 @@ class @SearchAutocomplete
     # Reset state
     @resetSearchState()
 
+    @wrap.removeClass('has-location-badge')
+
   disableAutocomplete: ->
     if @autocomplete
       @searchInput.addClass('disabled')

app/assets/stylesheets/framework/variables.scss

@@ -199,4 +199,5 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
 $location-badge-color: #aaa;
 $location-badge-bg: $gray-normal;
 $location-icon-color: #e7e9ed;
-
+$location-active-color: #7f8fa4;
+$location-active-bg: $location-active-color;

app/assets/stylesheets/pages/search.scss

@@ -26,24 +26,6 @@
   margin-left: 10px;
   margin-top: ($header-height - 35) / 2;
 
-  &.search-active {
-    form {
-      @extend .form-control:focus;
-    }
-
-    .location-badge {
-      @include transition(all .15s);
-      background-color: $input-border-focus;
-      color: $white-light;
-    }
-
-    .search-input-wrap {
-      i {
-        color: $input-border-focus;
-      }
-    }
-  }
-
   form {
     @extend .form-control;
     margin: 0;
@@ -92,16 +74,11 @@
     width: 100%;
     position: relative;
 
-    .search-icon {
-      @extend .fa-search;
-      @include transition(color .15s);
+    .search-icon, .clear-icon {
       position: absolute;
       right: 5px;
-      color: $location-icon-color;
       top: 0;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
+      color: $location-icon-color;
 
       &:before {
         font-family: FontAwesome;
@@ -110,9 +87,53 @@
       }
     }
 
+    .search-icon {
+      @extend .fa-search;
+      @include transition(color .15s);
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+    }
+
+    .clear-icon {
+      @extend .fa-times;
+      display: none;
+    }
+
     .dropdown-header {
       text-transform: uppercase;
       font-size: 11px;
     }
   }
+
+  &.search-active {
+    form {
+      @extend .form-control:focus;
+    }
+
+    .location-badge {
+      @include transition(all .15s);
+      background-color: $location-active-bg;
+      color: $white-light;
+    }
+
+    .search-input-wrap {
+      i {
+        color: $location-active-color;
+      }
+    }
+
+    &.has-location-badge {
+      .search-icon {
+        display: none;
+      }
+
+      .clear-icon {
+        cursor: pointer;
+        display: block;
+      }
+    }
+  }
+
+
 }

app/views/layouts/_search.html.haml

-.search.search-form
+- if controller.controller_path =~ /^groups/
+  - label = 'This group'
+- if controller.controller_path =~ /^projects/
+  - label = 'This project'
+
+.search.search-form{class: "#{'has-location-badge' if label.present?}"}
   = form_tag search_path, method: :get, class: 'navbar-form' do |f|
     .search-input-container
       .search-location-badge
-        = render 'shared/location_badge'
+        - if label.present?
+          %span.location-badge
+            %i.location-text
+              = label
       .search-input-wrap
         .dropdown{ data: {url: search_autocomplete_path } }
           = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off',  data: { toggle: 'dropdown' }
@@ -10,6 +18,7 @@
             = dropdown_content
             = dropdown_loading
         %i.search-icon
+        %i.clear-icon.js-clear-input
 
     = hidden_field_tag :group_id, @group.try(:id)
     = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id'

app/views/shared/_location_badge.html.haml

-- if controller.controller_path =~ /^groups/
-  - label = 'This group'
-- if controller.controller_path =~ /^projects/
-  - label = 'This project'
-
-- if label.present?
-  %span.location-badge
-    %i.location-text
-      = label