Addressing issue #12 by forcing uniform jquery-ui widget style; impro…

…ved download button
VariantEffect · May 3, 2018 · 8c41a8c · 8c41a8c
1 parent a24a13a
commit 8c41a8c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 21 deletions.
diff --git a/docker/cgi/index.html b/docker/cgi/index.html
@@ -17,28 +17,30 @@
 	</p>
 
 	<div class="main">
-		<div class="box" id="controlpanel">
+		<div class="box widget" id="controlpanel">
 			<h3>Create Genophenogram</h3>
 			<p><a title="Search for a Protein or other molecule by name">
 				<label class="left" for="molecule">Score set</label>
-				<input id="molecule" type="text" name="molecule"/>
+				<input id="molecule" class="ui-corner-all" type="text" name="molecule"/>
 			</a></p>
 			<p id="uniprotOptions"><a title="The Uniprot accession for the selected protein">
 				<label class="left" for="uniprot">Uniprot Acc</label>
-				<input id="uniprot" type="text" name="uniprot"/>
+				<input id="uniprot" class="ui-corner-all" type="text" name="uniprot"/>
 			</a></p>
 			<p id="pdbOptions"><a title="PDB structure accessions and chain IDs">
 				<label class="left" for="pdb">PDB structures</label>
-				<input type="text" name="pdb" id="pdb" style="width:110px;" disabled/>
+				<input class="ui-corner-all" type="text" name="pdb" id="pdb" style="width:100px;" disabled/>
 				<button id="pdbButton">Browse</button>
 			</a></p>
-			<p id="synOptions"><a title="Typical score of a synonymous or WT-like variant">
+			<p id="synOptions"><a title="Please provide the typical score of a synonymous or WT-like variant">
 				<label class="left" for="synMed">WT-like score</label>
-						<input id="synMed" type="number" name="synMed" value="1" step="0.01"/>
+				<input id="synMed" class="ui-corner-all" type="number" name="synMed" value="1" step="0.01"/>
+				<span class="ui-icon ui-icon-info"></span>
 			</a></p>
-			<p id="stopOptions"><a title="Typical score of a nonsense/stop variant">
+			<p id="stopOptions"><a title="Please provide the typical score of a nonsense/stop variant">
 				<label class="left" for="stopMed">Null-like score</label>
-						<input id="stopMed" type="number" name="stopMed" value="0" step="0.01"/>
+				<input id="stopMed" class="ui-corner-all" type="number" name="stopMed" value="0" step="0.01"/>
+				<span class="ui-icon ui-icon-info"></span>
 			</a></p>
 			<div class="buttonbar">
 				<button id="resetButton">Reset</button>
@@ -54,17 +56,24 @@ <h3>Create Genophenogram</h3>
 				<div class="passepartoutImg" id="imagepanel">
 
 				</div>
-				<div id="downloadpanel">
-					<form method="POST" action="fetch.R" target="_blank">
+				<div id="downloadpanel" class="widget">
+					<form method="POST" action="fetch.R" target="_blank" id="dlform">
 						<input type="hidden" id="jobIDHolder" name="jobID" value="">
-						Download:
+						<div class="controlgroup">
+							<button id="downloadbutton">Download</button>
+							<select id="downloadselect" name="format">
+								<option>pdf</option>
+								<option>png</option>
+							</select>
+						</div>
+						<!-- Download:
 						<input type="submit" id="pdfbutton" name="format" value="pdf"/>
-						<input type="submit" id="pngbutton" name="format" value="png"/>
+						<input type="submit" id="pngbutton" name="format" value="png"/> -->
 					</form>
 				</div>
 			</div>
-			<div class="box" id="consolepanel">
-				<div class="passepartoutCons" style="">
+			<div class="box" id="consolepanel" style="display:none;">
+				<div class="passepartoutCons">
 					<pre id="console"></pre><span class="blink" style="color: white;">&#9646;</span>
 				</div>
 			</div>

diff --git a/docker/cgi/mavevis.js b/docker/cgi/mavevis.js
@@ -61,7 +61,8 @@ $(document).ready(function(){
 			if (pdbIDs && pdbMainChains) {
 
 				//enable the submit button
-				$("#submitButton").prop('disabled', false);
+				// $("#submitButton").prop('disabled', false);
+				$("#submitButton").button("enable");
 
 			}
 		}
@@ -83,7 +84,8 @@ $(document).ready(function(){
 	 */ 
 	function resetMost() {
 
-		$("#submitButton").prop('disabled', true);
+		$("#submitButton").button("disable");
+		// $("#submitButton").prop('disabled', true);
 		$("#outputpanel").hide();
 
 		$("#uniprot").val("");
@@ -106,9 +108,6 @@ $(document).ready(function(){
 		offset=0;
 	}
 
-	//reset is essentially also the same as initializing everything.
-	reset();
-
 	$("#resetButton").click(reset);
 
 	$("#submitButton").click(submit);
@@ -442,4 +441,27 @@ $(document).ready(function(){
 		}
 	});
 
+	/////////////////////////////
+	//CONFIGURE DOWNLOAD BUTTON//
+	/////////////////////////////
+
+	$("#downloadselect").selectmenu({
+		classes: {
+			"ui-selectmenu-button": "ui-button-icon-only splitbutton-select"
+		},
+		change: function(){
+			$("#dlform").submit();
+		}
+	});
+	$( ".controlgroup" ).controlgroup();
+	$( "#downloadbutton" ).click(function() {
+		$("#dlform").submit();
+	});
+
+	$( ".widget input[type=submit], .widget button" ).button();
+	// $( ".widget input[type=number]").spinner();
+
+	//reset is essentially also the same as initializing everything.
+	reset();
+
 });
diff --git a/docker/cgi/style.css b/docker/cgi/style.css
@@ -68,8 +68,8 @@ label.left {
 
 #controlpanel {
 	float: left;
-	width:300px;
-	min-width:300px;
+	width:350px;
+	min-width:350px;
 }
 
 #right {
@@ -107,6 +107,12 @@ textarea {
   max-width:260px;
 }
 
+input[type=text] {
+	/*height:25px;*/
+	padding: 5px;
+	max-width: 180px;
+}
+
 details {
 	border: 1px dotted #aaaaaa;
 	padding: 10px;
@@ -127,6 +133,7 @@ input,textarea {
 
 input[type=number]{
     width: 40px;
+    padding: 5px;
 } 
 
 .buttonbar {
@@ -180,6 +187,11 @@ input[type=number]{
   background: white url("images/spinner_16x16.gif") right center no-repeat;
 }
 
+.ui-button-icon-only.splitbutton-select {
+	width: 1em;
+	max-width:1em;
+}
+
 @keyframes blinker {
   50% {
     opacity: 0;