Adjusted alignment for the new label form

5 files changed, 48 insertions, 20 deletions

diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 684ad56cdb4..7805e95f96d 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -23,8 +23,14 @@ class @LabelsSelect
           newColorField.val $(this).data('color')
           $('.js-dropdown-label-color-preview')
             .css 'background-color', $(this).data('color')
+            .parent()
             .addClass 'is-active'
 
+        $('.js-cancel-label-btn').on 'click', (e) ->
+          e.preventDefault()
+          e.stopPropagation()
+          $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+
         $('.js-new-label-btn').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 0fb7d94d0dd..20afc5c9dc0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -183,7 +183,7 @@
 }
 
 .dropdown-select {
-  width: 280px;
+  width: 300px;
 }
 
 .dropdown-menu-align-right {
@@ -237,7 +237,7 @@
 
 .dropdown-title-button {
   position: absolute;
-  top: -1px;
+  top: 0;
   padding: 0;
   color: $dropdown-title-btn-color;
   font-size: 14px;
@@ -357,8 +357,9 @@
 .dropdown-label-box {
   position: relative;
   top: 3px;
+  margin-right: 5px;
   display: inline-block;
-  width: 20px;
-  height: 16px;
-  border-radius: 3px;
+  width: 15px;
+  height: 15px;
+  border-radius: $border-radius-base;
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index be626678bd7..b014031e758 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -168,13 +168,13 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
 */
 $dropdown-bg: #fff;
 $dropdown-link-color: #555;
-$dropdown-link-hover-bg: rgba(#000, .04);
+$dropdown-link-hover-bg: $row-hover;
 $dropdown-border-color: rgba(#000, .1);
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
 $dropdown-title-btn-color: #bfbfbf;
-$dropdown-input-color: #c7c7c7;
+$dropdown-input-color: #555;
 $dropdown-input-focus-border: rgb(58, 171, 240);
 $dropdown-input-focus-shadow: rgba(#000, .2);
 $dropdown-loading-bg: rgba(#fff, .6);
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 3c13573c8fe..4e02ec4e891 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -9,28 +9,45 @@
   }
 
   &.suggest-colors-dropdown {
-    margin-bottom: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: $border-radius-base;
+    overflow: hidden;
 
     a {
       @include border-radius(0);
-      width: 36.7px;
+      width: (100% / 7);
       margin-right: 0;
       margin-bottom: -5px;
     }
   }
 }
 
-.dropdown-label-color-preview {
-  display: none;
-  margin-top: 5px;
-  width: 100%;
-  height: 25px;
+.dropdown-new-label {
+  .dropdown-content {
+    max-height: 260px;
+  }
+}
+
+.dropdown-label-color-input {
+  position: relative;
+  margin-bottom: 10px;
 
   &.is-active {
-    display: block;
+    padding-left: 32px;
   }
 }
 
+.dropdown-label-color-preview {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  border-top-left-radius: $border-radius-base;
+  border-bottom-left-radius: $border-radius-base;
+}
+
 .label-row {
   .label {
     padding: 9px;
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 186087e8f89..006a34a11e3 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -24,17 +24,21 @@
                 - else
                   View labels
     - if can? current_user, :admin_label, @project and @project
-      .dropdown-page-two
+      .dropdown-page-two.dropdown-new-label
         = dropdown_title("Create new label", back: true)
         = dropdown_content do
           .dropdown-labels-error.js-label-error
-          %input#new_label_color{type: "hidden"}
           %input#new_label_name.dropdown-input-field{type: "text", 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.js-new-label-btn{type: "button"}
-            Create
+          .dropdown-label-color-input
+            .dropdown-label-color-preview.js-dropdown-label-color-preview
+            %input#new_label_color.dropdown-input-field{ type: "text" }
+          .clearfix
+            %button.btn.btn-primary.pull-left.js-new-label-btn{type: "button"}
+              Create
+            %button.btn.btn-default.pull-right.js-cancel-label-btn{type: "button"}
+              Cancel
     = dropdown_loading