Fancy controls

This commit is contained in:
Cryptkeeper 2015-12-18 18:49:18 -06:00
parent 8e999cee1b
commit a426a6afa2
3 changed files with 61 additions and 6 deletions

@ -192,7 +192,36 @@ h3 {
width: 100%; width: 100%;
} }
#big-graph-controls {
margin: 10px auto;
}
#big-graph-controls a {
text-decoration: none;
color: inherit;
text-transform: uppercase;
border-bottom: 1px dashed #FFF;
font-size: 16px;
}
#big-graph-controls a:hover {
border-bottom: 1px dashed transparent;
cursor: pointer;
}
/* Basic elements */ /* Basic elements */
.button { .button {
background: #3498db;
border-radius: 2px;
text-shadow: 0 0 0 #000;
width: 85px;
font-size: 16px;
padding: 5px 10px;
margin: 0 auto;
}
.button:hover {
background: #ecf0f1;
color: #3498db;
cursor: pointer;
} }

@ -35,12 +35,29 @@
</div> </div>
<div id="big-graph"></div> <div id="big-graph"></div>
<div id="big-graph-controls">
<div id="big-graph-checkboxes"></div>
<button onclick="setAllGraphVisibility(true);">Show All</button> <div id="big-graph-controls" style="display: none;">
<button onclick="setAllGraphVisibility(false);">Hide All</button>
<span style="text-align: center; display: block;">
<a onclick="toggleControlsDrawer();">Click to toggle graph controls</a>
</span>
<div id="big-graph-controls-drawer" style="display: none;">
<div id="big-graph-checkboxes"></div>
<br />
<span style="text-align: center; display: block; margin-bottom: 15px;">
<span onclick="setAllGraphVisibility(true);" class="button">Show All</span>
<span onclick="setAllGraphVisibility(false);" class="button">Hide All</span>
</span>
</div>
</div> </div>

@ -215,6 +215,12 @@ function setAllGraphVisibility(visible) {
historyPlot.draw(); historyPlot.draw();
} }
function toggleControlsDrawer() {
var div = $('#big-graph-controls-drawer');
div.css('display', div.css('display') !== 'none' ? 'none' : 'block');
}
$(document).ready(function() { $(document).ready(function() {
var socket = io.connect({ var socket = io.connect({
reconnect: true, reconnect: true,
@ -246,8 +252,10 @@ $(document).ready(function() {
$('#server-container').html(''); $('#server-container').html('');
$('#quick-jump-container').html(''); $('#quick-jump-container').html('');
$('#big-graph').html(''); $('#big-graph').html('');
$('#big-graph-checkboxes').html(''); $('#big-graph-checkboxes').html('');
$('#big-graph-controls').css('display', 'none');
}); });
socket.on('historyGraph', function(rawData) { socket.on('historyGraph', function(rawData) {
@ -277,6 +285,7 @@ $(document).ready(function() {
} }
$('#big-graph-checkboxes').append(html + '</tr></table>'); $('#big-graph-checkboxes').append(html + '</tr></table>');
$('#big-graph-controls').css('display', 'block');
}); });
socket.on('updateHistoryGraph', function(rawData) { socket.on('updateHistoryGraph', function(rawData) {