Merge branch 'redesign_labels_page' into 'master'

Redesign labels page

closes #14227 

## Desktop
![Screen_Shot_2016-04-05_at_7.19.37_PM](/uploads/a52b764565b6e2739fb6932178f8bde5/Screen_Shot_2016-04-05_at_7.19.37_PM.png)

## Mobile
![Screen_Shot_2016-04-04_at_6.40.57_PM](/uploads/9804b074126fcdb6755918e9f4c472a7/Screen_Shot_2016-04-04_at_6.40.57_PM.png)

See merge request !3507

6 files changed, 74 insertions, 11 deletions

diff --git a/CHANGELOG b/CHANGELOG
index b5dcc8bc8a7..3561c541df0 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -46,6 +46,7 @@ v 8.6.5
 
 v 8.6.4
   - Don't attempt to fetch any tags from a forked repo (Stan Hu)
+  - Redesign the Labels page
 
 v 8.6.3
   - Mentions on confidential issues doesn't create todos for non-members. !3374
diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee
index 084f0e0dc65..e4b7a3172ec 100644
--- a/app/assets/javascripts/subscription.js.coffee
+++ b/app/assets/javascripts/subscription.js.coffee
@@ -10,10 +10,10 @@ class @Subscription
     btn = $(event.currentTarget)
     action = btn.find('span').text()
     current_status = @subscription_status.attr('data-status')
-    btn.prop('disabled', true)
+    btn.addClass('disabled')
 
     $.post @url, =>
-      btn.prop('disabled', false)
+      btn.removeClass('disabled')
       status = if current_status == 'subscribed' then 'unsubscribed' else 'subscribed'
       @subscription_status.attr('data-status', status)
       action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 4e02ec4e891..3e0a3140be7 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -49,6 +49,15 @@
 }
 
 .label-row {
+  .label-name {
+    display: inline-block;
+    width: 200px;
+
+    @media (max-width: $screen-xs-min) {
+      display: block;
+    }
+  }
+
   .label {
     padding: 9px;
     font-size: 14px;
@@ -69,3 +78,52 @@
   background-color: $gl-danger;
   color: $white-light;
 }
+
+.manage-labels-list {
+
+  .prepend-left-10 {
+    display: inline-block;
+    width: 40%;
+    vertical-align: middle;
+
+    @media (max-width: $screen-xs-min) {
+      display: block;
+      width: 100%;
+      margin-left: 0;
+      padding: 10px 0;
+    }
+  }
+
+  .pull-info-right {
+    float: right;
+
+    @media (max-width: $screen-xs-min) {
+      float: none;
+    }
+
+    .action-buttons {
+      border-color: transparent;
+      padding: 6px;
+      color: $gl-text-color;
+
+      &.subscribe-button {
+        padding-left: 0;
+      }
+    }
+
+    i {
+      color: $gl-text-color;
+    }
+
+    .append-right-20 {
+      a {
+        color: $gl-text-color;
+      }
+
+      @media (max-width: $screen-xs-min) {
+        display: block;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml
index 0612863296a..097a65969a6 100644
--- a/app/views/projects/labels/_label.html.haml
+++ b/app/views/projects/labels/_label.html.haml
@@ -1,24 +1,27 @@
 %li{id: dom_id(label)}
   = render "shared/label_row", label: label
 
-  .pull-right
-    %strong.append-right-20
+  .pull-info-right
+    %span.append-right-20
       = link_to_label(label, type: :merge_request) do
-        = pluralize label.open_merge_requests_count, 'open merge request'
+        = pluralize label.open_merge_requests_count, 'merge request'
 
-    %strong.append-right-20
+    %span.append-right-20
       = link_to_label(label) do
         = pluralize label.open_issues_count(current_user), 'open issue'
 
     - if current_user
       .label-subscription{data: {url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label)}}
         .subscription-status{data: {status: label_subscription_status(label)}}
-        %button.btn.btn-sm.btn-info.subscribe-button
+
+        %a.subscribe-button.btn.action-buttons{data: {toggle: "tooltip"}}
           %span= label_subscription_toggle_button_text(label)
 
     - if can? current_user, :admin_label, @project
-      = link_to 'Edit', edit_namespace_project_label_path(@project.namespace, @project, label), class: 'btn btn-sm'
-      = link_to 'Delete', namespace_project_label_path(@project.namespace, @project, label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"}
+      = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn action-buttons', data: {toggle: "tooltip"} do
+        %i.fa.fa-pencil-square-o
+      = link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn action-buttons remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip"} do
+        %i.fa.fa-trash-o
 
 - if current_user
   :javascript
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index 4b47b0291be..b38c5e18efb 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -1,4 +1,5 @@
 %span.label-row
-  = link_to_label(label, tooltip: false)
+  %span.label-name
+    = link_to_label(label, tooltip: false)
   %span.prepend-left-10
     = markdown(label.description, pipeline: :single_line)
diff --git a/features/steps/project/issues/labels.rb b/features/steps/project/issues/labels.rb
index 2ab8956867b..0ca2d6257c3 100644
--- a/features/steps/project/issues/labels.rb
+++ b/features/steps/project/issues/labels.rb
@@ -15,7 +15,7 @@ class Spinach::Features::ProjectIssuesLabels < Spinach::FeatureSteps
 
   step 'I delete all labels' do
     page.within '.labels' do
-      page.all('.btn-remove').each do |remove|
+      page.all('.remove-row').each do |remove|
         remove.click
         sleep 0.05
       end