Make CI badge hitboxes better match container
This commit is contained in:
parent
8c8c4f8c5a
commit
66ff2dede1
|
@ -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,17 +649,25 @@
|
|||
.dropdown-build {
|
||||
color: $gl-text-color-light;
|
||||
|
||||
a.ci-action-icon-container {
|
||||
padding: 0;
|
||||
.build-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ci-action-icon-container {
|
||||
font-size: 11px;
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
||||
i {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
font-size: 11px;
|
||||
margin-top: 0;
|
||||
|
||||
&::before {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -670,18 +677,6 @@
|
|||
color: $gl-text-color;
|
||||
}
|
||||
|
||||
.ci-action-icon-container {
|
||||
i {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
&::before {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
%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,
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
@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,8 +8,7 @@
|
|||
%ul
|
||||
%li.build
|
||||
.curve
|
||||
.build-content
|
||||
%a
|
||||
%svg
|
||||
.ci-status-text
|
||||
stop_review
|
||||
%a
|
||||
%svg
|
||||
.ci-status-text
|
||||
stop_review
|
||||
|
|
Loading…
Reference in New Issue