Commit 68dadc98 authored by Fatih Acet's avatar Fatih Acet

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
parents 4707e341 73f697d5
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
return $("body").on("click", ".js-details-expand", function(e) { return $("body").on("click", ".js-details-expand", function(e) {
$(this).next('.js-details-content').removeClass("hide"); $(this).next('.js-details-content').removeClass("hide");
$(this).hide(); $(this).hide();
var truncatedItem = $(this).siblings('.js-details-short');
if (truncatedItem.length) {
truncatedItem.addClass("hide");
}
return e.preventDefault(); return e.preventDefault();
}); });
}); });
......
...@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0; ...@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0;
$background-color: $gray-light; $background-color: $gray-light;
$dark-background-color: #f5f5f5; $dark-background-color: #f5f5f5;
$table-text-gray: #8f8f8f; $table-text-gray: #8f8f8f;
$widget-expand-item: #e8f2f7;
$widget-inner-border: #eef0f2;
/* /*
* Text * Text
......
...@@ -33,10 +33,8 @@ ...@@ -33,10 +33,8 @@
&.commit-info-row-header { &.commit-info-row-header {
line-height: 34px; line-height: 34px;
padding: 10px 0;
@media (min-width: $screen-sm-min) { margin-bottom: 0;
margin-bottom: 0;
}
.commit-options-dropdown-caret { .commit-options-dropdown-caret {
@media (max-width: $screen-sm) { @media (max-width: $screen-sm) {
...@@ -80,6 +78,58 @@ ...@@ -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 { .ci-status-link {
svg { svg {
overflow: visible; overflow: visible;
...@@ -88,6 +138,7 @@ ...@@ -88,6 +138,7 @@
.commit-box { .commit-box {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
padding: $gl-padding 0;
.commit-title { .commit-title {
margin: 0; margin: 0;
...@@ -138,6 +189,9 @@ ...@@ -138,6 +189,9 @@
} }
.commit-action-buttons { .commit-action-buttons {
position: relative;
top: -1px;
i { i {
color: $gl-icon-color; color: $gl-icon-color;
font-size: 13px; font-size: 13px;
......
...@@ -33,21 +33,22 @@ ...@@ -33,21 +33,22 @@
color: $gl-dark-link-color; color: $gl-dark-link-color;
} }
.text-expander { }
display: inline-block;
background: $gray-light; .text-expander {
color: $gl-placeholder-color; display: inline-block;
padding: 0 5px; background: $gray-light;
cursor: pointer; color: $gl-placeholder-color;
border: 1px solid $border-gray-dark; padding: 0 5px;
border-radius: $border-radius-default; cursor: pointer;
margin-left: 5px; border: 1px solid $border-gray-dark;
line-height: 1; border-radius: $border-radius-default;
margin-left: 5px;
&:hover { line-height: 1;
background-color: darken($gray-light, 10%);
text-decoration: none; &:hover {
} background-color: darken($gray-light, 10%);
text-decoration: none;
} }
} }
......
...@@ -54,7 +54,6 @@ ...@@ -54,7 +54,6 @@
margin: 0 0 10px; margin: 0 0 10px;
} }
.login-footer { .login-footer {
margin-top: 10px; margin-top: 10px;
......
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
} }
.ci_widget { .ci_widget {
border-bottom: 1px solid #eef0f2; border-bottom: 1px solid $widget-inner-border;
svg { svg {
margin-right: 4px; margin-right: 4px;
......
.commit-info-row.commit-info-row-header .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 %strong
= commit_author_link(@commit, avatar: true, size: 24) = 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 .pull-right.commit-action-buttons
- if defined?(@notes_count) && @notes_count > 0 - if defined?(@notes_count) && @notes_count > 0
...@@ -33,42 +48,35 @@ ...@@ -33,42 +48,35 @@
%li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch) %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) %li= link_to "Plain Diff", namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
- if @commit.different_committer? .commit-box
.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
%h3.commit-title %h3.commit-title
= markdown(@commit.title, pipeline: :single_line, author: @commit.author) = markdown(@commit.title, pipeline: :single_line, author: @commit.author)
- if @commit.description.present? - if @commit.description.present?
%pre.commit-description %pre.commit-description
= preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author)) = 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 :javascript
$(".commit-info.branches").load("#{branches_namespace_project_commit_path(@project.namespace, @project, @commit.id)}"); $(".commit-info.branches").load("#{branches_namespace_project_commit_path(@project.namespace, @project, @commit.id)}");
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
= render "projects/commits/head" = render "projects/commits/head"
%div{ class: container_class } %div{ class: container_class }
.prepend-top-default = render "commit_box"
= render "commit_box"
= render "ci_menu" = render "ci_menu"
= render "builds" = render "builds"
- page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits" - page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits"
.prepend-top-default = render "commit_box"
= render "commit_box"
= render "ci_menu" = render "ci_menu"
= render "pipelines_list", pipelines: @ci_pipelines = render "pipelines_list", pipelines: @ci_pipelines
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
= render "projects/commits/head" = render "projects/commits/head"
%div{ class: container_class } %div{ class: container_class }
.prepend-top-default = render "commit_box"
= render "commit_box"
- if @commit.status - if @commit.status
= render "ci_menu" = render "ci_menu"
- else - else
......
...@@ -163,7 +163,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps ...@@ -163,7 +163,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
end end
step 'I see commit ci info' do 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 end
step 'I click status link' do step 'I click status link' do
...@@ -171,7 +171,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps ...@@ -171,7 +171,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
end end
step 'I see builds list' do 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" expect(page).to have_content "1 build"
end end
......
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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment