diff options
| author | Filipa Lacerda <filipa@gitlab.com> | 2017-01-04 11:48:48 +0000 |
|---|---|---|
| committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-01-05 10:01:50 -0600 |
| commit | 043cc8196e41a3b44301f1ae093bb5cd6b4ebc82 (patch) | |
| tree | dcac8812d01b2eac3021e87a898aec46714fd83a /app/views/projects/ci | |
| parent | d2608ce042ce6a112ccc26aef0a74d1a6ef40d7f (diff) | |
| download | gitlab-ce-043cc8196e41a3b44301f1ae093bb5cd6b4ebc82.tar.gz | |
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
Diffstat (limited to 'app/views/projects/ci')
| -rw-r--r-- | app/views/projects/ci/pipelines/_pipeline.html.haml | 23 |
1 files changed, 10 insertions, 13 deletions
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index e67492a36d1..aaf1b428178 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -47,21 +47,18 @@ - icon_status = "#{detailed_status.icon}_borderless" - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}" - .stage-container.mini-pipeline-graph - .dropdown.inline.build-content - %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) } } - %span.has-tooltip{ class: status_klass } - %span.mini-pipeline-graph-icon-container - %span{ class: status_klass }= custom_icon(icon_status) - = icon('caret-down', class: 'dropdown-caret') + .stage-container.dropdown.js-mini-pipeline-graph + %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) } } + = custom_icon(icon_status) + = icon('caret-down') - .js-builds-dropdown-container - .dropdown-menu.grouped-pipeline-dropdown - .arrow-up - .js-builds-dropdown-list + %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container + .arrow-up + .js-builds-dropdown-list.scrollable-menu + + .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 - if pipeline.duration |