Merge branch 'new-project-header-redesign' into 'master'

Dropdowns for clone. Star and Fork with new count areas. Star and Unstarred Works now

Fixes #2876 and #3482
Used existing styles. <br/>
Did not attempt to make pixel perfect as styles already exist. <br/>

![Screen_Shot_2015-12-18_at_5.24.56_PM](/uploads/a79ba1e0be0232f2aeef8a43f3253479/Screen_Shot_2015-12-18_at_5.24.56_PM.png)

See merge request !2156

app/assets/javascripts/project.js.coffee

 class @Project
   constructor: ->
     # Git protocol switcher
-    $('.js-protocol-switch').click ->
+    $('ul.clone-options-dropdown a').click ->
       return if $(@).hasClass('active')
 
 
@@ -10,7 +10,8 @@ class @Project
       # Add the active class for the clicked button
       $(@).toggleClass('active')
 
-      url = $(@).data('clone')
+      url = $("#project_clone").val()
+      console.log("url",url)
 
       # Update the input field
       $('#project_clone').val(url)

app/assets/javascripts/star.js.coffee

+class @Star
+  constructor: ->
+    $('.project-home-panel .toggle-star').on('ajax:success', (e, data, status, xhr) ->
+      $this = $(this)
+      $starSpan = $this.find('span')
+      $starIcon = $this.find('i')
+
+      toggleStar = (isStarred) ->
+        $this.parent().find('span.count').text data.star_count
+        if isStarred
+          $starSpan.removeClass('starred').text 'Star'
+          $starIcon.removeClass('fa-star').addClass 'fa-star-o'
+        else
+          $starSpan.addClass('starred').text 'Unstar'
+          $starIcon.removeClass('fa-star-o').addClass 'fa-star'
+        return
+
+      toggleStar $starSpan.hasClass('starred')
+      return
+    ).on 'ajax:error', (e, xhr, status, error) ->
+      new Flash('Star toggle failed. Try again later.', 'alert')
+      return
\ No newline at end of file

app/assets/stylesheets/pages/projects.scss

@@ -91,21 +91,83 @@
     }
   }
 
-  .input-group {
+  .git-clone-holder {
     display: inline-table;
     position: relative;
-    top: 17px;
   }
 
   .project-repo-buttons {
     margin-top: 12px;
     margin-bottom: 0px;
 
+    .count-buttons {
+      display: block;
+      margin-bottom: 12px;
+    }
+
     .btn {
       @include btn-gray;
-
+      text-transform: none;
+    }
+    .count-with-arrow {
+      display: inline-block;
+      position: relative;
+      margin-left: 4px;
+
+      .arrow {
+        &:before {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-color: transparent;
+          border-style: solid;
+          top: 50%;
+          left: 0;
+          margin-top: -6px;
+          border-width: 7px 5px 7px 0;
+          border-right-color: #dce0e5;
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-color: transparent;
+          border-style: solid;
+          top: 50%;
+          left: 1px;
+          margin-top: -9px;
+          border-width: 10px 7px 10px 0;
+          border-right-color: #FFF;
+        }
+      }
       .count {
+        @include btn-gray;
         display: inline-block;
+        background: white;
+        border-radius: 2px;
+        border-width: 1px;
+        border-style: solid;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 20px;
+        padding: 11px 16px;
+        letter-spacing: .4px;
+        padding: 10px;
+        text-align: center;
+        vertical-align: middle;
+        touch-action: manipulation;
+        cursor: pointer;
+        background-image: none;
+        white-space: nowrap;
+        margin: 0 11px 0px 4px;
+
+        &:hover {
+          background: #FFF;
+        }
       }
     }
   }
@@ -125,6 +187,13 @@
     margin-right: 45px;
   }
 
+  .clone-options {
+    display: table-cell;
+    a.btn {
+      width: 100%;
+    }
+  }
+
   .form-control {
     cursor: auto;
     @extend .monospace;

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
 

app/views/projects/_home_panel.html.haml

@@ -27,7 +27,7 @@
         = icon('rss')
 
   .project-repo-buttons
-    .split-one
+    .split-one.count-buttons
       = render 'projects/buttons/star'
       = render 'projects/buttons/fork'
 
@@ -38,3 +38,6 @@
       = render 'projects/buttons/dropdown'
 
     = render 'projects/buttons/notifications'
+
+:coffeescript
+  new Star()
\ No newline at end of file

app/views/projects/buttons/_fork.html.haml

@@ -4,10 +4,15 @@
       = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn has_tooltip' do
         = icon('code-fork fw')
         Fork
+      %div.count-with-arrow
+        %span.arrow
         %span.count
           = @project.forks_count
     - else
       = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn has_tooltip' do
         = icon('code-fork fw')
+        Fork
+      %div.count-with-arrow
+        %span.arrow
         %span.count
           = @project.forks_count

app/views/projects/buttons/_star.html.haml

 - 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')
-    %span.count
+    - if current_user.starred?(@project)
+      = icon('star fw')
+      %span.starred Unstar
+    - else
+      = icon('star-o fw')
+      %span Star
+  %div.count-with-arrow
+    %span.arrow
+    %span.count.star-count
       = @project.star_count
 
-  :javascript
-    $('.project-home-panel .toggle-star').on('ajax:success', function (e, data, status, xhr) {
-      $(this).replaceWith(data.html);
-    })
-    .on('ajax:error', function (e, xhr, status, error) {
-      new Flash('Star toggle failed. Try again later.', 'alert');
-    });
-
 - else
   = link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do
     = icon('star fw')
+    Star
+  %div.count-with-arrow
+    %span.arrow
     %span.count
       = @project.star_count

app/views/shared/_clone_panel.html.haml

 - project = project || @project
-.git-clone-holder.input-group
-  .input-group-addon.git-protocols
-    .input-group-btn
-      = ssh_clone_button(project)
-    .input-group-btn
-      = http_clone_button(project)
+
+.git-clone-holder
+  .btn-group.clone-options
+    %a#clone-dropdown.clone-dropdown-btn.btn{href: '#', 'data-toggle' => 'dropdown'}
+      %span
+        = default_clone_protocol.upcase
+      = icon('angle-down')
+    %ul.dropdown-menu.dropdown-menu-right.clone-options-dropdown
+      %li
+        %a#ssh-selector{href: @project.ssh_url_to_repo}
+          SSH
+      %li
+        %a#http-selector{href: @project.http_url_to_repo}
+          HTTPS
+
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
   .input-group-btn
     = clipboard_button(clipboard_target: '#project_clone')
+
+:javascript
+  $('ul.clone-options-dropdown a').on('click',function(e){
+    e.preventDefault();
+    var $this = $(this);
+    $('a.clone-dropdown-btn span').text($this.text());
+    $('#project_clone').val($this.attr('href'));
+  });

features/project/create.feature

+@project-create
 Feature: Project Create
   In order to get access to project sections
   A user with ability to create a project

features/project/star.feature

+@project-stars
 Feature: Project Star
   Scenario: New projects have 0 stars
     Given public project "Community"

features/steps/project/create.rb

@@ -26,7 +26,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps
   end
 
   step 'I click on HTTP' do
-    click_button 'HTTP'
+    find('#clone-dropdown').click
+    find('#http-selector').click
   end
 
   step 'Remote url should update to http link' do
@@ -34,7 +35,8 @@ class Spinach::Features::ProjectCreate < Spinach::FeatureSteps
   end
 
   step 'If I click on SSH' do
-    click_button 'SSH'
+    find('#clone-dropdown').click
+    find('#ssh-selector').click
   end
 
   step 'Remote url should update to ssh link' do

features/steps/project/star.rb

@@ -32,6 +32,6 @@ class Spinach::Features::ProjectStar < Spinach::FeatureSteps
   protected
 
   def has_n_stars(n)
-    expect(page).to have_css(".star-btn .count", text: n, visible: true)
+    expect(page).to have_css(".star-count", text: n, visible: true)
   end
 end