Label text color comes from JSON

Created issuable singleton to house the filtering

app/assets/javascripts/dispatcher.js.coffee

@@ -17,6 +17,7 @@ class Dispatcher
     switch page
       when 'projects:issues:index'
         Issues.init()
+        Issuable.init()
         shortcut_handler = new ShortcutsNavigation()
       when 'projects:issues:show'
         new Issue()
@@ -57,8 +58,7 @@ class Dispatcher
         new ZenMode()
       when 'projects:merge_requests:index'
         shortcut_handler = new ShortcutsNavigation()
-        MergeRequests.init()
-        Issues.init()
+        Issuable.init()
       when 'dashboard:activity'
         new Activities()
       when 'dashboard:projects:starred'

app/assets/javascripts/issuable.js.coffee

+@Issuable =
+  init: ->
+    Issuable.initTemplates()
+    Issuable.initSearch()
+
+  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>
+      <% }); %>'
+    )
+
+  initSearch: ->
+    @timer = null
+    $('#issue_search')
+      .off 'keyup'
+      .on 'keyup', ->
+        clearTimeout(@timer)
+        @timer = setTimeout( ->
+          Issuable.filterResults $('#issue_search_form')
+        , 500)
+
+  toggleLabelFilters: ->
+    $filteredLabels = $('.filtered-labels')
+    if $filteredLabels.find('.label-row').length > 0
+      $filteredLabels.removeClass('hidden')
+    else
+      $filteredLabels.addClass('hidden')
+
+  filterResults: (form) =>
+    formData = form.serialize()
+
+    $('.issues-holder, .merge-requests-holder').css('opacity', '0.5')
+    formAction = form.attr('action')
+    issuesUrl = formAction
+    issuesUrl += ("#{if formAction.indexOf('?') < 0 then '?' else '&'}")
+    issuesUrl += formData
+    $.ajax
+      type: 'GET'
+      url: formAction
+      data: formData
+      complete: ->
+        $('.issues-holder, .merge-requests-holder').css('opacity', '1.0')
+      success: (data) ->
+        $('.issues-holder, .merge-requests-holder').html(data.html)
+        # Change url so if user reload a page - search results are saved
+        history.replaceState {page: issuesUrl}, document.title, issuesUrl
+        Issuable.reload()
+        Issuable.updateStateFilters()
+        $filteredLabels = $('.filtered-labels')
+
+        if typeof Issuable.labelRow is 'function'
+          $filteredLabels.html(Issuable.labelRow(data))
+
+        Issuable.toggleLabelFilters()
+
+      dataType: "json"
+
+  reload: ->
+    if Issues.created
+      Issues.initChecks()
+
+    $('#filter_issue_search').val($('#issue_search').val())
+
+  updateStateFilters: ->
+    stateFilters =  $('.issues-state-filters')
+    newParams = {}
+    paramKeys = ['author_id', 'milestone_title', 'assignee_id', 'issue_search']
+
+    for paramKey in paramKeys
+      newParams[paramKey] = gl.utils.getParameterValues(paramKey)[0] or ''
+
+    if stateFilters.length
+      stateFilters.find('a').each ->
+        initialUrl = gl.utils.removeParamQueryString($(this).attr('href'), 'label_name[]')
+        labelNameValues = gl.utils.getParameterValues('label_name[]')
+        if labelNameValues
+          labelNameQueryString = ("label_name[]=#{value}" for value in labelNameValues).join('&')
+          newUrl = "#{gl.utils.mergeUrlParams(newParams, initialUrl)}&#{labelNameQueryString}"
+        else
+          newUrl = gl.utils.mergeUrlParams(newParams, initialUrl)
+        $(this).attr 'href', newUrl

app/assets/javascripts/issues.js.coffee

 @Issues =
   init: ->
-    Issues.initTemplates()
-    Issues.initSearch()
+    Issues.created = true
     Issues.initChecks()
-    Issues.toggleLabelFilters()
 
     $("body").on "ajax:success", ".close_issue, .reopen_issue", ->
       t = $(this)
@@ -17,26 +15,6 @@
         else
           $(this).html totalIssues - 1
 
-  initTemplates: ->
-    Issue.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: #FFFFFF" title="<%= _.escape(label.description) %>" data-container="body"><%= _.escape(label.title) %></span></a>
-        </span>
-      <% }); %>'
-    )
-
-  toggleLabelFilters: ()->
-    $filteredLabels = $('.filtered-labels')
-    if $filteredLabels.find('.label-row').length > 0
-      $filteredLabels.removeClass('hidden')
-    else
-      $filteredLabels.addClass('hidden')
-
-  reload: ->
-    Issues.initChecks()
-    $('#filter_issue_search').val($('#issue_search').val())
-
   initChecks: ->
     $(".check_all_issues").click ->
       $(".selected_issue").prop("checked", @checked)
@@ -44,64 +22,6 @@
 
     $(".selected_issue").bind "change", Issues.checkChanged
 
-  # Update state filters if present in page
-  updateStateFilters: ->
-    stateFilters =  $('.issues-state-filters')
-    newParams = {}
-    paramKeys = ['author_id', 'milestone_title', 'assignee_id', 'issue_search']
-
-    for paramKey in paramKeys
-      newParams[paramKey] = gl.utils.getParameterValues(paramKey)[0] or ''
-
-    if stateFilters.length
-      stateFilters.find('a').each ->
-        initialUrl = gl.utils.removeParamQueryString($(this).attr('href'), 'label_name[]')
-        labelNameValues = gl.utils.getParameterValues('label_name[]')
-        if labelNameValues
-          labelNameQueryString = ("label_name[]=#{value}" for value in labelNameValues).join('&')
-          newUrl = "#{gl.utils.mergeUrlParams(newParams, initialUrl)}&#{labelNameQueryString}"
-        else
-          newUrl = gl.utils.mergeUrlParams(newParams, initialUrl)
-        $(this).attr 'href', newUrl
-
-  # Make sure we trigger ajax request only after user stop typing
-  initSearch: ->
-    @timer = null
-    $("#issue_search").keyup ->
-      clearTimeout(@timer)
-      @timer = setTimeout( ->
-        Issues.filterResults $("#issue_search_form")
-      , 500)
-
-  filterResults: (form) =>
-    formData = form.serialize()
-
-    $('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
-    formAction = form.attr('action')
-    issuesUrl = formAction
-    issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
-    issuesUrl += formData
-    $.ajax
-      type: "GET"
-      url: formAction
-      data: formData
-      complete: ->
-        $('.issues-holder, .merge-requests-holder').css("opacity", '1.0')
-      success: (data) ->
-        $('.issues-holder, .merge-requests-holder').html(data.html)
-        # Change url so if user reload a page - search results are saved
-        history.replaceState {page: issuesUrl}, document.title, issuesUrl
-        Issues.reload()
-        Issues.updateStateFilters()
-        $filteredLabels = $('.filtered-labels')
-
-        if typeof Issue.labelRow is 'function'
-          $filteredLabels.html(Issue.labelRow(data))
-
-        Issues.toggleLabelFilters()
-
-      dataType: "json"
-
   checkChanged: ->
     checked_issues = $(".selected_issue:checked")
     if checked_issues.length > 0

app/assets/javascripts/labels_select.js.coffee

@@ -257,7 +257,7 @@ class @LabelsSelect
               selectedLabels = $dropdown
                 .closest('form')
                 .find("input:hidden[name='#{$dropdown.data('fieldName')}']")
-              Issues.filterResults $dropdown.closest('form')
+              Issuable.filterResults $dropdown.closest('form')
             else if $dropdown.hasClass('js-filter-submit')
               $dropdown.closest('form').submit()
             else
@@ -271,7 +271,7 @@ class @LabelsSelect
           if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
             if not $dropdown.hasClass 'js-multiselect'
               selectedLabel = label.title
-              Issues.filterResults $dropdown.closest('form')
+              Issuable.filterResults $dropdown.closest('form')
           else if $dropdown.hasClass 'js-filter-submit'
             $dropdown.closest('form').submit()
           else

app/assets/javascripts/merge_requests.js.coffee

-#
-# * Filter merge requests
-#
-@MergeRequests =
-  init: ->
-    MergeRequests.initSearch()
-
-  # Make sure we trigger ajax request only after user stop typing
-  initSearch: ->
-    @timer = null
-    $("#issue_search").keyup ->
-      clearTimeout(@timer)
-      @timer = setTimeout(MergeRequests.filterResults, 500)
-
-  filterResults: =>
-    form = $("#issue_search_form")
-    search = $("#issue_search").val()
-    $('.merge-requests-holder').css("opacity", '0.5')
-    issues_url = form.attr('action') + '?' + form.serialize()
-
-    $.ajax
-      type: "GET"
-      url: form.attr('action')
-      data: form.serialize()
-      complete: ->
-        $('.merge-requests-holder').css("opacity", '1.0')
-      success: (data) ->
-        $('.merge-requests-holder').html(data.html)
-        # Change url so if user reload a page - search results are saved
-        history.replaceState {page: issues_url}, document.title, issues_url
-        MergeRequests.reload()
-      dataType: "json"
-
-  reload: ->
-    $('#filter_issue_search').val($('#issue_search').val())

app/assets/javascripts/milestone_select.js.coffee

@@ -97,7 +97,7 @@ class @MilestoneSelect
               selectedMilestone = selected.name
             else
               selectedMilestone = ''
-            Issues.filterResults $dropdown.closest('form')
+            Issuable.filterResults $dropdown.closest('form')
           else if $dropdown.hasClass('js-filter-submit')
             $dropdown.closest('form').submit()
           else

app/assets/javascripts/users_select.js.coffee

@@ -157,7 +157,7 @@ class @UsersSelect
 
           if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
             selectedId = user.id
-            Issues.filterResults $dropdown.closest('form')
+            Issuable.filterResults $dropdown.closest('form')
           else if $dropdown.hasClass 'js-filter-submit'
             $dropdown.closest('form').submit()
           else

app/controllers/projects/issues_controller.rb

@@ -41,7 +41,7 @@ class Projects::IssuesController < Projects::ApplicationController
       format.json do
         render json: {
           html: view_to_html_string("projects/issues/_issues"),
-          labels: @labels
+          labels: @labels.as_json(methods: :text_color)
         }
       end
     end

app/controllers/projects/merge_requests_controller.rb

@@ -45,7 +45,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       format.json do
         render json: {
           html: view_to_html_string("projects/merge_requests/_merge_requests"),
-          labels: @labels
+          labels: @labels.as_json(methods: :text_color)
         }
       end
     end

app/models/label.rb

@@ -113,6 +113,10 @@ class Label < ActiveRecord::Base
     template
   end
 
+  def text_color
+    LabelsHelper::text_color_for_bg(self.color)
+  end
+
   private
 
   def label_format_reference(format = :id)

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

@@ -46,8 +46,8 @@
           .filter-item.inline
             = button_tag "Update issues", class: "btn update_selected_issues btn-save"
 
-  .gray-content-block.second-block.filtered-labels
-    - if @labels
+  .gray-content-block.second-block.filtered-labels{ class: ("hidden" if !@labels.any?) }
+    - if @labels.any?
       = render "shared/labels_row", labels: @labels
 
 :javascript