Merge branch 'commit-header-buttons' into 'master'

Reduced number of buttons in commit header

## What does this MR do?

Reduces the buttons in the commit header.

## What are the relevant issue numbers?

Closes #17576

## Screenshots

![Screen_Shot_2016-05-26_at_11.22.24](/uploads/b0d8535bbc02ae367f193dd6633bd022/Screen_Shot_2016-05-26_at_11.22.24.png)

See merge request !4302

4 files changed, 63 insertions, 38 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 79a37d87e82..93c63c69843 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -154,7 +154,7 @@
     color: $dropdown-header-color;
     font-size: 13px;
     line-height: 22px;
-    padding: 0 10px 10px;
+    padding: 0 10px;
   }
 
   .separator + .dropdown-header {
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index c2cd227571f..fc3f214aba5 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -26,8 +26,28 @@
 
 .commit-info-row {
   margin-bottom: 10px;
+
+  &.commit-info-row-header {
+    line-height: 34px;
+
+    @media (min-width: $screen-sm-min) {
+      margin-bottom: 0;
+    }
+
+    .commit-options-dropdown-caret {
+      @media (max-width: $screen-sm) {
+        margin-left: 0;
+      }
+    }
+  }
+
   .avatar {
     @extend .avatar-inline;
+    margin-left: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-left: 4px;
+    }
   }
   .commit-committer-link,
   .commit-author-link {
@@ -35,10 +55,6 @@
     font-weight: bold;
   }
 
-  .time_ago {
-    margin-left: 8px;
-  }
-
   .fa-clipboard {
     color: $dropdown-title-btn-color;
   }
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index b59c3982edd..d328f56c80c 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -123,13 +123,14 @@ module CommitsHelper
     )
   end
 
-  def revert_commit_link(commit, continue_to_path, btn_class: nil)
+  def revert_commit_link(commit, continue_to_path, btn_class: nil, has_tooltip: true)
     return unless current_user
 
-    tooltip = "Revert this #{commit.change_type_title} in a new merge request"
+    tooltip = "Revert this #{commit.change_type_title} in a new merge request" if has_tooltip
 
     if can_collaborate_with_project?
-      link_to 'Revert', '#modal-revert-commit', 'data-toggle' => 'modal', 'data-container' => 'body', title: tooltip, class: "btn btn-default btn-grouped btn-#{btn_class} has-tooltip"
+      btn_class = "btn btn-grouped btn-close btn-#{btn_class}" unless btn_class.nil?
+      link_to 'Revert', '#modal-revert-commit', 'data-toggle' => 'modal', 'data-container' => 'body', title: (tooltip if has_tooltip), class: "#{btn_class} #{'has-tooltip' if has_tooltip}"
     elsif can?(current_user, :fork_project, @project)
       continue_params = {
         to: continue_to_path,
@@ -140,17 +141,20 @@ module CommitsHelper
         namespace_key: current_user.namespace.id,
         continue: continue_params)
 
-      link_to 'Revert', fork_path, class: 'btn btn-grouped btn-close', method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: tooltip
+      btn_class = "btn btn-grouped btn-close" unless btn_class.nil?
+
+      link_to 'Revert', fork_path, class: btn_class, method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
     end
   end
 
-  def cherry_pick_commit_link(commit, continue_to_path, btn_class: nil)
+  def cherry_pick_commit_link(commit, continue_to_path, btn_class: nil, has_tooltip: true)
     return unless current_user
 
     tooltip = "Cherry-pick this #{commit.change_type_title} in a new merge request"
 
     if can_collaborate_with_project?
-      link_to 'Cherry-pick', '#modal-cherry-pick-commit', 'data-toggle' => 'modal', 'data-container' => 'body', title: tooltip, class: "btn btn-default btn-grouped btn-#{btn_class} has-tooltip"
+      btn_class = "btn btn-default btn-grouped btn-#{btn_class}" unless btn_class.nil?
+      link_to 'Cherry-pick', '#modal-cherry-pick-commit', 'data-toggle' => 'modal', 'data-container' => 'body', title: (tooltip if has_tooltip), class: "#{btn_class} #{'has-tooltip' if has_tooltip}"
     elsif can?(current_user, :fork_project, @project)
       continue_params = {
         to: continue_to_path,
@@ -161,7 +165,8 @@ module CommitsHelper
         namespace_key: current_user.namespace.id,
         continue: continue_params)
 
-      link_to 'Cherry-pick', fork_path, class: 'btn btn-grouped btn-close', method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: tooltip
+      btn_class = "btn btn-grouped btn-close" unless btn_class.nil?
+      link_to 'Cherry-pick', fork_path, class: "#{btn_class}", method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
     end
   end
 
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 028564c9305..429bf041248 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,32 +1,35 @@
-.pull-right.commit-action-buttons
-  %div
+.commit-info-row.commit-info-row-header
+  %span.hidden-xs Authored by
+  %strong
+    = commit_author_link(@commit, avatar: true, size: 24)
+  #{time_ago_with_tooltip(@commit.authored_date)}
+
+  .pull-right.commit-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.btn-grouped
-        %i.fa.fa-comment
+      %span.btn.disabled.btn-grouped.hidden-xs
+        = icon('comment')
         = @notes_count
-    .pull-left.btn-group
-      %a.btn.btn-grouped.dropdown-toggle{ data: {toggle: :dropdown} }
-        %i.fa.fa-download
-        Download as
-        %span.caret
-      %ul.dropdown-menu
+    = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-grouped hidden-xs hidden-sm" do
+      Browse Files
+    .dropdown.inline
+      %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
+        %span.hidden-xs Options
+        %span.caret.commit-options-dropdown-caret
+      %ul.dropdown-menu.dropdown-menu-align-right
+        %li.visible-xs-block.visible-sm-block
+          = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do
+            Browse Files
+        - unless @commit.has_been_reverted?(current_user)
+          %li.clearfix
+            = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
+        %li.clearfix
+          = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
+        %li.divider
+        %li.dropdown-header
+          Download
         - unless @commit.parents.length > 1
           %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
         %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
-    = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-grouped" do
-      = icon('files-o')
-      Browse Files
-    - unless @commit.has_been_reverted?(current_user)
-      = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id))
-    = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id))
-  %div
-
-%p
-.commit-info-row
-  %span.light Authored by
-  %strong
-    = commit_author_link(@commit, avatar: true, size: 24)
-  #{time_ago_with_tooltip(@commit.authored_date)}
 
 - if @commit.different_committer?
   .commit-info-row
@@ -36,8 +39,9 @@
     #{time_ago_with_tooltip(@commit.committed_date)}
 
 .commit-info-row
-  %span.light Commit
-  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
+  %span.hidden-xs.hidden-sm Commit
+  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
+  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace visible-xs-inline visible-sm-inline"
   = clipboard_button(clipboard_text: @commit.id)
   %span.cgray= pluralize(@commit.parents.count, "parent")
   - @commit.parents.each do |parent|