diff options
| -rw-r--r-- | app/assets/javascripts/search_autocomplete.js.coffee | 28 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/search.scss | 71 | ||||
| -rw-r--r-- | app/views/layouts/_search.html.haml | 13 | ||||
| -rw-r--r-- | app/views/shared/_location_badge.html.haml | 9 |
5 files changed, 82 insertions, 42 deletions
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee index df6cb4f2c18..fc8595f60c3 100644 --- a/app/assets/javascripts/search_autocomplete.js.coffee +++ b/app/assets/javascripts/search_autocomplete.js.coffee @@ -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') diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 9d820a46cfb..8f260f24c4c 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -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; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 110258a9e11..4179d0adb3e 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -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; + } + } + } + + } diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index f051e7a1867..0a5c145029b 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -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' diff --git a/app/views/shared/_location_badge.html.haml b/app/views/shared/_location_badge.html.haml deleted file mode 100644 index 489c0e11d0b..00000000000 --- a/app/views/shared/_location_badge.html.haml +++ /dev/null @@ -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 |