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
This commit is contained in:
Fatih Acet 2016-10-31 21:29:29 +00:00
commit 68dadc98ae
12 changed files with 155 additions and 61 deletions

View file

@ -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();
});
});

View file

@ -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

View file

@ -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;

View file

@ -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;
}
}

View file

@ -54,7 +54,6 @@
margin: 0 0 10px;
}
.login-footer {
margin-top: 10px;

View file

@ -60,7 +60,7 @@
}
.ci_widget {
border-bottom: 1px solid #eef0f2;
border-bottom: 1px solid $widget-inner-border;
svg {
margin-right: 4px;

View file

@ -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)}");

View file

@ -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"

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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