Changed colour of no matching results bg

Highlights first row when filtering

3 files changed, 22 insertions, 5 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index be05250a3a8..4b78bcde774 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -2,8 +2,7 @@ class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
   HAS_VALUE_CLASS = "has-value"
 
-  constructor: (@dropdown, @options) ->
-    @input = @dropdown.find('.dropdown-input .dropdown-input-field')
+  constructor: (@input, @options) ->
     $inputContainer = @input.parent()
     $clearButton = $inputContainer.find('.js-dropdown-input-clear')
 
@@ -112,7 +111,9 @@ class GitLabDropdown
 
     # Init filiterable
     if @options.filterable
-      @filter = new GitLabDropdownFilter @dropdown,
+      @input = @dropdown.find('.dropdown-input .dropdown-input-field')
+
+      @filter = new GitLabDropdownFilter @input,
         remote: @options.filterRemote
         query: @options.data
         keys: @options.search.fields
@@ -120,6 +121,7 @@ class GitLabDropdown
           return @fullData
         callback: (data) =>
           @parseData data
+          @highlightRow 1
         enterCallback: =>
           @selectFirstRow()
 
@@ -241,11 +243,19 @@ class GitLabDropdown
 
   noResults: ->
     html = "<li>"
-    html += "<a href='#' class='is-focused'>"
+    html += "<a href='#' class='dropdown-menu-empty-link is-focused'>"
     html += "No matching results."
     html += "</a>"
     html += "</li>"
 
+  highlightRow: (index) ->
+    if @input.val() isnt ""
+      selector = '.dropdown-content li:first-child a'
+      if @dropdown.find(".dropdown-toggle-page").length
+        selector = ".dropdown-page-one .dropdown-content li:first-child a"
+
+      $(selector).addClass 'is-focused'
+
   rowClicked: (el) ->
     fieldName = @options.fieldName
     field = @dropdown.parent().find("input[name='#{fieldName}']")
@@ -289,7 +299,7 @@ class GitLabDropdown
     if @dropdown.find(".dropdown-toggle-page").length
       selector = ".dropdown-page-one .dropdown-content li:first-child a"
 
-    # similute a click on the first link
+    # simulate a click on the first link
     $(selector).trigger "click"
 
 $.fn.glDropdown = (opts) ->
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 20afc5c9dc0..2d616fc660c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -130,6 +130,12 @@
       text-decoration: none;
       outline: 0;
     }
+
+    &.dropdown-menu-empty-link {
+      &.is-focused {
+        background-color: $dropdown-empty-row-bg;
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b014031e758..61e0dd4d672 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -169,6 +169,7 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
 $dropdown-bg: #fff;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
+$dropdown-empty-row-bg: rgba(#000, .04);
 $dropdown-border-color: rgba(#000, .1);
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);