Commit 27ff8cd3 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '215517-smooth-jazz' into 'master'

Add hover transitions for dag visualization

See merge request gitlab-org/gitlab!34869
parents 5b99e6e5 3838002b
......@@ -25,6 +25,11 @@ export default {
containerClasses: ['dag-graph-container', 'gl-display-flex', 'gl-flex-direction-column'].join(
' ',
),
hoverFadeClasses: [
'gl-cursor-pointer',
'gl-transition-duration-slow',
'gl-transition-timing-function-ease',
].join(' '),
},
gitLabColorRotation: [
'#e17223',
......@@ -230,7 +235,10 @@ export default {
.attr('id', d => {
return this.createAndAssignId(d, 'uid', LINK_SELECTOR);
})
.classed(`${LINK_SELECTOR} gl-cursor-pointer`, true);
.classed(
`${LINK_SELECTOR} gl-transition-property-stroke-opacity ${this.$options.viewOptions.hoverFadeClasses}`,
true,
);
},
generateNodes(svg, nodeData) {
......@@ -242,7 +250,10 @@ export default {
.data(nodeData)
.enter()
.append('line')
.classed(`${NODE_SELECTOR} gl-cursor-pointer`, true)
.classed(
`${NODE_SELECTOR} gl-transition-property-stroke ${this.$options.viewOptions.hoverFadeClasses}`,
true,
)
.attr('id', d => {
return this.createAndAssignId(d, 'uid', NODE_SELECTOR);
})
......
......@@ -100,3 +100,11 @@
.gl-pl-7 {
padding-left: $gl-spacing-scale-7;
}
.gl-transition-property-stroke-opacity {
transition-property: stroke-opacity;
}
.gl-transition-property-stroke {
transition-property: stroke;
}
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