Updated subscribe icon

3 files changed, 27 insertions, 4 deletions

diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee
index 1a430f3aa47..08d494aba9f 100644
--- a/app/assets/javascripts/subscription.js.coffee
+++ b/app/assets/javascripts/subscription.js.coffee
@@ -19,3 +19,8 @@ class @Subscription
       action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
       btn.find('span').text(action)
       @subscription_status.find('>div').toggleClass('hidden')
+
+      if btn.attr('data-original-title')
+        btn.tooltip('hide')
+          .attr('data-original-title', action)
+          .tooltip('fixTitle')
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 335bdda13d7..bc65404a741 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -166,3 +166,19 @@
 .label-options-toggle {
   width: 100%;
 }
+
+.label-subscribe-button {
+  .label-subscribe-button-loading {
+    display: none;
+  }
+
+  &.disabled {
+    .label-subscribe-button-icon {
+      display: none;
+    }
+
+    .label-subscribe-button-loading {
+      display: block;
+    }
+  }
+}
diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml
index 9fdebe82f74..73c6f2a046c 100644
--- a/app/views/projects/labels/_label.html.haml
+++ b/app/views/projects/labels/_label.html.haml
@@ -32,16 +32,18 @@
 
     - if current_user
       .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", data: { toggle: "tooltip", status: label_subscription_status(label) } }
-          %span= label_subscription_toggle_button_text(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 btn-transparent btn-action', data: {toggle: "tooltip"} do
         %span.sr-only Edit
-        %i.fa.fa-pencil-square-o
+        = 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
-        %i.fa.fa-trash-o
+        = icon('trash-o')
 
   - if current_user
     :javascript