1 files changed, 42 insertions, 20 deletions
diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml
index 8bf544b8371..73c6f2a046c 100644
--- a/app/views/projects/labels/_label.html.haml
+++ b/app/views/projects/labels/_label.html.haml
@@ -1,28 +1,50 @@
-%li{id: dom_id(label)}
+- label_css_id = dom_id(label)
+%li{id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
 
-  .pull-info-right
-    %span.append-right-20
-      = link_to_label(label, type: :merge_request) do
-        = pluralize label.open_merge_requests_count, 'merge request'
+  .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
+    %button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } }
+      Options
+      %span.caret
+    .dropdown-menu.dropdown-menu-align-right
+      %ul
+        %li
+          = link_to_label(label, type: :merge_request) do
+            = pluralize label.open_merge_requests_count, 'merge request'
+        %li
+          = link_to_label(label) do
+            = pluralize label.open_issues_count(current_user), 'open issue'
+        - if current_user
+          %li.label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+            %a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label) } }
+              %span= label_subscription_toggle_button_text(label)
+        - if can? current_user, :admin_label, @project
+          %li
+            = link_to "Edit", edit_namespace_project_label_path(@project.namespace, @project, label)
+          %li
+            = link_to "Delete", namespace_project_label_path(@project.namespace, @project, label), title: "Delete", method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"}
 
-    %span.append-right-20
-      = link_to_label(label) do
-        = pluralize label.open_issues_count(current_user), 'open issue'
+  .pull-right.hidden-xs.hidden-sm.hidden-md
+    = link_to_label(label, type: :merge_request, css_class: 'btn btn-transparent btn-action') do
+      = pluralize label.open_merge_requests_count, 'merge request'
+    = link_to_label(label, css_class: 'btn btn-transparent btn-action') 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.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip" } }
-          %span= label_subscription_toggle_button_text(label)
+      .label-subscription.inline{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+        %button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label), data: { toggle: "tooltip", status: label_subscription_status(label) } }
+          %span.sr-only= label_subscription_toggle_button_text(label)
+          = icon('eye', class: 'label-subscribe-button-icon')
+          = icon('spinner spin', class: 'label-subscribe-button-loading')
 
     - if can? current_user, :admin_label, @project
-      = 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
+      = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
+        %span.sr-only Edit
+        = icon('pencil-square-o')
+      = link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip"} do
+        %span.sr-only Delete
+        = icon('trash-o')
 
-- if current_user
-  :javascript
-    new Subscription('##{dom_id(label)} .label-subscription');
+  - if current_user
+    :javascript
+      new Subscription('##{dom_id(label)} .label-subscription');