Skip to content

G
gitlab-ce
Commit 043cc819 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Annabel Dunstone Gray
Browse files
Options

Simplify HTML of mini pipeline graph and dropdown 

Creates individual html for dropdown
Adds simplified  CSS for the new dropdown
Removes old CSS
Improves dropdown item in Chrome, Firefox and Safari
Use SCSS variables for colors.
Fix scss linter errors
Adds animation when the stage is hovered.
Adds back tooltip on dropdown toggle
Fixes broken tests
additional css changes to get more into direction of mockups
parent d2608ce0
Show whitespace changes
Inline Side-by-side
Showing with 269 additions and 268 deletions
app/assets/stylesheets/framework/variables.scss
View file @ 043cc819
...@@ -525,3 +525,4 @@ Pipeline Graph ...@@ -525,3 +525,4 @@ Pipeline Graph
*/ */
$stage-hover-bg: #eaf3fc; $stage-hover-bg: #eaf3fc;
$stage-hover-border: #d1e7fc; $stage-hover-border: #d1e7fc;
$action-icon-color: #d6d6d6;
app/assets/stylesheets/pages/pipelines.scss
View file @ 043cc819
...@@ -177,12 +177,13 @@ ...@@ -177,12 +177,13 @@
.stage-cell { .stage-cell {
font-size: 0; font-size: 0;
svg { > .stage-container > button > svg {
height: 18px; height: 22px;
width: 18px; width: 22px;
position: relative; position: absolute;
top: -1px;
left: -1px;
z-index: 2; z-index: 2;
vertical-align: middle;
overflow: visible; overflow: visible;
} }
...@@ -200,7 +201,7 @@ ...@@ -200,7 +201,7 @@
content: ''; content: '';
width: 8px; width: 8px;
position: absolute; position: absolute;
right: -7px; right: -8px;
top: 10px; top: 10px;
border-bottom: 2px solid $border-color; border-bottom: 2px solid $border-color;
} }
...@@ -470,6 +471,47 @@ ...@@ -470,6 +471,47 @@
white-space: normal; white-space: normal;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
// Action Icons in big pipeline-graph nodes
> .ci-action-icon-container .ci-action-icon-wrapper {
i {
color: $border-color;
border-radius: 100%;
border: 1px solid $border-color;
padding: 5px 6px;
font-size: 13px;
background: $white-light;
height: 30px;
width: 30px;
&::before {
position: relative;
top: 3px;
left: 3px;
}
&:hover {
color: $gl-text-color;
background-color: $stage-hover-bg;
border: 1px solid $stage-hover-bg;
}
}
.ci-play-icon {
padding: 5px 5px 5px 7px;
}
}
> .ci-action-icon-container {
position: absolute;
right: 5px;
top: 5px;
}
.ci-status-icon svg {
height: 20px;
width: 20px;
}
.dropdown-menu-toggle { .dropdown-menu-toggle {
background-color: transparent; background-color: transparent;
border: none; border: none;
...@@ -504,16 +546,6 @@ ...@@ -504,16 +546,6 @@
} }
} }
> .ci-action-icon-container {
position: absolute;
right: 5px;
top: 5px;
}
.ci-status-icon svg {
height: 20px;
width: 20px;
}
.arrow { .arrow {
&::before, &::before,
...@@ -596,29 +628,9 @@ ...@@ -596,29 +628,9 @@
} }
} }
} }
.grouped-pipeline-dropdown {
.dropdown-build {
.build-content {
width: 100%;
&:hover {
background-color: $stage-hover-bg;
color: $gl-text-color;
}
}
.ci-action-icon-container {
padding: 0;
font-size: 11px;
position: absolute;
top: 1px;
right: 8px;
}
}
}
} }
// Triggers the dropdown in the big pipeline graph
.dropdown-counter-badge { .dropdown-counter-badge {
color: $border-color; color: $border-color;
font-weight: 100; font-weight: 100;
...@@ -628,7 +640,8 @@ ...@@ -628,7 +640,8 @@
top: 8px; top: 8px;
} }
.grouped-pipeline-dropdown { // Dropdown in the big pipeline graph
.big-pipeline-graph-dropdown-menu {
padding: 0; padding: 0;
width: 195px; width: 195px;
min-width: 195px; min-width: 195px;
...@@ -636,56 +649,6 @@ ...@@ -636,56 +649,6 @@
right: -195px; right: -195px;
top: -4px; top: -4px;
box-shadow: 0 1px 5px $black-transparent; box-shadow: 0 1px 5px $black-transparent;
a {
display: inline-block;
}
.dropdown-build {
.build-content {
width: 100%;
&:hover {
background-color: $stage-hover-bg;
color: $gl-text-color;
}
}
.ci-action-icon-container {
padding: 0;
font-size: 11px;
position: absolute;
margin-top: 3px;
right: 7px;
}
}
ul {
max-height: 245px;
overflow: auto;
margin: 3px 0;
li {
margin: 4px 8px 4px 9px;
padding: 0;
line-height: 1.1;
position: relative;
.ci-action-icon-container:hover {
background-color: transparent;
}
.ci-status-icon {
position: relative;
top: 2px;
}
}
}
}
.pipeline-graph .dropdown-build .ci-status-icon svg {
width: 18px;
height: 18px;
} }
.ci-status-text { .ci-status-text {
...@@ -699,177 +662,217 @@ ...@@ -699,177 +662,217 @@
font-weight: 200; font-weight: 200;
} }
// Action Icons // Dropdown button in mini pipeline graph
.ci-action-icon-container .ci-action-icon-wrapper { .mini-pipeline-graph-dropdown-toggle {
i { border-radius: 100px;
color: $border-color; background-color: $white-light;
border-radius: 100%; border-width: 1px;
border: 1px solid $border-color; border-style: solid;
padding: 5px 6px; width: 22px;
font-size: 13px; height: 22px;
background: $white-light; margin: 0;
height: 30px; padding: 0;
width: 30px; transition: all 0.2s linear;
&::before {
position: relative; position: relative;
top: 3px;
left: 3px; > .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 { &:hover {
color: $gl-text-color; outline: none;
background-color: $stage-hover-bg; width: 35px;
border: 1px solid $stage-hover-bg;
}
}
.ci-play-icon { .fa.fa-caret-down {
padding: 5px 5px 5px 7px; visibility: visible;
opacity: 1;
} }
}
.dropdown-build {
color: $gl-text-color-secondary;
.build-content {
padding: 4px 7px 8px;
} }
.ci-action-icon-container { // Dropdown button animation in mini pipeline graph
padding: 0; &.ci-status-icon-success {
font-size: 11px; border-color: $gl-success;
float: right; color: $gl-success;
margin-top: 3px;
display: inline-block;
position: relative;
i { &:hover,
font-size: 11px; &:focus,
margin-top: 0; &:active {
background-color: rgba($gl-success, 0.1);
border-color: $gl-success;
} }
} }
.ci-action-icon-container { &.ci-status-icon-failed {
i { border-color: $gl-danger;
width: 24px; color: $gl-danger;
height: 24px;
&::before { &:hover,
top: 1px; &:focus,
left: 1px; &:active {
} background-color: rgba($gl-danger, 0.1);
border-color: $gl-danger;
} }
} }
.stage { &.ci-status-icon-pending,
max-width: 100px; &.ci-status-icon-success_with_warnings {
width: 100px; border-color: $gl-warning;
} color: $gl-warning;
.ci-status-icon svg { &:hover,
height: 18px; &:focus,
width: 18px; &:active {
background-color: rgba($gl-warning, 0.1);
border-color: $gl-warning;
} }
.ci-status-text {
max-width: 95px;
} }
}
/** &.ci-status-icon-running {
* Builds dropdown in mini pipeline border-color: $blue-normal;
*/ color: $blue-normal;
.mini-pipeline-graph {
.builds-dropdown {
background-color: transparent;
padding: 0;
color: $gl-text-color-secondary;
border: none;
margin: 0;
&:hover,
&:focus, &:focus,
&:hover { &:active {
outline: none; background-color: rgba($blue-normal, 0.1);
margin-right: -8px; border-color: $blue-normal;
}
}
.ci-status-icon { &.ci-status-icon-canceled,
width: 32px; &.ci-status-icon-disabled,
padding: 0 8px 0 0; &.ci-status-icon-not-found,
transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); &.ci-status-icon-manual {
border-color: $gl-text-color;
color: $gl-text-color;
+ .dropdown-caret { &:hover,
visibility: visible; &:focus,
opacity: 1; &:active {
} background-color: rgba($gl-text-color, 0.1);
border-color: $gl-text-color;
} }
} }
&.ci-status-icon-created,
&.ci-status-icon-skipped {
border-color: $gray-darkest;
color: $gray-darkest;
&:hover,
&:focus, &:focus,
&:active { &:active {
.ci-status-icon-success { background-color: rgba($gray-darkest, 0.1);
background-color: rgba($gl-success, .1); border-color: $gray-darkest;
} }
.ci-status-icon-failed {
background-color: rgba($gl-danger, .1);
} }
}
.ci-status-icon-pending, // dropdown content for big and mini pipeline
.ci-status-icon-success_with_warnings { .big-pipeline-graph-dropdown-menu,
background-color: rgba($gl-warning, .1); .mini-pipeline-graph-dropdown-menu {
} width: 195px;
max-width: 195px;
.ci-status-icon-running { li {
background-color: rgba($blue-normal, .1); padding: 2px 3px;
} }
.ci-status-icon-canceled, .scrollable-menu {
.ci-status-icon-disabled, max-height: 245px;
.ci-status-icon-not-found { overflow: auto;
background-color: rgba($gl-text-color, .1);
} }
.ci-status-icon-created, // Loading icon
.ci-status-icon-skipped { .builds-dropdown-loading {
background-color: rgba($gray-darkest, .1); margin: 0 auto;
} width: 20px;
} }
.mini-pipeline-graph-icon-container { // Action icon on the right
.dropdown-caret { a.ci-action-icon-wrapper {
font-size: 11px; color: $action-icon-color;
position: absolute; border: 1px solid $action-icon-color;
top: 6px; border-radius: 20px;
left: 20px; width: 22px;
margin-right: -6px; height: 22px;
z-index: 2; padding: 2px 0 0 5px;
visibility: hidden; cursor: pointer;
opacity: 0; float: right;
transition: visibility 0.1s, opacity 0.1s linear; margin: -26px 9px 0 0;
} font-size: 12px;
background-color: $white-light;
&:hover,
&:focus {
text-decoration: none;
color: $gl-text-color;
background-color: $stage-hover-bg;
border: 1px solid transparent;
} }
} }
.dropdown-build .build-content { // link to the build
padding: 3px 7px 7px; .mini-pipeline-graph-dropdown-item {
padding: 3px 7px 4px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
white-space: nowrap;
margin: 0 5px;
border-radius: 3px;
// build name
.ci-build-text {
font-weight: 200;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 90px;
color: $gl-text-color-secondary;
margin-left: 2px;
display: inline-block;
top: 1px;
vertical-align: text-bottom;
position: relative;
} }
.builds-dropdown-loading { // status icon on the left
margin: 10px auto; .ci-status-icon {
top: 3px;
position: relative;
> svg {
overflow: visible;
width: 18px; width: 18px;
height: 18px;
}
} }
.grouped-pipeline-dropdown { &:hover,
right: -172px; &:focus {
top: 23px; outline: none;
min-height: 50px; text-decoration: none;
color: $gl-text-color;
a { background-color: $stage-hover-bg;
color: $gl-text-color-secondary;
} }
} }
}
/**
* Top arrow in the dropdown in the mini pipeline graph
*/
.mini-pipeline-graph-dropdown-menu {
.arrow-up { .arrow-up {
&::before, &::before,
&::after { &::after {
...@@ -898,31 +901,8 @@ ...@@ -898,31 +901,8 @@
} }
/** /**
* Icons in mini pipeline graph * Terminal
*/ */
.mini-pipeline-graph-icon-container .ci-status-icon {
display: inline-block;
border: 1px solid;
border-radius: 22px;
margin-right: 1px;
width: 22px;
height: 22px;
position: relative;
z-index: 2;
transition: all 0.1s cubic-bezier(0.25, 0, 1, 1);
svg {
top: -1px;
left: -1px;
}
}
.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg {
width: 22px;
height: 22px;
}
.terminal-icon { .terminal-icon {
margin-left: 3px; margin-left: 3px;
} }
......
app/views/ci/status/_dropdown_graph_badge.html.haml 0 → 100644
View file @ 043cc819
-# Renders the content of each li in the dropdown
- subject = local_assigns.fetch(:subject)
- status = subject.detailed_status(current_user)
- klass = "ci-status-icon ci-status-icon-#{status.group}"
- tooltip = "#{subject.name} - #{status.label}"
- if status.has_details?
= link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip } do
%span{ class: klass }= custom_icon(status.icon)
%span.ci-build-text= subject.name
- else
.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } }
%span{ class: klass }= custom_icon(status.icon)
%span.ci-build-text= subject.name
- if status.has_action?
= link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title } do
= icon(status.action_icon, class: status.action_class)
app/views/projects/ci/pipelines/_pipeline.html.haml
View file @ 043cc819
...@@ -47,22 +47,19 @@ ...@@ -47,22 +47,19 @@
- icon_status = "#{detailed_status.icon}_borderless" - icon_status = "#{detailed_status.icon}_borderless"
- status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}" - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
.stage-container.mini-pipeline-graph .stage-container.dropdown.js-mini-pipeline-graph
.dropdown.inline.build-content %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_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } }
%button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } } = custom_icon(icon_status)
%span.has-tooltip{ class: status_klass } = icon('caret-down')
%span.mini-pipeline-graph-icon-container
%span{ class: status_klass }= custom_icon(icon_status)
= icon('caret-down', class: 'dropdown-caret')
.js-builds-dropdown-container %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up .arrow-up
.js-builds-dropdown-list .js-builds-dropdown-list.scrollable-menu
.js-builds-dropdown-loading.builds-dropdown-loading.hidden .js-builds-dropdown-loading.builds-dropdown-loading.hidden
%span.fa.fa-spinner.fa-spin %span.fa.fa-spinner.fa-spin
%td %td
- if pipeline.duration - if pipeline.duration
%p.duration %p.duration
......
app/views/projects/pipelines/_stage.html.haml
View file @ 043cc819
%ul - @stage.statuses.latest.each do |status|
- @stage.statuses.latest.each do |status| %li
%li.dropdown-build = render 'ci/status/dropdown_graph_badge', subject: status
= render 'ci/status/graph_badge', subject: status
app/views/projects/stage/_in_stage_group.html.haml
View file @ 043cc819
...@@ -5,9 +5,10 @@ ...@@ -5,9 +5,10 @@
%span.ci-status-text %span.ci-status-text
= name = name
%span.dropdown-counter-badge= subject.size %span.dropdown-counter-badge= subject.size
.dropdown-menu.grouped-pipeline-dropdown
%ul.dropdown-menu.big-pipeline-graph-dropdown-menu.js-grouped-pipeline-dropdown
.arrow .arrow
%ul .scrollable-menu
- subject.each do |status| - subject.each do |status|
%li.dropdown-build %li
= render 'ci/status/graph_badge', subject: status = render 'ci/status/dropdown_graph_badge', subject: status
changelogs/unreleased/pipelines-graph-html-css.yml 0 → 100644
View file @ 043cc819
---
title: Fixes and Improves CSS and HTML problems in mini pipeline graph and builds dropdown
merge_request: 8443
author:
spec/features/projects/pipelines/pipelines_spec.rb
View file @ 043cc819
...@@ -183,7 +183,7 @@ describe 'Pipelines', :feature, :js do ...@@ -183,7 +183,7 @@ describe 'Pipelines', :feature, :js do
it 'should render a mini pipeline graph' do it 'should render a mini pipeline graph' do
endpoint = stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: build.name) endpoint = stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: build.name)
expect(page).to have_selector('.mini-pipeline-graph') expect(page).to have_selector('.js-mini-pipeline-graph')
expect(page).to have_selector(".js-builds-dropdown-button[data-stage-endpoint='#{endpoint}']") expect(page).to have_selector(".js-builds-dropdown-button[data-stage-endpoint='#{endpoint}']")
end end
...@@ -201,7 +201,7 @@ describe 'Pipelines', :feature, :js do ...@@ -201,7 +201,7 @@ describe 'Pipelines', :feature, :js do
wait_for_ajax wait_for_ajax
find('a.ci-action-icon-container').trigger('click') find('a.js-ci-action-icon').trigger('click')
expect(page).not_to have_content('Cancel running') expect(page).not_to have_content('Cancel running')
end end
end end
......
spec/views/projects/pipelines/show.html.haml_spec.rb
View file @ 043cc819
...@@ -29,7 +29,7 @@ describe 'projects/pipelines/show' do ...@@ -29,7 +29,7 @@ describe 'projects/pipelines/show' do
render render
expect(rendered).to have_css('.js-pipeline-graph') expect(rendered).to have_css('.js-pipeline-graph')
expect(rendered).to have_css('.grouped-pipeline-dropdown') expect(rendered).to have_css('.js-grouped-pipeline-dropdown')
# stages # stages
expect(rendered).to have_text('Build') expect(rendered).to have_text('Build')
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7