adds dropdown for cloning

app/assets/stylesheets/pages/projects.scss

@@ -91,10 +91,9 @@
     }
   }
 
-  .input-group {
+  .git-clone-holder {
     display: inline-table;
     position: relative;
-    top: 17px;
   }
 
   .project-repo-buttons {
@@ -103,6 +102,7 @@
 
     .count-buttons {
       display: block;
+      margin-bottom: 12px;
     }
 
     .btn {
@@ -187,6 +187,13 @@
     margin-right: 45px;
   }
 
+  .clone-options {
+    display: table-cell;
+    a.btn {
+      width: 100%;
+    }
+  }
+
   .form-control {
     cursor: auto;
     @extend .monospace;

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')
     - if current_user.starred?(@project)
+      = icon('star fw')
       %span.starred Unstar
     - else
+      = icon('star-o fw')
       %span Star
   %div.count-with-arrow
     %span.arrow
@@ -14,16 +15,26 @@
     $('.project-home-panel .toggle-star').on('ajax:success', function (e, data, status, xhr) {
       var $this = $(this);
       var $starSpan = $this.find('span');
+      var $starIcon = $this.find('i');
       $this
         .parent()
         .find('span.count')
         .text(data.star_count);
       if($starSpan.hasClass('starred')){
-        $starSpan.removeClass('starred');
-        $starSpan.text('Star');
+        $starSpan
+          .removeClass('starred')
+          .text('Star');
+        $starIcon
+          .removeClass('fa-star')
+          .addClass('fa-star-o');
+
       } else {
-        $starSpan.addClass('starred');
-        $starSpan.text('Unstar');
+        $starSpan
+          .addClass('starred')
+          .text('Unstar');
+        $starIcon
+          .removeClass('fa-star-o')
+          .addClass('fa-star');
       }
     })
     .on('ajax:error', function (e, xhr, status, error) {

app/views/shared/_clone_panel.html.haml

 - project = project || @project
-.git-clone-holder.input-group
-  .input-group-addon.git-protocols
+
+.git-clone-holder
+    .btn-group.clone-options
+        %a.clone-dropdown-btn.btn{href: '#', 'data-toggle' => 'dropdown'}
+            %span SSH
+            = icon('angle-down')
+        %ul.dropdown-menu.dropdown-menu-right.clone-options-dropdown
+            %li
+                %a{href: '#'}
+                    SSH
+            %li
+                %a{href: '#'}
+                    HTTPS
+
+    = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
     .input-group-btn
-      = ssh_clone_button(project)
-    .input-group-btn
-      = http_clone_button(project)
-  = 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')
+        = 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());
+        console.log("got it",$(this).text());
+    });