From 2e0a261c47b51ba023fa11da7f8a02a1a4a743cb Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 2 Jun 2020 15:49:41 +0200 Subject: [PATCH] No not use per-browser settings for the theme to avoid flashing pages on navigation. Signed-off-by: DL6ER --- scripts/pi-hole/js/footer.js | 39 +++++----------- scripts/pi-hole/php/header.php | 9 +++- scripts/pi-hole/php/theme.php | 47 ++++++++++++++++++++ settings.php | 64 +++++++++++++++------------ style/vendor/icheck-bootstrap.min.css | 5 +++ 5 files changed, 105 insertions(+), 59 deletions(-) create mode 100644 scripts/pi-hole/php/theme.php create mode 100644 style/vendor/icheck-bootstrap.min.css diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js index a78caf06..18e822ec 100644 --- a/scripts/pi-hole/js/footer.js +++ b/scripts/pi-hole/js/footer.js @@ -127,7 +127,13 @@ function testCookies() { } function initCheckboxRadioStyle() { + function getCheckboxURL(style) { + var extra = style.startsWith("material-") ? "material" : "bootstrap"; + return "style/vendor/icheck-" + extra + ".min.css" + } + function applyCheckboxRadioStyle(style) { + boxsheet.attr('href', getCheckboxURL(style)); var sel = $("input[type='radio'],input[type='checkbox']"); sel.parent().removeClass(); sel.parent().addClass("icheck-" + style); @@ -136,9 +142,12 @@ function initCheckboxRadioStyle() { // Read from local storage, initialize if needed var chkboxStyle = localStorage.getItem("theme_icheck"); if (chkboxStyle === null) { - chkboxStyle = "material-blue"; + chkboxStyle = "primary"; } + var boxsheet = $(''); + boxsheet.appendTo('head'); + applyCheckboxRadioStyle(chkboxStyle); // Add handler when on settings page @@ -184,33 +193,6 @@ function initBoxedLayout() { } } -function initTheme() { - function getThemeURL(themename) { - return "style/themes/" + themename + ".css"; - } - - // Read from local storage, initialize if needed - var themename = localStorage.getItem("css-theme"); - if (themename === null) { - themename = "default-light"; - localStorage.setItem("css-theme", themename); - } - - var themesheet = $(''); - themesheet.appendTo("head"); - - // Add handler when on settings page - var themeSelector = $("#theme-selector"); - if (themeSelector !== null) { - themeSelector.val(themename); - themeSelector.change(function () { - themename = $(this).val(); - localStorage.setItem("css-theme", themename); - themesheet.attr("href", getThemeURL(themename)); - }); - } -} - function initCPUtemp() { function setCPUtemp(unit) { localStorage.setItem("tempunit", tempunit); @@ -269,7 +251,6 @@ $(function () { // Apply per-browser styling settings initCheckboxRadioStyle(); initBoxedLayout(); - initTheme(); initCPUtemp(); if (typeof initpage === "function") { diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php index 9c387040..7cce5737 100644 --- a/scripts/pi-hole/php/header.php +++ b/scripts/pi-hole/php/header.php @@ -10,7 +10,6 @@ require "scripts/pi-hole/php/password.php"; require_once "scripts/pi-hole/php/FTL.php"; require "scripts/pi-hole/php/theme.php"; - $scriptname = basename($_SERVER['SCRIPT_FILENAME']); $hostname = gethostname() ? gethostname() : ""; @@ -152,6 +151,11 @@ + + + @@ -164,8 +168,8 @@ - + @@ -194,6 +198,7 @@ if($auth) { ?> +
diff --git a/scripts/pi-hole/php/theme.php b/scripts/pi-hole/php/theme.php new file mode 100644 index 00000000..ccdfd124 --- /dev/null +++ b/scripts/pi-hole/php/theme.php @@ -0,0 +1,47 @@ + $value) { + ?>
checked> +
\ No newline at end of file diff --git a/settings.php b/settings.php index 4335ed41..f7d4b9ff 100644 --- a/settings.php +++ b/settings.php @@ -218,7 +218,7 @@ if (isset($setupVars["API_PRIVACY_MODE"])) { ?> class="active"> " role="tab" data-toggle="tab">API / Web interface -
  • class="active"> - " role="tab" data-toggle="tab">Per Browser Settings -
  • class="active"> " role="tab" data-toggle="tab">Privacy
    • @@ -1111,6 +1108,8 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "adlists", "
    +

    Interface appearance

    +

    Administrator Email Address

    @@ -1124,23 +1123,45 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "adlists", "
    -
    -
    - -
    in active"> -
    -

    Theme

    +

    Styling (auto saved, per-browser)

    -
    +

    Checkbox and radio buttons

    -
    +
    - - - -
    -
    -
    -
    +

    CPU Temperature Unit

    -
    +