Commit 42e0625d authored by Jacob Schatz's avatar Jacob Schatz

Filter by multiple labels with little animation.

parent 1617d1e0
@Issues =
init: ->
Issues.initTemplates()
Issues.initSearch()
Issues.initChecks()
......@@ -15,6 +16,15 @@
else
$(this).html totalIssues - 1
initTemplates: ->
Issue.labelRow = _.template(
'<% _.each(labels, function(label){ %>
<span class="label-row">
<a href="#"><span class="label color-label" style="background-color: <%= label.color %>; color: #FFFFFF" title="<%= label.description %>" data-container="body"><%= label.title %></span></a>
</span>
<% }); %>'
)
reload: ->
Issues.initChecks()
$('#filter_issue_search').val($('#issue_search').val())
......@@ -50,7 +60,6 @@
, 500)
filterResults: (form) =>
formData = form.serialize()
$('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
......@@ -70,6 +79,31 @@
history.replaceState {page: issuesUrl}, document.title, issuesUrl
Issues.reload()
Issues.updateStateFilters()
$filteredLabels = $('.filtered-labels')
$filteredLabelsSpans = $filteredLabels.find('span')
gl.animate.animateEach(
$filteredLabelsSpans,
'fadeOutDown', 20, {
cssStart: {
opacity: 1
},
cssEnd: {
opacity: 0
}
}).then( ->
$filteredLabels.html(Issue.labelRow(data))
$spans = $filteredLabels.find('span')
$spans.css('opacity',0)
return gl.animate.animateEach($spans, 'fadeInUp', 20, {
cssStart: {
opacity: 0
},
cssEnd: {
opacity: 1
}
})
)
dataType: "json"
checkChanged: ->
......
......@@ -16,6 +16,7 @@ class @LabelsSelect
abilityName = $dropdown.data('ability-name')
$selectbox = $dropdown.closest('.selectbox')
$block = $selectbox.closest('.block')
$form = $dropdown.closest('form')
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
$value = $block.find('.value')
$loading = $block.find('.block-loading').fadeOut()
......@@ -171,7 +172,7 @@ class @LabelsSelect
.find('a')
.each((i) ->
setTimeout(=>
glAnimate($(@), 'pulse')
gl.animate.animate($(@), 'pulse')
,200 * i
)
)
......@@ -201,9 +202,9 @@ class @LabelsSelect
renderRow: (label) ->
selectedClass = ''
if $selectbox.find("input[type='hidden']\
if $form.find("input[type='hidden']\
[name='#{$dropdown.data('field-name')}']\
[value='#{label.id}']").length
[value='#{this.id(label)}']").length
selectedClass = 'is-active'
color = if label.color? then "<span class='dropdown-label-box' style='background-color: #{label.color}'></span>" else ""
......@@ -248,8 +249,6 @@ class @LabelsSelect
.find("input[type='hidden'][name='#{$dropdown.data('field-name')}']")
Issues.filterResults(
$dropdown.closest('form'),
selectedLabels,
$dropdown.data('singularFieldName'),
$dropdown.data('fieldName')
)
else if $dropdown.hasClass('js-filter-submit')
......
((w) ->
if not w.gl? then w.gl = {}
if not gl.animate? then gl.animate = {}
w.glAnimate = ($el, animation, done) ->
gl.animate.animate = ($el, animation, options, done) ->
if options?.cssStart?
$el.css(options.cssStart)
$el
.removeClass()
.removeClass(animation + ' animated')
.addClass(animation + ' animated')
.one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', ->
$(this).removeClass()
return
$(this).removeClass(animation + ' animated')
if done?
done()
if options?.cssEnd?
$el.css(options.cssEnd)
return
return
gl.animate.animateEach = ($els, animation, time, options, done) ->
dfd = $.Deferred()
$els.each((i) ->
setTimeout(=>
$this = $(@)
gl.animate.animate($this, animation, options, =>
if i is $els.length - 1
dfd.resolve()
if done?
done()
)
,time * i
)
return
)
return dfd.promise()
return
) window
\ No newline at end of file
......@@ -33,14 +33,15 @@ class Projects::IssuesController < Projects::ApplicationController
end
@issues = @issues.page(params[:page])
@label = @project.labels.find_by(title: params[:label_name])
@labels = @project.labels.where(title: params[:label_name])
respond_to do |format|
format.html
format.atom { render layout: false }
format.json do
render json: {
html: view_to_html_string("projects/issues/_issues")
html: view_to_html_string("projects/issues/_issues"),
labels: @labels
}
end
end
......
%span.label-row
%span.label-name
= link_to_label(label, tooltip: false)
%span.prepend-left-10
= markdown(label.description, pipeline: :single_line)
- labels.each do |l|
%span.label-row
= link_to_label(l, tooltip: false)
\ No newline at end of file
......@@ -46,9 +46,9 @@
.filter-item.inline
= button_tag "Update issues", class: "btn update_selected_issues btn-save"
- if @label
.gray-content-block.second-block
= render "shared/label_row", label: @label
- if @labels
.gray-content-block.second-block.filtered-labels
= render "shared/label_row", labels: @labels
:javascript
new UsersSelect();
......
- if params[:label_name].present?
= hidden_field_tag(:label_name, params[:label_name])
- if params[:label_name].respond_to?('any?')
- params[:label_name].each do |label|
= hidden_field_tag "label_name[]", label, id: nil
.dropdown
%button.dropdown-menu-toggle.js-label-select.js-filter-submit.js-extra-options{type: "button", data: {toggle: "dropdown", field_name: "label_name", show_no: "true", show_any: "true", selected: params[:label_name], project_id: @project.try(:id), labels: labels_filter_path, default_label: "Label"}}
%button.dropdown-menu-toggle.js-label-select.js-filter-submit.js-multiselect.js-extra-options{type: "button", data: {toggle: "dropdown", field_name: "label_name[]", show_no: "true", show_any: "true", selected: params[:label_name], project_id: @project.try(:id), labels: labels_filter_path, default_label: "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