Commit b6d5fcd4 authored by Jacob Schatz's avatar Jacob Schatz

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
parents fe132f52 d1ad6390
...@@ -177,10 +177,11 @@ class GitLabDropdown ...@@ -177,10 +177,11 @@ class GitLabDropdown
selector = ".dropdown-page-one .dropdown-content a" selector = ".dropdown-page-one .dropdown-content a"
@dropdown.on "click", selector, (e) -> @dropdown.on "click", selector, (e) ->
selected = self.rowClicked $(@) $el = $(@)
selected = self.rowClicked $el
if self.options.clicked if self.options.clicked
self.options.clicked(selected) self.options.clicked(selected, $el, e)
# Finds an element inside wrapper element # Finds an element inside wrapper element
getElement: (selector) -> getElement: (selector) ->
...@@ -360,6 +361,8 @@ class GitLabDropdown ...@@ -360,6 +361,8 @@ class GitLabDropdown
# Toggle the dropdown label # Toggle the dropdown label
if @options.toggleLabel if @options.toggleLabel
$(@el).find(".dropdown-toggle-text").text @options.toggleLabel $(@el).find(".dropdown-toggle-text").text @options.toggleLabel
else
selectedObject
else else
if !value? if !value?
field.remove() field.remove()
...@@ -375,7 +378,7 @@ class GitLabDropdown ...@@ -375,7 +378,7 @@ class GitLabDropdown
if @options.toggleLabel if @options.toggleLabel
$(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject) $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
if value? if value?
if !field.length if !field.length and fieldName
# Create hidden input for form # Create hidden input for form
input = "<input type='hidden' name='#{fieldName}' value='#{value}' />" input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
if @options.inputId? if @options.inputId?
......
...@@ -62,6 +62,8 @@ class @SearchAutocomplete ...@@ -62,6 +62,8 @@ class @SearchAutocomplete
search: search:
fields: ['text'] fields: ['text']
data: @getData.bind(@) data: @getData.bind(@)
selectable: true
clicked: @onClick.bind(@)
getData: (term, callback) -> getData: (term, callback) ->
_this = @ _this = @
...@@ -102,6 +104,8 @@ class @SearchAutocomplete ...@@ -102,6 +104,8 @@ class @SearchAutocomplete
lastCategory = suggestion.category lastCategory = suggestion.category
data.push data.push
id: "#{suggestion.category.toLowerCase()}-#{suggestion.id}"
category: suggestion.category
text: suggestion.label text: suggestion.label
url: suggestion.url url: suggestion.url
...@@ -133,12 +137,19 @@ class @SearchAutocomplete ...@@ -133,12 +137,19 @@ class @SearchAutocomplete
} }
bindEvents: -> bindEvents: ->
$(document).on 'click', @onDocumentClick
@searchInput.on 'keydown', @onSearchInputKeyDown @searchInput.on 'keydown', @onSearchInputKeyDown
@searchInput.on 'keyup', @onSearchInputKeyUp @searchInput.on 'keyup', @onSearchInputKeyUp
@searchInput.on 'click', @onSearchInputClick @searchInput.on 'click', @onSearchInputClick
@searchInput.on 'focus', @onSearchInputFocus @searchInput.on 'focus', @onSearchInputFocus
@searchInput.on 'blur', @onSearchInputBlur @clearInput.on 'click', @onClearInputClick
@clearInput.on 'click', @onRemoveLocationClick
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: -> enableAutocomplete: ->
# No need to enable anything if user is not logged in # No need to enable anything if user is not logged in
...@@ -181,6 +192,8 @@ class @SearchAutocomplete ...@@ -181,6 +192,8 @@ class @SearchAutocomplete
# We should display the menu only when input is not empty # We should display the menu only when input is not empty
@enableAutocomplete() @enableAutocomplete()
@wrap.toggleClass 'has-value', !!e.target.value
# Avoid falsy value to be returned # Avoid falsy value to be returned
return return
...@@ -189,27 +202,20 @@ class @SearchAutocomplete ...@@ -189,27 +202,20 @@ class @SearchAutocomplete
e.stopImmediatePropagation() e.stopImmediatePropagation()
onSearchInputFocus: => onSearchInputFocus: =>
@isFocused = true
@wrap.addClass('search-active') @wrap.addClass('search-active')
onRemoveLocationClick: (e) => onClearInputClick: (e) =>
e.preventDefault() e.preventDefault()
@removeLocationBadge()
@searchInput.val('').focus() @searchInput.val('').focus()
@skipBlurEvent = true
onSearchInputBlur: (e) => onSearchInputBlur: (e) =>
@skipBlurEvent = false @isFocused = false
# We should wait to make sure we are not clearing the input instead
setTimeout( =>
return if @skipBlurEvent
@wrap.removeClass('search-active') @wrap.removeClass('search-active')
# If input is blank then restore state # If input is blank then restore state
if @searchInput.val() is '' if @searchInput.val() is ''
@restoreOriginalState() @restoreOriginalState()
, 150)
addLocationBadge: (item) -> addLocationBadge: (item) ->
category = if item.category? then "#{item.category}: " else '' category = if item.category? then "#{item.category}: " else ''
...@@ -268,3 +274,23 @@ class @SearchAutocomplete ...@@ -268,3 +274,23 @@ class @SearchAutocomplete
<li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
</ul>" </ul>"
@dropdownContent.html(html) @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()
...@@ -201,14 +201,14 @@ $award-emoji-new-btn-icon-color: #dcdcdc; ...@@ -201,14 +201,14 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
/* /*
* Search Box * 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-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: $dropdown-width; $search-input-width: 244px;
$location-badge-color: #aaa; $location-badge-color: #aaa;
$location-badge-bg: $gray-normal; $location-badge-bg: $gray-normal;
$location-badge-active-bg: #4f91f8;
$location-icon-color: #e7e9ed; $location-icon-color: #e7e9ed;
$location-active-color: $gl-text-color; $location-icon-active-color: #807e7e;
$location-active-bg: $search-input-border-color;
/* /*
* Notes * Notes
......
...@@ -135,17 +135,18 @@ ...@@ -135,17 +135,18 @@
.location-badge { .location-badge {
@include transition(all .15s); @include transition(all .15s);
background-color: $location-active-bg; background-color: $location-badge-active-bg;
color: $white-light; color: $white-light;
} }
.search-input-wrap { .search-input-wrap {
i { i {
color: $location-active-color; color: $location-icon-active-color;
}
} }
} }
&.has-location-badge { &.has-value {
.search-icon { .search-icon {
display: none; display: none;
} }
...@@ -155,7 +156,6 @@ ...@@ -155,7 +156,6 @@
display: block; display: block;
} }
} }
}
&.has-location-badge { &.has-location-badge {
.search-input-wrap { .search-input-wrap {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment