Commit 63e7b21f authored by Nathan Friend's avatar Nathan Friend

Remove animation from pipeline status icon buttons

The expansion hover animation caused a number of layout headaches; this
commit removes the animation and replaces them with hover/active/focus
styles.

Related issue:
https://gitlab.com/gitlab-org/gitlab-ce/issues/42769
parent c184407e
...@@ -172,8 +172,6 @@ export default { ...@@ -172,8 +172,6 @@ export default {
<span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events"> <span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events">
<icon :name="borderlessIcon" /> <icon :name="borderlessIcon" />
</span> </span>
<i class="fa fa-caret-down" aria-hidden="true"> </i>
</button> </button>
<div <div
......
...@@ -256,7 +256,8 @@ ...@@ -256,7 +256,8 @@
} }
} }
.mini-pipeline-graph-dropdown-toggle svg { .mini-pipeline-graph-dropdown-toggle {
svg {
height: $ci-action-icon-size; height: $ci-action-icon-size;
width: $ci-action-icon-size; width: $ci-action-icon-size;
position: absolute; position: absolute;
...@@ -266,6 +267,16 @@ ...@@ -266,6 +267,16 @@
overflow: visible; overflow: visible;
} }
&:hover,
&:active,
&:focus {
svg {
top: -2px;
left: -2px;
}
}
}
.stage-container { .stage-container {
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -293,7 +304,7 @@ ...@@ -293,7 +304,7 @@
width: 7px; width: 7px;
position: absolute; position: absolute;
right: -7px; right: -7px;
top: 10px; top: 11px;
border-bottom: 2px solid $border-color; border-bottom: 2px solid $border-color;
} }
} }
...@@ -708,21 +719,43 @@ ...@@ -708,21 +719,43 @@
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
} }
@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) { @mixin mini-pipeline-graph-color(
border-color: $color-main; $color-background-default,
color: $color-main; $color-background-hover-focus,
$color-background-active,
$color-foreground-default,
$color-foreground-hover-focus,
$color-foreground-active
) {
background-color: $color-background-default;
border-color: $color-foreground-default;
svg {
fill: $color-foreground-default;
}
&:hover, &:hover,
&:focus, &:focus {
background-color: $color-background-hover-focus;
border-color: $color-foreground-hover-focus;
svg {
fill: $color-foreground-hover-focus;
}
}
&:active { &:active {
background-color: $color-light; background-color: $color-background-active;
border-color: $color-dark; border-color: $color-foreground-active;
color: $color-dark;
svg { svg {
fill: $color-dark; fill: $color-foreground-active;
} }
} }
&:focus {
box-shadow: 0 0 4px 1px $blue-300;
}
} }
@mixin mini-pipeline-item() { @mixin mini-pipeline-item() {
...@@ -734,26 +767,32 @@ ...@@ -734,26 +767,32 @@
height: $ci-action-icon-size; height: $ci-action-icon-size;
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: all 0.2s linear;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
&:hover,
&:active,
&:focus {
outline: none;
border-width: 2px;
}
// Dropdown button animation in mini pipeline graph // Dropdown button animation in mini pipeline graph
&.ci-status-icon-success { &.ci-status-icon-success {
@include mini-pipeline-graph-color($green-100, $green-500, $green-600); @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
} }
&.ci-status-icon-failed { &.ci-status-icon-failed {
@include mini-pipeline-graph-color($red-100, $red-500, $red-600); @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
} }
&.ci-status-icon-pending, &.ci-status-icon-pending,
&.ci-status-icon-success_with_warnings { &.ci-status-icon-success_with_warnings {
@include mini-pipeline-graph-color($orange-100, $orange-500, $orange-600); @include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700);
} }
&.ci-status-icon-running { &.ci-status-icon-running {
@include mini-pipeline-graph-color($blue-100, $blue-400, $blue-600); @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
} }
&.ci-status-icon-canceled, &.ci-status-icon-canceled,
...@@ -761,42 +800,18 @@ ...@@ -761,42 +800,18 @@
&.ci-status-icon-disabled, &.ci-status-icon-disabled,
&.ci-status-icon-not-found, &.ci-status-icon-not-found,
&.ci-status-icon-manual { &.ci-status-icon-manual {
@include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color); @include mini-pipeline-graph-color($white, $gray-700, $gray-800, $gray-900, $gray-950, $black);
} }
&.ci-status-icon-created, &.ci-status-icon-created,
&.ci-status-icon-skipped { &.ci-status-icon-skipped {
@include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest); @include mini-pipeline-graph-color($white, $gray-200, $gray-300, $gray-500, $gray-600, $gray-700);
} }
} }
// Dropdown button in mini pipeline graph // Dropdown button in mini pipeline graph
button.mini-pipeline-graph-dropdown-toggle { button.mini-pipeline-graph-dropdown-toggle {
@include mini-pipeline-item(); @include mini-pipeline-item();
> .fa.fa-caret-down {
position: absolute;
left: 20px;
top: 5px;
display: inline-block;
visibility: hidden;
opacity: 0;
color: inherit;
font-size: 12px;
transition: visibility 0.1s, opacity 0.1s linear;
}
&:active,
&:focus,
&:hover {
outline: none;
width: 35px;
.fa.fa-caret-down {
visibility: visible;
opacity: 1;
}
}
} }
/** /**
......
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
.stage-container.dropdown{ class: klass } .stage-container.dropdown{ class: klass }
%button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } } %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
= sprite_icon(icon_status) = sprite_icon(icon_status)
= icon('caret-down')
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
%li.js-builds-dropdown-list.scrollable-menu %li.js-builds-dropdown-list.scrollable-menu
......
---
title: Remove expansion hover animation from pipeline status icon buttons
merge_request: 24268
author: Nathan Friend
type: changed
...@@ -51,22 +51,52 @@ describe 'Merge request < User sees mini pipeline graph', :js do ...@@ -51,22 +51,52 @@ describe 'Merge request < User sees mini pipeline graph', :js do
first('.mini-pipeline-graph-dropdown-toggle') first('.mini-pipeline-graph-dropdown-toggle')
end end
it 'expands when hovered' do # Status icon button styles should update as described in
# https://gitlab.com/gitlab-org/gitlab-ce/issues/42769
it 'has unique styles for default, :hover, :active, and :focus states' do
find('.mini-pipeline-graph-dropdown-toggle') find('.mini-pipeline-graph-dropdown-toggle')
before_width = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').outerWidth();") default_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
default_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
default_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
toggle.hover toggle.hover
find('.mini-pipeline-graph-dropdown-toggle') find('.mini-pipeline-graph-dropdown-toggle')
after_width = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').outerWidth();") hover_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
hover_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
hover_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
expect(before_width).to be < after_width page.driver.browser.action.click_and_hold(toggle.native).perform
end
it 'shows dropdown caret when hovered' do find('.mini-pipeline-graph-dropdown-toggle')
toggle.hover active_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
active_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
active_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
page.driver.browser.action.release(toggle.native)
.move_by(100, 100)
.perform
find('.mini-pipeline-graph-dropdown-toggle')
focus_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
focus_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
focus_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
expect(default_background_color).not_to eq(hover_background_color)
expect(hover_background_color).not_to eq(active_background_color)
expect(default_background_color).not_to eq(active_background_color)
expect(default_foreground_color).not_to eq(hover_foreground_color)
expect(hover_foreground_color).not_to eq(active_foreground_color)
expect(default_foreground_color).not_to eq(active_foreground_color)
expect(focus_background_color).to eq(hover_background_color)
expect(focus_foreground_color).to eq(hover_foreground_color)
expect(toggle).to have_selector('.fa-caret-down') expect(default_box_shadow).to eq('none')
expect(hover_box_shadow).to eq('none')
expect(active_box_shadow).not_to eq('none')
expect(focus_box_shadow).not_to eq('none')
end end
it 'shows tooltip when hovered' do it 'shows tooltip when hovered' do
......
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