Commit 3e949356 authored by Sarah Groff Hennigh-Palermo's avatar Sarah Groff Hennigh-Palermo Committed by Mike Greiling

Initial pass for tooltip changes

Makes changes for truncation and combines the two related CSS classes.
Applies new tooltip comp as close as possible to the span for testing.
parent b1ab2cfd
...@@ -57,6 +57,9 @@ export default { ...@@ -57,6 +57,9 @@ export default {
}, },
}, },
computed: { computed: {
boundary() {
return this.dropdownLength === 1 ? 'viewport' : 'scrollParent';
},
status() { status() {
return this.job && this.job.status ? this.job.status : {}; return this.job && this.job.status ? this.job.status : {};
}, },
...@@ -104,7 +107,7 @@ export default { ...@@ -104,7 +107,7 @@ export default {
<div class="ci-job-component"> <div class="ci-job-component">
<gl-link <gl-link
v-if="status.has_details" v-if="status.has_details"
v-gl-tooltip v-gl-tooltip="{ boundary, placement: 'bottom' }"
:href="status.details_path" :href="status.details_path"
:title="tooltipText" :title="tooltipText"
:class="cssClassJobName" :class="cssClassJobName"
...@@ -115,7 +118,7 @@ export default { ...@@ -115,7 +118,7 @@ export default {
<div <div
v-else v-else
v-gl-tooltip v-gl-tooltip="{ boundary, placement: 'bottom' }"
:title="tooltipText" :title="tooltipText"
:class="cssClassJobName" :class="cssClassJobName"
class="js-job-component-tooltip non-details-job-component" class="js-job-component-tooltip non-details-job-component"
......
...@@ -27,7 +27,8 @@ export default { ...@@ -27,7 +27,8 @@ export default {
<template> <template>
<span class="ci-job-name-component"> <span class="ci-job-name-component">
<ci-icon :status="status" /> <ci-icon :status="status" />
<span class="ci-status-text text-truncate mw-70p gl-pl-1 d-inline-block align-bottom">
<span class="ci-status-text"> {{ name }} </span> {{ name }}
</span>
</span> </span>
</template> </template>
...@@ -428,6 +428,7 @@ img.emoji { ...@@ -428,6 +428,7 @@ img.emoji {
.mw-460 { max-width: 460px; } .mw-460 { max-width: 460px; }
.mw-6em { max-width: 6em; } .mw-6em { max-width: 6em; }
.mw-70p { max-width: 70%; }
.min-height-0 { min-height: 0; } .min-height-0 { min-height: 0; }
......
...@@ -712,15 +712,9 @@ ...@@ -712,15 +712,9 @@
top: 8px; top: 8px;
} }
.ci-build-text,
.ci-status-text { .ci-status-text {
max-width: 110px; font-weight: 200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
display: inline-block;
position: relative;
font-weight: $gl-font-weight-normal;
} }
@mixin mini-pipeline-graph-color( @mixin mini-pipeline-graph-color(
...@@ -912,26 +906,6 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -912,26 +906,6 @@ button.mini-pipeline-graph-dropdown-toggle {
flex: 1; flex: 1;
} }
// build name
.ci-build-text,
.ci-status-text {
font-weight: 200;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 70%;
margin-left: 2px;
display: inline-block;
&::after {
content: '';
display: block;
}
@include media-breakpoint-down(xs) {
max-width: 60%;
}
}
.ci-status-icon { .ci-status-icon {
@extend .append-right-8; @extend .append-right-8;
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
- if status.has_details? - if status.has_details?
= link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do
%span{ class: klass }= sprite_icon(status.icon) %span{ class: klass }= sprite_icon(status.icon)
%span.ci-build-text= subject.name %span.ci-build-text.text-truncate.mw-70p.gl-pl-1= subject.name
- else - else
.menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } } .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
%span{ class: klass }= sprite_icon(status.icon) %span{ class: klass }= sprite_icon(status.icon)
%span.ci-build-text= subject.name %span.ci-build-text.text-truncate.mw-70p.gl-pl-1= subject.name
- if status.has_action? - if status.has_action?
= link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do = link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
......
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