diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 9807c5a808d..ee3b2d2b801 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -78,6 +78,14 @@ form.edit-issue { } } +.merge-request-ci-status { + svg { + margin-right: 4px; + position: relative; + top: 1px; + } +} + @media (max-width: $screen-xs-max) { .issue-btn-group { width: 100%; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index fbff0c97355..5254faf723d 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -60,8 +60,10 @@ .ci_widget { border-bottom: 1px solid #eef0f2; - i { + svg { margin-right: 4px; + position: relative; + top: 1px; } &.ci-success { @@ -196,6 +198,16 @@ .merge-request-title { margin-bottom: 2px; + + .ci-status-link { + + svg { + height: 16px; + width: 16px; + position: relative; + top: 3px; + } + } } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a3b72ec9574..a404f108dc4 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -49,6 +49,14 @@ .commit-link { + .ci-status { + + svg { + top: 1px; + margin-right: 0; + } + } + a:hover { text-decoration: none; } @@ -124,6 +132,15 @@ } } + .stage-cell { + + svg { + height: 18px; + width: 18px; + vertical-align: middle; + } + } + .duration, .finished-at { color: $table-text-gray; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 7c36ce85fb1..63853335fb6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -497,6 +497,11 @@ pre.light-well { > span { margin-left: 10px; } + + svg { + position: relative; + top: 2px; + } } } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index c6b053150be..a22d4b6f6be 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -41,6 +41,14 @@ color: $blue-normal; border-color: $blue-normal; } + + svg { + height: 13px; + width: 13px; + position: relative; + top: 1px; + margin: 0 3px; + } } .ci-status-icon-success { diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb index e6c99c9959e..59a8365d60b 100644 --- a/app/helpers/ci_status_helper.rb +++ b/app/helpers/ci_status_helper.rb @@ -26,18 +26,20 @@ module CiStatusHelper icon_name = case status when 'success' - 'check' + 'icon_status_success' + when 'success_with_warnings' + 'icon_status_warning' when 'failed' - 'close' + 'icon_status_failed' when 'pending' - 'clock-o' + 'icon_status_pending' when 'running' - 'spinner' + 'icon_status_running' else - 'circle' + 'icon_status_cancel' end - icon(icon_name + ' fw') + custom_icon(icon_name) end def render_commit_status(commit, tooltip_placement: 'auto left', cssclass: '') diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index 996c9073770..cb0ca7bc8e3 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -35,7 +35,7 @@ - stages_status = pipeline.statuses.latest.stages_status - stages.each do |stage| - %td + %td.stage-cell - status = stages_status[stage] - tooltip = "#{stage.titleize}: #{status || 'not found'}" - if status diff --git a/app/views/shared/icons/_icon_status_cancel.svg b/app/views/shared/icons/_icon_status_cancel.svg new file mode 100644 index 00000000000..6a0bc1490c4 --- /dev/null +++ b/app/views/shared/icons/_icon_status_cancel.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/views/shared/icons/_icon_status_failed.svg b/app/views/shared/icons/_icon_status_failed.svg new file mode 100644 index 00000000000..c41ca18cae7 --- /dev/null +++ b/app/views/shared/icons/_icon_status_failed.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/views/shared/icons/_icon_status_pending.svg b/app/views/shared/icons/_icon_status_pending.svg new file mode 100644 index 00000000000..035cd8b4ccc --- /dev/null +++ b/app/views/shared/icons/_icon_status_pending.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/views/shared/icons/_icon_status_running.svg b/app/views/shared/icons/_icon_status_running.svg new file mode 100644 index 00000000000..a48b3a25099 --- /dev/null +++ b/app/views/shared/icons/_icon_status_running.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/views/shared/icons/_icon_status_success.svg b/app/views/shared/icons/_icon_status_success.svg new file mode 100644 index 00000000000..260eab013a3 --- /dev/null +++ b/app/views/shared/icons/_icon_status_success.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/views/shared/icons/_icon_status_warning.svg b/app/views/shared/icons/_icon_status_warning.svg new file mode 100644 index 00000000000..d47e7a1c93f --- /dev/null +++ b/app/views/shared/icons/_icon_status_warning.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/spec/helpers/ci_status_helper_spec.rb b/spec/helpers/ci_status_helper_spec.rb index 45199d0f09d..637b02d9388 100644 --- a/spec/helpers/ci_status_helper_spec.rb +++ b/spec/helpers/ci_status_helper_spec.rb @@ -7,7 +7,13 @@ describe CiStatusHelper do let(:failed_commit) { double("Ci::Pipeline", status: 'failed') } describe 'ci_icon_for_status' do - it { expect(helper.ci_icon_for_status(success_commit.status)).to include('fa-check') } - it { expect(helper.ci_icon_for_status(failed_commit.status)).to include('fa-close') } + it 'renders to correct svg on success' do + expect(helper).to receive(:render).with('shared/icons/icon_status_success.svg', anything) + helper.ci_icon_for_status(success_commit.status) + end + it 'renders the correct svg on failure' do + expect(helper).to receive(:render).with('shared/icons/icon_status_failed.svg', anything) + helper.ci_icon_for_status(failed_commit.status) + end end end