Merge pull request #624 from billz/feature/colorpicker

Customize default theme color

app/css/custom.php

@@ -1,3 +1,9 @@
+<?php header("Content-Type: text/css; charset=utf-8"); ?>
+<?php
+require_once '../../includes/functions.php';
+$color = getColorOpt();
+?>
+
 /*
 Theme Name: RaspAP default
 Author: @billz
@@ -47,9 +53,15 @@ body {
 }
 
 .card .card-header {
-  border-color: #d8224c;
+  border-color: <?php echo $color; ?>;
-  background-color: #d8224c;
   color: #fff;
+  background-color: <?php echo $color; ?>;
+}
+
+.btn-primary {
+  color: <?php echo $color; ?>;
+  border-color: <?php echo $color; ?>;
+  background-color: #fff;
 }
 
 .card-footer {
@@ -82,9 +94,7 @@ a.nav-link.active {
 }
 
 .btn-primary {
-  color: #d8224c;
   background-color: #fff;
-  border-color: #d8224c;
 }
 
 .btn-warning {
@@ -92,8 +102,8 @@ a.nav-link.active {
 }
 
 .btn-primary:hover {
-  background-color: #c61931;
+  background-color: <?php echo $color; ?>;
-  border-color: #c61931;
+  border-color: <?php echo $color; ?>;
 }
 
 i.fa.fa-bars {

app/img/raspAP-logo.php

@@ -1,3 +1,8 @@
+<?php header("Content-Type: image/svg+xml; charset=utf-8"); ?>
+<?php
+require_once '../../includes/functions.php';
+$color = getColorOpt();
+?>
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
@@ -27,20 +32,20 @@
            transform="translate(192.6768,123.4365)"
            id="g20"><path
              id="path22"
-             style="fill:#d8224c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 0,-37.169 -30.128,-67.3 -67.296,-67.3 -37.167,0 -67.294,30.131 -67.294,67.3 0,37.165 30.127,67.296 67.294,67.296 C -30.128,67.296 0,37.165 0,0" /></g><g
            transform="translate(125.3823,219.0791)"
            id="g24"><path
              id="path26"
-             style="fill:#d8224c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c -52.737,0 -95.641,-42.905 -95.641,-95.643 0,-52.74 42.904,-95.647 95.641,-95.647 52.737,0 95.642,42.907 95.642,95.647 C 95.642,-42.905 52.737,0 0,0 m 0,-217.29 c -67.073,0 -121.641,54.571 -121.641,121.647 C -121.641,-28.569 -67.073,26 0,26 67.074,26 121.642,-28.569 121.642,-95.643 121.642,-162.719 67.074,-217.29 0,-217.29" /></g><g
            transform="translate(144.4277,271.9385)"
            id="g28"><path
              id="path30"
-             style="fill:#d8224c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 66.188,0 121.118,-49.055 130.392,-112.714 l 28.259,-1.874 C 150.044,-34.655 82.181,27.791 0,27.791 c -3.892,0 -7.75,-0.147 -11.571,-0.423 L -9.73,-0.397 C -6.513,-0.161 -3.275,0 0,0" /></g><g
            transform="translate(144.4883,334.7588)"
            id="g32"><path
              id="path34"
-             style="fill:#d8224c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 101.94,0 185.667,-79.438 192.56,-179.664 l 27.962,-1.857 C 214.513,-65.087 117.899,27.791 0,27.791 c -5.31,0 -10.576,-0.2 -15.792,-0.571 l 1.84,-27.728 C -9.343,-0.177 -4.691,0 0,0" /></g></g></g></g></svg>

app/js/custom.js

@@ -375,8 +375,9 @@ function getCookie(cname) {
     return (value != null) ? unescape(value[1]) : null;
 }
 
+// Define themes
 var themes = {
-    "default": "custom.css",
+    "default": "custom.php",
     "hackernews" : "hackernews.css",
     "lightsout" : "lightsout.css",
 }

app/js/huebee.js

@@ -0,0 +1,22 @@
+// Initialize Huebee color picker
+var elem = document.querySelector('.color-input');
+var hueb = new Huebee( elem, {
+    notation: 'hex',
+    saturations: 2,
+    customColors: [ '#d8224c', '#dd4814', '#ea0', '#19f', '#333' ],
+    className: 'light-picker',
+    hue0: 210
+});
+
+// Set custom color if defined
+var color = getCookie('color');
+if (color == null || color == '') {
+    color = '#d8224c';
+}
+hueb.setColor(color);
+
+// Change event
+hueb.on( 'change', function( color, hue, sat, lum ) {
+    setCookie('color',color,90);
+})
+

config/config.php

@@ -1,5 +1,6 @@
 <?php
 
+define('RASPI_BRAND_TEXT', 'RaspAP');
 define('RASPI_VERSION', '2.4.1');
 define('RASPI_CONFIG', '/etc/raspap');
 define('RASPI_CONFIG_NETWORKING', RASPI_CONFIG.'/networking');

dist/huebee/huebee.css

@@ -0,0 +1,83 @@
+/*! Huebee v2.1.0
+https://huebee.buzz
+---------------------------------------------- */
+
+.huebee {
+  position: absolute;
+  z-index: 1;
+  transform: translateY(0px);
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.huebee.is-hidden {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.huebee.is-static-open {
+  position: relative;
+  z-index: auto;
+}
+
+.huebee__container {
+  position: absolute;
+  left: 0;
+  top: 5px;
+  padding: 10px;
+  background: #EEE;
+  border-radius: 5px;
+  box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
+}
+
+.huebee.is-static-open .huebee__container {
+  position: relative;
+  display: inline-block;
+  left: auto;
+  top: auto;
+  box-shadow: none;
+}
+
+.huebee__canvas {
+  display: block;
+  cursor: pointer;
+}
+
+.huebee__cursor {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  box-sizing: content-box;
+  border: 3px solid white;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+.huebee__cursor.is-hidden { opacity: 0; }
+
+.huebee__close-button {
+  display: block;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: -9px;
+  right: -9px;
+  border-radius: 12px;
+  background: #222;
+}
+
+.huebee__close-button__x {
+  stroke: white;
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.huebee__close-button:hover {
+  background: white;
+  cursor: pointer;
+}
+
+.huebee__close-button:hover .huebee__close-button__x {
+  stroke: #222;
+}

dist/huebee/huebee.min.css

@@ -0,0 +1,4 @@
+/*! Huebee v2.1.0
+https://huebee.buzz
+---------------------------------------------- */
+.huebee{position:absolute;z-index:1;transform:translateY(0);transition:opacity .15s,transform .15s}.huebee.is-hidden{opacity:0;transform:translateY(10px)}.huebee.is-static-open{position:relative;z-index:auto}.huebee__container{position:absolute;left:0;top:5px;padding:10px;background:#eee;border-radius:5px;box-shadow:0 5px 10px hsla(0,0%,0%,.3)}.huebee.is-static-open .huebee__container{position:relative;display:inline-block;left:auto;top:auto;box-shadow:none}.huebee__canvas{display:block;cursor:pointer}.huebee__cursor{width:15px;height:15px;position:absolute;left:0;top:0;box-sizing:content-box;border:3px solid #fff;border-radius:5px;pointer-events:none}.huebee__cursor.is-hidden{opacity:0}.huebee__close-button{display:block;position:absolute;width:24px;height:24px;top:-9px;right:-9px;border-radius:12px;background:#222}.huebee__close-button__x{stroke:#fff;stroke-width:3;stroke-linecap:round}.huebee__close-button:hover{background:#fff;cursor:pointer}.huebee__close-button:hover .huebee__close-button__x{stroke:#222}

gulpfile.js

@@ -77,7 +77,10 @@ function modules() {
   // SB Admin2 CSS
   var sbadmin2CSS = gulp.src('./node_modules/startbootstrap-sb-admin-2/css/*')
     .pipe(gulp.dest('./dist/sb-admin-2/css'));
-  return merge(bootstrapJS, bootstrapSCSS, chartJS, dataTables, fontAwesome, jquery, jqueryEasing, sbadmin2JS, sbadmin2CSS);
+  // Huebee
+  var huebee = gulp.src('./node_modules/huebee/dist/*')
+    .pipe(gulp.dest('./dist/huebee'));
+  return merge(bootstrapJS, bootstrapSCSS, chartJS, dataTables, fontAwesome, jquery, jqueryEasing, sbadmin2JS, sbadmin2CSS, huebee);
 }
 
 // CSS task

includes/dashboard.php

@@ -200,6 +200,7 @@ function DisplayDashboard(&$extraFooterScripts)
         )
     );
     $extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false);
+    $extraFooterScripts[] = array('src'=>'app/js/linkquality.js', 'defer'=>false);
 }
 
 

includes/defaults.php

@@ -5,6 +5,7 @@ if (!defined('RASPI_CONFIG')) {
 }
 
 $defaults = [
+  'RASPI_BRAND_TEXT' => 'RaspAP',
   'RASPI_VERSION' => '2.4.1',
   'RASPI_CONFIG_NETWORKING' => RASPI_CONFIG.'/networking',
   'RASPI_ADMIN_DETAILS' => RASPI_CONFIG.'/raspap.auth',

includes/functions.php

@@ -417,3 +417,38 @@ function formatDateAgo($datetime, $full = false)
     if (!$full) $string = array_slice($string, 0, 1);
     return $string ? implode(', ', $string) . ' ago' : 'just now';
 }
+
+function getThemeOpt()
+{
+    if (!isset($_COOKIE['theme'])) {
+        $theme = "custom.php";
+    } else {
+        $theme = $_COOKIE['theme'];
+    }
+    return 'app/css/'.htmlspecialchars($theme, ENT_QUOTES);
+}
+
+function getColorOpt()
+{
+    if (!isset($_COOKIE['color'])) {
+        $color = "#d8224c";
+    } else {
+        $color = $_COOKIE['color'];
+    }
+    return $color;
+}
+function getSidebarState()
+{
+    if ($_COOKIE['sidebarToggled'] == 'true' ) {
+        return"toggled";
+    }
+}
+
+// Returns bridged AP mode status
+function getBridgedState()
+{
+    $arrHostapdConf = parse_ini_file(RASPI_CONFIG.'/hostapd.ini');
+    // defaults to false
+    return  $arrHostapdConf['BridgedEnable'];
+}
+

includes/themes.php

@@ -3,7 +3,7 @@
  *
  *
  */
-function DisplayThemeConfig()
+function DisplayThemeConfig(&$extraFooterScripts)
 {
     $themes = [
         "default"    => "RaspAP (default)",
@@ -11,11 +11,14 @@ function DisplayThemeConfig()
         "lightsout"  => "Lights Out"
     ];
     $themeFiles = [
-        "default"    => "custom.css",
+        "default"    => "custom.php",
         "hackernews" => "hackernews.css",
         "lightsout"  => "lightsout.css"
     ];
     $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
 
     echo renderTemplate("themes", compact("themes", "selectedTheme"));
+
+    $extraFooterScripts[] = array('src'=>'dist/huebee/huebee.pkgd.min.js', 'defer'=>false);
+    $extraFooterScripts[] = array('src'=>'app/js/huebee.js', 'defer'=>false);
 }

index.php

@@ -45,21 +45,9 @@ require_once 'includes/torproxy.php';
 $output = $return = 0;
 $page = $_GET['page'];
 
-if (!isset($_COOKIE['theme'])) {
+$theme_url = getThemeOpt();
-    $theme = "custom.css";
+$toggleState = getSidebarState();
-} else {
+$bridgedEnabled = getBridgedState();
-    $theme = $_COOKIE['theme'];
-}
-$theme_url = 'app/css/'.htmlspecialchars($theme, ENT_QUOTES);
-
-if ($_COOKIE['sidebarToggled'] == 'true' ) {
-    $toggleState = "toggled";
-}
-
-// Get Bridged AP mode status
-$arrHostapdConf = parse_ini_file('/etc/raspap/hostapd.ini');
-// defaults to false
-$bridgedEnabled = $arrHostapdConf['BridgedEnable'];
 
 ?><!DOCTYPE html>
 <html lang="en">
@@ -82,6 +70,9 @@ $bridgedEnabled = $arrHostapdConf['BridgedEnable'];
     <!-- DataTables CSS -->
     <link href="dist/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
 
+    <!-- Huebee CSS -->
+    <link href="dist/huebee/huebee.min.css" rel="stylesheet">
+
     <!-- Custom Fonts -->
     <link href="dist/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
 
@@ -112,13 +103,13 @@ $bridgedEnabled = $arrHostapdConf['BridgedEnable'];
       <ul class="navbar-nav sidebar sidebar-light d-none d-md-block accordion <?php echo (isset($toggleState)) ? $toggleState : null ; ?>" id="accordionSidebar">
         <!-- Sidebar - Brand -->
         <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.php?page=wlan0_info">
-          <div class="sidebar-brand-text ml-1">RaspAP</div>
+          <div class="sidebar-brand-text ml-1"><?php echo RASPI_BRAND_TEXT; ?></div>
         </a>
         <!-- Divider -->
         <hr class="sidebar-divider my-0">
         <div class="row">
           <div class="col-xs ml-3 sidebar-brand-icon">
-            <img src="app/img/raspAP-logo.svg" class="navbar-logo" width="64" height="64">
+            <img src="app/img/raspAP-logo.php" class="navbar-logo" width="64" height="64">
           </div>
           <div class="col-xs ml-2">
             <div class="ml-1">Status</div>
@@ -267,7 +258,7 @@ $bridgedEnabled = $arrHostapdConf['BridgedEnable'];
             SaveTORAndVPNConfig();
             break;
         case "theme_conf":
-            DisplayThemeConfig();
+            DisplayThemeConfig($extraFooterScripts);
             break;
         case "data_use":
             DisplayDataUsage($extraFooterScripts);
@@ -318,14 +309,10 @@ $bridgedEnabled = $arrHostapdConf['BridgedEnable'];
     <!-- Custom RaspAP JS -->
     <script src="app/js/custom.js"></script>
 
-    <?php if ($page == "wlan0_info" || !isset($page)) { ?>
+    <?php
-    <!-- Link Quality Chart -->
-    <script src="app/js/linkquality.js"></script>
-    <?php }
-
     // Load non default JS/ECMAScript in footer.
     foreach ($extraFooterScripts as $script) {
-        echo '    <script type="text/javascript" src="' , $script['src'] , '"';
+        echo '<script type="text/javascript" src="' , $script['src'] , '"';
         if ($script['defer']) {
             echo ' defer="defer"';
         }

locale/en_US/LC_MESSAGES/messages.po

@@ -540,6 +540,9 @@ msgstr "Theme settings"
 msgid "Select a theme"
 msgstr "Select a theme"
 
+msgid "Color"
+msgstr "Color"
+
 #: includes/data_usage.php
 msgid "Data usage"
 msgstr "Data usage"

package.json

@@ -30,20 +30,22 @@
         "url": "https://github.com/billz/raspap-webgui.git"
     },
     "dependencies": {
-        "startbootstrap-sb-admin-2": "4.0.7",
-        "jquery": "^3.5.0"
-    },
-    "devDependencies": {
         "browser-sync": "^2.26.7",
         "del": "^5.1.0",
         "gulp": "^4.0.2",
         "gulp-autoprefixer": "^7.0.1",
-        "gulp-clean-css": "^4.2.0",
+        "gulp-clean-css": "^4.3.0",
         "gulp-header": "^2.0.9",
         "gulp-plumber": "^1.2.1",
-        "gulp-rename": "1.4.0",
+        "gulp-rename": "^2.0.0",
-        "gulp-sass": "^4.0.2",
         "gulp-uglify": "^3.0.2",
-        "merge-stream": "^2.0.0"
+        "huebee": "^2.1.0",
+        "jquery": "^3.5.0",
+        "merge-stream": "^2.0.0",
+        "node-gyp": "^7.0.0",
+        "startbootstrap-sb-admin-2": "4.0.7"
+    },
+    "devDependencies": {
+        "gulp-sass": "^4.0.2"
     }
 }

templates/about/general.php

@@ -2,8 +2,8 @@
 <div class="tab-pane active" id="aboutgeneral">
   <div class="row">
     <div class="col-md-8">
-      <h2 class="mt-3"><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h2>
+      <h2 class="mt-3"><?php echo _("RaspAP") ." v".RASPI_VERSION; ?></h2>
-        <div class="ml-5 mt-3"><img class="about-logo" src="app/img/raspAP-logo.png" style="width: 175px; height:175px"></div>
+        <div class="ml-5 mt-3"><img class="about-logo" src="app/img/raspAP-logo.php" style="width: 175px; height:175px"></div>
         <div class="mt-3">RaspAP is a co-creation of <a href="https://github.com/billz">billz</a> and <a href="https://github.com/sirlagz">SirLagz</a>
           with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">developer community</a>
           and <a href="https://crowdin.com/project/raspap">language translators</a>.</div>

templates/themes.php

@@ -11,10 +11,14 @@
       <div class="card-body">
         <h4><?php echo _("Theme settings"); ?></h4>
         <div class="row">
-          <div class="form-group col-md-6">
+          <div class="form-group col-xs-3 col-sm-3">
             <label for="code"><?php echo _("Select a theme"); ?></label>
             <?php SelectorOptions("theme", $themes, $selectedTheme, "theme-select") ?>
           </div>
+          <div class="col-xs-3 col-sm-3">
+            <label for="code"><?php echo _("Color"); ?></label>
+            <input class="form-control color-input" value="#d8224c" aria-label="color" />
+          </div>
         </div>
         <form action="?page=system_info" method="POST">
             <?php echo CSRFTokenFieldTag() ?>