zaubentrucker/muele-marlin
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add fieldsets and make them into tabs

Browse source
This commit is contained in:
Scott Lahteine 2015-02-05 20:28:39 -08:00
parent 56769ba4f8
commit b51204cc1c
3 changed files with 86 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
Marlin/configurator/css/configurator.css
View file

@ -12,7 +12,7 @@ p { width: 80%; color: #FF0; }
#help strong { color: #0DD; }
img { display: none; }
label, input, select, textarea { display: block; float: left; margin: 1px 0; }
label.newline, textarea { clear: both; }
label.newline, textarea, fieldset { clear: both; }
label { width: 130px; height: 1em; padding: 10px 480px 10px 1em; margin-right: -470px; text-align: right; }
input[type="text"], select { margin: 0.75em 0 0; }
input[type="checkbox"], input[type="radio"], input[type="file"] { margin: 1em 0 0; }
@ -26,3 +26,33 @@ h1, h2, h3, h4, h5, h6 { clear: both; }
h2 { margin: 0; padding: 1em 0 0; }
#serial_stepper { padding-top: 0.75em; display: block; float: left; }
#SERIAL_PORT { display: none; }
ul.tabs { display: inline; list-style: none; }
ul.tabs li { display: inline; }
ul.tabs li a,
ul.tabs li a.active:hover,
ul.tabs li a.active:active {
display: block;
float: left;
background: #666;
color: #CCC;
font-size: 150%;
border-radius: 0.25em 0.25em 0 0;
margin: 0 4px 0 0;
padding: 2px 4px;
text-decoration: none;
}
ul.tabs li a.active:link,
ul.tabs li a.active:visited {
background: #DDD;
color: #900;
cursor: default;
}
ul.tabs li a:hover,
ul.tabs li a:active {
background: #777;
color: #DDD;
}
fieldset { display: none; border: 1px solid #AAA; border-radius: 1em; }
fieldset legend { display: none; }

9
Marlin/configurator/index.html
View file

@ -19,10 +19,15 @@
<li><strong>HELP</strong> - This is the help region</li>
</ul>
<div id="tabs"></div>
<form id="config_form">
<label>Drop Files Here:</label><input type="file" id="file-upload" />
<fieldset id="machine">
<legend>Machine</legend>
<label class="newline">Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
<label>Baud Rate:</label><select name="BAUDRATE"></select>
@ -42,7 +47,10 @@
<label>PS Default Off:</label>
<input name="PS_DEFAULT_OFF" type="checkbox" value="1" checked />
</fieldset>
<fieldset id="temperature">
<legend>Temperature</legend>
<label class="newline">Temp Sensor 0:</label><select name="TEMP_SENSOR_0"></select>
<label class="newline">Temp Sensor 1:</label><select name="TEMP_SENSOR_1"></select>
<label class="newline">Temp Sensor 2:</label><select name="TEMP_SENSOR_2"></select>
@ -56,6 +64,7 @@
<label class="newline">Temp Residency Time (s):</label>
<input name="TEMP_RESIDENCY_TIME" type="text" size="3" maxlength="2" />
</fieldset>
<h2>Marlin/Configuration.h</h2>
<pre id="config_text" class="prettyprint linenums"></pre>

24
Marlin/configurator/js/configurator.js
View file

@ -75,6 +75,30 @@ var configuratorApp = (function(){
init: function() {
self = this; // a 'this' for use when 'this' is something else
// Make tabs for the fieldsets
var $fset = $('#config_form fieldset');
var $tabs = $('<ul>',{class:'tabs'}), ind = 1;
$('#config_form fieldset').each(function(){
var tabID = 'TAB'+ind;
$(this).addClass(tabID);
var $leg = $(this).find('legend');
var $link = $('<a>',{href:'#'+ind,id:tabID}).text($leg.text());
$tabs.append($('<li>').append($link));
$link.click(function(e){
e.preventDefault;
var ind = this.id;
$tabs.find('.active').removeClass('active');
$(this).addClass('active');
$fset.hide();
$fset.filter('.'+this.id).show();
return false;
});
ind++;
});
$tabs.appendTo('#tabs');
$('<br>',{class:'clear'}).appendTo('#tabs');
$tabs.find('a:first').trigger('click');
// Make a droppable file uploader
var $uploader = $('#file-upload');
var fileUploader = new BinaryFileUploader({