From 8b9a4963a4f3a9e02f77ace387d25c8ff39d937d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 24 Jun 2016 12:29:42 +0100 Subject: Updated dropdowns to use field instead Allows a bit more flexibilty and keeps the current functionality --- .../javascripts/compare_autocomplete.js.coffee | 41 ++++++++++++++++++++++ app/assets/javascripts/dispatcher.js.coffee | 2 ++ app/assets/javascripts/gl_dropdown.js.coffee | 19 ++++++++-- app/assets/javascripts/project.js.coffee | 5 ++- app/assets/stylesheets/framework/dropdowns.scss | 11 ++---- app/assets/stylesheets/pages/projects.scss | 14 +------- app/views/projects/compare/_form.html.haml | 18 +++++----- app/views/projects/compare/_ref_dropdown.html.haml | 3 +- app/views/shared/_ref_switcher.html.haml | 2 +- 9 files changed, 75 insertions(+), 40 deletions(-) create mode 100644 app/assets/javascripts/compare_autocomplete.js.coffee diff --git a/app/assets/javascripts/compare_autocomplete.js.coffee b/app/assets/javascripts/compare_autocomplete.js.coffee new file mode 100644 index 00000000000..7ad9fd97637 --- /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? + $('
  • ') + .addClass('dropdown-header') + .text(ref.header) + else + link = $('') + .attr('href', '#') + .addClass(if ref is selected then 'is-active' else '') + .text(ref) + .attr('data-ref', escape(ref)) + + $('
  • ') + .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 a39df421832..c8db27759ad 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 1c65e833d47..5ffacf9a184 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 01b08103dcb..3288c801388 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? $('
  • ') @@ -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 f4edafb2560..d4e900f80ef 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 4e722542fc6..9c73739fd3d 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 ea9e99ac518..af09b3418ea 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 30340db469a..c604c6d0135 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 73e805ffea4..ea7162d4d63 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" -- cgit v1.2.1