Possible improvement based on issue #74. Moves gating related buttons…

… and adds download of graph image.
Keesaco · May 1, 2014 · 182fcfe · 182fcfe
1 parent be8a566
commit 182fcfe
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/app/static/css/app.css b/app/static/css/app.css
@@ -404,9 +404,14 @@ a.edit-dropdown-button:hover
 }
 
 /* leave space arround action buttons on the app page*/
-.action-btn-group
+.gating-btn-group
 {
-	padding: 20px;
+	padding: 10px 161px 0px 161px;
+}
+
+.download-btn-group
+{
+	padding: 10px 10px 10px 10px;
 }
 
 /* contains the app page's main elements */
@@ -456,22 +461,22 @@ a.edit-dropdown-button:hover
 
 .gate-options
 {
-	padding: 0px 20px 20px 20px;
+	padding: 10px 10px 10px 10px;
 }
 
 .gating-heading
 {
-	padding: 0px 20px 0px 20px;
+	padding: 10px 10px 10px 10px;
 }
 
 .gating-description
 {
 	max-width: 500px;
-	padding: 0px 20px 0px 20px;
+	padding: 0px 10px 10px 10px;
 }
 
 #gating-stats {
 	font-weight: bold;
-	padding: 0px 20px 0px 20px;
+	padding: 0px 10px 10px 10px;
 	color: gray;
 }
diff --git a/app/templates/file_preview.html b/app/templates/file_preview.html
@@ -11,7 +11,11 @@
 				<p id="tool-popover-title" class="greybox"></p>
 			</div>
 			<canvas id="flow-canvas" class="over-graph" width="480px" height="480px">
-			</canvas> 
+			</canvas> 	
+		</div>
+		<div class="btn-group btn-group-lg gating-btn-group">
+			<button type="button" class="btn" id="request-gating-btn" disabled>Gate&nbsp;</button>
+			<button type="button" class="btn" id="reset-tool-btn">Reset</button>
 		</div>
 	</div>	
 	<div class="well app-well">
@@ -26,10 +30,13 @@ <h3 id="filename"><span id="file-name-label">{{ file_info.friendly_name }}</span
 			<div id="gating-stats">Cell count (selection/total): {{gating_stats.selection}}/{{gating_stats.total}} ({{gating_stats.percent}}%)</div>
 		{% endif %}
 		<div id="scrapename" style="display: none;"> {{ name }} </div>
-		<div class="btn-group btn-group-lg action-btn-group">
-			<button type="button" class="btn btn-download"><a href="{% url get_dataset current_file.filename %}">Download</a></button>
-		  	<button type="button" class="btn" id="request-gating-btn" disabled>Gate</button>
-		  	<button type="button" class="btn" id="reset-tool-btn">Reset</button>
+		<div class="btn-group btn-group-lg download-btn-group">
+			<button type="button" class="btn btn-download"><a href="{% url get_dataset current_file.filename %}">Download Dataset</a></button>
+			{% if graph_ready %}
+				<button type="button" class="btn btn-download"><a href="{% url get_graph name %}">Download Graph</a></button>
+			{% else %}
+				<button type="button" class="btn btn-download" disabled>Download Graph</button>
+			{% endif %}
 		</div>
 		<div class="gate-options">
 			<label><input type="checkbox" id="chk_reverse_gate" /> Reverse gate</labeL><br />