From aa5068bbe9fe68d64540d43674efa1e3108e8bed Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Wed, 25 Jan 2023 21:21:23 -0300 Subject: [PATCH 1/4] Using a new function to retrieve CSS values from classes - create a new function to access CSS values, even if not directly used on the page; - remove the empty harcoded HTML `` placeholders used only to source the colors from CSS classes Signed-off-by: RD WebDesign --- db_graph.php | 5 ----- db_lists.php | 4 ---- index.php | 5 ----- scripts/pi-hole/js/db_graph.js | 8 ++++---- scripts/pi-hole/js/index.js | 8 ++++---- scripts/pi-hole/js/utils.js | 8 ++++++++ 6 files changed, 16 insertions(+), 22 deletions(-) diff --git a/db_graph.php b/db_graph.php index 613e2891..2b058345 100644 --- a/db_graph.php +++ b/db_graph.php @@ -10,11 +10,6 @@ require 'scripts/pi-hole/php/header_authenticated.php'; ?> - - - - -

Compute graphical statistics from the Pi-hole query database

diff --git a/db_lists.php b/db_lists.php index b8e17b76..e89801ae 100644 --- a/db_lists.php +++ b/db_lists.php @@ -11,10 +11,6 @@ require 'scripts/pi-hole/php/header_authenticated.php'; ?> - - - -

Compute Top Lists from the Pi-hole query database

diff --git a/index.php b/index.php index 45482daa..ac58c1a8 100644 --- a/index.php +++ b/index.php @@ -11,11 +11,6 @@ $indexpage = true; require 'scripts/pi-hole/php/header_authenticated.php'; require_once 'scripts/pi-hole/php/gravity.php'; ?> - - - - -
diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js index 8fdeb122..1c02748a 100644 --- a/scripts/pi-hole/js/db_graph.js +++ b/scripts/pi-hole/js/db_graph.js @@ -208,10 +208,10 @@ function updateQueriesOverTime() { $(function () { var ctx = document.getElementById("queryOverTimeChart").getContext("2d"); - var blockedColor = $(".queries-blocked").css("background-color"); - var permittedColor = $(".queries-permitted").css("background-color"); - var gridColor = $(".graphs-grid").css("background-color"); - var ticksColor = $(".graphs-ticks").css("color"); + var blockedColor = utils.getCSSval("queries-blocked", "background-color"); + var permittedColor = utils.getCSSval("queries-permitted", "background-color"); + var gridColor = utils.getCSSval("graphs-grid", "background-color"); + var ticksColor = utils.getCSSval("graphs-ticks", "color"); timeLineChart = new Chart(ctx, { type: utils.getGraphType(), diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 9c02b906..a1b84e60 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -232,8 +232,8 @@ function updateQueriesOverTime() { timeLineChart.data.datasets = []; var labels = ["Blocked DNS Queries", "Permitted DNS Queries"]; - var blockedColor = $(".queries-blocked").css("background-color"); - var permittedColor = $(".queries-permitted").css("background-color"); + var blockedColor = utils.getCSSval("queries-blocked", "background-color"); + var permittedColor = utils.getCSSval("queries-permitted", "background-color"); var colors = [blockedColor, permittedColor]; // Collect values and colors, and labels @@ -862,8 +862,8 @@ $(function () { getMaxlogage(); updateSummaryData(); - var gridColor = $(".graphs-grid").css("background-color"); - var ticksColor = $(".graphs-ticks").css("color"); + var gridColor = utils.getCSSval("graphs-grid", "background-color"); + var ticksColor = utils.getCSSval("graphs-ticks", "color"); var ctx = document.getElementById("queryOverTimeChart").getContext("2d"); timeLineChart = new Chart(ctx, { type: utils.getGraphType(), diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js index f81bb5a4..9d84116a 100644 --- a/scripts/pi-hole/js/utils.js +++ b/scripts/pi-hole/js/utils.js @@ -408,6 +408,13 @@ function changeBulkDeleteStates(table) { } } +function getCSSval(cssclass, cssproperty) { + var elem = $("
"), + val = elem.appendTo("body").css(cssproperty); + elem.remove(); + return val; +} + window.utils = (function () { return { escapeHtml: escapeHtml, @@ -432,5 +439,6 @@ window.utils = (function () { colorBar: colorBar, checkMessages: checkMessages, changeBulkDeleteStates: changeBulkDeleteStates, + getCSSval: getCSSval, }; })(); From f59f587895d61a0e680908629dba84a4415e247a Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Sat, 11 Feb 2023 19:37:20 -0300 Subject: [PATCH 2/4] Adding the new themes to the web interface settings Signed-off-by: RD WebDesign --- scripts/pi-hole/php/theme.php | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/scripts/pi-hole/php/theme.php b/scripts/pi-hole/php/theme.php index 5c44a6cf..361c584e 100644 --- a/scripts/pi-hole/php/theme.php +++ b/scripts/pi-hole/php/theme.php @@ -13,13 +13,16 @@ $available_themes = array(); * Array[0] = Description * Array[1] = Is this a dark mode theme? (Sets background to black during page reloading to avoid white "flashing") * Array[2] = Style sheet name +* Array[3] = Theme color */ -$available_themes['default-light'] = array('Pi-hole default theme (light, default)', false, 'default-light'); -$available_themes['default-dark'] = array('Pi-hole midnight theme (dark)', true, 'default-dark'); -$available_themes['default-darker'] = array('Pi-hole deep-midnight theme (dark)', true, 'default-darker'); +$available_themes['default-light'] = array('Pi-hole default theme (light, default)', false, 'default-light', '#367fa9'); +$available_themes['default-dark'] = array('Pi-hole midnight theme (dark)', true, 'default-dark', '#272c30'); +$available_themes['default-darker'] = array('Pi-hole deep-midnight theme (dark)', true, 'default-darker', '#2e6786'); +$available_themes['high-contrast'] = array('High contrast light', false, 'high-contrast', '#0078a0'); +$available_themes['high-contrast-dark'] = array('High contrast dark', false, 'high-contrast-dark', '#0077c7'); // Option to have the theme go with the device dark mode setting, always set the background to black to avoid flashing -$available_themes['default-auto'] = array('Pi-hole auto theme (light/dark)', true, 'default-auto'); -$available_themes['lcars'] = array('Star Trek LCARS theme (dark)', true, 'lcars'); +$available_themes['default-auto'] = array('Pi-hole auto theme (light/dark)', true, 'default-auto', '#367fa9'); +$available_themes['lcars'] = array('Star Trek LCARS theme (dark)', true, 'lcars', '#4488FF'); $webtheme = ''; // Try to load theme settings from setupVars.conf @@ -42,6 +45,7 @@ if (!array_key_exists($webtheme, $available_themes)) { $darkmode = $available_themes[$webtheme][1]; $theme = $available_themes[$webtheme][2]; +$theme_color = $available_themes[$webtheme][3]; function theme_selection() { From c74162ee476f1b76bf15f2eb96fcdc9f6d3344d5 Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Sat, 11 Feb 2023 19:36:25 -0300 Subject: [PATCH 3/4] Preparing PHP and javascript files for the new themes - change HTML header code - add new class to Pi-hole logo - add new classes to auditlog buttons - add new classes to query log and long-term query log buttons Signed-off-by: RD WebDesign --- scripts/pi-hole/js/auditlog.js | 10 +++++----- scripts/pi-hole/js/db_queries.js | 20 ++++++++++---------- scripts/pi-hole/js/queries.js | 20 ++++++++++---------- scripts/pi-hole/php/header.php | 14 +++----------- scripts/pi-hole/php/header_authenticated.php | 2 +- scripts/pi-hole/php/sidebar.php | 2 +- 6 files changed, 30 insertions(+), 38 deletions(-) diff --git a/scripts/pi-hole/js/auditlog.js b/scripts/pi-hole/js/auditlog.js index 0374d6de..7afd1437 100644 --- a/scripts/pi-hole/js/auditlog.js +++ b/scripts/pi-hole/js/auditlog.js @@ -33,8 +33,8 @@ function updateTopLists() { " " + data.top_queries[domain] + " " + - '' + - '' + + '' + + '' + " " ); } @@ -58,7 +58,7 @@ function updateTopLists() { " " + data.top_ads[domain] + " " + - '' + + '' + " " ); } else { @@ -69,8 +69,8 @@ function updateTopLists() { " " + data.top_ads[domain] + " " + - '' + - '' + + '' + + '' + " " ); } diff --git a/scripts/pi-hole/js/db_queries.js b/scripts/pi-hole/js/db_queries.js index efa85074..535d38ac 100644 --- a/scripts/pi-hole/js/db_queries.js +++ b/scripts/pi-hole/js/db_queries.js @@ -265,7 +265,7 @@ $(function () { case 1: fieldtext = "Blocked (gravity)"; buttontext = - ''; + ''; blocked = true; break; case 2: @@ -275,24 +275,24 @@ $(function () { : "OK (answered by "; fieldtext += (data.length > 5 && data[5] !== "N/A" ? data[5] : "") + ")" + dnssecStatus; buttontext = - ''; + ''; break; case 3: fieldtext = "OK (cache)" + dnssecStatus; buttontext = - ''; + ''; break; case 4: fieldtext = "Blocked (regex blacklist)"; buttontext = - ''; + ''; blocked = true; break; case 5: fieldtext = "Blocked (exact blacklist)"; buttontext = - ''; + ''; blocked = true; break; case 6: @@ -313,21 +313,21 @@ $(function () { fieldtext = "Blocked (gravity, CNAME)"; buttontext = - ''; + ''; blocked = true; break; case 10: fieldtext = "Blocked (regex blacklist, CNAME)"; buttontext = - ''; + ''; blocked = true; break; case 11: fieldtext = "Blocked (exact blacklist, CNAME)"; buttontext = - ''; + ''; blocked = true; break; case 12: @@ -341,7 +341,7 @@ $(function () { "OK (already forwarded)" + dnssecStatus; buttontext = - ''; + ''; break; case 15: fieldtext = @@ -358,7 +358,7 @@ $(function () { "OK (stale cache)" + dnssecStatus; buttontext = - ''; + ''; break; default: fieldtext = "Unknown (" + parseInt(data[4], 10) + ")"; diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 163d282b..708db6e8 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -124,7 +124,7 @@ $(function () { case "1": fieldtext = "Blocked (gravity)"; buttontext = - ''; + ''; blocked = true; break; case "2": @@ -135,25 +135,25 @@ $(function () { fieldtext += (data.length > 10 && data[10] !== "N/A" ? data[10] : "") + ")" + dnssecStatus; buttontext = - ''; + ''; break; case "3": fieldtext = "OK (cache)" + dnssecStatus; buttontext = - ''; + ''; break; case "4": fieldtext = "Blocked (regex blacklist)"; blocked = true; buttontext = - ''; + ''; break; case "5": fieldtext = "Blocked (exact blacklist)"; blocked = true; buttontext = - ''; + ''; break; case "6": fieldtext = "Blocked (external, IP)"; @@ -177,7 +177,7 @@ $(function () { "Blocked (gravity, CNAME)"; blocked = true; buttontext = - ''; + ''; isCNAME = true; break; case "10": @@ -185,7 +185,7 @@ $(function () { "Blocked (regex blacklist, CNAME)"; blocked = true; buttontext = - ''; + ''; isCNAME = true; break; case "11": @@ -193,7 +193,7 @@ $(function () { "Blocked (exact blacklist, CNAME)"; blocked = true; buttontext = - ''; + ''; isCNAME = true; break; case "12": @@ -207,7 +207,7 @@ $(function () { "OK (already forwarded)" + dnssecStatus; buttontext = - ''; + ''; break; case "15": fieldtext = @@ -224,7 +224,7 @@ $(function () { "OK (stale cache)" + dnssecStatus; buttontext = - ''; + ''; break; default: fieldtext = "Unknown (" + parseInt(data[4], 10) + ")"; diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php index e0619177..563101e5 100644 --- a/scripts/pi-hole/php/header.php +++ b/scripts/pi-hole/php/header.php @@ -26,21 +26,13 @@ $hostname = gethostname() ? gethostname() : ''; - + - + - - - - - - - - - +