Updated commits UI

Closes #14633

app/assets/stylesheets/pages/commits.scss

@@ -7,72 +7,82 @@
   margin-right: 9px;
 }
 
-.lists-separator {
-  margin: 10px 0;
-  border-color: #ddd;
-}
+.commit-header {
+  padding: 5px 10px;
+  background-color: $background-color;
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  font-size: 14px;
 
-.commits-row {
-  ul {
-    margin: 0;
-
-    li.commit {
-      padding: 8px 0;
-    }
-  }
-
-  .commits-row-date {
-    font-size: 15px;
-    line-height: 20px;
-    margin-bottom: 5px;
+  &:first-child {
+    border-top-width: 0;
   }
 }
 
-li.commit {
-  list-style: none;
+.commit-row-title {
+  line-height: 20px;
+  margin-bottom: 2px;
 
-  .commit-row-title {
-    font-size: $list-font-size;
-    line-height: 20px;
-    margin-bottom: 2px;
+  .notes_count {
+    float: right;
+    margin-right: 10px;
+  }
 
-    .btn-clipboard {
-      margin-top: -1px;
+  .str-truncated {
+    max-width: 70%;
+  }
+
+  .commit-row-message {
+    color: $gl-dark-link-color;
+
+    &:hover {
+      text-decoration: underline;
     }
+  }
 
-    .notes_count {
-      float: right;
-      margin-right: 10px;
+  .text-expander {
+    background: #eee;
+    color: #555;
+    padding: 0 5px;
+    cursor: pointer;
+    margin-left: 4px;
+    &:hover {
+      background-color: #ddd;
     }
+  }
+}
 
-    .commit_short_id {
-      min-width: 65px;
-      color: $gl-dark-link-color;
-      font-family: $monospace_font;
+.commit-actions {
+  @media (min-width: $screen-md-min) {
+    float: right;
+  }
+}
+
+.commit-short-id {
+  font-family: $monospace_font;
+  font-weight: 600;
+}
+
+.commit {
+  padding: 10px 0 10px 55px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #eee;
+  }
+
+  a {
+    color: $gl-dark-link-color;
+  }
+
+  .commit-link {
+    &:hover {
+      color: $gl-link-color;
+      text-decoration: none;
     }
+  }
 
-    .str-truncated {
-      max-width: 70%;
-    }
-
-    .commit-row-message {
-      color: $gl-dark-link-color;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    .text-expander {
-      background: #eee;
-      color: #555;
-      padding: 0 5px;
-      cursor: pointer;
-      margin-left: 4px;
-      &:hover {
-        background-color: #ddd;
-      }
-    }
+  .avatar {
+    margin-left: -55px;
   }
 
   .item-title {
@@ -84,7 +94,7 @@ li.commit {
     font-size: 14px;
     border-left: 1px solid #eee;
     padding: 10px 15px;
-    margin: 5px 0 10px 5px;
+    margin: 10px 0 10px 0;
     background: #f9f9f9;
     display: none;
 
@@ -111,10 +121,6 @@ li.commit {
     .avatar {
       margin-right: 8px;
     }
-
-    .committed_ago {
-      display: inline-block;
-    }
   }
 
   &.inline-commit {

app/helpers/ci_status_helper.rb

@@ -38,10 +38,10 @@ module CiStatusHelper
     icon(icon_name + ' fw')
   end
 
-  def render_commit_status(commit, tooltip_placement: 'auto left')
+  def render_commit_status(commit, tooltip_placement: 'auto left', cssclass: '')
     project = commit.project
     path = builds_namespace_project_commit_path(project.namespace, project, commit)
-    render_status_with_link('commit', commit.status, path, tooltip_placement)
+    render_status_with_link('commit', commit.status, path, tooltip_placement, cssclass: cssclass)
   end
 
   def render_pipeline_status(pipeline, tooltip_placement: 'auto left')
@@ -57,10 +57,10 @@ module CiStatusHelper
 
   private
 
-  def render_status_with_link(type, status, path, tooltip_placement)
+  def render_status_with_link(type, status, path, tooltip_placement, cssclass: '')
     link_to ci_icon_for_status(status),
             path,
-            class: "ci-status-link ci-status-icon-#{status.dasherize}",
+            class: "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}",
             title: "#{type.titleize}: #{ci_label_for_status(status)}",
             data: { toggle: 'tooltip', placement: tooltip_placement }
   end

app/helpers/commits_helper.rb

@@ -16,6 +16,19 @@ module CommitsHelper
     commit_person_link(commit, options.merge(source: :committer))
   end
 
+  def commit_author_avatar(commit, options = {})
+    options = options.merge(source: :author)
+    user = commit.send(options[:source])
+
+    source_name = clean(commit.send "#{options[:source]}_name".to_sym)
+    source_email = clean(commit.send "#{options[:source]}_email".to_sym)
+
+    person_name = user.try(:name) || source_name
+    person_email = user.try(:email) || source_email
+
+    image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "")
+  end
+
   def image_diff_class(diff)
     if diff.deleted_file
       "deleted"
@@ -102,24 +115,24 @@ module CommitsHelper
     if current_controller?(:projects, :commits)
       if @repo.blob_at(commit.id, @path)
         return link_to(
-          "Browse File »",
+          "Browse File",
           namespace_project_blob_path(project.namespace, project,
                                       tree_join(commit.id, @path)),
-          class: "pull-right"
+          class: "btn btn-default"
         )
       elsif @path.present?
         return link_to(
-          "Browse Directory »",
+          "Browse Directory",
           namespace_project_tree_path(project.namespace, project,
                                       tree_join(commit.id, @path)),
-          class: "pull-right"
+          class: "btn btn-default"
         )
       end
     end
     link_to(
       "Browse Files",
       namespace_project_tree_path(project.namespace, project, commit),
-      class: "pull-right"
+      class: "btn btn-default"
     )
   end
 
@@ -191,8 +204,7 @@ module CommitsHelper
 
     text =
       if options[:avatar]
-        avatar = image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "")
-        %Q{#{avatar} <span class="commit-#{options[:source]}-name">#{person_name}</span>}
+        %Q{<span class="commit-#{options[:source]}-name">#{person_name}</span>}
       else
         person_name
       end

app/views/projects/commits/_commit.html.haml

@@ -9,26 +9,25 @@
 
 = cache(cache_key) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
+    = commit_author_avatar(commit)
     .commit-row-title
       %span.item-title
-        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
+        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message commit-link"
         - if commit.description?
           %a.text-expander.js-toggle-button ...
 
-      .pull-right
+      .commit-actions
         - if commit.status
-          = render_commit_status(commit)
+          = render_commit_status(commit, cssclass: 'btn btn-transparent')
         = clipboard_button(clipboard_text: commit.id)
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent commit-link"
+        = link_to_browse_code(project, commit)
 
     - if commit.description?
-      .commit-row-description.js-toggle-content
-        %pre
-          = preserve(markdown(escape_once(commit.description), pipeline: :single_line, author: commit.author))
+      %pre.commit-row-description.js-toggle-content
+        = preserve(markdown(escape_once(commit.description), pipeline: :single_line, author: commit.author))
 
     .commit-row-info
-      by
       = commit_author_link(commit, avatar: true, size: 24)
-      .committed_ago
-        #{time_ago_with_tooltip(commit.committed_date)}  
-      = link_to_browse_code(project, commit)
+      authored
+      #{time_ago_with_tooltip(commit.committed_date)}  

app/views/projects/commits/_commits.html.haml

@@ -4,18 +4,11 @@
 - commits, hidden = limited_commits(@commits)
 
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
-  .row.commits-row
-    .col-md-2.hidden-xs.hidden-sm
-      %h5.commits-row-date
-        %i.fa.fa-calendar
-        %span= day.strftime('%d %b, %Y')
-      .light
-        = pluralize(commits.count, 'commit')
-    .col-md-10.col-sm-12
-      %ul.content-list
-        = render commits, project: project
-  %hr.lists-separator
+  %li.commit-header= "#{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}"
+  %li.commits-row
+    %ul.list-unstyled.commit-list
+      = render commits, project: project
 
 - if hidden > 0
-  .alert.alert-warning
+  %li.alert.alert-warning
     #{number_with_delimiter(hidden)} additional commits have been omitted to prevent performance issues.

app/views/projects/commits/show.html.haml

@@ -23,21 +23,18 @@
             Create Merge Request
 
       .control
-        = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'pull-left commits-search-form') do
-          = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input', spellcheck: false }
-
+        = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'commits-search-form') do
+          = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
       - if current_user && current_user.private_token
         .control
           = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'btn' do
             = icon("rss")
-
-
     %ul.breadcrumb.repo-breadcrumb
       = commits_breadcrumbs
 
   %div{id: dom_id(@project)}
-    #commits-list.content_list= render "commits", project: @project
-  .clear
+    %ol#commits-list.list-unstyled.content_list
+      = render "commits", project: @project
   = spinner
 
 :javascript

app/views/projects/merge_requests/show/_commits.html.haml

@@ -2,4 +2,5 @@
   = icon("sort-amount-desc")
   Most recent commits displayed first
 
-= render "projects/commits/commits", project: @merge_request.project
+%ol#commits-list.list-unstyled
+  = render "projects/commits/commits", project: @merge_request.project