Add ability to clear location badge
This commit is contained in:
parent
eff98ffe05
commit
a477d604f6
|
@ -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')
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -1,8 +1,16 @@
|
|||
.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'
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
- 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
|
Loading…
Reference in New Issue