improve UI

5 files changed, 30 insertions, 22 deletions

diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee
index a009969e4dc..7f41616d4e7 100644
--- a/app/assets/javascripts/subscription.js.coffee
+++ b/app/assets/javascripts/subscription.js.coffee
@@ -1,17 +1,17 @@
 class @Subscription
   constructor: (url) ->
-    $(".subscribe-button").click (event)=>
+    $(".subscribe-button").unbind("click").click (event)=>
       btn = $(event.currentTarget)
-      action = btn.prop("value")
-      current_status = $(".sub_status").text().trim()
-      $(".fa-spinner.subscription").removeClass("hidden")
-      $(".sub_status").empty()
+      action = btn.find("span").text()
+      current_status = $(".subscription-status").attr("data-status")
+      btn.prop("disabled", true)
       
       $.post url, =>
-        $(".fa-spinner.subscription").addClass("hidden")
+        btn.prop("disabled", false)
         status = if current_status == "subscribed" then "unsubscribed" else "subscribed"
-        $(".sub_status").text(status)
+        $(".subscription-status").attr("data-status", status)
         action = if status == "subscribed" then "Unsubscribe" else "Subscribe"
-        btn.prop("value", action)
+        btn.find("span").text(action)
+        $(".subscription-status>div").toggleClass("hidden")
 
     
diff --git a/app/views/projects/issues/_issue_context.html.haml b/app/views/projects/issues/_issue_context.html.haml
index 85937e7bf42..cb4846a41d1 100644
--- a/app/views/projects/issues/_issue_context.html.haml
+++ b/app/views/projects/issues/_issue_context.html.haml
@@ -31,11 +31,15 @@
     .issuable-context-title
       %label
         Subscription:
-        %i.fa.fa-spinner.fa-spin.hidden.subscription
-        %span.sub_status
-          = @issue.subscribed?(current_user) ? "subscribed" : "unsubscribed"
-    - subscribe_action = @issue.subscribed?(current_user) ? "Unsubscribe" : "Subscribe"
-    %input.btn.subscribe-button{:type => "button", :value => subscribe_action}
+    %button.btn.btn-block.subscribe-button
+      %i.fa.fa-eye
+      %span= @issue.subscribed?(current_user) ? "Unsubscribe" : "Subscribe"
+    - subscribtion_status = @issue.subscribed?(current_user) ? "subscribed" : "unsubscribed"
+    .subscription-status{"data-status" => subscribtion_status}
+      .description-block.unsubscribed{class: ( "hidden" if @issue.subscribed?(current_user) )}
+        You're not receiving notifications from this thread.
+      .description-block.subscribed{class: ( "hidden" unless @issue.subscribed?(current_user) )}
+        You're receiving notifications because you're subscribed to this thread.
 
 :coffeescript
   $ ->
diff --git a/app/views/projects/merge_requests/show/_context.html.haml b/app/views/projects/merge_requests/show/_context.html.haml
index 79b0e7799a9..753c7e0e611 100644
--- a/app/views/projects/merge_requests/show/_context.html.haml
+++ b/app/views/projects/merge_requests/show/_context.html.haml
@@ -33,11 +33,15 @@
     .issuable-context-title
       %label
         Subscription:
-        %i.fa.fa-spinner.fa-spin.hidden.subscription
-        %span.sub_status
-          = @merge_request.subscribed?(current_user) ? "subscribed" : "unsubscribed"
-    - subscribe_action = @merge_request.subscribed?(current_user) ? "Unsubscribe" : "Subscribe"
-    %input.btn.subscribe-button{:type => "button", :value => subscribe_action}
+    %button.btn.btn-block.subscribe-button
+      %i.fa.fa-eye
+      %span= @merge_request.subscribed?(current_user) ? "Unsubscribe" : "Subscribe"
+    - subscribtion_status = @merge_request.subscribed?(current_user) ? "subscribed" : "unsubscribed"
+    .subscription-status{"data-status" => subscribtion_status}
+      .description-block.unsubscribed{class: ( "hidden" if @merge_request.subscribed?(current_user) )}
+        You're not receiving notifications from this thread.
+      .description-block.subscribed{class: ( "hidden" unless @merge_request.subscribed?(current_user) )}
+        You're receiving notifications because you're subscribed to this thread.
 
 :coffeescript
   $ ->
diff --git a/features/steps/project/issues/issues.rb b/features/steps/project/issues/issues.rb
index cc0d6033a2b..e8ca3f7c176 100644
--- a/features/steps/project/issues/issues.rb
+++ b/features/steps/project/issues/issues.rb
@@ -19,12 +19,12 @@ class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
   end
 
   step 'I should see that I am subscribed' do
-    find(".sub_status").text.should == "subscribed"
+    find(".subscribe-button span").text.should == "Unsubscribe"
   end
 
   step 'I should see that I am unsubscribed' do
     sleep 0.2
-    find(".sub_status").text.should == "unsubscribed"
+    find(".subscribe-button span").text.should == "Subscribe"
   end
 
   step 'I click link "Closed"' do
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index 5a35d703765..6e2f60972b6 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -57,12 +57,12 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I should see that I am subscribed' do
-    find(".sub_status").text.should == "subscribed"
+    find(".subscribe-button span").text.should == "Unsubscribe"
   end
 
   step 'I should see that I am unsubscribed' do
     sleep 0.2
-    find(".sub_status").text.should == "unsubscribed"
+    find(".subscribe-button span").text.should == "Subscribe"
   end
 
   step 'I click button "Unsubscribe"' do