Make CI badge hitboxes better match container
This commit is contained in:
parent
8c8c4f8c5a
commit
66ff2dede1
|
@ -428,7 +428,7 @@
|
||||||
width: 21px;
|
width: 21px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -32px;
|
top: -31px;
|
||||||
border-top: 2px solid $border-color;
|
border-top: 2px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -456,32 +456,31 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.build {
|
.build {
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: $white-light;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 8px 4px 9px 10px;
|
|
||||||
width: 186px;
|
width: 186px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
color: $gl-text-color-light;
|
||||||
|
|
||||||
&:hover {
|
> .build-content {
|
||||||
background-color: $stage-hover-bg;
|
display: inline-block;
|
||||||
border: 1px solid $stage-hover-border;
|
padding: 8px 10px 9px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: $white-light;
|
||||||
|
|
||||||
a,
|
&:hover {
|
||||||
.dropdown-counter-badge,
|
background-color: $stage-hover-bg;
|
||||||
.dropdown-menu-toggle {
|
border: 1px solid $stage-hover-border;
|
||||||
color: $gl-text-color;
|
color: $gl-text-color;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.grouped-pipeline-dropdown a {
|
> .ci-action-icon-container {
|
||||||
color: $gl-text-color-light;
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
&:hover {
|
top: 5px;
|
||||||
color: $gl-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ci-status-icon {
|
.ci-status-icon {
|
||||||
|
@ -621,8 +620,8 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 191px;
|
width: 191px;
|
||||||
left: auto;
|
left: auto;
|
||||||
right: -206px;
|
right: -195px;
|
||||||
top: -11px;
|
top: -4px;
|
||||||
box-shadow: 0 1px 5px $black-transparent;
|
box-shadow: 0 1px 5px $black-transparent;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -650,17 +649,25 @@
|
||||||
.dropdown-build {
|
.dropdown-build {
|
||||||
color: $gl-text-color-light;
|
color: $gl-text-color-light;
|
||||||
|
|
||||||
a.ci-action-icon-container {
|
.build-content {
|
||||||
padding: 0;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ci-action-icon-container {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
float: right;
|
position: absolute;
|
||||||
margin-top: 4px;
|
right: 4px;
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -670,18 +677,6 @@
|
||||||
color: $gl-text-color;
|
color: $gl-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ci-action-icon-container {
|
|
||||||
i {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: 1px;
|
|
||||||
left: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage {
|
.stage {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
@ -704,9 +699,6 @@
|
||||||
|
|
||||||
// Action Icons
|
// Action Icons
|
||||||
.ci-action-icon-container .ci-action-icon-wrapper {
|
.ci-action-icon-container .ci-action-icon-wrapper {
|
||||||
float: right;
|
|
||||||
margin-top: -4px;
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: $border-color;
|
color: $border-color;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
|
@ -5,12 +5,13 @@
|
||||||
- klass = "ci-status-icon ci-status-icon-#{status.group}"
|
- klass = "ci-status-icon ci-status-icon-#{status.group}"
|
||||||
|
|
||||||
- if status.has_details?
|
- 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)
|
%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
|
- else
|
||||||
%span{ class: klass }= custom_icon(status.icon)
|
.build-content
|
||||||
.ci-status-text= subject.name
|
%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?
|
- if status.has_action?
|
||||||
= link_to status.action_path, method: status.action_method,
|
= link_to status.action_path, method: status.action_method,
|
||||||
|
|
|
@ -10,12 +10,11 @@
|
||||||
- status_groups.each do |group_name, grouped_statuses|
|
- status_groups.each do |group_name, grouped_statuses|
|
||||||
- if grouped_statuses.one?
|
- if grouped_statuses.one?
|
||||||
- status = grouped_statuses.first
|
- status = grouped_statuses.first
|
||||||
%li.build
|
%li.build{ 'id' => "ci-badge-#{group_name}" }
|
||||||
.curve
|
.curve
|
||||||
.build-content
|
= render 'ci/status/graph_badge', subject: status
|
||||||
= render 'ci/status/graph_badge', subject: status
|
|
||||||
- else
|
- else
|
||||||
%li.build
|
%li.build{ 'id' => "ci-badge-#{group_name}" }
|
||||||
.curve
|
.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
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
- group_status = CommitStatus.where(id: subject).status
|
- 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}"}
|
%span{class: "ci-status-icon ci-status-icon-#{group_status}"}
|
||||||
= ci_icon_for_status(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
|
= name
|
||||||
%span.dropdown-counter-badge= subject.size
|
%span.dropdown-counter-badge= subject.size
|
||||||
.dropdown-menu.grouped-pipeline-dropdown
|
.dropdown-menu.grouped-pipeline-dropdown
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
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')
|
@success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
|
||||||
@failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
|
@failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
|
||||||
@running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
|
@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')
|
@external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -41,37 +41,34 @@ describe "Pipelines", feature: true, js: true do
|
||||||
describe 'pipeline graph' do
|
describe 'pipeline graph' do
|
||||||
context 'when pipeline has running builds' do
|
context 'when pipeline has running builds' do
|
||||||
it 'shows a running icon and a cancel action for the running build' 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_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_selector('.ci-action-icon-container .fa-ban')
|
||||||
|
expect(page).to have_content('deploy')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'should be possible to cancel the running build' do
|
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')
|
expect(page).not_to have_content('Cancel running')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
context 'when pipeline has successful builds' do
|
context 'when pipeline has successful builds' do
|
||||||
it 'shows the success icon and a retry action for the successfull build' do
|
it 'shows the success icon and a retry action for the successful build' do
|
||||||
page.within('a[data-title="build - passed"]') do
|
page.within('#ci-badge-build') do
|
||||||
expect(page).to have_selector('.ci-status-icon-success')
|
expect(page).to have_selector('.ci-status-icon-success')
|
||||||
expect(page).to have_content('build')
|
expect(page).to have_content('build')
|
||||||
end
|
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')
|
expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'should be possible to retry the success build' do
|
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')
|
expect(page).not_to have_content('Retry build')
|
||||||
end
|
end
|
||||||
|
@ -79,18 +76,18 @@ describe "Pipelines", feature: true, js: true do
|
||||||
|
|
||||||
context 'when pipeline has failed builds' do
|
context 'when pipeline has failed builds' do
|
||||||
it 'shows the failed icon and a retry action for the failed build' 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_selector('.ci-status-icon-failed')
|
||||||
expect(page).to have_content('test')
|
expect(page).to have_content('test')
|
||||||
end
|
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')
|
expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'should be possible to retry the failed build' do
|
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')
|
expect(page).not_to have_content('Retry build')
|
||||||
end
|
end
|
||||||
|
@ -98,18 +95,18 @@ describe "Pipelines", feature: true, js: true do
|
||||||
|
|
||||||
context 'when pipeline has manual builds' do
|
context 'when pipeline has manual builds' do
|
||||||
it 'shows the skipped icon and a play action for the manual build' 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_selector('.ci-status-icon-manual')
|
||||||
expect(page).to have_content('manual')
|
expect(page).to have_content('manual')
|
||||||
end
|
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')
|
expect(page).to have_selector('.ci-action-icon-container .fa-play')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'should be possible to play the manual build' do
|
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')
|
expect(page).not_to have_content('Play build')
|
||||||
end
|
end
|
||||||
|
@ -167,7 +164,7 @@ describe "Pipelines", feature: true, js: true do
|
||||||
@success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
|
@success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
|
||||||
@failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
|
@failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
|
||||||
@running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
|
@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')
|
@external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,7 @@
|
||||||
%ul
|
%ul
|
||||||
%li.build
|
%li.build
|
||||||
.curve
|
.curve
|
||||||
.build-content
|
%a
|
||||||
%a
|
%svg
|
||||||
%svg
|
.ci-status-text
|
||||||
.ci-status-text
|
stop_review
|
||||||
stop_review
|
|
||||||
|
|
Loading…
Reference in New Issue