From da55496b6fc3ef1c65c4369cabb89b874dbc79e6 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Fri, 15 Jul 2016 10:26:15 -0500 Subject: [PATCH 1/7] Add new running icon; add a bunch of styles to get svg to match existing fa icons --- app/assets/stylesheets/pages/pipelines.scss | 9 +++++++++ app/assets/stylesheets/pages/projects.scss | 7 +++++++ app/assets/stylesheets/pages/status.scss | 8 ++++++++ app/helpers/ci_status_helper.rb | 4 ++-- .../projects/ci/pipelines/_pipeline.html.haml | 2 +- app/views/shared/icons/_icon_running.svg | 12 ++++++++++++ app/views/shared/icons/_icon_status_cancel.svg | 12 ++++++++++++ app/views/shared/icons/_icon_status_failed.svg | 12 ++++++++++++ app/views/shared/icons/_icon_status_passed.svg | 15 +++++++++++++++ app/views/shared/icons/_icon_status_pending.svg | 13 +++++++++++++ app/views/shared/icons/_icon_status_warning.svg | 15 +++++++++++++++ 11 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 app/views/shared/icons/_icon_running.svg create mode 100644 app/views/shared/icons/_icon_status_cancel.svg create mode 100644 app/views/shared/icons/_icon_status_failed.svg create mode 100644 app/views/shared/icons/_icon_status_passed.svg create mode 100644 app/views/shared/icons/_icon_status_pending.svg create mode 100644 app/views/shared/icons/_icon_status_warning.svg diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a3b72ec9574..8d411bd658b 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -123,6 +123,15 @@ right: 1px; } } + + .stage-cell { + + svg { + height: 13px; + width: 13px; + margin-left: 3px; + } + } .duration, .finished-at { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index ea9f7cf0540..5572999d19c 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -536,6 +536,13 @@ pre.light-well { .ci-status { margin-right: $gl-padding; + + &.ci-running { + + svg { + margin-right: 3px; + } + } } .commit-row-message { diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index c6b053150be..8f3d9362a0a 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 { + width: 13px; + height: 13px; + position: relative; + top: 1px; + margin-left: 3px; + } } .ci-status-icon-success { diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb index e6c99c9959e..5219a0ff47b 100644 --- a/app/helpers/ci_status_helper.rb +++ b/app/helpers/ci_status_helper.rb @@ -32,12 +32,12 @@ module CiStatusHelper when 'pending' 'clock-o' when 'running' - 'spinner' + 'icon_running' else 'circle' end - icon(icon_name + ' fw') + status == 'running' ? custom_icon(icon_name) : icon(icon_name + ' fw') 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 7ae699832f6..26c4ffd2bd4 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_running.svg b/app/views/shared/icons/_icon_running.svg new file mode 100644 index 00000000000..1b6a29958e6 --- /dev/null +++ b/app/views/shared/icons/_icon_running.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + 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_passed.svg b/app/views/shared/icons/_icon_status_passed.svg new file mode 100644 index 00000000000..260eab013a3 --- /dev/null +++ b/app/views/shared/icons/_icon_status_passed.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + 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_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 @@ + + + + + + + + + + + + + + + From 068f2f4f161c40310687198dbcec243b1361264f Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Fri, 15 Jul 2016 10:39:27 -0500 Subject: [PATCH 2/7] Align running icon in merge request --- app/assets/stylesheets/pages/merge_requests.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index fbff0c97355..ed45ac87f54 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -196,6 +196,16 @@ .merge-request-title { margin-bottom: 2px; + + .ci-status-link { + + svg { + height: 13px; + width: 13px; + position: relative; + top: 2px; + } + } } } From 5b5cafe024c4437a17a219708c9ec00376e98ece Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Fri, 15 Jul 2016 11:05:06 -0500 Subject: [PATCH 3/7] Add global style for running icon --- .../stylesheets/pages/merge_requests.scss | 10 -------- app/assets/stylesheets/pages/pipelines.scss | 10 +++++++- app/assets/stylesheets/pages/projects.scss | 7 ------ app/assets/stylesheets/pages/status.scss | 23 ++++++++++++------- .../projects/ci/pipelines/_pipeline.html.haml | 2 +- 5 files changed, 25 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index ed45ac87f54..fbff0c97355 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -196,16 +196,6 @@ .merge-request-title { margin-bottom: 2px; - - .ci-status-link { - - svg { - height: 13px; - width: 13px; - position: relative; - top: 2px; - } - } } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8d411bd658b..9cfd8d49318 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -49,6 +49,14 @@ .commit-link { + .ci-running { + + svg { + top: 1px; + margin-right: 0; + } + } + a:hover { text-decoration: none; } @@ -123,7 +131,7 @@ right: 1px; } } - + .stage-cell { svg { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 5572999d19c..ea9f7cf0540 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -536,13 +536,6 @@ pre.light-well { .ci-status { margin-right: $gl-padding; - - &.ci-running { - - svg { - margin-right: 3px; - } - } } .commit-row-message { diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 8f3d9362a0a..a0e008c98e5 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -41,14 +41,6 @@ color: $blue-normal; border-color: $blue-normal; } - - svg { - width: 13px; - height: 13px; - position: relative; - top: 1px; - margin-left: 3px; - } } .ci-status-icon-success { @@ -70,3 +62,18 @@ color: $gl-gray; } } + +.ci-running, +.ci-status-icon-running { + svg { + height: 13px; + width: 13px; + position: relative; + top: 2px; + margin: 0 3px; + } + + &:hover { + text-decoration: none; + } +} diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index 26c4ffd2bd4..7ae699832f6 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.stage-cell + %td - status = stages_status[stage] - tooltip = "#{stage.titleize}: #{status || 'not found'}" - if status From 0301fa8d9c67623c3311eab64d174123bba4b943 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 19 Jul 2016 06:47:26 -0700 Subject: [PATCH 4/7] Add new icons for every CI status --- app/assets/stylesheets/pages/issues.scss | 8 +++++++ .../stylesheets/pages/merge_requests.scss | 14 ++++++++++- app/assets/stylesheets/pages/pipelines.scss | 7 +++--- app/assets/stylesheets/pages/status.scss | 23 +++++++------------ app/helpers/ci_status_helper.rb | 14 ++++++----- .../projects/ci/pipelines/_pipeline.html.haml | 2 +- ...n_running.svg => _icon_status_running.svg} | 2 +- ...us_passed.svg => _icon_status_success.svg} | 0 8 files changed, 42 insertions(+), 28 deletions(-) rename app/views/shared/icons/{_icon_running.svg => _icon_status_running.svg} (90%) rename app/views/shared/icons/{_icon_status_passed.svg => _icon_status_success.svg} (100%) 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 9cfd8d49318..1ff9b90c85e 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -49,7 +49,7 @@ .commit-link { - .ci-running { + .ci-status { svg { top: 1px; @@ -135,9 +135,8 @@ .stage-cell { svg { - height: 13px; - width: 13px; - margin-left: 3px; + height: 18px; + width: 18px; } } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index a0e008c98e5..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 { @@ -62,18 +70,3 @@ color: $gl-gray; } } - -.ci-running, -.ci-status-icon-running { - svg { - height: 13px; - width: 13px; - position: relative; - top: 2px; - margin: 0 3px; - } - - &:hover { - text-decoration: none; - } -} diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb index 5219a0ff47b..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' - 'icon_running' + 'icon_status_running' else - 'circle' + 'icon_status_cancel' end - status == 'running' ? custom_icon(icon_name) : 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 7ae699832f6..26c4ffd2bd4 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_running.svg b/app/views/shared/icons/_icon_status_running.svg similarity index 90% rename from app/views/shared/icons/_icon_running.svg rename to app/views/shared/icons/_icon_status_running.svg index 1b6a29958e6..a48b3a25099 100644 --- a/app/views/shared/icons/_icon_running.svg +++ b/app/views/shared/icons/_icon_status_running.svg @@ -6,7 +6,7 @@ - + diff --git a/app/views/shared/icons/_icon_status_passed.svg b/app/views/shared/icons/_icon_status_success.svg similarity index 100% rename from app/views/shared/icons/_icon_status_passed.svg rename to app/views/shared/icons/_icon_status_success.svg From 293d31ca87f07a75a8402931b8116dc8666da55d Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 19 Jul 2016 06:52:06 -0700 Subject: [PATCH 5/7] Vertically align status icon within table --- app/assets/stylesheets/pages/pipelines.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1ff9b90c85e..a404f108dc4 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -137,6 +137,7 @@ svg { height: 18px; width: 18px; + vertical-align: middle; } } From 21096189a5712de4ae63818c5cdfaa751a7cbd3c Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 19 Jul 2016 11:11:52 -0700 Subject: [PATCH 6/7] Fix ci_status_helper_spec to look for new SVGs --- spec/helpers/ci_status_helper_spec.rb | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 From 2a092da35c612fa34762bc955ab7c6cdb8df8316 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 19 Jul 2016 11:14:23 -0700 Subject: [PATCH 7/7] Fix alignment of icons on project page --- app/assets/stylesheets/pages/projects.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index ea9f7cf0540..1fb15d337c4 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -486,6 +486,11 @@ pre.light-well { > span { margin-left: 10px; } + + svg { + position: relative; + top: 2px; + } } }