kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch '19847-running-icon' into 'master'

Browse source 
Add new CI status icons

## What does this MR do?
Adds new CI status icons for every state

## What are the relevant issue numbers?
Closes #19847 

## Screenshots (if relevant)
![Screen_Shot_2016-07-19_at_6.58.37_AM](/uploads/ec391b59825f5a4a228d7c77e7485b1e/Screen_Shot_2016-07-19_at_6.58.37_AM.png)


See merge request !5280
This commit is contained in:
Jacob Schatz 2016-07-19 18:54:05 +00:00
commit b269a6d5a9
14 changed files with 147 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/stylesheets/pages/issues.scss
View file

@ -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%;

14
app/assets/stylesheets/pages/merge_requests.scss
View file

@ -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;
}
}
}
}

17
app/assets/stylesheets/pages/pipelines.scss
View file

@ -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;

5
app/assets/stylesheets/pages/projects.scss
View file

@ -497,6 +497,11 @@ pre.light-well {
> span {
margin-left: 10px;
}
svg {
position: relative;
top: 2px;
}
}
}

8
app/assets/stylesheets/pages/status.scss
View file

@ -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 {

14
app/helpers/ci_status_helper.rb
View file

@ -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: '')

2
app/views/projects/ci/pipelines/_pipeline.html.haml
View file

@ -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

12
app/views/shared/icons/_icon_status_cancel.svg Normal file
View file

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="7" cy="7" r="7"/>
<mask id="b" width="14" height="14" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<use stroke="#5C5C5C" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
<rect width="10" height="1" x="2" y="6.5" fill="#5C5C5C" transform="rotate(45 7 7)" rx=".3"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 520 B

12
app/views/shared/icons/_icon_status_failed.svg Normal file
View file

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="7" cy="7" r="7"/>
<mask id="b" width="14" height="14" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<use stroke="#D22852" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
<path fill="#D22852" d="M7.5,6.5 L7.5,4.30578971 C7.5,4.12531853 7.36809219,4 7.20537567,4 L6.79462433,4 C6.63904572,4 6.5,4.13690672 6.5,4.30578971 L6.5,6.5 L4.30578971,6.5 C4.12531853,6.5 4,6.63190781 4,6.79462433 L4,7.20537567 C4,7.36095428 4.13690672,7.5 4.30578971,7.5 L6.5,7.5 L6.5,9.69421029 C6.5,9.87468147 6.63190781,10 6.79462433,10 L7.20537567,10 C7.36095428,10 7.5,9.86309328 7.5,9.69421029 L7.5,7.5 L9.69421029,7.5 C9.87468147,7.5 10,7.36809219 10,7.20537567 L10,6.79462433 C10,6.63904572 9.86309328,6.5 9.69421029,6.5 L7.5,6.5 Z" transform="rotate(45 7 7)"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 999 B

13
app/views/shared/icons/_icon_status_pending.svg Normal file
View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="7" cy="7" r="7"/>
<mask id="b" width="14" height="14" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<use stroke="#E75E40" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
<rect width="1" height="4" x="5" y="5" fill="#E75E40" rx=".3"/>
<rect width="1" height="4" x="8" y="5" fill="#E75E40" rx=".3"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 558 B

12
app/views/shared/icons/_icon_status_running.svg Normal file
View file

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="7" cy="7" r="7"/>
<mask id="b" width="14" height="14" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<use stroke="#2D9FD8" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
<path fill="#2D9FD8" d="M7,3.00800862 C9.09023405,3.13960661 10.7448145,4.87657932 10.7448145,7 C10.7448145,9.209139 8.95395346,11 6.74481446,11 C5.4560962,11 4.30972054,10.3905589 3.57817301,9.44416214 L7,7 L7,3.00800862 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 653 B

15
app/views/shared/icons/_icon_status_success.svg Normal file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="7" cy="7" r="7"/>
<mask id="b" width="14" height="14" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<use stroke="#31AF64" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
<g fill="#31AF64" transform="rotate(45 -.13 10.953)">
<rect width="1" height="5" x="2" rx=".3"/>
<rect width="3" height="1" y="4" rx=".3"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 587 B

15
app/views/shared/icons/_icon_status_warning.svg Normal file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="7" cy="7" r="7"/>
<mask id="b" width="14" height="14" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<g fill="#FF8A24" transform="translate(6 3)">
<rect width="2" height="5" rx=".5"/>
<rect width="2" height="2" y="6" rx=".5"/>
</g>
<use stroke="#FF8A24" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 573 B

10
spec/helpers/ci_status_helper_spec.rb
View file

@ -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