BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 6f449c63 by Alfredo Sumaran
Options

Apply styling and tweaks to autocomplete dropdown

parent 4b3d3446
Showing with 180 additions and 82 deletions
app/assets/javascripts/lib/category_autocomplete.js.coffee
......@@ -14,4 +14,36 @@ $.widget( "custom.catcomplete", $.ui.autocomplete,
if item.category?
li.attr('aria-label', item.category + " : " + item.label)
_renderItem: (ul, item) ->
# Highlight occurrences
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>#{item.label}</a>" )
.appendTo( ul );
_resizeMenu: ->
if (isNaN(this.options.maxShowItems))
return
ul = this.menu.element.css(overflowX: '', overflowY: '', width: '', maxHeight: '')
lis = ul.children('li').css('whiteSpace', 'nowrap');
if (lis.length > this.options.maxShowItems)
ulW = ul.prop('clientWidth')
ul.css(
overflowX: 'hidden'
overflowY: 'auto'
maxHeight: lis.eq(0).outerHeight() * this.options.maxShowItems + 1
)
barW = ulW - ul.prop('clientWidth');
ul.width('+=' + barW);
# Original code from jquery.ui.autocomplete.js _resizeMenu()
ul.outerWidth(Math.max(ul.outerWidth() + 1, this.element.outerWidth()));
)
app/assets/javascripts/search_autocomplete.js.coffee
......@@ -24,7 +24,10 @@ class @SearchAutocomplete
@scopeInputEl = @$('#scope')
@saveOriginalState()
if @locationBadgeEl.is(':empty')
@createAutocomplete()
@bindEvents()
$: (selector) ->
......@@ -66,6 +69,12 @@ class @SearchAutocomplete
appendTo: 'form.navbar-form'
source: @autocompletePath + @query
minLength: 1
maxShowItems: 15
position:
# { my: "left top", at: "left bottom", collision: "none" }
my: "left-10 top+9"
at: "left bottom"
collision: "none"
close: (e) ->
e.preventDefault()
......@@ -89,7 +98,9 @@ class @SearchAutocomplete
bindEvents: ->
@searchInput.on 'keydown', @onSearchKeyDown
@searchInput.on 'keydown', @onSearchInputKeyDown
@searchInput.on 'focus', @onSearchInputFocus
@searchInput.on 'blur', @onSearchInputBlur
@wrap.on 'click', '.remove-badge', @onRemoveLocationBadgeClick
onRemoveLocationBadgeClick: (e) =>
......@@ -97,7 +108,7 @@ class @SearchAutocomplete
@removeLocationBadge()
@searchInput.focus()
onSearchKeyDown: (e) =>
onSearchInputKeyDown: (e) =>
# Remove tag when pressing backspace and input search is empty
if e.keyCode is @keyCode.BACKSPACE and e.currentTarget.value is ''
@removeLocationBadge()
......@@ -106,14 +117,24 @@ class @SearchAutocomplete
else if e.keyCode is @keyCode.ESCAPE
@restoreOriginalState()
else
# Create new autocomplete instance if it's not created
@createAutocomplete() unless @catcomplete?
# Create new autocomplete if hasn't been created yet and there's no badge
if !@catComplete? and @locationBadgeEl.is(':empty')
@createAutocomplete()
onSearchInputFocus: =>
@wrap.addClass('search-active')
onSearchInputBlur: =>
@wrap.removeClass('search-active')
# If input is blank then restore state
@restoreOriginalState() if @searchInput.val() is ''
addLocationBadge: (item) ->
category = if item.category? then "#{item.category}: " else ''
value = if item.value? then item.value else ''
html = "<span class='label label-primary'>
html = "<span class='location-badge'>
<i class='location-text'>#{category}#{value}</i>
<a class='remove-badge' href='#'>x</a>
</span>"
......@@ -160,5 +181,5 @@ class @SearchAutocomplete
location.href = result.url
destroyAutocomplete: ->
@catComplete.destroy() if @catcomplete?
@catComplete.destroy() if @catComplete?
@catComplete = null
app/assets/stylesheets/framework/forms.scss
......@@ -6,40 +6,6 @@ input {
border-radius: $border-radius-base;
}
input[type='search'] {
background-color: white;
padding-left: 10px;
}
input[type='search'].search-input {
background-repeat: no-repeat;
background-position: 10px;
background-size: 16px;
background-position-x: 30%;
padding-left: 10px;
background-color: $gray-light;
&.search-input[value=""] {
background-image: url('data:image/png;base64,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');
}
&.search-input::-webkit-input-placeholder {
text-align: center;
}
&.search-input:-moz-placeholder { /* Firefox 18- */
text-align: center;
}
&.search-input::-moz-placeholder { /* Firefox 19+ */
text-align: center;
}
&.search-input:-ms-input-placeholder {
text-align: center;
}
}
input[type='text'].danger {
background: #F2DEDE!important;
border-color: #D66;
......
app/assets/stylesheets/framework/header.scss
......@@ -112,26 +112,6 @@ header {
}
}
.search {
margin-right: 10px;
margin-left: 10px;
margin-top: ($header-height - 36) / 2;
form {
margin: 0;
padding: 0;
}
.search-input {
width: 220px;
&:focus {
@include box-shadow(none);
outline: none;
}
}
}
.impersonation i {
color: $red-normal;
}
......
app/assets/stylesheets/framework/jquery.scss
......@@ -19,13 +19,41 @@
}
&.ui-autocomplete {
border-color: #DDD;
padding: 0;
margin-top: 2px;
z-index: 1001;
width: 240px;
margin-bottom: 0;
padding: 10px 10px;
font-size: 14px;
font-weight: normal;
background-color: $dropdown-bg;
border: 1px solid $dropdown-border-color;
border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color;
.ui-menu-item {
display: block;
position: relative;
padding: 0 10px;
color: $dropdown-link-color;
line-height: 34px;
text-overflow: ellipsis;
border-radius: 2px;
white-space: nowrap;
overflow: hidden;
border: none;
&.ui-state-focus {
background-color: $dropdown-link-hover-bg;
text-decoration: none;
margin: 0;
}
}
.ui-menu-item a {
padding: 4px 10px;
.ui-autocomplete-category {
text-transform: uppercase;
font-size: 11px;
color: #7f8fa4;
}
}
......
app/assets/stylesheets/pages/search.scss
......@@ -21,3 +21,73 @@
}
}
.search {
margin-right: 10px;
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;
}
}
form {
@extend .form-control;
margin: 0;
padding: 4px;
width: 350px;
line-height: 24px;
overflow: hidden;
}
.location-text {
font-style: normal;
}
.remove-badge {
display: none;
}
.search-input {
border: none;
font-size: 14px;
outline: none;
padding: 0;
margin-left: 2px;
line-height: 25px;
width: 100%;
}
.location-badge {
line-height: 25px;
padding: 0 5px;
border-radius: 2px;
font-size: 14px;
font-style: normal;
color: #AAAAAA;
display: inline-block;
background-color: #F5F5F5;
vertical-align: top;
}
.search-input-container {
display: flex;
}
.search-location-badge, .search-input-wrap {
// Fallback if flex is not supported
display: inline-block;
}
.search-input-wrap {
width: 100%;
}
}
app/helpers/search_helper.rb
......@@ -48,20 +48,19 @@ module SearchHelper
# Autocomplete results for the current project, if it's defined
def project_autocomplete
if @project && @project.repository.exists? && @project.repository.root_ref
prefix = "Project - " + search_result_sanitize(@project.name_with_namespace)
ref = @ref || @project.repository.root_ref
[
{ category: prefix, label: "Files", url: namespace_project_tree_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Commits", url: namespace_project_commits_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Network", url: namespace_project_network_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Graph", url: namespace_project_graph_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Issues", url: namespace_project_issues_path(@project.namespace, @project) },
{ category: prefix, label: "Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
{ category: prefix, label: "Milestones", url: namespace_project_milestones_path(@project.namespace, @project) },
{ category: prefix, label: "Snippets", url: namespace_project_snippets_path(@project.namespace, @project) },
{ category: prefix, label: "Members", url: namespace_project_project_members_path(@project.namespace, @project) },
{ category: prefix, label: "Wiki", url: namespace_project_wikis_path(@project.namespace, @project) },
{ category: "Current Project", label: "Files", url: namespace_project_tree_path(@project.namespace, @project, ref) },
{ category: "Current Project", label: "Commits", url: namespace_project_commits_path(@project.namespace, @project, ref) },
{ category: "Current Project", label: "Network", url: namespace_project_network_path(@project.namespace, @project, ref) },
{ category: "Current Project", label: "Graph", url: namespace_project_graph_path(@project.namespace, @project, ref) },
{ category: "Current Project", label: "Issues", url: namespace_project_issues_path(@project.namespace, @project) },
{ category: "Current Project", label: "Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
{ category: "Current Project", label: "Milestones", url: namespace_project_milestones_path(@project.namespace, @project) },
{ category: "Current Project", label: "Snippets", url: namespace_project_snippets_path(@project.namespace, @project) },
{ category: "Current Project", label: "Members", url: namespace_project_project_members_path(@project.namespace, @project) },
{ category: "Current Project", label: "Wiki", url: namespace_project_wikis_path(@project.namespace, @project) },
]
else
[]
......
app/views/layouts/_search.html.haml
.search
= form_tag search_path, method: :get, class: 'navbar-form pull-left' do |f|
.search.search-form
= form_tag search_path, method: :get, class: 'navbar-form' do |f|
.search-input-container
.search-location-badge
= render 'shared/location_badge'
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input form-control", spellcheck: false, tabindex: "1"
= hidden_field_tag :group_id, @group.try(:id)
.search-input-wrap
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input", spellcheck: false, tabindex: "1", autocomplete: 'off'
= hidden_field_tag :group_id, @group.try(:id)
= hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : ''
- if @project && @project.persisted?
......
app/views/shared/_location_badge.html.haml
......@@ -3,9 +3,8 @@
- if controller.controller_path =~ /^projects/
- label = 'This project'
.search-location-badge
- if label.present?
%span.label.label-primary
- if label.present?
%span.location-badge
%i.location-text
= label
......
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