From 0a848266d7b66b3dce19298337e9ac0b1471db11 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 18 Oct 2016 18:57:53 -0500 Subject: Rearrange commit info view --- app/assets/stylesheets/pages/commit.scss | 16 ++++++ app/views/projects/commit/_commit_box.html.haml | 66 ++++++++++++------------- 2 files changed, 49 insertions(+), 33 deletions(-) diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index 8ecac08137b..62232d8a060 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -80,6 +80,21 @@ } } +.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 $border-color; + } + } +} + .ci-status-link { svg { overflow: visible; @@ -88,6 +103,7 @@ .commit-box { border-top: 1px solid $border-color; + padding: $gl-padding 0; .commit-title { margin: 0; diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml index 6c82a4e5600..4039d059d40 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -1,8 +1,19 @@ .commit-info-row.commit-info-row-header - %span.hidden-xs Authored by + %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.hidden-xs authored + #{time_ago_with_tooltip(@commit.authored_date)} + %span.hidden-xs 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 +44,31 @@ %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 + %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 + + .widget-row.pipeline-info + - if @commit.status + = ci_icon_for_status(@commit.status) + 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 + %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)}"); -- cgit v1.2.1 From 002670ec73604feaf1e675ce98157bfb3d5709c9 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 18 Oct 2016 19:41:29 -0500 Subject: Finish styling commits view --- .../javascripts/behaviors/details_behavior.js | 5 +++ app/assets/stylesheets/framework/variables.scss | 2 + app/assets/stylesheets/pages/commit.scss | 43 +++++++++++++++++++++- app/assets/stylesheets/pages/commits.scss | 31 ++++++++-------- app/assets/stylesheets/pages/merge_requests.scss | 2 +- app/views/projects/commit/_commit_box.html.haml | 24 ++++++++---- app/views/projects/commit/builds.html.haml | 3 +- app/views/projects/commit/pipelines.html.haml | 3 +- app/views/projects/commit/show.html.haml | 3 +- 9 files changed, 85 insertions(+), 31 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 62232d8a060..16e70bf9e4c 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -33,6 +33,7 @@ &.commit-info-row-header { line-height: 34px; + padding: 10px 0; @media (min-width: $screen-sm-min) { margin-bottom: 0; @@ -80,6 +81,12 @@ } } +.js-details-expand { + &:hover { + text-decoration: none; + } +} + .commit-info-widget { background: $background-color; color: $gl-gray; @@ -90,9 +97,40 @@ padding: $gl-padding; &:not(:last-of-type) { - border-bottom: 1px solid $border-color; + 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 { @@ -154,6 +192,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/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 4039d059d40..47f45ae6b1a 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -1,7 +1,11 @@ .commit-info-row.commit-info-row-header %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" + = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace js-details-short" + = link_to("#", class: "js-details-expand") 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)} @@ -53,6 +57,8 @@ .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" @@ -61,12 +67,14 @@ .widget-row.pipeline-info - if @commit.status - = ci_icon_for_status(@commit.status) - 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 - %span.ci-status-label - = ci_label_for_status(@commit.status) + .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 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 -- cgit v1.2.1 From 2949f9b453d554bd1d9343df255b47bb3f98d182 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 19 Oct 2016 10:25:12 -0500 Subject: Fix mobile view --- app/assets/stylesheets/pages/commit.scss | 5 +---- app/views/projects/commit/_commit_box.html.haml | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index 16e70bf9e4c..8ecf7fcb96d 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -34,10 +34,7 @@ &.commit-info-row-header { line-height: 34px; padding: 10px 0; - - @media (min-width: $screen-sm-min) { - margin-bottom: 0; - } + margin-bottom: 0; .commit-options-dropdown-caret { @media (max-width: $screen-sm) { diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml index 47f45ae6b1a..c8a9358fa64 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -1,7 +1,7 @@ .commit-info-row.commit-info-row-header %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") do + = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do %span.text-expander \... %span.js-details-content.hide @@ -9,7 +9,7 @@ = clipboard_button(clipboard_text: @commit.id) %span.hidden-xs authored #{time_ago_with_tooltip(@commit.authored_date)} - %span.hidden-xs by + %span by = author_avatar(@commit, size: 24) %strong = commit_author_link(@commit, avatar: true, size: 24) -- cgit v1.2.1 From 240b35b130e9391714088c52260e66cb4bfd165e Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 19 Oct 2016 14:02:12 -0500 Subject: Fix commits spec --- app/views/projects/commit/_commit_box.html.haml | 6 +++--- features/steps/project/commits/commits.rb | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml index c8a9358fa64..351ab4148f5 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -65,12 +65,12 @@ %span.commit-info.branches %i.fa.fa-spinner.fa-spin - .widget-row.pipeline-info - - if @commit.status + - 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" + = link_to "##{@commit.pipelines.first.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 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 -- cgit v1.2.1 From 3f979481a1592d274e3b032ce74070f30645a184 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 20 Oct 2016 08:10:15 -0500 Subject: Display last pipeline info --- app/assets/stylesheets/pages/login.scss | 1 - app/views/projects/commit/_commit_box.html.haml | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) 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/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml index 351ab4148f5..d8c95376b94 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -70,7 +70,7 @@ .icon-container = ci_icon_for_status(@commit.status) Pipeline - = link_to "##{@commit.pipelines.first.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace" + = 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 -- cgit v1.2.1 From ceaafd3a6e253f6af827b9c9ede37150c3ed3b95 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 28 Oct 2016 10:35:46 -0500 Subject: Add commit_box spec --- .../projects/commit/_commit_box.html.haml_spec.rb | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 spec/views/projects/commit/_commit_box.html.haml_spec.rb 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..eaf5a0ee1bd --- /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 + first_pipeline = create(:ci_pipeline, project: project, sha: project.commit.id, status: 'success') + second_pipeline = 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 -- cgit v1.2.1 From 73f697d53bdec63e65bb95c328d69afef7c86e45 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 28 Oct 2016 11:14:04 -0500 Subject: Fix rubocop offenses --- spec/views/projects/commit/_commit_box.html.haml_spec.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/views/projects/commit/_commit_box.html.haml_spec.rb b/spec/views/projects/commit/_commit_box.html.haml_spec.rb index eaf5a0ee1bd..16bf0698c4b 100644 --- a/spec/views/projects/commit/_commit_box.html.haml_spec.rb +++ b/spec/views/projects/commit/_commit_box.html.haml_spec.rb @@ -17,8 +17,8 @@ describe 'projects/commit/_commit_box.html.haml' do end it 'shows the last pipeline that ran for the commit' do - first_pipeline = create(:ci_pipeline, project: project, sha: project.commit.id, status: 'success') - second_pipeline = create(:ci_pipeline, project: project, sha: project.commit.id, status: 'canceled') + 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 -- cgit v1.2.1