kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Always display suggestions

Browse source
This commit is contained in:
Alfredo Sumaran 2016-03-26 16:52:16 -05:00
parent 47405485f6
commit 55afebe141
3 changed files with 20 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/assets/javascripts/search_autocomplete.js.coffee
View file

@ -72,9 +72,6 @@ class @SearchAutocomplete
# Prevent multiple ajax calls # Prevent multiple ajax calls
return if @loadingSuggestions return if @loadingSuggestions
# Do not request suggestions if dropdown is disabled
return if @badgePresent()
@loadingSuggestions = true @loadingSuggestions = true
jqXHR = $.get(@autocompletePath, { jqXHR = $.get(@autocompletePath, {
@ -132,16 +129,12 @@ class @SearchAutocomplete
# No need to enable anything if user is not logged in # No need to enable anything if user is not logged in
return if !gon.current_user_id return if !gon.current_user_id
dropdownMenu = @dropdown.find('.dropdown-menu')
_this = @ _this = @
@loadingSuggestions = false @loadingSuggestions = false
@dropdown.addClass('open') @dropdown.addClass('open')
@searchInput.removeClass('disabled') @searchInput.removeClass('disabled')
onDropdownOpen: (e) =>
@dropdown.dropdown('toggle')
onSearchInputKeyDown: => onSearchInputKeyDown: =>
# Saves last length of the entered text # Saves last length of the entered text
@saveTextLength() @saveTextLength()
@ -154,23 +147,20 @@ class @SearchAutocomplete
@removeLocationBadge() @removeLocationBadge()
# When removing the last character and no badge is present # When removing the last character and no badge is present
if @lastTextLength is 1 and !@badgePresent() if @lastTextLength is 1
@disableAutocomplete() @disableAutocomplete()
# When removing any character from existin value
if @lastTextLength > 1
@enableAutocomplete()
when KEYCODE.ESCAPE when KEYCODE.ESCAPE
if @badgePresent() @restoreOriginalState()
else
@restoreOriginalState()
# If after restoring there's a badge
@disableAutocomplete() if @badgePresent()
else else
if @badgePresent() # We should display the menu only when input is not empty
@disableAutocomplete() if @searchInput.val() isnt ''
else @enableAutocomplete()
# We should display the menu only when input is not empty
if @searchInput.val() isnt ''
@enableAutocomplete()
# Avoid falsy value to be returned # Avoid falsy value to be returned
return return
@ -229,8 +219,8 @@ class @SearchAutocomplete
@dropdown.removeClass 'open' @dropdown.removeClass 'open'
# Only add class if there's a badge # Only add class if there's a badge
if @badgePresent() # if @badgePresent()
@searchInput.addClass 'disabled' # @searchInput.addClass 'disabled'
badgePresent: -> badgePresent: ->
@locationBadgeEl.children().length @locationBadgeEl.children().length

4
app/assets/stylesheets/framework/variables.scss
View file

@ -205,5 +205,5 @@ $search-input-width: $dropdown-width;
$location-badge-color: #aaa; $location-badge-color: #aaa;
$location-badge-bg: $gray-normal; $location-badge-bg: $gray-normal;
$location-icon-color: #e7e9ed; $location-icon-color: #e7e9ed;
$location-active-color: #7f8fa4; $location-active-color: $gl-text-color;
$location-active-bg: $location-active-color; $location-active-bg: $search-input-border-color;

7
app/assets/stylesheets/pages/search.scss
View file

@ -63,6 +63,7 @@
.search-input-container { .search-input-container {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
position: relative;
} }
.search-location-badge, .search-input-wrap { .search-location-badge, .search-input-wrap {
@ -72,7 +73,6 @@
.search-input-wrap { .search-input-wrap {
width: 100%; width: 100%;
position: relative;
.search-icon, .clear-icon { .search-icon, .clear-icon {
position: absolute; position: absolute;
@ -100,6 +100,11 @@
display: none; display: none;
} }
// Rewrite position. Dropdown menu should be relative to .search-input-container
.dropdown {
position: static;
}
.dropdown-header { .dropdown-header {
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;