Merge branch 'leave-project-btn' into 'master'

Move buttons to project header

Closes #25692    
Before:   
<img src="/uploads/fb65f1ca8021f1669071a3980e5f8258/Screen_Shot_2016-12-14_at_3.52.19_PM.png" width="800px">
After (with Koding setup):   
<img src="/uploads/236e0103186a1b482c4302aa3a4b94b1/Screen_Shot_2016-12-16_at_10.09.53_AM.png" width="800px">
After (without Koding setup):
<img src="/uploads/04bc8360831c98a4c86d3b11ee24826d/Screen_Shot_2016-12-16_at_10.18.35_AM.png" width="800px">


See merge request !8095

14 files changed, 53 insertions, 59 deletions

diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js
index 324b68a7efc..5d0d594073d 100644
--- a/app/assets/javascripts/notifications_dropdown.js
+++ b/app/assets/javascripts/notifications_dropdown.js
@@ -19,7 +19,7 @@
       });
       $(document).off('ajax:success', '.notification-form').on('ajax:success', '.notification-form', function(e, data) {
         if (data.saved) {
-          return $(e.currentTarget).closest('.notification-dropdown').replaceWith(data.html);
+          return $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
         } else {
           return new Flash('Failed to save new settings', 'alert');
         }
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index abfdd7a759d..7eb9962ba33 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -54,7 +54,7 @@
     }
 
     // Display Star and Fork buttons without counters on mobile.
-    .project-action-buttons {
+    .project-repo-buttons {
       display: block;
 
       .count-buttons .btn {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d0c27d64239..460c5d995be 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -24,6 +24,7 @@ $gray-lightest: #fdfdfd;
 $gray-light: #fafafa;
 $gray-lighter: #f9f9f9;
 $gray-normal: #f5f5f5;
+$gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index a9af7af59e2..16bff5f1e03 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -27,12 +27,6 @@
   }
 }
 
-.group-buttons {
-  .notification-dropdown {
-    display: inline-block;
-  }
-}
-
 .groups-header {
   @media (min-width: $screen-sm-min) {
     .nav-links {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 3b1b375133d..a443b6a37b3 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -145,8 +145,6 @@
 
 .project-repo-buttons,
 .group-buttons {
-  margin-top: 15px;
-
   .btn {
     @include btn-gray;
     padding: 3px 10px;
@@ -175,11 +173,9 @@
     }
   }
 
-  .download-button,
-  .dropdown-toggle,
-  .notification-dropdown,
-  .project-dropdown {
-    margin-left: 10px;
+  .project-action-button {
+    margin: 15px 5px 0;
+    vertical-align: top;
   }
 
   .notification-dropdown .dropdown-menu {
@@ -195,13 +191,15 @@
   .count-buttons {
     display: inline-block;
     vertical-align: top;
+    margin-top: 15px;
   }
 
   .project-clone-holder {
     display: inline-block;
+    margin: 15px 5px 0 0;
 
     input {
-      height: 29px;
+      height: 28px;
     }
   }
 
@@ -255,7 +253,7 @@
       line-height: 13px;
       padding: $gl-vert-padding $gl-padding;
       letter-spacing: .4px;
-      padding: 7px 14px;
+      padding: 6px 14px;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
@@ -492,6 +490,7 @@ a.deploy-project-label {
 
 .project-stats {
   font-size: 0;
+  text-align: center;
   border-bottom: 1px solid $border-color;
 
   .nav {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index c0341db7289..05c0a4c29f4 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -172,7 +172,7 @@
   position: relative;
   z-index: 2;
 
-  .download-button {
+  .project-action-button {
     margin-left: $btn-side-margin;
   }
 }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 5a04c3318cf..0d1f2b70018 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -18,11 +18,19 @@
           = link_to project_path(forked_from_project) do
             = forked_from_project.namespace.try(:name)
 
-    .project-repo-buttons.project-action-buttons
+    .project-repo-buttons
       .count-buttons
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
-      - if @project.feature_available?(:repository, current_user)
-        .project-clone-holder
-          = render "shared/clone_panel"
+      %span.hidden-xs
+        - if @project.feature_available?(:repository, current_user)
+          .project-clone-holder
+            = render "shared/clone_panel"
+
+        - if current_user && can?(current_user, :download_code, @project)
+          = render 'projects/buttons/download', project: @project, ref: @ref
+          = render 'projects/buttons/dropdown'
+          = render 'shared/notifications/button', notification_setting: @notification_setting
+          = render 'projects/buttons/koding'
+          = render 'shared/members/access_request_buttons', source: @project
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 40bfa01a45a..324a7f8cd3f 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,5 +1,5 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
-  .dropdown.inline.download-button
+  .project-action-button.dropdown.inline
     %button.btn{ 'data-toggle' => 'dropdown' }
       = icon('download')
       = icon("caret-down")
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index d3ccebbe290..f5659be25f0 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -1,5 +1,5 @@
 - if current_user
-  .dropdown.inline
+  .project-action-button.dropdown.inline
     %a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
       = icon('plus')
       = icon("caret-down")
diff --git a/app/views/projects/buttons/_koding.html.haml b/app/views/projects/buttons/_koding.html.haml
index fdc80d44253..5d9a776da89 100644
--- a/app/views/projects/buttons/_koding.html.haml
+++ b/app/views/projects/buttons/_koding.html.haml
@@ -1,7 +1,3 @@
-- if koding_enabled? && current_user && can_push_branch?(@project, @project.default_branch)
-  - if @repository.koding_yml
-    = link_to koding_project_url(@project), class: 'btn', target: '_blank' do
-      Run in IDE (Koding)
-  - else
-    = link_to add_koding_stack_path(@project), class: 'btn' do
-      Set Up Koding
+- if koding_enabled? && current_user && @repository.koding_yml && can_push_branch?(@project, @project.default_branch)
+  = link_to koding_project_url(@project), class: 'btn project-action-button inline', target: '_blank' do
+    Run in IDE (Koding)
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index c50093cf47c..8a214e1de58 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -64,20 +64,11 @@
         - unless @repository.gitlab_ci_yml
           %li.missing
             = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
-              Set Up CI
-
-      %li.project-repo-buttons.right
-        .project-right-buttons
-          - if current_user
-            = render 'shared/members/access_request_buttons', source: @project
-            = render "projects/buttons/koding"
-
-          .btn-group.project-repo-btn-group
-            = render 'projects/buttons/download', project: @project, ref: @ref
-            = render 'projects/buttons/dropdown'
+              Set up CI
+        - if koding_enabled? && @repository.koding_yml.blank?
+          %li.missing
+            = link_to 'Set up Koding', add_koding_stack_path(@project)
 
-          .pull-right
-            = render 'shared/notifications/button', notification_setting: @notification_setting
   - if @repository.commit
     .project-last-commit{ class: container_class }
       = render 'projects/last_commit', commit: @repository.commit, ref: current_ref, project: @project
diff --git a/app/views/shared/members/_access_request_buttons.html.haml b/app/views/shared/members/_access_request_buttons.html.haml
index e166dfab710..fb795ad1c72 100644
--- a/app/views/shared/members/_access_request_buttons.html.haml
+++ b/app/views/shared/members/_access_request_buttons.html.haml
@@ -1,16 +1,17 @@
 - model_name = source.model_name.to_s.downcase
 
-- if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id))
-  = link_to "Leave #{model_name}", polymorphic_path([:leave, source, :members]),
-            method: :delete,
-            data: { confirm: leave_confirmation_message(source) },
-            class: 'btn'
-- elsif requester = source.requesters.find_by(user_id: current_user.id)
-  = link_to 'Withdraw Access Request', polymorphic_path([:leave, source, :members]),
-            method: :delete,
-            data: { confirm: remove_member_message(requester) },
-            class: 'btn'
-- elsif source.request_access_enabled && can?(current_user, :request_access, source)
-  = link_to 'Request Access', polymorphic_path([:request_access, source, :members]),
-            method: :post,
-            class: 'btn'
+.project-action-button.inline
+  - if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id))
+    = link_to "Leave #{model_name}", polymorphic_path([:leave, source, :members]),
+              method: :delete,
+              data: { confirm: leave_confirmation_message(source) },
+              class: 'btn'
+  - elsif requester = source.requesters.find_by(user_id: current_user.id)
+    = link_to 'Withdraw Access Request', polymorphic_path([:leave, source, :members]),
+              method: :delete,
+              data: { confirm: remove_member_message(requester) },
+              class: 'btn'
+  - elsif source.request_access_enabled && can?(current_user, :request_access, source)
+    = link_to 'Request Access', polymorphic_path([:request_access, source, :members]),
+              method: :post,
+              class: 'btn'
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index fbad0d05de3..1d072c16b32 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -1,5 +1,5 @@
 - if notification_setting
-  .dropdown.notification-dropdown
+  .js-notification-dropdown.notification-dropdown.project-action-button.dropdown.inline
     = form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f|
       = hidden_setting_source_input(notification_setting)
       = f.hidden_field :level, class: "notification_setting_level"
diff --git a/changelogs/unreleased/leave-project-btn.yml b/changelogs/unreleased/leave-project-btn.yml
new file mode 100644
index 00000000000..2aa553d7b97
--- /dev/null
+++ b/changelogs/unreleased/leave-project-btn.yml
@@ -0,0 +1,4 @@
+---
+title: Move all action buttons to project header
+merge_request:
+author: