Fancy controls
This commit is contained in:
parent
8e999cee1b
commit
a426a6afa2
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user