External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Ellipsis workflow node names that are too long to fit on the node

Browse Source
This commit is contained in:
mabashian
2019-12-02 14:21:58 -05:00
parent 61c38eabf8
commit 2506db88f2
1 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Graph.jsx
View File

@@ -10,7 +10,7 @@ import WorkflowHelpDetails from './WorkflowHelpDetails';
const SVG = styled.svg` const SVG = styled.svg`
display: flex; display: flex;
height: 100%; height: 100%;
background-color: #F6F6F6; background-color: #f6f6f6;
.WorkflowChart-tooltip { .WorkflowChart-tooltip {
padding-left: 5px; padding-left: 5px;
@@ -36,34 +36,36 @@ const SVG = styled.svg`
} }
.WorkflowChart-action--add:hover { .WorkflowChart-action--add:hover {
background-color: #58B957; background-color: #58b957;
} }
.WorkflowChart-action--edit:hover,.WorkflowChart-action--link:hover,.WorkflowChart-action--details:hover { .WorkflowChart-action--edit:hover,
background-color: #0279BC; .WorkflowChart-action--link:hover,
.WorkflowChart-action--details:hover {
background-color: #0279bc;
} }
.WorkflowChart-action--delete:hover { .WorkflowChart-action--delete:hover {
background-color: #D9534F; background-color: #d9534f;
} }
.WorkflowChart-tooltipArrows { .WorkflowChart-tooltipArrows {
width 10px; width: 10px;
} }
.WorkflowChart-tooltipArrows--outer { .WorkflowChart-tooltipArrows--outer {
position:absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 10px);
width: 0; width: 0;
height: 0; height: 0;
border-right: 10px solid #C4C4C4; border-right: 10px solid #c4c4c4;
border-top: 10px solid transparent; border-top: 10px solid transparent;
border-bottom: 10px solid transparent; border-bottom: 10px solid transparent;
margin: auto; margin: auto;
} }
.WorkflowChart-tooltipArrows--inner { .WorkflowChart-tooltipArrows--inner {
position:absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 10px);
left: 6px; left: 6px;
width: 0; width: 0;
@@ -76,7 +78,7 @@ const SVG = styled.svg`
.WorkflowChart-tooltipActions { .WorkflowChart-tooltipActions {
background-color: white; background-color: white;
border: 1px solid #C4C4C4; border: 1px solid #c4c4c4;
border-radius: 2px; border-radius: 2px;
padding: 5px; padding: 5px;
} }
@@ -84,6 +86,18 @@ const SVG = styled.svg`
.WorkflowChart-tooltipContents { .WorkflowChart-tooltipContents {
display: flex; display: flex;
} }
.WorkflowChart-nameText {
font-size: 13px;
padding: 0px 10px;
text-align: center;
p {
margin-top: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
`; `;
function Graph({ links, nodes, readOnly, i18n }) { function Graph({ links, nodes, readOnly, i18n }) {
@@ -487,20 +501,17 @@ function Graph({ links, nodes, readOnly, i18n }) {
}); });
nodeRef nodeRef
.append('text') .append('foreignObject')
.attr('x', () => { .attr('width', nodeW)
return nodeW / 2; .attr('height', nodeH)
}) .attr('class', 'WorkflowChart-nameText')
.attr('y', () => { .html(
return nodeH / 2; d =>
}) `<p>${
.attr('dy', '.35em') d.unifiedJobTemplate
.attr('text-anchor', 'middle') ? d.unifiedJobTemplate.name
.attr('class', 'WorkflowChart-defaultText WorkflowChart-nameText') : i18n._(t`DELETED`)
.text(d => }</p>`
d.unifiedJobTemplate && d.unifiedJobTemplate.name
? d.unifiedJobTemplate.name
: 'NO NAME'
); );
nodeRef nodeRef