Merge pull request #624 from billz/feature/colorpicker
Customize default theme color
This commit is contained in:
Bill Zimmerman
GitHub
commit
da4387359e
|
|
@ -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 {
|
||||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.8 KiB |
|
|
@ -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",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})
|
||||
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
35
index.php
35
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"';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
18
package.json
18
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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue