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

Remove animation from pipeline status icon buttons

Browse source 
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
This commit is contained in:
Nathan Friend 2019-01-17 09:43:03 -04:00
parent c184407ee1
commit 63e7b21f6e
No known key found for this signature in database
GPG key ID: 3D430247AEED8395
5 changed files with 107 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/pipelines/components/stage.vue
View file

@ -172,8 +172,6 @@ export default {
<span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events">
<icon :name="borderlessIcon" />
</span>
<i class="fa fa-caret-down" aria-hidden="true"> </i>
</button>
<div

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

@ -256,14 +256,25 @@
}
}
.mini-pipeline-graph-dropdown-toggle svg {
height: $ci-action-icon-size;
width: $ci-action-icon-size;
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
overflow: visible;
.mini-pipeline-graph-dropdown-toggle {
svg {
height: $ci-action-icon-size;
width: $ci-action-icon-size;
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
overflow: visible;
}
&:hover,
&:active,
&:focus {
svg {
top: -2px;
left: -2px;
}
}
}
.stage-container {
@ -293,7 +304,7 @@
width: 7px;
position: absolute;
right: -7px;
top: 10px;
top: 11px;
border-bottom: 2px solid $border-color;
}
}
@ -708,21 +719,43 @@
font-weight: $gl-font-weight-normal;
}
@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
border-color: $color-main;
color: $color-main;
@mixin mini-pipeline-graph-color(
$color-background-default,
$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,
&:focus,
&:active {
background-color: $color-light;
border-color: $color-dark;
color: $color-dark;
&:focus {
background-color: $color-background-hover-focus;
border-color: $color-foreground-hover-focus;
svg {
fill: $color-dark;
fill: $color-foreground-hover-focus;
}
}
&:active {
background-color: $color-background-active;
border-color: $color-foreground-active;
svg {
fill: $color-foreground-active;
}
}
&:focus {
box-shadow: 0 0 4px 1px $blue-300;
}
}
@mixin mini-pipeline-item() {
@ -734,26 +767,32 @@
height: $ci-action-icon-size;
margin: 0;
padding: 0;
transition: all 0.2s linear;
position: relative;
vertical-align: middle;
&:hover,
&:active,
&:focus {
outline: none;
border-width: 2px;
}
// Dropdown button animation in mini pipeline graph
&.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 {
@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-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 {
@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,
@ -761,42 +800,18 @@
&.ci-status-icon-disabled,
&.ci-status-icon-not-found,
&.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-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
button.mini-pipeline-graph-dropdown-toggle {
@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;
}
}
}
/**

1
app/views/shared/_mini_pipeline_graph.html.haml
View file

@ -7,7 +7,6 @@
.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) } }
= sprite_icon(icon_status)
= icon('caret-down')
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
%li.js-builds-dropdown-list.scrollable-menu

5
changelogs/unreleased/42769-remove-expansion-hover-animation-from-status-icon-buttons.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Remove expansion hover animation from pipeline status icon buttons
merge_request: 24268
author: Nathan Friend
type: changed

46
spec/features/merge_request/user_sees_mini_pipeline_graph_spec.rb
View file

@ -51,22 +51,52 @@ describe 'Merge request < User sees mini pipeline graph', :js do
first('.mini-pipeline-graph-dropdown-toggle')
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')
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
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
end
page.driver.browser.action.click_and_hold(toggle.native).perform
it 'shows dropdown caret when hovered' do
toggle.hover
find('.mini-pipeline-graph-dropdown-toggle')
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');")
expect(toggle).to have_selector('.fa-caret-down')
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(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
it 'shows tooltip when hovered' do