Merge pull request #624 from billz/feature/colorpicker

Customize default theme color
2023-10-10 13:37:24 +02:00 · 2020-07-01 19:27:53 +02:00 · 2020-07-01 19:27:53 +02:00 · da4387359e
commit da4387359e
parent 159d539f59 578bb9d9f4
19 changed files with 1362 additions and 50 deletions
--- a/app/css/custom.php
+++ b/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;
-  background-color: #d8224c;
+  border-color: <?php echo $color; ?>;
  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;
-  border-color: #c61931;
+  background-color: <?php echo $color; ?>;
+  border-color: <?php echo $color; ?>;
 }

 i.fa.fa-bars {
--- a/app/img/raspAP-logo.php
+++ b/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"
-             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>
+             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>
--- a/app/js/custom.js
+++ b/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",
 }
--- a/app/js/huebee.js
+++ b/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);
+})
+
--- a/config/config.php
+++ b/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');
--- a/dist/huebee/huebee.css
+++ b/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;
+}
--- a/dist/huebee/huebee.min.css
+++ b/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}
--- a/dist/huebee/huebee.pkgd.js
+++ b/dist/huebee/huebee.pkgd.js
--- a/dist/huebee/huebee.pkgd.min.js
+++ b/dist/huebee/huebee.pkgd.min.js
--- a/gulpfile.js
+++ b/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
--- a/includes/dashboard.php
+++ b/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);
 }


--- a/includes/defaults.php
+++ b/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',
--- a/includes/functions.php
+++ b/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'];
+}
+
--- a/includes/themes.php
+++ b/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);
 }
--- a/index.php
+++ b/index.php
@ -45,21 +45,9 @@ require_once 'includes/torproxy.php';
 $output = $return = 0;
 $page = $_GET['page'];

-if (!isset($_COOKIE['theme'])) {
-    $theme = "custom.css";
-} else {
-    $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'];
+$theme_url = getThemeOpt();
+$toggleState = getSidebarState();
+$bridgedEnabled = getBridgedState();

 ?><!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)) { ?>
-    <!-- Link Quality Chart -->
-    <script src="app/js/linkquality.js"></script>
-    <?php }
-
+    <?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"';
        }
--- a/locale/en_US/LC_MESSAGES/messages.po
+++ b/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"
--- a/package.json
+++ b/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-sass": "^4.0.2",
+        "gulp-rename": "^2.0.0",
        "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"
    }
 }
--- a/templates/about/general.php
+++ b/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>
-        <div class="ml-5 mt-3"><img class="about-logo" src="app/img/raspAP-logo.png" style="width: 175px; height:175px"></div>
+      <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.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>
--- a/templates/themes.php
+++ b/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() ?>