WebUI - Improved "dark" theme (#11417)

* -Real dark mode, (themed bootstrap)
-removed inverted colors in navbar

* Test data

* FIX: navbar in mono theme.

* Dark mode rrdtool

* Changed background on gridster to match background of the dark theme

* - Icons and links now are grey
- Modernized tabs style into pills,
- button pagemenu-selected fixed

* Improvements:
- bootgrid-th, are now visible (dark mode to the table headings)
- Changed line color of poller and ping in rrdtool

* Fix some codeclimate errors

* Fix airos.snmprec, reverted to original file
This commit is contained in:
Facundo Caselles
2020-05-21 21:04:54 -03:00
committed by GitHub
parent bffa46f34a
commit 2f86c66afa
6 changed files with 7222 additions and 92 deletions

View File

@@ -62,7 +62,7 @@ class MenuComposer
// end global Settings
//TODO: should be handled via CSS Themes
$vars['navbar'] = in_array($site_style, ['mono', 'dark']) ? 'navbar-inverse' : '';
$vars['navbar'] = in_array($site_style, ['mono']) ? 'navbar-inverse' : '';
$vars['project_name'] = Config::get('project_name', 'LibreNMS');
$vars['title_image'] = Config::get('title_image', "images/librenms_logo_$site_style.svg");

View File

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,7 @@
<?php
use LibreNMS\Util\Clean;
use LibreNMS\Config;
if ($_GET['from']) {
$from = parse_at_time($_GET['from']);
@@ -82,7 +83,13 @@ if (isset($scale_rigid)) {
}
$rrd_options .= ' -E --start '.$from.' --end '.$to.' --width '.$width.' --height '.$height.' ';
$rrd_options .= \LibreNMS\Config::get('rrdgraph_def_text') . ' -c FONT#' . ltrim(\LibreNMS\Config::get('rrdgraph_def_text_color'), '#');
if (Config::get('applied_site_style') == 'dark') {
$rrd_options .= \LibreNMS\Config::get('rrdgraph_def_text_dark') . ' -c FONT#' . ltrim(\LibreNMS\Config::get('rrdgraph_def_text_color_dark'), '#');
} else {
$rrd_options .= \LibreNMS\Config::get('rrdgraph_def_text') . ' -c FONT#' . ltrim(\LibreNMS\Config::get('rrdgraph_def_text_color'), '#');
}
if ($_GET['bg']) {
$rrd_options .= ' -c CANVAS#' . Clean::alphaDash($_GET['bg']) . ' ';

View File

@@ -12,6 +12,8 @@
* the source code distribution for details.
*/
use LibreNMS\Config;
$scale_min = '0';
require 'includes/html/graphs/common.inc.php';
@@ -20,7 +22,11 @@ $rrd_filename = rrd_name($device['hostname'], 'ping-perf');
$rrd_options .= ' DEF:ping='.$rrd_filename.':ping:AVERAGE';
$rrd_options .= " 'COMMENT:Milliseconds Cur Min Max Avg\\n'";
$rrd_options .= ' LINE1.25:ping#36393D:Ping';
if (Config::get('applied_site_style') == 'dark') {
$rrd_options .= ' LINE1.25:ping#63636d:Ping';
} else {
$rrd_options .= ' LINE1.25:ping#36393d:Ping';
}
$rrd_options .= ' GPRINT:ping:LAST:%14.2lf GPRINT:ping:AVERAGE:%6.2lf';
$rrd_options .= " GPRINT:ping:MAX:%6.2lf 'GPRINT:ping:AVERAGE:%6.2lf\\n'";

View File

@@ -11,6 +11,7 @@
* option) any later version. Please see LICENSE.txt at the top level of
* the source code distribution for details.
*/
use LibreNMS\Config;
$scale_min = '0';
@@ -20,7 +21,11 @@ $rrd_filename = rrd_name($device['hostname'], 'poller-perf');
$rrd_options .= ' DEF:poller='.$rrd_filename.':poller:AVERAGE';
$rrd_options .= " 'COMMENT:Seconds Cur Min Max Avg\\n'";
$rrd_options .= ' LINE1.25:poller#36393D:Poller';
if (Config::get('applied_site_style') == 'dark') {
$rrd_options .= ' LINE1.25:poller#63636d:Poller';
} else {
$rrd_options .= ' LINE1.25:poller#36393d:Poller';
}
$rrd_options .= ' GPRINT:poller:LAST:%6.2lf GPRINT:poller:MIN:%6.2lf';
$rrd_options .= " GPRINT:poller:MAX:%6.2lf 'GPRINT:poller:AVERAGE:%6.2lf\\n'";

View File

@@ -4477,10 +4477,18 @@
"default": "-c BACK#EEEEEE00 -c SHADEA#EEEEEE00 -c SHADEB#EEEEEE00 -c CANVAS#FFFFFF00 -c GRID#a5a5a5 -c MGRID#FF9999 -c FRAME#5e5e5e -c ARROW#5e5e5e -R normal",
"type": "text"
},
"rrdgraph_def_text_dark": {
"default": "-c BACK#EEEEEE00 -c SHADEA#EEEEEE00 -c SHADEB#EEEEEE00 -c CANVAS#FFFFFF00 -c GRID#292929 -c MGRID#2f343e -c FRAME#5e5e5e -c ARROW#5e5e5e -R normal",
"type": "text"
},
"rrdgraph_def_text_color": {
"default": "000000",
"type": "color"
},
"rrdgraph_def_text_color_dark": {
"default": "bfc0c0",
"type": "color"
},
"rrdgraph_real_percentile": {
"default": false,
"type": "boolean"