adds starring and unstarring text to star button, also adds partial new styles

3 files changed, 22 insertions, 4 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 31a093fadd5..32a66052659 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -115,7 +115,6 @@
       margin-left: 4px;
 
       .arrow {
-
           &:before {
             content: '';
             display: inline-block;
@@ -165,6 +164,10 @@
         background-image: none;
         white-space: nowrap;
         margin: 0 11px 0px 4px;
+
+        &:hover {
+          background: #FFF;
+        }
       }
     }
   }
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index bf5e25ff895..2dab04f2a7c 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -171,7 +171,7 @@ class ProjectsController < ApplicationController
     @project.reload
 
     render json: {
-      html: view_to_html_string("projects/buttons/_star")
+      star_count: @project.star_count
     }
   end
 
diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml
index 27d63cc4cec..4289d7afd26 100644
--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
@@ -1,7 +1,10 @@
 - if current_user
   = link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star has_tooltip', method: :post, remote: true, title: "Star project" do
     = icon('star fw')
-    Star
+    - if current_user.starred?(@project)
+      %span.starred Unstar
+    - else
+      %span Star
   %div.count-with-arrow
     %span.arrow
     %span.count
@@ -9,7 +12,19 @@
 
   :javascript
     $('.project-home-panel .toggle-star').on('ajax:success', function (e, data, status, xhr) {
-      $(this).replaceWith(data.html);
+      var $this = $(this);
+      var $starSpan = $this.find('span');
+      $this
+        .parent()
+        .find('span.count')
+        .text(data.star_count);
+      if($starSpan.hasClass('starred')){
+        $starSpan.removeClass('starred');
+        $starSpan.text('Star');
+      } else {
+        $starSpan.addClass('starred');
+        $starSpan.text('Unstar');
+      }
     })
     .on('ajax:error', function (e, xhr, status, error) {
       new Flash('Star toggle failed. Try again later.', 'alert');