Merge branch 'improve-star-ui' into 'master'

Improve star ui

* move star button to sidebar (where other buttons are)
* it fixes overflow issue for screens smaller then 1200px
* it fixes wrong vertical align for star button at old position
* add forks count too - so it looks similar with stars

Fixes #1460

See merge request !991

9 files changed, 87 insertions, 64 deletions

diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee
index d81cc087df9..f7c64b4b816 100644
--- a/app/assets/javascripts/project.js.coffee
+++ b/app/assets/javascripts/project.js.coffee
@@ -47,7 +47,7 @@ $ ->
     $(@).parents('.no-ssh-key-message').hide()
     e.preventDefault()
 
-  $('.project-home-panel .star').on 'ajax:success', (e, data, status, xhr) ->
+  $('.project-side .star').on 'ajax:success', (e, data, status, xhr) ->
     $(@).toggleClass('on').find('.count').html(data.star_count)
   .on 'ajax:error', (e, xhr, status, error) ->
     new Flash('Star toggle failed. Try again later.', 'alert')
diff --git a/app/assets/stylesheets/behaviors.scss b/app/assets/stylesheets/behaviors.scss
index 034692a67e1..be4c4d07f1c 100644
--- a/app/assets/stylesheets/behaviors.scss
+++ b/app/assets/stylesheets/behaviors.scss
@@ -6,7 +6,7 @@
 .js-details-container.open .content.hide { display: none; }
 
 // Toggle between two states.
-.js-toggler-container .turn-on  { display: inline-block; }
+.js-toggler-container .turn-on  { display: block; }
 .js-toggler-container .turn-off { display: none; }
 .js-toggler-container.on .turn-on  { display: none; }
-.js-toggler-container.on .turn-off { display: inline-block; }
+.js-toggler-container.on .turn-off { display: block; }
diff --git a/app/assets/stylesheets/sections/projects.scss b/app/assets/stylesheets/sections/projects.scss
index eecc49620fd..6757cbd30f6 100644
--- a/app/assets/stylesheets/sections/projects.scss
+++ b/app/assets/stylesheets/sections/projects.scss
@@ -50,22 +50,6 @@
         margin-left: 10px;
         font-weight: 500;
       }
-
-      .star .btn {
-        font-weight: bold;
-        line-height: 22px;
-        padding: 0px;
-        $margin-x: 6px;
-        .toggle {
-          display: inline-block;
-          padding: 0px $margin-x;
-        }
-        .count {
-          border-left: $btn-border;
-          display: inline-block;
-          padding: 0px $margin-x;
-        }
-      }
     }
   }
 
@@ -206,28 +190,39 @@ ul.nav.nav-projects-tabs {
 .project-side {
   .btn-block {
     background-image: none;
-    .btn,
-    &.btn,
-    &.btn-group ul.dropdown-menu {
+
+    .btn, &.btn {
+      text-align: left;
+      padding: 10px 15px;
       background-color: #F1f1f1;
       border-color: #EEE;
+
       &:hover {
         background-color: #eee;
         border-color: #DDD;
       }
     }
-    &.btn-group-justified {
-        .btn {
-            width: 100%;
-        }
-        .dropdown-toggle {
-            width: 26px;
-        }
+
+    .count {
+      float: right;
+      font-weight: 500;
+      text-shadow: 0 1px #FFF;
     }
-    ul {
+
+    &.btn-group-justified {
+      .btn {
         width: 100%;
+      }
+      .dropdown-toggle {
+        width: 30px;
+        padding: 10px;
+      }
+      ul {
+        width: 100%;
+      }
     }
   }
+
   .project-fork-icon {
     float: left;
     font-size: 26px;
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 1304e2dea23..8350f5dc072 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -123,23 +123,35 @@ module ProjectsHelper
   end
 
   def link_to_toggle_star(title, starred, signed_in)
-    cls = 'btn'
+    cls = 'btn btn-block'
     cls += ' disabled' unless signed_in
+
+    toggle_html = content_tag('span', class: 'toggle') do
+      toggle_text = if starred
+                      'Unstar'
+                    else
+                      'Star'
+                    end
+
+      content_tag('i', ' ', class: 'icon-star') + toggle_text
+    end
+
+    count_html = content_tag('span', class: 'count') do
+      @project.star_count.to_s
+    end
+
+    link_opts = {
+      title: title,
+      class: cls,
+      method: :post,
+      remote: true,
+      data: {type: 'json'}
+    }
+
+
     content_tag 'span', class: starred ? 'turn-on' : 'turn-off' do
-      link_to toggle_star_project_path(@project),
-        title: title, class: cls, method: :post, remote: true,
-        data: {type: 'json'} do
-        content_tag('span', class: 'toggle') do
-          content_tag('i', ' ', class: 'icon-star') <<
-          if starred
-            'Unstar'
-          else
-            'Star'
-          end
-        end <<
-        content_tag('span', class: 'count') do
-          @project.star_count.to_s
-        end
+      link_to toggle_star_project_path(@project), link_opts do
+        toggle_html + count_html
       end
     end
   end
diff --git a/app/models/project.rb b/app/models/project.rb
index 10882ea97cc..73a2b42492e 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -579,4 +579,8 @@ class Project < ActiveRecord::Base
   def update_repository_size
     update_attribute(:repository_size, repository.size)
   end
+
+  def forks_count
+    ForkedProjectLink.where(forked_from_project_id: self.id).count
+  end
 end
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index bf9301d70c4..62348f26f0a 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -34,9 +34,3 @@
           = link_to pluralize(number_with_delimiter(@repository.branch_names.count), 'branch'), project_branches_path(@project)
           = link_to pluralize(number_with_delimiter(@repository.tag_names.count), 'tag'), project_tags_path(@project)
           %span.light.prepend-left-20= repository_size
-        %span.star.js-toggler-container{class: @show_star ? 'on' : ''}
-          - if current_user
-            = link_to_toggle_star('Star this project.', false, true)
-            = link_to_toggle_star('Unstar this project.', true, true)
-          - else
-            = link_to_toggle_star('You must sign in to star a project.', false, false)
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index c4e5087b0a1..0fd290b5398 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -15,24 +15,37 @@
             Archived project!
           %p Repository is read-only
 
-
       - if @project.forked_from_project
         .alert.alert-success
           %i.icon-code-fork.project-fork-icon
           Forked from:
           %br
           = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
-      - unless @project.empty_repo?
-        - if current_user && can?(current_user, :fork_project, @project) && @project.namespace != current_user.namespace
-          - if current_user.already_forked?(@project)
-            = link_to project_path(current_user.fork_of(@project)), class: 'btn btn-block' do
-              %i.icon-compass
-              Go to fork
+
+      .star-buttons
+        %span.star.js-toggler-container{class: @show_star ? 'on' : ''}
+          - if current_user
+            = link_to_toggle_star('Star this project.', false, true)
+            = link_to_toggle_star('Unstar this project.', true, true)
           - else
-            = link_to fork_project_path(@project), title: "Fork", class: "btn btn-block", method: "POST" do
-              %i.icon-code-fork
-              Fork repository
+            = link_to_toggle_star('You must sign in to star a project.', false, false)
 
+      - unless @project.empty_repo?
+        .fork-buttons
+          - if current_user && can?(current_user, :fork_project, @project) && @project.namespace != current_user.namespace
+            - if current_user.already_forked?(@project)
+              = link_to project_path(current_user.fork_of(@project)), class: 'btn btn-block' do
+                %i.icon-compass
+                Go to fork
+                %span.count
+                  = @project.forks_count
+            - else
+              = link_to fork_project_path(@project), title: "Fork", class: "btn btn-block", method: "POST" do
+                %i.icon-code-fork
+                Fork repository
+                %span.count
+                  = @project.forks_count
+      - unless @project.empty_repo?
         - if can? current_user, :download_code, @project
           = render 'projects/repositories/download_archive', btn_class: 'btn-block btn-group-justified', split_button: true
 
@@ -48,7 +61,8 @@
           - version = @repository.version
           = link_to project_blob_path(@project, tree_join(@repository.root_ref, version.name)), class: 'btn btn-block' do
             Version:
-            = @repository.blob_by_oid(version.id).data
+            %span.count
+              = @repository.blob_by_oid(version.id).data
 
     .prepend-top-10
       %p
diff --git a/features/project/star.feature b/features/project/star.feature
index d8d898155fe..3322f891805 100644
--- a/features/project/star.feature
+++ b/features/project/star.feature
@@ -2,12 +2,12 @@ Feature: Project Star
   Scenario: New projects have 0 stars
     Given public project "Community"
     When I visit project "Community" page
-    Then The project has 0 stars
+    Then The project has no stars
 
   Scenario: Empty projects show star count
     Given public empty project "Empty Public Project"
     When I visit empty project page
-    Then The project has 0 stars
+    Then The project has no stars
 
   Scenario: Signed off users can't star projects
     Given public project "Community"
diff --git a/features/steps/project/star.rb b/features/steps/project/star.rb
index 11102900ed4..562df04e340 100644
--- a/features/steps/project/star.rb
+++ b/features/steps/project/star.rb
@@ -4,6 +4,10 @@ class Spinach::Features::ProjectStar < Spinach::FeatureSteps
   include SharedPaths
   include SharedUser
 
+  step "The project has no stars" do
+    page.should_not have_content '.star-buttons'
+  end
+
   step "The project has 0 stars" do
     has_n_stars(0)
   end