Commit 607fb9b2 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '22089-show-full-job-name-on-hover-on-pipeline-graph' into 'master'

Add tooltip with jobs full name to pipelines graph

## What does this MR do?

This MR adds a tooltip to build items in the pipelines graph as some build names are truncated.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?

Some job names that are truncated need to be fully identified to avoid confusion.

## Screenshots (if relevant)

[Latest screenies here!](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6403#note_16968703).

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #22089

See merge request !6403
parents 2510345e f744a5c1
...@@ -369,10 +369,6 @@ ...@@ -369,10 +369,6 @@
&:hover { &:hover {
background-color: $gray-lighter; background-color: $gray-lighter;
.dropdown-menu-toggle {
background-color: transparent;
}
} }
&.playable { &.playable {
...@@ -402,6 +398,15 @@ ...@@ -402,6 +398,15 @@
} }
} }
.tooltip {
white-space: nowrap;
.tooltip-inner {
overflow: hidden;
text-overflow: ellipsis;
}
}
.ci-status-text { .ci-status-text {
width: 135px; width: 135px;
white-space: nowrap; white-space: nowrap;
...@@ -419,6 +424,7 @@ ...@@ -419,6 +424,7 @@
} }
.dropdown-menu-toggle { .dropdown-menu-toggle {
background-color: transparent;
border: none; border: none;
width: auto; width: auto;
padding: 0; padding: 0;
......
- is_playable = subject.playable? && can?(current_user, :update_build, @project) - is_playable = subject.playable? && can?(current_user, :update_build, @project)
- if is_playable - if is_playable
= link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
= render_status_with_link('build', 'play') = render_status_with_link('build', 'play')
.ci-status-text= subject.name .ci-status-text= subject.name
- elsif can?(current_user, :read_build, @project) - elsif can?(current_user, :read_build, @project)
= link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
%span.ci-status-icon %span.ci-status-icon
= render_status_with_link('build', subject.status) = render_status_with_link('build', subject.status)
.ci-status-text= subject.name .ci-status-text= subject.name
......
- group_status = CommitStatus.where(id: subject).status - group_status = CommitStatus.where(id: subject).status
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } %button.dropdown-menu-toggle.has-tooltip{ type: 'button', data: { toggle: 'dropdown', title: "#{name} - #{group_status}" } }
%span.ci-status-icon %span.ci-status-icon
= render_status_with_link('build', group_status) = render_status_with_link('build', group_status)
%span.ci-status-text %span.ci-status-text
......
- if subject.target_url %a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } }
= link_to subject.target_url do - if subject.target_url
= link_to subject.target_url do
%span.ci-status-icon
= render_status_with_link('commit status', subject.status)
%span.ci-status-text= subject.name
- else
%span.ci-status-icon %span.ci-status-icon
= render_status_with_link('commit status', subject.status) = render_status_with_link('commit status', subject.status)
%span.ci-status-text= subject.name %span.ci-status-text= subject.name
- else
%span.ci-status-icon
= render_status_with_link('commit status', subject.status)
%span.ci-status-text= subject.name
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