Merge pull request #683 from laf/font-awesome-2-webui

WebUI update to support dark / light theme - dark is default

html/css/dark.css

@@ -0,0 +1,19 @@
+.fa-nav-icons {
+    color: #e30613;
+}
+
+.fa-col-success {
+    color: #3c763d;
+}
+
+.fa-col-info {
+    color: #31708f;
+}
+
+.fa-col-primary {
+    color: #357ebd;
+}
+
+.twitter-typeahead .tt-hint {
+    border-color: #000 !important;
+}

html/css/font-awesome.css

@@ -0,0 +1 @@
+../../lib/Font-Awesome/css/font-awesome.css

html/css/font-awesome.min.css

@@ -0,0 +1 @@
+../../lib/Font-Awesome/css/font-awesome.min.css

html/css/light.css

@@ -0,0 +1,16 @@
+.fa-nav-icons {
+    color: #e30613;
+}
+
+.fa-col-success {
+    color: #3c763d;
+}
+
+.fa-col-info {
+    color: #31708f;
+}
+
+.fa-col-primary {
+    color: #357ebd;
+}
+

html/css/styles.css

@@ -2,6 +2,8 @@ body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   margin: 0px;
   padding: 0px;
+  padding-bottom: 50px;
+  padding-top: 50px;
   background: rgb(255,255,255); /* Old browsers */
   color: #555;
   font-size: 10pt;

html/fonts/FontAwesome.otf

@@ -0,0 +1 @@
+../../lib/Font-Awesome/fonts/FontAwesome.otf

html/fonts/fontawesome-webfont.eot

@@ -0,0 +1 @@
+../../lib/Font-Awesome/fonts/fontawesome-webfont.eot

html/fonts/fontawesome-webfont.svg

@@ -0,0 +1 @@
+../../lib/Font-Awesome/fonts/fontawesome-webfont.svg

html/fonts/fontawesome-webfont.ttf

@@ -0,0 +1 @@
+../../lib/Font-Awesome/fonts/fontawesome-webfont.ttf

html/fonts/fontawesome-webfont.woff

@@ -0,0 +1 @@
+../../lib/Font-Awesome/fonts/fontawesome-webfont.woff

html/fonts/fontawesome-webfont.woff2

@@ -0,0 +1 @@
+../../lib/Font-Awesome/fonts/fontawesome-webfont.woff2

html/index.php

@@ -168,7 +168,9 @@ function catchFatal() {
   <link href="css/tagmanager.css" rel="stylesheet" type="text/css" />
   <link href="css/mktree.css" rel="stylesheet" type="text/css" />
   <link href="css/vis.min.css" rel="stylesheet" type="text/css" />
+  <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
   <link href="<?php echo($config['stylesheet']);  ?>" rel="stylesheet" type="text/css" />
+  <link href="css/<?php echo $config['site_style']; ?>.css" rel="stylesheet" type="text/css" />
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/bootstrap-hover-dropdown.min.js"></script>
@@ -211,18 +213,6 @@ function popUp(URL)
 ?>
 <br />
 <div class="container-fluid">
-<?php
-if ($_SESSION['authenticated'])
-{
-?>
-  <div class="row">
-    <div class="col-md-12">
-      &nbsp;<br /><br />
-    </div>
-  </div>
-<?php
-}
-?>
   <div class="row">
     <div class="col-md-12">
 <?php
@@ -316,17 +306,17 @@ function popUp(URL)
 <?php
 if($config['enable_footer'] == 1) {
 ?>
-<footer>
+<nav class="navbar navbar-default <?php echo $navbar; ?> navbar-fixed-bottom">
   <div class="container">
     <div class="row">
       <div class="col-md-12 text-center">
 <?php
-echo('<em>        Powered by <a href="/about/" target="_blank">' . $config['project_name'].'</a>.</em><br/>');
+echo('<h5>Powered by <a href="http://www.librenms.org/" target="_blank" class="red">' . $config['project_name'].'</a>.</h5>');
 ?>
       </div>
     </div>
   </div>
-</footer>
+</nav>
 <?php
 }
 
@@ -354,37 +344,33 @@ function popUp(URL)
 
 }
 
-?>
-</body>
-<?php
-
 if ($no_refresh !== TRUE && $config['page_refresh'] != 0) {
     $refresh = $config['page_refresh'] * 1000;
     echo('<script type="text/javascript">
         $(document).ready(function() {
 
-           $("#countdown_timer_status").html("<img src=\"images/16/clock_pause.png\"> Pause");
+           $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw\"></i> Pause");
            var Countdown = {
                sec: '. $config['page_refresh'] .',
 
                Start: function() {
                    var cur = this;
                    this.interval = setInterval(function() {
-                       $("#countdown_timer_status").html("<img src=\"images/16/clock_pause.png\"> Pause");
+                       $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw\"></i> Pause");
                        cur.sec -= 1;
                        display_time = cur.sec;
                        if (display_time == 0) {
                            location.reload();
                        }
                        if (display_time % 1 === 0 && display_time <= 300) {
-                           $("#countdown_timer").html("<img src=\"images/16/clock.png\"> Refresh in " + display_time);
+                           $("#countdown_timer").html("<i class=\"fa fa-clock-o fa-fw\"></i> Refresh in " + display_time);
                        }
                    }, 1000);
                },
 
                Pause: function() {
                    clearInterval(this.interval);
-                   $("#countdown_timer_status").html("<img src=\"images/16/clock_play.png\"> Resume");
+                   $("#countdown_timer_status").html("<i class=\"fa fa-play fa-fw\"></i> Resume");
                    delete this.interval;
                },
 
@@ -414,5 +400,5 @@ function popUp(URL)
 }
 
 ?>
-
+</body>
 </html>

includes/defaults.inc.php

@@ -103,7 +103,7 @@
 
 $config['project_url']      = "https://github.com/librenms/";
 $config['project_issues']   = "https://github.com/librenms/librenms/issues";
-$config['title_image']      = "images/librenms_logo.png";
+$config['site_style']       = "light"; // Options are dark or light
 $config['stylesheet']       = "css/styles.css";
 $config['mono_font']        = "DejaVuSansMono";
 $config['favicon']          = "";

includes/definitions.inc.php

@@ -1314,5 +1314,6 @@
 if (!isset($config['log_dir']))  { $config['log_dir']  = $config['install_dir'] . '/logs'; }
 if (!isset($config['log_file'])) { $config['log_dir'] . "/" . $config['project_id'] . ".log"; }
 if (!isset($config['plugin_dir']))  { $config['plugin_dir']  = $config['html_dir'] . '/plugins'; }
+if (!isset($config['title_image'])) { $config['title_image']      = "images/librenms_logo_".$config['site_style'].".png"; }
 
 ?>