added dashboard setting to change theme #81
Costa Tsaousis (ktsaou) committed
Apr 3, 2016 at 15:44 UTC
bcb17630b524588af895e9947e87d4975f7bcd26
1 file changed
+66
-3
web/index.html
+66
-3
@@ -280,8 +280,43 @@
280
<!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
281
<!-- <script> netdataServer = "http://box:19999"; </script> -->
282
283
+ <!-- check which theme to use -->
284
+ <script>
285
+ function getTheme(def) {
286
+ var ret = null;
287
+
288
+ try {
289
+ if(typeof Storage !== "undefined" && typeof localStorage === 'object')
290
+ ret = localStorage.getItem('netdataTheme');
291
+ }
292
+ catch(error) {
293
+ ;
294
+ }
295
+
296
+ if(ret === null || ret === 'undefined') return def;
297
+ else return ret;
298
+ }
299
+ var netdataTheme = getTheme('slate');
300
+
301
+ function setTheme(theme) {
302
+ if(netdataTheme === theme)
303
+ return false;
304
+
305
+ try {
306
+ if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
307
+ localStorage.setItem('netdataTheme', theme);
308
+ return true;
309
+ }
310
+ }
311
+ catch(error) {
312
+ ;
313
+ }
314
+
315
+ return false;
316
+ }
317
+ </script>
318
+
319
<!-- load the dashboard manager - it will do the rest -->
284
- <script>var netdataTheme = 'slate';</script>
320
<script type="text/javascript" src="dashboard.js?v25"></script>
321
</head>
322
@@ -568,9 +603,11 @@
603
</div>
604
<div class="modal-body">
605
<center>
571
- <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
606
+ <small style="color: #BBBBBB;">These are browser settings. Each viewer has its own. They do not affect the operation of your netdata server.
607
+ <br/>
608
+ Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
609
<br/>
573
- To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
610
+ To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="resetDashboardOptions(); return false;">here</a>.</small>
611
</center>
612
<div style="padding: 10px;"></div>
613
@@ -657,6 +694,12 @@
694
<form id="optionsForm" method="get" class="form-horizontal">
695
<div class="form-group">
696
<table>
697
+ <tr class="option-row">
698
+ <td class="option-control"><input id="netdata_theme_control" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="Dark" data-off="White" data-width="110px"></td>
699
+ <td class="option-info"><strong>Which theme to use?</strong><br/>
700
+ <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.</small>
701
+ </td>
702
+ </tr>
703
<tr class="option-row">
704
<td class="option-control"><input id="pan_and_zoom_data_padding" type="checkbox" checked data-toggle="toggle" data-on="Pad" data-off="Don't Pad" data-width="110px"></td>
705
<td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
@@ -1587,6 +1630,12 @@ function finalizePage() {
1630
}
1631
}
1632
1633
+ var theme_sync_option = function(option) {
1634
+ var self = $('#' + option);
1635
+
1636
+ self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
1637
+ }
1638
+
1639
sync_option('eliminate_zero_dimensions');
1640
sync_option('destroy_on_hide');
1641
sync_option('parallel_refresher');
@@ -1596,6 +1645,7 @@ function finalizePage() {
1645
sync_option('stop_updates_when_focus_is_lost');
1646
sync_option('smooth_plot');
1647
sync_option('pan_and_zoom_data_padding');
1648
+ theme_sync_option('netdata_theme_control');
1649
1650
if(NETDATA.getOption('parallel_refresher') === false) {
1651
$('#concurrent_refreshes_row').hide();
@@ -1617,12 +1667,25 @@ function finalizePage() {
1667
$('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1668
$('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
1669
1670
+ // this has to be the last
1671
+ // it reloads the page
1672
+ $('#netdata_theme_control').change(function() {
1673
+ if(setTheme($(this).prop('checked')?'slate':'default'))
1674
+ location.reload();
1675
+ });
1676
+
1677
if(document.location.hostname === demo_hostname)
1678
setTimeout(function() {
1679
$('#welcomeModal').modal();
1680
}, 1000);
1681
}
1682
1683
+function resetDashboardOptions() {
1684
+ NETDATA.resetOptions();
1685
+ if(setTheme('slate'))
1686
+ location.reload();
1687
+}
1688
+
1689
downloadAllCharts();
1690
1691
</script>