Started page two for labels dropdown to allow creating new labels

app/assets/javascripts/gl_dropdown.js.coffee

@@ -64,6 +64,7 @@ class GitLabDropdownRemote
 
 class GitLabDropdown
   LOADING_CLASS = "is-loading"
+  PAGE_TWO_CLASS = "is-page-two"
 
   constructor: (@el, @options) ->
     self = @
@@ -96,11 +97,23 @@ class GitLabDropdown
         @parseData data
 
     # Event listeners
-    $(@el).parent().on "shown.bs.dropdown", @opened
-    $(@el).parent().on "hidden.bs.dropdown", @hidden
+    @dropdown.on "shown.bs.dropdown", @opened
+    @dropdown.on "hidden.bs.dropdown", @hidden
+
+    if @dropdown.find(".dropdown-toggle-page").length
+      @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
+        e.preventDefault()
+        e.stopPropagation()
+
+        @togglePage()
 
     if @options.selectable
-      @dropdown.on "click", "a", (e) ->
+      selector = "a"
+
+      if @dropdown.find(".dropdown-toggle-page").length
+        selector = ".dropdown-page-one a"
+
+      @dropdown.on "click", selector, (e) ->
         self.rowClicked $(@)
 
         if self.options.clicked
@@ -109,6 +122,15 @@ class GitLabDropdown
   toggleLoading: ->
     $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
 
+  togglePage: ->
+    menu = $('.dropdown-menu', @dropdown)
+
+    if menu.hasClass(PAGE_TWO_CLASS)
+      if @remote
+        @remote.execute()
+
+    menu.toggleClass PAGE_TWO_CLASS
+
   parseData: (data) ->
     @renderedData = data
 
@@ -136,6 +158,10 @@ class GitLabDropdown
     if @options.filterable
       @dropdown.find(".dropdown-input-field").blur().val("")
 
+    if @dropdown.find(".dropdown-toggle-page").length
+      $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
+
+
   # Render the full menu
   renderMenu: (html) ->
     menu_html = ""
@@ -149,12 +175,18 @@ class GitLabDropdown
 
   # Append the menu into the dropdown
   appendMenu: (html) ->
-    $('.dropdown-content', @dropdown).html html
+    selector = '.dropdown-content'
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one .dropdown-content"
+
+    $(selector, @dropdown).html html
 
   # Render the row
   renderItem: (data) ->
     html = ""
 
+    return "<li class='divider'></li>" if data is "divider"
+
     if @options.renderRow
       # Call the render function
       html = @options.renderRow(data)
@@ -189,7 +221,7 @@ class GitLabDropdown
     value = if @options.id then @options.id(selectedObject) else selectedObject.id
 
     if @options.multiSelect
-      fieldName = "[#{fieldName}]"
+      fieldName = "#{fieldName}[]"
     else
       @dropdown.find('.is-active').removeClass 'is-active'
       @dropdown.parent().find("input[name='#{fieldName}']").remove()

app/assets/javascripts/milestone_select.js.coffee

@@ -3,10 +3,29 @@ class @MilestoneSelect
     $('.js-milestone-select').each (i, dropdown) ->
       projectId = $(dropdown).data('project-id')
       selectedMilestone = $(dropdown).data('selected')
+      showNo = $(dropdown).data('show-no')
+      showAny = $(dropdown).data('show-any')
 
       $(dropdown).glDropdown(
         data: (term, callback) ->
-          Api.milestones projectId, callback
+          Api.milestones projectId, (data) ->
+            data = $.map data, (milestone) ->
+              return milestone if milestone.state isnt "closed"
+
+            if showNo
+              data.unshift(
+                title: 'No milestone'
+              )
+              
+            if showAny
+              data.unshift(
+                title: 'Any milestone'
+              )
+
+            if data.length > 2
+              data.splice 2, 0, "divider"
+
+            callback(data)
         filterable: true
         search:
           fields: ['title']
@@ -15,7 +34,10 @@ class @MilestoneSelect
         text: (milestone) ->
           milestone.title
         id: (milestone) ->
+          if milestone.title isnt "Any milestone"
             milestone.title
+          else
+            ""
         isSelected: (milestone) ->
           milestone.title is selectedMilestone
         clicked: ->

app/assets/javascripts/users_select.js.coffee

@@ -14,6 +14,8 @@ class @UsersSelect
         data: (term, callback) =>
           @users term, (users) =>
             if term.length is 0
+              showDivider = 0
+
               if firstUser
                 # Move current user to the front of the list
                 for obj, index in users
@@ -23,12 +25,14 @@ class @UsersSelect
                     break
 
               if showNullUser
+                showDivider += 1
                 users.unshift(
                   name: 'Unassigned',
                   id: 0
                 )
 
               if showAnyUser
+                showDivider += 1
                 name = showAnyUser
                 name = 'Any User' if name == true
                 anyUser = {
@@ -37,6 +41,9 @@ class @UsersSelect
                 }
                 users.unshift(anyUser)
 
+            if showDivider
+              users.splice(showDivider, 0, "divider")
+
             # Send the data back
             callback users
         filterable: true
@@ -49,12 +56,16 @@ class @UsersSelect
           $(dropdown).parents('form').submit()
         renderRow: (user) ->
           username = if user.username then "@#{user.username}" else ""
-          avatar = if user.avatar_url then user.avatar_url else gon.default_avatar_url
+          avatar = if user.avatar_url then user.avatar_url else false
           selected = if user.id is selectedId then "is-active" else ""
+          img = ""
+
+          if avatar
+            img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"
 
           "<li>
             <a href='#' class='dropdown-menu-user-link #{selected}'>
-              <img src='#{avatar}' class='avatar avatar-inline' width='30' />
+              #{img}
               <strong class='dropdown-menu-user-full-name'>
                 #{user.name}
               </strong>

app/assets/stylesheets/framework/dropdowns.scss

@@ -29,7 +29,7 @@
 
 .dropdown-menu-toggle {
   position: relative;
-  min-width: 160px;
+  width: 160px;
   padding: 5px 20px 5px 10px;
   background-color: $dropdown-toggle-bg;
   color: $dropdown-toggle-color;
@@ -128,7 +128,8 @@
 }
 
 .dropdown-menu-paging {
-  .dropdown-page-two {
+  .dropdown-page-two,
+  .dropdown-menu-back {
     display: none;
   }
 
@@ -137,7 +138,8 @@
       display: none;
     }
 
-    .dropdown-page-two {
+    .dropdown-page-two,
+    .dropdown-menu-back {
       display: block;
     }
   }
@@ -160,6 +162,7 @@
 .dropdown-menu-user-full-name {
   display: block;
   margin-bottom: 2px;
+  font-weight: 600;
   line-height: 1;
   text-overflow: ellipsis;
   overflow: hidden;

app/assets/stylesheets/pages/labels.scss

@@ -7,6 +7,17 @@
     display: inline-block;
     margin-right: 10px;
   }
+
+  &.suggest-colors-dropdown {
+    margin-bottom: 5px;
+    
+    a {
+      @include border-radius(0);
+      width: 36.7px;
+      margin-right: 0;
+      margin-bottom: -5px;
+    }
+  }
 }
 
 .label-row {

app/helpers/dropdowns_helper.rb

@@ -5,7 +5,7 @@ module DropdownsHelper
 
       dropdown_output = ""
       dropdown_output += content_tag :button, class: "dropdown-menu-toggle #{toggle_class}", id: id, type: "button", data: toggle_hash do
-        output = toggle_text
+        output = content_tag(:span, toggle_text, class: "dropdown-toggle-text")
         output << icon('chevron-down')
         output.html_safe
       end

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

@@ -22,17 +22,67 @@
           - if params[:milestone_title]
             = hidden_field_tag(:milestone_title, params[:milestone_title])
           = dropdown_tag("Milestone", title: "Filter by milestone", toggle_class: 'js-milestone-select', filter: true, dropdown_class: "dropdown-menu-selectable",
-            placeholder: "Search milestones", data: {field_name: "milestone_title", selected: params[:milestone_title], project_id: @project.id})
+            placeholder: "Search milestones", footer_content: true, data: {show_no: true, show_any: true, field_name: "milestone_title", selected: params[:milestone_title], project_id: @project.id}) do
+            %ul.dropdown-footer-list
+              - if can? current_user, :admin_milestone, @project
+                %li
+                  = link_to new_namespace_project_milestone_path(@project.namespace, @project), title: "New Milestone" do
+                    Create new
+              %li
+                = link_to namespace_project_milestones_path(@project.namespace, @project) do
+                  - if can? current_user, :admin_milestone, @project
+                    Manage milestones
+                  - else
+                    View milestones
 
         .filter-item.inline.labels-filter
           - if params[:label_name]
             = hidden_field_tag(:label_name, params[:label_name])
-          = dropdown_tag("Label", title: "Filter by label", toggle_class: "js-label-select", filter: true, dropdown_class: "dropdown-menu-labels dropdown-menu-selectable",
-            placeholder: "Search labels", footer_content: true, data: {field_name: "label_name", selected: params[:label_name], project_id: @project.id}) do
+          .dropdown
+            %button.dropdown-menu-toggle.js-label-select{type: "button", data: {toggle: "dropdown", field_name: "label_name", selected: params[:label_name], project_id: @project.id}}
+              %span.dropdown-toggle-text
+                Label
+              = icon('chevron-down')
+            .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
+              .dropdown-page-one
+                .dropdown-title
+                  %span
+                    Filter by label
+                  %button.dropdown-title-button.dropdown-menu-close{type: "button", aria: {label: "close"}}
+                    = icon('times')
+                .dropdown-input
+                  = search_field_tag nil, nil, class: "dropdown-input-field", placeholder: "Search labels"
+                  = icon('search')
+                .dropdown-content
+                .dropdown-footer
                   %ul.dropdown-footer-list
+                    - if can? current_user, :admin_label, @project
+                      %li
+                        %a.dropdown-toggle-page{href: "#"}
+                          Create new
                     %li
                       = link_to namespace_project_labels_path(@project.namespace, @project) do
+                        - if can? current_user, :admin_label, @project
                           Manage labels
+                        - else
+                          View labels
+              - if can? current_user, :admin_label, @project
+                .dropdown-page-two
+                  .dropdown-title
+                    %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
+                      = icon('arrow-left')
+                    %span
+                      Create new label
+                  .dropdown-content
+                    = text_field_tag :label_name, nil, class: "dropdown-input-field", placeholder: "Name new label"
+                    .suggest-colors.suggest-colors-dropdown
+                      - suggested_colors.each do |color|
+                        = link_to '#', style: "background-color: #{color}", data: { color: color } do
+                          &nbsp
+                    %button.btn.btn-primary{type: "button"}
+                      Create
+              .dropdown-loading
+                = icon('spinner spin')
 
         .pull-right
           = render 'shared/sort_dropdown'