Commit 70efd615 authored by Lin Jen-Shin (godfat)'s avatar Lin Jen-Shin (godfat) Committed by Douglas Barbosa Alexandre

Merge branch 'fix/detailed-status-groups' into 'master'

Improve icons and style for manual build status

## What does this MR do?

This MR changes the CSS class for manual build status badge to make it a little more different than skipped build status badge. It makes it darker.

## Screenshots

![Screen_Shot_2016-12-17_at_13.37.58](/uploads/9628f0e84fdaad82d8833f546f0192a6/Screen_Shot_2016-12-17_at_13.37.58.png)![Screen_Shot_2016-12-17_at_13.31.48](/uploads/fe8e27df0274b9f9ae840110593a298a/Screen_Shot_2016-12-17_at_13.31.48.png)


See merge request !8102
parent 514bea58
...@@ -49,3 +49,11 @@ ...@@ -49,3 +49,11 @@
fill: $gray-darkest; fill: $gray-darkest;
} }
} }
.ci-status-icon-manual {
color: $gl-text-color;
svg {
fill: $gl-text-color;
}
}
.container-fluid { .container-fluid {
.ci-status { .ci-status {
display: inline-block;
padding: 2px 7px; padding: 2px 7px;
margin-right: 10px; margin-right: 10px;
border: 1px solid $gray-darker; border: 1px solid $gray-darker;
...@@ -15,8 +16,7 @@ ...@@ -15,8 +16,7 @@
height: 13px; height: 13px;
width: 13px; width: 13px;
position: relative; position: relative;
top: 1px; top: 2px;
margin-right: 3px;
overflow: visible; overflow: visible;
} }
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
border-color: $gl-danger; border-color: $gl-danger;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $gl-danger, .07); background-color: rgba($gl-danger, .07);
} }
svg { svg {
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
border-color: $gl-success; border-color: $gl-success;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $gl-success, .07); background-color: rgba($gl-success, .07);
} }
svg { svg {
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
border-color: $gl-info; border-color: $gl-info;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $gl-info, .07); background-color: rgba($gl-info, .07);
} }
svg { svg {
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
border-color: $gl-gray; border-color: $gl-gray;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $gl-gray, .07); background-color: rgba($gl-gray, .07);
} }
svg { svg {
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
border-color: $gl-warning; border-color: $gl-warning;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $gl-warning, .07); background-color: rgba($gl-warning, .07);
} }
svg { svg {
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
border-color: $blue-normal; border-color: $blue-normal;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $blue-normal, .07); background-color: rgba($blue-normal, .07);
} }
svg { svg {
...@@ -106,13 +106,26 @@ ...@@ -106,13 +106,26 @@
border-color: $gl-gray-light; border-color: $gl-gray-light;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $gl-gray-light, .07); background-color: rgba($gl-gray-light, .07);
} }
svg { svg {
fill: $gl-gray-light; fill: $gl-gray-light;
} }
} }
&.ci-manual {
color: $gl-text-color;
border-color: $gl-text-color;
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
svg {
fill: $gl-text-color;
}
}
} }
} }
......
- status = local_assigns.fetch(:status) - status = local_assigns.fetch(:status)
- css_classes = "ci-status ci-#{status.group}"
- if status.has_details? - if status.has_details?
= link_to status.details_path, class: "ci-status ci-#{status}" do = link_to status.details_path, class: css_classes do
= custom_icon(status.icon) = custom_icon(status.icon)
= status.text = status.text
- else - else
%span{ class: "ci-status ci-#{status}" } %span{ class: css_classes }
= custom_icon(status.icon) = custom_icon(status.icon)
= status.text = status.text
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- subject = local_assigns.fetch(:subject) - subject = local_assigns.fetch(:subject)
- status = subject.detailed_status(current_user) - status = subject.detailed_status(current_user)
- klass = "ci-status-icon ci-status-icon-#{status}" - klass = "ci-status-icon ci-status-icon-#{status.group}"
- if status.has_details? - if status.has_details?
= link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do = link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do
......
...@@ -17,6 +17,10 @@ module Gitlab ...@@ -17,6 +17,10 @@ module Gitlab
'icon_status_manual' 'icon_status_manual'
end end
def group
'manual'
end
def has_action? def has_action?
can?(user, :update_build, subject) can?(user, :update_build, subject)
end end
......
...@@ -17,6 +17,10 @@ module Gitlab ...@@ -17,6 +17,10 @@ module Gitlab
'icon_status_manual' 'icon_status_manual'
end end
def group
'manual'
end
def has_action? def has_action?
can?(user, :update_build, subject) can?(user, :update_build, subject)
end end
......
...@@ -22,15 +22,8 @@ module Gitlab ...@@ -22,15 +22,8 @@ module Gitlab
raise NotImplementedError raise NotImplementedError
end end
# Deprecation warning: this method is here because we need to maintain def group
# backwards compatibility with legacy statuses. We often do something self.class.name.demodulize.underscore
# like "ci-status ci-status-#{status}" to set CSS class.
#
# `to_s` method should be renamed to `group` at some point, after
# phasing legacy satuses out.
#
def to_s
self.class.name.demodulize.downcase.underscore
end end
def has_details? def has_details?
......
...@@ -17,7 +17,7 @@ module Gitlab ...@@ -17,7 +17,7 @@ module Gitlab
'icon_status_warning' 'icon_status_warning'
end end
def to_s def group
'success_with_warnings' 'success_with_warnings'
end end
......
...@@ -99,7 +99,7 @@ describe "Pipelines", feature: true, js: true do ...@@ -99,7 +99,7 @@ describe "Pipelines", feature: true, js: true do
context 'when pipeline has manual builds' do context 'when pipeline has manual builds' do
it 'shows the skipped icon and a play action for the manual build' 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('a[data-title="manual build - manual play action"]') do
expect(page).to have_selector('.ci-status-icon-skipped') expect(page).to have_selector('.ci-status-icon-manual')
expect(page).to have_content('manual') expect(page).to have_content('manual')
end end
......
...@@ -32,6 +32,14 @@ describe Gitlab::Ci::Status::Build::Cancelable do ...@@ -32,6 +32,14 @@ describe Gitlab::Ci::Status::Build::Cancelable do
end end
end end
describe '#group' do
it 'does not override status group' do
expect(status).to receive(:group)
subject.group
end
end
describe 'action details' do describe 'action details' do
let(:user) { create(:user) } let(:user) { create(:user) }
let(:build) { create(:ci_build) } let(:build) { create(:ci_build) }
......
...@@ -18,6 +18,10 @@ describe Gitlab::Ci::Status::Build::Play do ...@@ -18,6 +18,10 @@ describe Gitlab::Ci::Status::Build::Play do
it { expect(subject.icon).to eq 'icon_status_manual' } it { expect(subject.icon).to eq 'icon_status_manual' }
end end
describe '#group' do
it { expect(subject.group).to eq 'manual' }
end
describe 'action details' do describe 'action details' do
let(:user) { create(:user) } let(:user) { create(:user) }
let(:build) { create(:ci_build) } let(:build) { create(:ci_build) }
......
...@@ -32,6 +32,14 @@ describe Gitlab::Ci::Status::Build::Retryable do ...@@ -32,6 +32,14 @@ describe Gitlab::Ci::Status::Build::Retryable do
end end
end end
describe '#group' do
it 'does not override status group' do
expect(status).to receive(:group)
subject.group
end
end
describe 'action details' do describe 'action details' do
let(:user) { create(:user) } let(:user) { create(:user) }
let(:build) { create(:ci_build) } let(:build) { create(:ci_build) }
......
...@@ -20,6 +20,10 @@ describe Gitlab::Ci::Status::Build::Stop do ...@@ -20,6 +20,10 @@ describe Gitlab::Ci::Status::Build::Stop do
it { expect(subject.icon).to eq 'icon_status_manual' } it { expect(subject.icon).to eq 'icon_status_manual' }
end end
describe '#group' do
it { expect(subject.group).to eq 'manual' }
end
describe 'action details' do describe 'action details' do
let(:user) { create(:user) } let(:user) { create(:user) }
let(:build) { create(:ci_build) } let(:build) { create(:ci_build) }
......
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Canceled do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Canceled do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_canceled' } it { expect(subject.icon).to eq 'icon_status_canceled' }
end end
describe '#group' do
it { expect(subject.group).to eq 'canceled' }
end
end end
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Created do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Created do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_created' } it { expect(subject.icon).to eq 'icon_status_created' }
end end
describe '#group' do
it { expect(subject.group).to eq 'created' }
end
end end
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Failed do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Failed do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_failed' } it { expect(subject.icon).to eq 'icon_status_failed' }
end end
describe '#group' do
it { expect(subject.group).to eq 'failed' }
end
end end
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Pending do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Pending do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_pending' } it { expect(subject.icon).to eq 'icon_status_pending' }
end end
describe '#group' do
it { expect(subject.group).to eq 'pending' }
end
end end
...@@ -17,6 +17,10 @@ describe Gitlab::Ci::Status::Pipeline::SuccessWithWarnings do ...@@ -17,6 +17,10 @@ describe Gitlab::Ci::Status::Pipeline::SuccessWithWarnings do
it { expect(subject.icon).to eq 'icon_status_warning' } it { expect(subject.icon).to eq 'icon_status_warning' }
end end
describe '#group' do
it { expect(subject.group).to eq 'success_with_warnings' }
end
describe '.matches?' do describe '.matches?' do
context 'when pipeline is successful' do context 'when pipeline is successful' do
let(:pipeline) do let(:pipeline) do
......
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Running do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Running do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_running' } it { expect(subject.icon).to eq 'icon_status_running' }
end end
describe '#group' do
it { expect(subject.group).to eq 'running' }
end
end end
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Skipped do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Skipped do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_skipped' } it { expect(subject.icon).to eq 'icon_status_skipped' }
end end
describe '#group' do
it { expect(subject.group).to eq 'skipped' }
end
end end
...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Success do ...@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Success do
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_success' } it { expect(subject.icon).to eq 'icon_status_success' }
end end
describe '#group' do
it { expect(subject.group).to eq 'success' }
end
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment