Commit 66ff2ded authored by Mitchell Hentges's avatar Mitchell Hentges

Make CI badge hitboxes better match container

parent 8c8c4f8c
......@@ -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;
> .build-content {
display: inline-block;
padding: 8px 10px 9px;
width: 100%;
border: 1px solid $border-color;
border-radius: 30px;
background-color: $white-light;
&:hover {
background-color: $stage-hover-bg;
border: 1px solid $stage-hover-border;
a,
.dropdown-counter-badge,
.dropdown-menu-toggle {
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%;
......
......@@ -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
.build-content
%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
- if status.has_action?
= link_to status.action_path, method: status.action_method,
......
......@@ -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
- 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
- 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
......
---
title: Make CI badge hitboxes match parent
merge_request:
author:
......@@ -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
......
......@@ -8,7 +8,6 @@
%ul
%li.build
.curve
.build-content
%a
%svg
.ci-status-text
......
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