Filter by multiple labels with little animation.

app/assets/javascripts/issues.js.coffee

 @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: ->

app/assets/javascripts/labels_select.js.coffee

@@ -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')

app/assets/javascripts/lib/animate.js.coffee

 ((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

app/controllers/projects/issues_controller.rb

@@ -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

app/views/shared/_label_row.html.haml

-%span.label-row
-  %span.label-name
-    = link_to_label(label, tooltip: false)
-  %span.prepend-left-10
+- labels.each do |l|
+  %span.label-row
+    = link_to_label(l, tooltip: false)
\ No newline at end of file
-    = markdown(label.description, pipeline: :single_line)

app/views/shared/issuable/_filter.html.haml

@@ -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();

app/views/shared/issuable/_label_dropdown.html.haml

 - 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"}}