diff options
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 74 | ||||
-rw-r--r-- | app/views/ci/status/_graph_badge.html.haml | 9 | ||||
-rw-r--r-- | app/views/projects/stage/_graph.html.haml | 11 | ||||
-rw-r--r-- | app/views/projects/stage/_in_stage_group.html.haml | 4 | ||||
-rw-r--r-- | changelogs/unreleased/pipeline-build-hitbox.yml | 4 | ||||
-rw-r--r-- | spec/features/projects/pipelines/pipeline_spec.rb | 33 | ||||
-rw-r--r-- | spec/javascripts/fixtures/pipeline_graph.html.haml | 9 |
7 files changed, 68 insertions, 76 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index be22e7bdc79..243c9153ded 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 9f3a9c0c6b2..52b4d77d074 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 b70b574e687..6919b210a00 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 b03837d1211..b15f7eaeab2 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 00000000000..051b538a9a3 --- /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 57f1e75ea2c..1210e2745db 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 deca50ceaa7..c0b5ab4411e 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 |