Can create new label from dropdown

6 files changed, 62 insertions, 6 deletions

diff --git a/app/assets/javascripts/api.js.coffee b/app/assets/javascripts/api.js.coffee
index 987815b6bda..36c6a76e09c 100644
--- a/app/assets/javascripts/api.js.coffee
+++ b/app/assets/javascripts/api.js.coffee
@@ -75,6 +75,20 @@
     ).done (labels) ->
       callback(labels)
 
+  newLabel: (project_id, data, callback) ->
+    url = Api.buildUrl(Api.labels_path)
+    url = url.replace(':id', project_id)
+
+    data.private_token = gon.api_token
+    $.ajax(
+      url: url
+      type: "POST"
+      data: data
+      dataType: "json"
+    ).done (label) ->
+      callback(label)
+
+
   milestones: (project_id, callback) ->
     url = Api.buildUrl(Api.milestones_path)
     url = url.replace(':id', project_id)
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 18b90d32c96..2d69280c9e5 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -2,7 +2,7 @@ class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
 
   constructor: (@dropdown, @remote, @query, @data, @callback) ->
-    @input = @dropdown.find(".dropdown-input-field")
+    @input = @dropdown.find(".dropdown-input .dropdown-input-field")
 
     # Key events
     timeout = ""
@@ -108,10 +108,10 @@ class GitLabDropdown
         @togglePage()
 
     if @options.selectable
-      selector = "a"
+      selector = ".dropdown-content a"
 
       if @dropdown.find(".dropdown-toggle-page").length
-        selector = ".dropdown-page-one a"
+        selector = ".dropdown-page-one .dropdown-content a"
 
       @dropdown.on "click", selector, (e) ->
         self.rowClicked $(@)
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 56fe6dc9a7a..5582bf457e3 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -3,6 +3,32 @@ class @LabelsSelect
     $('.js-label-select').each (i, dropdown) ->
       projectId = $(dropdown).data('project-id')
       selectedLabel = $(dropdown).data('selected')
+      newLabelField = $('#new_label_name')
+      newColorField = $('#new_label_color')
+
+      if newLabelField.length
+        $('.suggest-colors-dropdown a').on "click", (e) ->
+          e.preventDefault()
+          e.stopPropagation()
+          newColorField.val $(this).data("color")
+          $('.js-dropdown-label-color-preview')
+            .css 'background-color', $(this).data("color")
+            .addClass 'is-active'
+
+        $('.js-new-label-btn').on "click", (e) ->
+          e.preventDefault()
+          e.stopPropagation()
+
+          if newLabelField.val() isnt "" && newColorField.val() isnt ""
+            $('.js-new-label-btn').disable()
+
+            # Create new label with API
+            Api.newLabel projectId, {
+              name: newLabelField.val()
+              color: newColorField.val()
+            }, (label) ->
+              $('.js-new-label-btn').enable()
+              $('.dropdown-menu-back', $(dropdown).parent()).trigger "click"
 
       $(dropdown).glDropdown(
         data: (term, callback) ->
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 27db075e25d..dce2b3b99cb 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -238,6 +238,7 @@
   font-size: 14px;
   border: 0;
   background: none;
+  outline: 0;
 
   &:hover {
     color: darken($dropdown-title-btn-color, 15%);
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 8c49f3a9238..5ec0966194c 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -10,7 +10,7 @@
 
   &.suggest-colors-dropdown {
     margin-bottom: 5px;
-    
+
     a {
       @include border-radius(0);
       width: 36.7px;
@@ -20,6 +20,17 @@
   }
 }
 
+.dropdown-label-color-preview {
+  display: none;
+  margin-top: 5px;
+  width: 100%;
+  height: 25px;
+
+  &.is-active {
+    display: block;
+  }
+}
+
 .label-row {
   .label {
     padding: 9px;
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index a336a540eb0..b9f9fb49233 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -73,13 +73,17 @@
                       = icon('arrow-left')
                     %span
                       Create new label
+                    %button.dropdown-title-button.dropdown-menu-close{type: "button", aria: {label: "close"}}
+                      = icon('times')
                   .dropdown-content
-                    = text_field_tag :label_name, nil, class: "dropdown-input-field", placeholder: "Name new label"
+                    = hidden_field_tag :new_label_color, nil
+                    = text_field_tag :new_label_name, nil, class: "dropdown-input-field", placeholder: "Name new label"
+                    .dropdown-label-color-preview.js-dropdown-label-color-preview
                     .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"}
+                    %button.btn.btn-primary.js-new-label-btn{type: "button"}
                       Create
               .dropdown-loading
                 = icon('spinner spin')