diff options
| -rw-r--r-- | app/assets/javascripts/gl_dropdown.js.coffee | 8 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable.js.coffee | 25 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/labels.scss | 17 | ||||
| -rw-r--r-- | app/views/shared/_labels_row.html.haml | 11 | ||||
| -rw-r--r-- | spec/features/issues/filter_by_labels_spec.rb | 35 |
5 files changed, 90 insertions, 6 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 7c7334e9e40..b49bd4565a7 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -211,6 +211,7 @@ class GitLabDropdown @dropdown.on "shown.bs.dropdown", @opened @dropdown.on "hidden.bs.dropdown", @hidden + $(@el).on "update.label", @updateLabel @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate @dropdown.on 'keyup', (e) => if e.which is 27 # Escape key @@ -453,7 +454,7 @@ class GitLabDropdown # Toggle the dropdown label if @options.toggleLabel - $(@el).find(".dropdown-toggle-text").text @options.toggleLabel + @updateLabel() else selectedObject else if el.hasClass(INDETERMINATE_CLASS) @@ -480,7 +481,7 @@ class GitLabDropdown # Toggle the dropdown label if @options.toggleLabel - $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject, el) + @updateLabel(selectedObject, el) if value? if !field.length and fieldName @addInput(fieldName, value) @@ -579,6 +580,9 @@ class GitLabDropdown # Scroll the dropdown content up $dropdownContent.scrollTop(listItemTop - dropdownContentTop) + updateLabel: (selected = null, el = null) => + $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el) + $.fn.glDropdown = (opts) -> return @.each -> if (!$.data @, 'glDropdown') diff --git a/app/assets/javascripts/issuable.js.coffee b/app/assets/javascripts/issuable.js.coffee index 6504e481102..c2447120033 100644 --- a/app/assets/javascripts/issuable.js.coffee +++ b/app/assets/javascripts/issuable.js.coffee @@ -6,12 +6,18 @@ issuable_created = false Issuable.initTemplates() Issuable.initSearch() Issuable.initChecks() + Issuable.initLabelFilterRemove() initTemplates: -> Issuable.labelRow = _.template( '<% _.each(labels, function(label){ %> - <span class="label-row"> - <a href="#"><span class="label color-label has-tooltip" style="background-color: <%= label.color %>; color: <%= label.text_color %>" title="<%= _.escape(label.description) %>" data-container="body"><%= _.escape(label.title) %></span></a> + <span class="label-row btn-group" role="group" aria-label="<%= _.escape(label.title) %>" style="color: <%= label.text_color %>;"> + <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%= label.color %>;" title="<%= _.escape(label.description) %>" data-container="body"> + <%= _.escape(label.title) %> + </a> + <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%= label.color %>;" data-label="<%= _.escape(label.title) %>"> + <i class="fa fa-times"></i> + </button> </span> <% }); %>' ) @@ -35,6 +41,21 @@ issuable_created = false Issuable.filterResults $form , 500) + initLabelFilterRemove: -> + $(document) + .off 'click', '.js-label-filter-remove' + .on 'click', '.js-label-filter-remove', (e) -> + $button = $(@) + + # Remove the label input box + $('input[name="label_name[]"]') + .filter -> @value is $button.data('label') + .remove() + + # Submit the form to get new data + Issuable.filterResults $('.filter-form') + $('.js-label-select').trigger('update.label') + toggleLabelFilters: -> $filteredLabels = $('.filtered-labels') if $filteredLabels.find('.label-row').length > 0 diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 2cd9d74b2de..26128fcea85 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -169,3 +169,20 @@ } } } + +.filtered-labels { + .label-row { + &:not(:last-child) { + margin-right: 5px; + } + } + + .label-remove { + border-left: 1px solid rgba(0, 0, 0, .1); + z-index: 3; + } + + .btn { + color: inherit; + } +} diff --git a/app/views/shared/_labels_row.html.haml b/app/views/shared/_labels_row.html.haml index dc89e36419c..87028ececd4 100644 --- a/app/views/shared/_labels_row.html.haml +++ b/app/views/shared/_labels_row.html.haml @@ -1,3 +1,10 @@ - labels.each do |label| - %span.label-row - = link_to_label(label, tooltip: false) + %span.label-row.btn-group{ role: "group", aria: { label: escape_once(label.name) }, style: "color: #{text_color_for_bg(label.color)}" } + = link_to namespace_project_label_path(@project.namespace, @project, label), + class: "btn btn-transparent has-tooltip", + style: "background-color: #{label.color};", + title: escape_once(label.description), + data: { container: "body" } do + = escape_once label.name + %button.btn.btn-transparent.label-remove.js-label-filter-remove{ type: "button", style: "background-color: #{label.color};", data: { label: label.title } } + = icon("times") diff --git a/spec/features/issues/filter_by_labels_spec.rb b/spec/features/issues/filter_by_labels_spec.rb index 7f654684143..0ec8b6b180a 100644 --- a/spec/features/issues/filter_by_labels_spec.rb +++ b/spec/features/issues/filter_by_labels_spec.rb @@ -54,6 +54,11 @@ feature 'Issue filtering by Labels', feature: true do expect(find('.filtered-labels')).not_to have_content "feature" expect(find('.filtered-labels')).not_to have_content "enhancement" end + + it 'should remove label "bug"' do + first('.js-label-filter-remove').click + expect(find('.filtered-labels')).to have_no_content "bug" + end end context 'filter by label feature', js: true do @@ -135,6 +140,11 @@ feature 'Issue filtering by Labels', feature: true do it 'should not show label "bug" in filtered-labels' do expect(find('.filtered-labels')).not_to have_content "bug" end + + it 'should remove label "enhancement"' do + first('.js-label-filter-remove').click + expect(find('.filtered-labels')).to have_no_content "enhancement" + end end context 'filter by label enhancement and bug in issues list', js: true do @@ -164,4 +174,29 @@ feature 'Issue filtering by Labels', feature: true do expect(find('.filtered-labels')).not_to have_content "feature" end end + + context 'remove filtered labels', js: true do + before do + page.within '.labels-filter' do + click_button 'Label' + click_link 'bug' + find('.dropdown-menu-close').click + end + + page.within '.filtered-labels' do + expect(page).to have_content 'bug' + end + end + + it 'should allow user to remove filtered labels' do + page.within '.filtered-labels' do + first('.js-label-filter-remove').click + expect(page).not_to have_content 'bug' + end + + page.within '.labels-filter' do + expect(page).not_to have_content 'bug' + end + end + end end |