Merge branch 'issue_14800' into 'master'

Search Design fixes

Closes #14800 

- Use colors according to design
- Fix width of search input


![Screen_Shot_2016-04-05_at_11.12.33_AM](/uploads/83681ccd90a1a1542c056fd6dbc974d0/Screen_Shot_2016-04-05_at_11.12.33_AM.png)

![Screen_Shot_2016-04-05_at_11.11.54_AM](/uploads/f7557bea2ae055f3550b89751fd7d371/Screen_Shot_2016-04-05_at_11.11.54_AM.png)

See merge request !3475

5 files changed, 64 insertions, 35 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 33c5126087f..e8d25591f63 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -177,10 +177,11 @@ class GitLabDropdown
         selector = ".dropdown-page-one .dropdown-content a"
 
       @dropdown.on "click", selector, (e) ->
-        selected = self.rowClicked $(@)
+        $el = $(@)
+        selected = self.rowClicked $el
 
         if self.options.clicked
-          self.options.clicked(selected)
+          self.options.clicked(selected, $el, e)
 
   # Finds an element inside wrapper element
   getElement: (selector) ->
@@ -360,6 +361,8 @@ class GitLabDropdown
       # Toggle the dropdown label
       if @options.toggleLabel
         $(@el).find(".dropdown-toggle-text").text @options.toggleLabel
+      else
+        selectedObject
     else
       if !value?
         field.remove()
@@ -375,7 +378,7 @@ class GitLabDropdown
       if @options.toggleLabel
         $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
       if value?
-        if !field.length
+        if !field.length and fieldName
           # Create hidden input for form
           input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
           if @options.inputId?
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index 030655491bf..6a7b4ad1db7 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -62,6 +62,8 @@ class @SearchAutocomplete
         search:
           fields: ['text']
         data: @getData.bind(@)
+        selectable: true
+        clicked: @onClick.bind(@)
 
   getData: (term, callback) ->
     _this = @
@@ -102,6 +104,8 @@ class @SearchAutocomplete
             lastCategory = suggestion.category
 
           data.push
+            id: "#{suggestion.category.toLowerCase()}-#{suggestion.id}"
+            category: suggestion.category
             text: suggestion.label
             url: suggestion.url
 
@@ -133,12 +137,19 @@ class @SearchAutocomplete
     }
 
   bindEvents: ->
+    $(document).on 'click', @onDocumentClick
     @searchInput.on 'keydown', @onSearchInputKeyDown
     @searchInput.on 'keyup', @onSearchInputKeyUp
     @searchInput.on 'click', @onSearchInputClick
     @searchInput.on 'focus', @onSearchInputFocus
-    @searchInput.on 'blur', @onSearchInputBlur
-    @clearInput.on 'click', @onRemoveLocationClick
+    @clearInput.on 'click', @onClearInputClick
+
+  onDocumentClick: (e) =>
+    # If clicking outside the search box
+    # And search input is not focused
+    # And we are not clicking inside a suggestion
+    if not $.contains(@dropdown[0], e.target) and @isFocused and not $(e.target).parents('ul').length
+      @onSearchInputBlur()
 
   enableAutocomplete: ->
     # No need to enable anything if user is not logged in
@@ -181,6 +192,8 @@ class @SearchAutocomplete
           # We should display the menu only when input is not empty
           @enableAutocomplete()
 
+    @wrap.toggleClass 'has-value', !!e.target.value
+
     # Avoid falsy value to be returned
     return
 
@@ -189,27 +202,20 @@ class @SearchAutocomplete
     e.stopImmediatePropagation()
 
   onSearchInputFocus: =>
+    @isFocused = true
     @wrap.addClass('search-active')
 
-  onRemoveLocationClick: (e) =>
+  onClearInputClick: (e) =>
     e.preventDefault()
-    @removeLocationBadge()
     @searchInput.val('').focus()
-    @skipBlurEvent = true
 
   onSearchInputBlur: (e) =>
-    @skipBlurEvent = false
-
-    # We should wait to make sure we are not clearing the input instead
-    setTimeout( =>
-      return if @skipBlurEvent
+    @isFocused = false
+    @wrap.removeClass('search-active')
 
-      @wrap.removeClass('search-active')
-
-      # If input is blank then restore state
-      if @searchInput.val() is ''
-        @restoreOriginalState()
-    , 150)
+    # If input is blank then restore state
+    if @searchInput.val() is ''
+      @restoreOriginalState()
 
   addLocationBadge: (item) ->
     category = if item.category? then "#{item.category}: " else ''
@@ -268,3 +274,23 @@ class @SearchAutocomplete
               <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
             </ul>"
     @dropdownContent.html(html)
+
+  onClick: (item, $el, e) ->
+    if location.pathname.indexOf(item.url) isnt -1
+      e.preventDefault()
+      if not @badgePresent
+        if item.category is 'Projects'
+          @projectInputEl.val(item.id)
+          @addLocationBadge(
+            value: 'This project'
+          )
+
+        if item.category is 'Groups'
+          @groupInputEl.val(item.id)
+          @addLocationBadge(
+            value: 'This group'
+          )
+
+      $el.removeClass('is-active')
+      @disableAutocomplete()
+      @searchInput.val('').focus()
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 463ce4ecdd7..8d3ad934a50 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -201,14 +201,14 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
 /*
  * Search Box
  */
-$search-input-border-color: $dropdown-input-focus-border;
+$search-input-border-color: rgba(#4688f1, .8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
-$search-input-width: $dropdown-width;
+$search-input-width: 244px;
 $location-badge-color: #aaa;
 $location-badge-bg: $gray-normal;
+$location-badge-active-bg: #4f91f8;
 $location-icon-color: #e7e9ed;
-$location-active-color: $gl-text-color;
-$location-active-bg: $search-input-border-color;
+$location-icon-active-color: #807e7e;
 
 /*
  *  Notes
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 3c74d25beb0..f0f3744c6fa 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -135,25 +135,25 @@
 
     .location-badge {
       @include transition(all .15s);
-      background-color: $location-active-bg;
+      background-color: $location-badge-active-bg;
       color: $white-light;
     }
 
     .search-input-wrap {
       i {
-        color: $location-active-color;
+        color: $location-icon-active-color;
       }
     }
+  }
 
-    &.has-location-badge {
-      .search-icon {
-        display: none;
-      }
+  &.has-value {
+    .search-icon {
+      display: none;
+    }
 
-      .clear-icon {
-        cursor: pointer;
-        display: block;
-      }
+    .clear-icon {
+      cursor: pointer;
+      display: block;
     }
   }
 
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 9d4ab9847a8..ba04bd74b8d 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -21,8 +21,8 @@
                   %a.is-focused.dropdown-menu-empty-link
                     Loading...
             = dropdown_loading
-        %i.search-icon
-        %i.clear-icon.js-clear-input
+          %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'