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%;
}
#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 */
.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 id="big-graph"></div>
<div id="big-graph-controls">
<div id="big-graph-checkboxes"></div>
<button onclick="setAllGraphVisibility(true);">Show All</button>
<button onclick="setAllGraphVisibility(false);">Hide All</button>
<div id="big-graph-controls" style="display: none;">
<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>

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