diff --git a/app/assets/javascripts/compare_autocomplete.js.coffee b/app/assets/javascripts/compare_autocomplete.js.coffee
new file mode 100644
index 0000000000000000000000000000000000000000..7ad9fd9763702af7cef72080d1d0a89f9a51e9bb
--- /dev/null
+++ b/app/assets/javascripts/compare_autocomplete.js.coffee
@@ -0,0 +1,41 @@
+class @CompareAutocomplete
+ constructor: ->
+ @initDropdown()
+
+ initDropdown: ->
+ $('.js-compare-dropdown').each ->
+ $dropdown = $(@)
+ selected = $dropdown.data('selected')
+
+ $dropdown.glDropdown(
+ data: (term, callback) ->
+ $.ajax(
+ url: $dropdown.data('refs-url')
+ data:
+ ref: $dropdown.data('ref')
+ ).done (refs) ->
+ callback(refs)
+ selectable: true
+ filterable: true
+ filterByText: true
+ fieldName: $dropdown.attr('name')
+ filterInput: 'input[type="text"]'
+ renderRow: (ref) ->
+ if ref.header?
+ $('<li />')
+ .addClass('dropdown-header')
+ .text(ref.header)
+ else
+ link = $('<a />')
+ .attr('href', '#')
+ .addClass(if ref is selected then 'is-active' else '')
+ .text(ref)
+ .attr('data-ref', escape(ref))
+
+ $('<li />')
+ .append(link)
+ id: (obj, $el) ->
+ $el.attr('data-ref')
+ toggleLabel: (obj, $el) ->
+ $el.text().trim()
+ )
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index a39df421832289fd61dc4475426e887ac1f61aa6..c8db27759ad7f31459885aaa790bce7c28444936 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -138,6 +138,8 @@ class Dispatcher
new Project()
new ProjectAvatar()
switch path[1]
+ when 'compare'
+ new CompareAutocomplete()
when 'edit'
shortcut_handler = new ShortcutsNavigation()
new ProjectNew()
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 1c65e833d47bce60e2bdcd27c006b1b441f96e8c..5ffacf9a184856c14f5542db92ca7cb76cf1211d 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -456,6 +456,8 @@ class GitLabDropdown
rowClicked: (el) ->
fieldName = @options.fieldName
+ isInput = $(@el).is('input')
+
if @renderedData
groupName = el.data('group')
if groupName
@@ -466,10 +468,19 @@ class GitLabDropdown
selectedObject = @renderedData[selectedIndex]
value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
- field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+
+ if isInput
+ field = $(@el)
+ else
+ field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+
if el.hasClass(ACTIVE_CLASS)
el.removeClass(ACTIVE_CLASS)
- field.remove()
+
+ if isInput
+ field.val('')
+ else
+ field.remove()
# Toggle the dropdown label
if @options.toggleLabel
@@ -490,7 +501,9 @@ class GitLabDropdown
else
if not @options.multiSelect or el.hasClass('dropdown-clear-active')
@dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
- @dropdown.parent().find("input[name='#{fieldName}']").remove()
+
+ unless isInput
+ @dropdown.parent().find("input[name='#{fieldName}']").remove()
if !value?
field.remove()
diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee
index 01b08103dcb38d7fe5723c02ccec9d3d9f573189..3288c801388453b03653eff797cad4b2711a08b8 100644
--- a/app/assets/javascripts/project.js.coffee
+++ b/app/assets/javascripts/project.js.coffee
@@ -67,7 +67,7 @@ class @Project
selectable: true
filterable: true
filterByText: true
- fieldName: $dropdown.data('field-name')
+ fieldName: 'ref'
renderRow: (ref) ->
if ref.header?
$('<li />')
@@ -87,6 +87,5 @@ class @Project
toggleLabel: (obj, $el) ->
$el.text().trim()
clicked: (e) ->
- unless $dropdown.hasClass('js-compare-dropdown')
- $dropdown.closest('form').submit()
+ $dropdown.closest('form').submit()
)
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index f4edafb2560dd9b284981999e2b1cede72f5e609..d4e900f80ef453b0796b6bfadf4f60dcd321ed36 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -48,6 +48,9 @@
border: 1px solid $dropdown-toggle-border-color;
border-radius: $border-radius-base;
outline: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
.fa {
position: absolute;
@@ -58,14 +61,6 @@
font-size: 10px;
}
- .dropdown-toggle-text {
- display: block;
- min-height: 19px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
&:hover, {
border-color: $dropdown-toggle-hover-border-color;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4e722542fc60d9bda3790ddd8eecf014f4312501..9c73739fd3d8ab9306a43408f4889b451908c9bf 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -633,19 +633,7 @@ pre.light-well {
}
}
-.compare-input-group {
- &.input-group .input-group-addon {
- @media (min-width: $screen-sm-min) {
- width: 1%;
- }
- }
-
- .dropdown-menu-toggle {
- width: 100%;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
-
+.compare-form-group {
.dropdown-menu {
width: 300px;
}
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index ea9e99ac518475d5dbbcb72b10a44a9f8d803f74..af09b3418ea888f1043f17f8c6a127c11f078cf4 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -2,19 +2,17 @@
.clearfix
- if params[:to] && params[:from]
= link_to 'switch', {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip', title: 'Switch base of comparison'}
- .form-group
- = hidden_field_tag :from, params[:from]
- .input-group.inline-input-group.compare-input-group.dropdown
+ .form-group.dropdown.compare-form-group.js-compare-from-dropdown
+ .input-group.inline-input-group
%span.input-group-addon from
- = dropdown_toggle h(params[:from].presence || ''), { toggle: "dropdown", refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'from', selected: params[:from] }, { toggle_class: "js-project-refs-dropdown js-compare-dropdown" }
- = render "ref_dropdown"
+ = text_field_tag :from, params[:from], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from].presence }
+ = render "ref_dropdown"
= "..."
- .form-group
- = hidden_field_tag :to, params[:to]
- .input-group.inline-input-group.compare-input-group.dropdown
+ .form-group.dropdown.compare-form-group.js-compare-to-dropdown
+ .input-group.inline-input-group
%span.input-group-addon to
- = dropdown_toggle h(params[:from].presence || ''), { toggle: "dropdown", refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'to', selected: params[:to] }, { toggle_class: "js-project-refs-dropdown js-compare-dropdown" }
- = render "ref_dropdown"
+ = text_field_tag :to, params[:to], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to].presence }
+ = render "ref_dropdown"
= button_tag "Compare", class: "btn btn-create commits-compare-btn"
- if @merge_request.present?
diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/projects/compare/_ref_dropdown.html.haml
index 30340db469a2f2349313c8e0cf1eeb72c4af14db..c604c6d0135111125f2f2464118fb4a1caf91c7c 100644
--- a/app/views/projects/compare/_ref_dropdown.html.haml
+++ b/app/views/projects/compare/_ref_dropdown.html.haml
@@ -1,5 +1,4 @@
.dropdown-menu.dropdown-menu-selectable
- = dropdown_title "Switch branch/tag"
- = dropdown_filter "Search branches and tags"
+ = dropdown_title "Select branch/tag"
= dropdown_content
= dropdown_loading
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index 73e805ffea499048a07ed51c15f9bbb0ffb5c664..ea7162d4d63a54f1818ade14e298ff3fc9e85857 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -6,7 +6,7 @@
- @options && @options.each do |key, value|
= hidden_field_tag key, value, id: nil
.dropdown
- = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, field_name: 'ref', ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project) }, { toggle_class: "js-project-refs-dropdown" }
+ = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project) }, { toggle_class: "js-project-refs-dropdown" }
.dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
= dropdown_title "Switch branch/tag"
= dropdown_filter "Search branches and tags"