diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index be22e7bdc79d78c3ce0b4e5618bb2bd4ab6e641e..243c9153ded289e2977035d3d55b2a8ee5117e1f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -428,7 +428,7 @@
width: 21px;
height: 25px;
position: absolute;
- top: -32px;
+ top: -31px;
border-top: 2px solid $border-color;
}
@@ -456,32 +456,31 @@
}
.build {
- border: 1px solid $border-color;
- border-radius: 30px;
- background-color: $white-light;
position: relative;
- padding: 8px 4px 9px 10px;
width: 186px;
margin-bottom: 10px;
white-space: normal;
+ color: $gl-text-color-light;
- &:hover {
- background-color: $stage-hover-bg;
- border: 1px solid $stage-hover-border;
+ > .build-content {
+ display: inline-block;
+ padding: 8px 10px 9px;
+ width: 100%;
+ border: 1px solid $border-color;
+ border-radius: 30px;
+ background-color: $white-light;
- a,
- .dropdown-counter-badge,
- .dropdown-menu-toggle {
+ &:hover {
+ background-color: $stage-hover-bg;
+ border: 1px solid $stage-hover-border;
color: $gl-text-color;
}
+ }
- .grouped-pipeline-dropdown a {
- color: $gl-text-color-light;
-
- &:hover {
- color: $gl-text-color;
- }
- }
+ > .ci-action-icon-container {
+ position: absolute;
+ right: 4px;
+ top: 5px;
}
.ci-status-icon {
@@ -621,8 +620,8 @@
padding: 0;
width: 191px;
left: auto;
- right: -206px;
- top: -11px;
+ right: -195px;
+ top: -4px;
box-shadow: 0 1px 5px $black-transparent;
a {
@@ -650,30 +649,20 @@
.dropdown-build {
color: $gl-text-color-light;
- a.ci-action-icon-container {
- padding: 0;
- font-size: 11px;
- float: right;
- margin-top: 4px;
- display: inline-block;
- position: relative;
-
- i {
- font-size: 11px;
- margin-top: 0;
- }
- }
-
- &:hover {
- background-color: $stage-hover-bg;
- border-radius: 3px;
- color: $gl-text-color;
+ .build-content {
+ width: 100%;
}
.ci-action-icon-container {
+ font-size: 11px;
+ position: absolute;
+ right: 4px;
+
i {
width: 25px;
height: 25px;
+ font-size: 11px;
+ margin-top: 0;
&::before {
top: 1px;
@@ -682,6 +671,12 @@
}
}
+ &:hover {
+ background-color: $stage-hover-bg;
+ border-radius: 3px;
+ color: $gl-text-color;
+ }
+
.stage {
max-width: 100px;
width: 100px;
@@ -704,9 +699,6 @@
// Action Icons
.ci-action-icon-container .ci-action-icon-wrapper {
- float: right;
- margin-top: -4px;
-
i {
color: $border-color;
border-radius: 100%;
diff --git a/app/views/ci/status/_graph_badge.html.haml b/app/views/ci/status/_graph_badge.html.haml
index 9f3a9c0c6b260988c2f544ff8aeb68104e9692bc..52b4d77d074fc89a5af13beb533048ab1a9c3af3 100644
--- a/app/views/ci/status/_graph_badge.html.haml
+++ b/app/views/ci/status/_graph_badge.html.haml
@@ -5,12 +5,13 @@
- klass = "ci-status-icon ci-status-icon-#{status.group}"
- if status.has_details?
- = link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do
+ = link_to status.details_path, class: 'build-content' do
%span{ class: klass }= custom_icon(status.icon)
- .ci-status-text= subject.name
+ .ci-status-text{ 'data-toggle' => 'tooltip', 'data-title' => "#{subject.name} - #{status.label}" }= subject.name
- else
- %span{ class: klass }= custom_icon(status.icon)
- .ci-status-text= subject.name
+ .build-content
+ %span{ class: klass }= custom_icon(status.icon)
+ .ci-status-text{ 'data-toggle' => 'tooltip', 'data-title' => "#{subject.name} - #{status.label}" }= subject.name
- if status.has_action?
= link_to status.action_path, method: status.action_method,
diff --git a/app/views/projects/stage/_graph.html.haml b/app/views/projects/stage/_graph.html.haml
index b70b574e687052793615d1a4603e078cf552a2ba..6919b210a000148477a079f7369ca8cc74498df4 100644
--- a/app/views/projects/stage/_graph.html.haml
+++ b/app/views/projects/stage/_graph.html.haml
@@ -10,12 +10,11 @@
- status_groups.each do |group_name, grouped_statuses|
- if grouped_statuses.one?
- status = grouped_statuses.first
- %li.build
+ %li.build{ 'id' => "ci-badge-#{group_name}" }
.curve
- .build-content
- = render 'ci/status/graph_badge', subject: status
+ = render 'ci/status/graph_badge', subject: status
- else
- %li.build
+ %li.build{ 'id' => "ci-badge-#{group_name}" }
.curve
- .dropdown.inline.build-content
- = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
+ = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
+
diff --git a/app/views/projects/stage/_in_stage_group.html.haml b/app/views/projects/stage/_in_stage_group.html.haml
index b03837d12119ff95ce7ab8aad3d3cf00b65f07c3..b15f7eaeab2f36e4a6180f3086df6daf12949f49 100644
--- a/app/views/projects/stage/_in_stage_group.html.haml
+++ b/app/views/projects/stage/_in_stage_group.html.haml
@@ -1,8 +1,8 @@
- group_status = CommitStatus.where(id: subject).status
-%button.dropdown-menu-toggle.has-tooltip{ type: 'button', data: { toggle: 'dropdown', title: "#{name} - #{group_status}" } }
+%button.dropdown-menu-toggle.build-content.has-tooltip{ type: 'button', data: { toggle: 'dropdown'} }
%span{class: "ci-status-icon ci-status-icon-#{group_status}"}
= ci_icon_for_status(group_status)
- %span.ci-status-text
+ %span.ci-status-text{ 'data-toggle' => 'tooltip', 'data-title' => "#{name} - #{group_status}" }
= name
%span.dropdown-counter-badge= subject.size
.dropdown-menu.grouped-pipeline-dropdown
diff --git a/changelogs/unreleased/pipeline-build-hitbox.yml b/changelogs/unreleased/pipeline-build-hitbox.yml
new file mode 100644
index 0000000000000000000000000000000000000000..051b538a9a32379f71db6525699bdef376956425
--- /dev/null
+++ b/changelogs/unreleased/pipeline-build-hitbox.yml
@@ -0,0 +1,4 @@
+---
+title: Make CI badge hitboxes match parent
+merge_request:
+author:
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index 57f1e75ea2c1f1951806ccd28f760ac2be5c7934..1210e2745db4e8940303da4b7161360c5eb7c08f 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -19,7 +19,7 @@ describe "Pipelines", feature: true, js: true do
@success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
@failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
@running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
- @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+ @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual-build')
@external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
end
@@ -41,37 +41,34 @@ describe "Pipelines", feature: true, js: true do
describe 'pipeline graph' do
context 'when pipeline has running builds' do
it 'shows a running icon and a cancel action for the running build' do
- page.within('a[data-title="deploy - running"]') do
+ page.within('#ci-badge-deploy') do
expect(page).to have_selector('.ci-status-icon-running')
- expect(page).to have_content('deploy')
- end
-
- page.within('a[data-title="deploy - running"] + .ci-action-icon-container') do
expect(page).to have_selector('.ci-action-icon-container .fa-ban')
+ expect(page).to have_content('deploy')
end
end
it 'should be possible to cancel the running build' do
- find('a[data-title="deploy - running"] + .ci-action-icon-container').trigger('click')
+ find('#ci-badge-deploy .ci-action-icon-container').trigger('click')
expect(page).not_to have_content('Cancel running')
end
end
context 'when pipeline has successful builds' do
- it 'shows the success icon and a retry action for the successfull build' do
- page.within('a[data-title="build - passed"]') do
+ it 'shows the success icon and a retry action for the successful build' do
+ page.within('#ci-badge-build') do
expect(page).to have_selector('.ci-status-icon-success')
expect(page).to have_content('build')
end
- page.within('a[data-title="build - passed"] + .ci-action-icon-container') do
+ page.within('#ci-badge-build .ci-action-icon-container') do
expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
end
end
it 'should be possible to retry the success build' do
- find('a[data-title="build - passed"] + .ci-action-icon-container').trigger('click')
+ find('#ci-badge-build .ci-action-icon-container').trigger('click')
expect(page).not_to have_content('Retry build')
end
@@ -79,18 +76,18 @@ describe "Pipelines", feature: true, js: true do
context 'when pipeline has failed builds' do
it 'shows the failed icon and a retry action for the failed build' do
- page.within('a[data-title="test - failed"]') do
+ page.within('#ci-badge-test') do
expect(page).to have_selector('.ci-status-icon-failed')
expect(page).to have_content('test')
end
- page.within('a[data-title="test - failed"] + .ci-action-icon-container') do
+ page.within('#ci-badge-test .ci-action-icon-container') do
expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
end
end
it 'should be possible to retry the failed build' do
- find('a[data-title="test - failed"] + .ci-action-icon-container').trigger('click')
+ find('#ci-badge-test .ci-action-icon-container').trigger('click')
expect(page).not_to have_content('Retry build')
end
@@ -98,18 +95,18 @@ describe "Pipelines", feature: true, js: true do
context 'when pipeline has manual builds' do
it 'shows the skipped icon and a play action for the manual build' do
- page.within('a[data-title="manual build - manual play action"]') do
+ page.within('#ci-badge-manual-build') do
expect(page).to have_selector('.ci-status-icon-manual')
expect(page).to have_content('manual')
end
- page.within('a[data-title="manual build - manual play action"] + .ci-action-icon-container') do
+ page.within('#ci-badge-manual-build .ci-action-icon-container') do
expect(page).to have_selector('.ci-action-icon-container .fa-play')
end
end
it 'should be possible to play the manual build' do
- find('a[data-title="manual build - manual play action"] + .ci-action-icon-container').trigger('click')
+ find('#ci-badge-manual-build .ci-action-icon-container').trigger('click')
expect(page).not_to have_content('Play build')
end
@@ -167,7 +164,7 @@ describe "Pipelines", feature: true, js: true do
@success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
@failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
@running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
- @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+ @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual-build')
@external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
end
diff --git a/spec/javascripts/fixtures/pipeline_graph.html.haml b/spec/javascripts/fixtures/pipeline_graph.html.haml
index deca50ceaa74b54c1c90755501144b587e23c416..c0b5ab4411eef3f72fbfdf6a10fa1409369d1f75 100644
--- a/spec/javascripts/fixtures/pipeline_graph.html.haml
+++ b/spec/javascripts/fixtures/pipeline_graph.html.haml
@@ -8,8 +8,7 @@
%ul
%li.build
.curve
- .build-content
- %a
- %svg
- .ci-status-text
- stop_review
+ %a
+ %svg
+ .ci-status-text
+ stop_review