Use button instead of an icon to subscribe/unsubscribe to labels

4 files changed, 49 insertions, 14 deletions

diff --git a/app/assets/javascripts/label_subscription.js.es6 b/app/assets/javascripts/label_subscription.js.es6
new file mode 100644
index 00000000000..26bb8419f6b
--- /dev/null
+++ b/app/assets/javascripts/label_subscription.js.es6
@@ -0,0 +1,42 @@
+/* eslint-disable */
+(function(global) {
+  class LabelSubscription {
+    constructor(container) {
+      $(container).on('click', '.js-subscribe-button', this.toggleSubscription);
+    }
+
+    toggleSubscription(event) {
+      event.preventDefault();
+
+      const $btn = $(event.currentTarget);
+      const $span = $btn.find('span');
+      const url = $btn.attr('data-url');
+      const status = $btn.attr('data-status');
+
+      $btn.addClass('disabled');
+      $span.toggleClass('hidden');
+
+      $.ajax({
+        type: 'POST',
+        url: url
+      }).done(() => {
+        let newStatus, newAction;
+
+        if (status === 'subscribed') {
+          [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
+        } else {
+          [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
+        }
+
+        $span.text(newAction);
+        $span.toggleClass('hidden');
+        $btn.removeClass('disabled');
+        $btn.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+        $btn.attr('data-status', newStatus);
+      });
+    }
+  }
+
+  global.LabelSubscription = LabelSubscription;
+
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 397f89f501a..4eed1c7bfa6 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -90,7 +90,7 @@
 
     @media (min-width: $screen-sm-min) {
       display: inline-block;
-      width: 40%;
+      width: 35%;
       margin-left: 10px;
       margin-bottom: 0;
       vertical-align: middle;
diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index a5abae7fa8e..a7c8a8a8650 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -68,12 +68,6 @@ module LabelsHelper
     end
   end
 
-  def toggle_subscription_data(label, project)
-    {
-      url: toggle_subscription_namespace_project_label_path(project.namespace, project, label)
-    }
-  end
-
   def render_colored_label(label, label_suffix = '', tooltip: true)
     label_color = label.color || Label::DEFAULT_COLOR
     text_color = text_color_for_bg(label_color)
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index c8bc175093e..942da5dd5b7 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -19,8 +19,8 @@
           = link_to_label(label, subject: subject) do
             = pluralize open_issues_count, 'open issue'
         - if current_user && defined?(@project)
-          %li.label-subscription{ data: toggle_subscription_data(label, @project) }
-            %a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label, @project) } }
+          %li.label-subscription
+            %a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label, @project), url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
               %span= label_subscription_toggle_button_text(label, @project)
         - if can?(current_user, :admin_label, label)
           %li
@@ -35,10 +35,9 @@
       = pluralize open_issues_count, 'open issue'
 
     - if current_user && defined?(@project)
-      .label-subscription.inline{ data: toggle_subscription_data(label, @project) }
-        %button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label, @project), data: { toggle: "tooltip", status: label_subscription_status(label, @project) } }
-          %span.sr-only= label_subscription_toggle_button_text(label, @project)
-          = icon('eye', class: 'label-subscribe-button-icon')
+      .label-subscription.inline
+        %button.js-subscribe-button.label-subscribe-button.btn.btn-default.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label, @project), data: { toggle: "tooltip", status: label_subscription_status(label, @project), url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+          %span= label_subscription_toggle_button_text(label, @project)
           = icon('spinner spin', class: 'label-subscribe-button-loading')
 
     - if can?(current_user, :admin_label, label)
@@ -51,4 +50,4 @@
 
   - if current_user && defined?(@project)
     :javascript
-      new Subscription('##{dom_id(label)} .label-subscription');
+      new gl.LabelSubscription('##{dom_id(label)} .label-subscription');