Merge branch '20892-commit-info' into 'master'

Resolve "Clean up commit meta info view"

Updates commit page design   
Before:   
![Screen_Shot_2016-10-19_at_10.20.10_AM](/uploads/8737a9db01bffc019d8b2c71a943024b/Screen_Shot_2016-10-19_at_10.20.10_AM.png)
After:   
![Screen_Shot_2016-10-19_at_10.20.01_AM](/uploads/716cb902bd20dedc705a8f81f6536736/Screen_Shot_2016-10-19_at_10.20.01_AM.png)
![Screen_Shot_2016-10-19_at_10.27.01_AM](/uploads/4228575f50990a88bc828037d8fb99f2/Screen_Shot_2016-10-19_at_10.27.01_AM.png)
Closes #20892

See merge request !6994

12 files changed, 156 insertions, 62 deletions

diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
index 48490869364..a64cefb62bd 100644
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ b/app/assets/javascripts/behaviors/details_behavior.js
@@ -15,6 +15,11 @@
     return $("body").on("click", ".js-details-expand", function(e) {
       $(this).next('.js-details-content').removeClass("hide");
       $(this).hide();
+
+      var truncatedItem = $(this).siblings('.js-details-short');
+      if (truncatedItem.length) {
+        truncatedItem.addClass("hide");
+      }
       return e.preventDefault();
     });
   });
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b271f8cf332..be2a7ceefff 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0;
 $background-color: $gray-light;
 $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
+$widget-expand-item: #e8f2f7;
+$widget-inner-border: #eef0f2;
 
 /*
  * Text
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 8ecac08137b..8ecf7fcb96d 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -33,10 +33,8 @@
 
   &.commit-info-row-header {
     line-height: 34px;
-
-    @media (min-width: $screen-sm-min) {
-      margin-bottom: 0;
-    }
+    padding: 10px 0;
+    margin-bottom: 0;
 
     .commit-options-dropdown-caret {
       @media (max-width: $screen-sm) {
@@ -80,6 +78,58 @@
   }
 }
 
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.commit-info-widget {
+  background: $background-color;
+  color: $gl-gray;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .widget-row {
+    padding: $gl-padding;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $widget-inner-border;
+    }
+
+    &.branch-info {
+      .monospace,
+      .commit-info {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .icon-container {
+    display: inline-block;
+    margin-right: 8px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.commit-icon {
+      svg {
+        path {
+          fill: $gl-text-color;
+        }
+      }
+    }
+  }
+
+  .label.label-gray {
+    background-color: $widget-expand-item;
+  }
+}
+
 .ci-status-link {
   svg {
     overflow: visible;
@@ -88,6 +138,7 @@
 
 .commit-box {
   border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
 
   .commit-title {
     margin: 0;
@@ -138,6 +189,9 @@
 }
 
 .commit-action-buttons {
+  position: relative;
+  top: -1px;
+
   i {
     color: $gl-icon-color;
     font-size: 13px;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index ad315cfae62..52d6a39bd59 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -33,21 +33,22 @@
     color: $gl-dark-link-color;
   }
 
-  .text-expander {
-    display: inline-block;
-    background: $gray-light;
-    color: $gl-placeholder-color;
-    padding: 0 5px;
-    cursor: pointer;
-    border: 1px solid $border-gray-dark;
-    border-radius: $border-radius-default;
-    margin-left: 5px;
-    line-height: 1;
-
-    &:hover {
-      background-color: darken($gray-light, 10%);
-      text-decoration: none;
-    }
+}
+
+.text-expander {
+  display: inline-block;
+  background: $gray-light;
+  color: $gl-placeholder-color;
+  padding: 0 5px;
+  cursor: pointer;
+  border: 1px solid $border-gray-dark;
+  border-radius: $border-radius-default;
+  margin-left: 5px;
+  line-height: 1;
+
+  &:hover {
+    background-color: darken($gray-light, 10%);
+    text-decoration: none;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 3d2b024fe5c..a2f5c6c6bd3 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -54,7 +54,6 @@
       margin: 0 0 10px;
     }
 
-
     .login-footer {
       margin-top: 10px;
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f510e3d3cdf..f8e31a624ec 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -60,7 +60,7 @@
   }
 
   .ci_widget {
-    border-bottom: 1px solid #eef0f2;
+    border-bottom: 1px solid $widget-inner-border;
 
     svg {
       margin-right: 4px;
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 6c82a4e5600..d8c95376b94 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,8 +1,23 @@
 .commit-info-row.commit-info-row-header
-  %span.hidden-xs Authored by
+  %span.hidden-xs.hidden-sm Commit
+  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace js-details-short"
+  = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
+    %span.text-expander
+      \...
+  %span.js-details-content.hide
+    = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
+  = clipboard_button(clipboard_text: @commit.id)
+  %span.hidden-xs authored
+  #{time_ago_with_tooltip(@commit.authored_date)}
+  %span by
+  = author_avatar(@commit, size: 24)
   %strong
     = commit_author_link(@commit, avatar: true, size: 24)
-  #{time_ago_with_tooltip(@commit.authored_date)}
+  - if @commit.different_committer?
+    %span.light Committed by
+    %strong
+      = commit_committer_link(@commit, avatar: true, size: 24)
+    #{time_ago_with_tooltip(@commit.committed_date)}
 
   .pull-right.commit-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
@@ -33,42 +48,35 @@
           %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)
 
-- if @commit.different_committer?
-  .commit-info-row
-    %span.light Committed by
-    %strong
-      = commit_committer_link(@commit, avatar: true, size: 24)
-    #{time_ago_with_tooltip(@commit.committed_date)}
-
-.commit-info-row
-  %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|
-    = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
-
-  %span.commit-info.branches
-    %i.fa.fa-spinner.fa-spin
-
-- if @commit.status
-  .commit-info-row
-    Builds for
-    = pluralize(@commit.pipelines.count, 'pipeline')
-    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do
-      = ci_icon_for_status(@commit.status)
-      %span.ci-status-label
-        = ci_label_for_status(@commit.status)
-    in
-    = time_interval_in_words @commit.pipelines.total_duration
-
-.commit-box.content-block
+.commit-box
   %h3.commit-title
     = markdown(@commit.title, pipeline: :single_line, author: @commit.author)
   - if @commit.description.present?
     %pre.commit-description
       = preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author))
 
+.commit-info-widget
+  .widget-row.branch-info
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
+    %span.cgray= pluralize(@commit.parents.count, "parent")
+    - @commit.parents.each do |parent|
+      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
+    %span.commit-info.branches
+      %i.fa.fa-spinner.fa-spin
+
+  - if @commit.status
+    .widget-row.pipeline-info
+      .icon-container
+        = ci_icon_for_status(@commit.status)
+      Pipeline
+      = link_to "##{@commit.pipelines.last.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace"
+      for
+      = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
+      %span.ci-status-label
+        = ci_label_for_status(@commit.status)
+      in
+      = time_interval_in_words @commit.pipelines.total_duration
+
 :javascript
   $(".commit-info.branches").load("#{branches_namespace_project_commit_path(@project.namespace, @project, @commit.id)}");
diff --git a/app/views/projects/commit/builds.html.haml b/app/views/projects/commit/builds.html.haml
index f9d7eac3542..077b2d2725b 100644
--- a/app/views/projects/commit/builds.html.haml
+++ b/app/views/projects/commit/builds.html.haml
@@ -3,8 +3,7 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .prepend-top-default
-    = render "commit_box"
+  = render "commit_box"
 
   = render "ci_menu"
   = render "builds"
diff --git a/app/views/projects/commit/pipelines.html.haml b/app/views/projects/commit/pipelines.html.haml
index d85d6729a81..8233e26e4e7 100644
--- a/app/views/projects/commit/pipelines.html.haml
+++ b/app/views/projects/commit/pipelines.html.haml
@@ -1,7 +1,6 @@
 - page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits"
 
-.prepend-top-default
-  = render "commit_box"
+= render "commit_box"
 
 = render "ci_menu"
 = render "pipelines_list", pipelines: @ci_pipelines
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index cebf58d63df..b8c64d1f13e 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -4,8 +4,7 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .prepend-top-default
-    = render "commit_box"
+  = render "commit_box"
   - if @commit.status
     = render "ci_menu"
   - else
diff --git a/features/steps/project/commits/commits.rb b/features/steps/project/commits/commits.rb
index 244306e8464..007dfb67a77 100644
--- a/features/steps/project/commits/commits.rb
+++ b/features/steps/project/commits/commits.rb
@@ -163,7 +163,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
   end
 
   step 'I see commit ci info' do
-    expect(page).to have_content "Builds for 1 pipeline pending"
+    expect(page).to have_content "Pipeline #1 for 570e7b2a pending"
   end
 
   step 'I click status link' do
@@ -171,7 +171,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
   end
 
   step 'I see builds list' do
-    expect(page).to have_content "Builds for 1 pipeline pending"
+    expect(page).to have_content "Pipeline #1 for 570e7b2a pending"
     expect(page).to have_content "1 build"
   end
 
diff --git a/spec/views/projects/commit/_commit_box.html.haml_spec.rb b/spec/views/projects/commit/_commit_box.html.haml_spec.rb
new file mode 100644
index 00000000000..16bf0698c4b
--- /dev/null
+++ b/spec/views/projects/commit/_commit_box.html.haml_spec.rb
@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+describe 'projects/commit/_commit_box.html.haml' do
+  include Devise::Test::ControllerHelpers
+
+  let(:project) { create(:project) }
+
+  before do
+    assign(:project, project)
+    assign(:commit, project.commit)
+  end
+
+  it 'shows the commit SHA' do
+    render
+
+    expect(rendered).to have_text("Commit #{Commit.truncate_sha(project.commit.sha)}")
+  end
+
+  it 'shows the last pipeline that ran for the commit' do
+    create(:ci_pipeline, project: project, sha: project.commit.id, status: 'success')
+    create(:ci_pipeline, project: project, sha: project.commit.id, status: 'canceled')
+    third_pipeline = create(:ci_pipeline, project: project, sha: project.commit.id, status: 'failed')
+
+    render
+
+    expect(rendered).to have_text("Pipeline ##{third_pipeline.id} for #{Commit.truncate_sha(project.commit.sha)} failed")
+  end
+end