Merge pull request #84 from common-workflow-language/png-download

Add dropdown for png download option

Author: MarkRobbo

src/main/resources/static/js/workflow.js

@@ -28,14 +28,16 @@ requirejs.config({
         'jquery.svgdom': 'jquery-svg/jquery.svgdom.min',
         'bootstrap.modal': 'bootstrap/js/modal',
         'bootstrap.tooltip': 'bootstrap/js/tooltip',
+        'bootstrap.dropdown': 'bootstrap/js/dropdown',
         'svg-pan-zoom': 'svg-pan-zoom/dist/svg-pan-zoom.min',
         'hammerjs': 'hammerjs/hammer.min'
     },
     shim: {
         'jquery.svg': ['jquery'],
         'jquery.svgdom': ['jquery'],
         'bootstrap.modal': ['jquery'],
-        'bootstrap.tooltip': ['jquery']
+        'bootstrap.tooltip': ['jquery'],
+        'bootstrap.dropdown': ['jquery']
     }
 });
 
@@ -401,7 +403,7 @@ require(['jquery', 'jquery.svg', 'jquery.svgdom'],
 
     });
 
-require(['jquery', 'bootstrap.tooltip'],
+require(['jquery', 'bootstrap.tooltip', 'bootstrap.dropdown'],
     function ($) {
         // Alterative notation as only a single data-toggle attribute is allowed
         $('[data-tooltip="true"]').tooltip();

src/main/resources/templates/workflow.html

@@ -141,10 +141,17 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
     <div class="row">
         <div class="col-md-12">
             <div id="graph-menu" class="pull-right">
-                <a id="download-link-graph" href="" download="workflow.png"></a>
                 <strong>Graph: </strong>
                 <button id="view-dot" class="btn btn-primary" type="button" data-toggle="modal" data-target="#dotGraph">View DOT</button>
-                <a id="download-graph" class="btn btn-primary" type="button" th:href="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" download="graph.svg">Download Image</a>
+                <div class="btn-group">
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Download Image <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a id="download-graph" th:href="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" download="graph.svg">As .svg</a></li>
+                        <li><a id="download-graph" th:href="@{'/workflows/' + ${workflow.id} + '/graph/png'}" download="graph.png">As .png</a></li>
+                    </ul>
+                </div>
             </div>
         </div>
     </div>