Commit 043cc819 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Annabel Dunstone Gray

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
...@@ -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;
This diff is collapsed.
-# 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)
...@@ -47,21 +47,18 @@ ...@@ -47,21 +47,18 @@
- 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.scrollable-menu
.js-builds-dropdown-list
.js-builds-dropdown-loading.builds-dropdown-loading.hidden
%span.fa.fa-spinner.fa-spin
.js-builds-dropdown-loading.builds-dropdown-loading.hidden
%span.fa.fa-spinner.fa-spin
%td %td
- if pipeline.duration - if pipeline.duration
......
%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
...@@ -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
---
title: Fixes and Improves CSS and HTML problems in mini pipeline graph and builds dropdown
merge_request: 8443
author:
...@@ -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
......
...@@ -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