Skip to content

Commit

Permalink
Restyled SVG DAG so that border is not exported.
Browse files Browse the repository at this point in the history
The border has been added to a div around the SVG so that it is not
exported when clicking on the Download button. The SVG width has also
been modified to a percentage, so that it will fit within the window
when the browser is resized.
  • Loading branch information
neomorphic committed Aug 18, 2015
1 parent 0b43678 commit dc22c32
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 10 deletions.
4 changes: 3 additions & 1 deletion css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,10 @@ table.datainstances {

/* dagre-d3 */

.dag svg {
.dag div {
width:90%;
border: 1px solid #ccc;
margin: auto;
}
.dag {
text-align: center;
Expand Down
22 changes: 13 additions & 9 deletions js/components/RepoDAG.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -319,15 +319,19 @@ var RepoDAG = React.createClass({
render: function() {
return (
<div>
<h4>Version DAG <small> (Nodes with thick borders are locked.)</small></h4>
Mouse over a node to view the log. Click on blue nodes to expand/collapse. Shift + click nodes to navigate to repo.
<div>
<button className="btn btn-default" onClick={this.downloadSVGHandler}>Download DAG as SVG</button>
<button className="btn btn-default" onClick={this.fitDAG}>Fit graph to window</button>
<button className="btn btn-default" onClick={this.expandGraph}>Expand graph</button>
<button className="btn btn-default" onClick={this.collapseGraph}>Collapse graph</button>
</div>
<div className="dag"><svg width="1000" height="500" ref="DAGimage"><g/></svg> </div>
<h4>Version DAG <small> (Nodes with thick borders are locked.)</small></h4>
Mouse over a node to view the log. Click on blue nodes to expand/collapse. Shift + click nodes to navigate to repo.
<div>
<button className="btn btn-default" onClick={this.downloadSVGHandler}>Download DAG as SVG</button>
<button className="btn btn-default" onClick={this.fitDAG}>Fit graph to window</button>
<button className="btn btn-default" onClick={this.expandGraph}>Expand graph</button>
<button className="btn btn-default" onClick={this.collapseGraph}>Collapse graph</button>
</div>
<div className="dag">
<div>
<svg width="100%" height="500" ref="DAGimage"><g/></svg>
</div>
</div>
</div>
);
}
Expand Down

0 comments on commit dc22c32

Please sign in to comment.