Use bootstrap for displaying progress widget

This commit converts the progress indication widget into a bootstrap
modal dialog, and updates the javascript to prevent the code from
interacting with bootstrap in unpredictable ways.

3 files changed, 37 insertions, 18 deletions

diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js
index 22dbda8..9638b36 100644
--- a/qc_app/static/js/upload_progress.js
+++ b/qc_app/static/js/upload_progress.js
@@ -40,7 +40,6 @@ function setup_cancel_upload(request, indicator_elt) {
 	"click", function(event) {
 	    event.preventDefault();
 	    request.abort();
-	    indicator_elt.setAttribute("class", "hidden");
 	});
 }
 
@@ -80,12 +79,10 @@ function make_data_uploader(setup_formdata) {
 	    }
 	    return false;
 	}
-	pindicator.setAttribute("class", "modal");
 	var formdata = setup_formdata(form);
 
 	document.getElementById("progress-filename").innerHTML = the_file.name;
-	var request = setup_request(
-	    the_file, document.getElementById("upload-progress-indicator"));
+	var request = setup_request(the_file, pindicator);
 	request.open(form.getAttribute("method"), form.getAttribute("action"));
 	request.send(formdata);
 	return false;
diff --git a/qc_app/templates/select_species.html b/qc_app/templates/select_species.html
index 35850de..b813248 100644
--- a/qc_app/templates/select_species.html
+++ b/qc_app/templates/select_species.html
@@ -57,7 +57,10 @@
 	     class="form-control"/>
     </div>
 
-    <button type="submit" class="btn btn-primary">upload file</button>
+    <button type="submit"
+            class="btn btn-primary"
+            data-toggle="modal"
+            data-target="#upload-progress-indicator">upload file</button>
   </form>
 </div>
 {%endblock%}
diff --git a/qc_app/templates/upload_progress_indicator.html b/qc_app/templates/upload_progress_indicator.html
index 9855c2d..e274e83 100644
--- a/qc_app/templates/upload_progress_indicator.html
+++ b/qc_app/templates/upload_progress_indicator.html
@@ -1,16 +1,35 @@
 {%macro upload_progress_indicator()%}
-<div id="upload-progress-indicator" class="hidden">
-  <h3>Uploading file</h3>
-  <p id="progress-filename">the-file</p>
-  <progress id="progress-bar" value="0" max="100">
-    0
-  </progress>
-  <p id="progress-text">Uploading 0%</p>
-  <p id="progress-extra-text">Processing</p>
-  <form id="frm-cancel-upload" style="border-style: none;">
-    <button id="btn-cancel-upload" type="submit" class="btn btn-danger">
-      Cancel
-    </button>
-  </form>
+<div id="upload-progress-indicator" class="modal fade" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title">Uploading file</h3>
+      </div>
+
+      <div class="modal-body">
+        <form id="frm-cancel-upload" style="border-style: none;">
+          <div class="form-group">
+            <span id="progress-filename" class="form-text">No file selected!</span>
+            <progress id="progress-bar" value="0" max="100" class="form-control">
+              0</progress>
+          </div>
+
+          <div class="form-group">
+            <span class="form-text text-muted" id="progress-text">
+              Uploading 0%</span>
+            <span class="form-text text-muted" id="progress-extra-text">
+              Processing</span>
+          </div>
+        </form>
+      </div>
+
+      <div class="modal-footer">
+        <button id="btn-cancel-upload"
+                type="button"
+                class="btn btn-danger"
+                data-dismiss="modal">Cancel</button>
+      </div>
+    </div>
+  </div>
 </div>
 {%endmacro%}