From 0e4d1e4e7f3035686c9b6b567e4ea7f31b4bcbab Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 26 May 2020 00:58:44 +0200 Subject: [PATCH] Implement per-browser checkbox and radio button styling using icheck-material. Signed-off-by: DL6ER --- db_queries.php | 18 +- groups-domains.php | 2 +- queries.php | 5 +- scripts/pi-hole/js/footer.js | 17 +- scripts/pi-hole/js/settings.js | 13 + scripts/pi-hole/php/header.php | 3 +- scripts/pi-hole/php/theme.php | 13 +- settings.php | 371 ++++++---- style/vendor/iCheck/all.css | 61 -- style/vendor/iCheck/flat/_all.css | 530 -------------- style/vendor/iCheck/flat/aero.css | 53 -- style/vendor/iCheck/flat/aero.png | Bin 1520 -> 0 bytes style/vendor/iCheck/flat/aero@2x.png | Bin 3218 -> 0 bytes style/vendor/iCheck/flat/blue.css | 53 -- style/vendor/iCheck/flat/blue.png | Bin 1518 -> 0 bytes style/vendor/iCheck/flat/blue@2x.png | Bin 3217 -> 0 bytes style/vendor/iCheck/flat/flat.css | 53 -- style/vendor/iCheck/flat/flat.png | Bin 1515 -> 0 bytes style/vendor/iCheck/flat/flat@2x.png | Bin 3217 -> 0 bytes style/vendor/iCheck/flat/green.css | 53 -- style/vendor/iCheck/flat/green.png | Bin 1444 -> 0 bytes style/vendor/iCheck/flat/green@2x.png | Bin 3117 -> 0 bytes style/vendor/iCheck/flat/grey.css | 53 -- style/vendor/iCheck/flat/grey.png | Bin 1516 -> 0 bytes style/vendor/iCheck/flat/grey@2x.png | Bin 3217 -> 0 bytes style/vendor/iCheck/flat/orange.css | 53 -- style/vendor/iCheck/flat/orange.png | Bin 1518 -> 0 bytes style/vendor/iCheck/flat/orange@2x.png | Bin 3275 -> 0 bytes style/vendor/iCheck/flat/pink.css | 53 -- style/vendor/iCheck/flat/pink.png | Bin 1522 -> 0 bytes style/vendor/iCheck/flat/pink@2x.png | Bin 3218 -> 0 bytes style/vendor/iCheck/flat/purple.css | 53 -- style/vendor/iCheck/flat/purple.png | Bin 1519 -> 0 bytes style/vendor/iCheck/flat/purple@2x.png | Bin 3218 -> 0 bytes style/vendor/iCheck/flat/red.css | 53 -- style/vendor/iCheck/flat/red.png | Bin 1516 -> 0 bytes style/vendor/iCheck/flat/red@2x.png | Bin 3276 -> 0 bytes style/vendor/iCheck/flat/yellow.css | 53 -- style/vendor/iCheck/flat/yellow.png | Bin 1516 -> 0 bytes style/vendor/iCheck/flat/yellow@2x.png | Bin 3216 -> 0 bytes style/vendor/iCheck/futurico/futurico.css | 53 -- style/vendor/iCheck/futurico/futurico.png | Bin 1734 -> 0 bytes style/vendor/iCheck/futurico/futurico@2x.png | Bin 3446 -> 0 bytes style/vendor/iCheck/line/_all.css | 710 ------------------- style/vendor/iCheck/line/aero.css | 71 -- style/vendor/iCheck/line/blue.css | 71 -- style/vendor/iCheck/line/green.css | 71 -- style/vendor/iCheck/line/grey.css | 71 -- style/vendor/iCheck/line/line.css | 71 -- style/vendor/iCheck/line/line.png | Bin 588 -> 0 bytes style/vendor/iCheck/line/line@2x.png | Bin 1073 -> 0 bytes style/vendor/iCheck/line/orange.css | 71 -- style/vendor/iCheck/line/pink.css | 71 -- style/vendor/iCheck/line/purple.css | 71 -- style/vendor/iCheck/line/red.css | 71 -- style/vendor/iCheck/line/yellow.css | 71 -- style/vendor/iCheck/minimal/_all.css | 590 --------------- style/vendor/iCheck/minimal/aero.css | 59 -- style/vendor/iCheck/minimal/aero.png | Bin 1151 -> 0 bytes style/vendor/iCheck/minimal/aero@2x.png | Bin 1409 -> 0 bytes style/vendor/iCheck/minimal/blue.css | 59 -- style/vendor/iCheck/minimal/blue.png | Bin 1132 -> 0 bytes style/vendor/iCheck/minimal/blue@2x.png | Bin 1410 -> 0 bytes style/vendor/iCheck/minimal/green.css | 59 -- style/vendor/iCheck/minimal/green.png | Bin 1143 -> 0 bytes style/vendor/iCheck/minimal/green@2x.png | Bin 1408 -> 0 bytes style/vendor/iCheck/minimal/grey.css | 59 -- style/vendor/iCheck/minimal/grey.png | Bin 1142 -> 0 bytes style/vendor/iCheck/minimal/grey@2x.png | Bin 1407 -> 0 bytes style/vendor/iCheck/minimal/minimal.css | 59 -- style/vendor/iCheck/minimal/minimal.png | Bin 1114 -> 0 bytes style/vendor/iCheck/minimal/minimal@2x.png | Bin 1410 -> 0 bytes style/vendor/iCheck/minimal/orange.css | 59 -- style/vendor/iCheck/minimal/orange.png | Bin 1139 -> 0 bytes style/vendor/iCheck/minimal/orange@2x.png | Bin 1407 -> 0 bytes style/vendor/iCheck/minimal/pink.css | 59 -- style/vendor/iCheck/minimal/pink.png | Bin 1150 -> 0 bytes style/vendor/iCheck/minimal/pink@2x.png | Bin 1409 -> 0 bytes style/vendor/iCheck/minimal/purple.css | 59 -- style/vendor/iCheck/minimal/purple.png | Bin 1132 -> 0 bytes style/vendor/iCheck/minimal/purple@2x.png | Bin 1409 -> 0 bytes style/vendor/iCheck/minimal/red.css | 59 -- style/vendor/iCheck/minimal/red.png | Bin 1130 -> 0 bytes style/vendor/iCheck/minimal/red@2x.png | Bin 1410 -> 0 bytes style/vendor/iCheck/minimal/yellow.css | 59 -- style/vendor/iCheck/minimal/yellow.png | Bin 1135 -> 0 bytes style/vendor/iCheck/minimal/yellow@2x.png | Bin 1406 -> 0 bytes style/vendor/iCheck/polaris/polaris.css | 59 -- style/vendor/iCheck/polaris/polaris.png | Bin 6401 -> 0 bytes style/vendor/iCheck/polaris/polaris@2x.png | Bin 16760 -> 0 bytes style/vendor/iCheck/square/_all.css | 590 --------------- style/vendor/iCheck/square/aero.css | 59 -- style/vendor/iCheck/square/aero.png | Bin 2167 -> 0 bytes style/vendor/iCheck/square/aero@2x.png | Bin 4455 -> 0 bytes style/vendor/iCheck/square/blue.css | 59 -- style/vendor/iCheck/square/blue.png | Bin 2185 -> 0 bytes style/vendor/iCheck/square/blue@2x.png | Bin 4485 -> 0 bytes style/vendor/iCheck/square/green.css | 59 -- style/vendor/iCheck/square/green.png | Bin 2193 -> 0 bytes style/vendor/iCheck/square/green@2x.png | Bin 4498 -> 0 bytes style/vendor/iCheck/square/grey.css | 59 -- style/vendor/iCheck/square/grey.png | Bin 2186 -> 0 bytes style/vendor/iCheck/square/grey@2x.png | Bin 4483 -> 0 bytes style/vendor/iCheck/square/orange.css | 59 -- style/vendor/iCheck/square/orange.png | Bin 2181 -> 0 bytes style/vendor/iCheck/square/orange@2x.png | Bin 4474 -> 0 bytes style/vendor/iCheck/square/pink.css | 59 -- style/vendor/iCheck/square/pink.png | Bin 2189 -> 0 bytes style/vendor/iCheck/square/pink@2x.png | Bin 4479 -> 0 bytes style/vendor/iCheck/square/purple.css | 59 -- style/vendor/iCheck/square/purple.png | Bin 2188 -> 0 bytes style/vendor/iCheck/square/purple@2x.png | Bin 4501 -> 0 bytes style/vendor/iCheck/square/red.css | 59 -- style/vendor/iCheck/square/red.png | Bin 2190 -> 0 bytes style/vendor/iCheck/square/red@2x.png | Bin 4490 -> 0 bytes style/vendor/iCheck/square/square.css | 59 -- style/vendor/iCheck/square/square.png | Bin 2175 -> 0 bytes style/vendor/iCheck/square/square@2x.png | Bin 4478 -> 0 bytes style/vendor/iCheck/square/yellow.css | 59 -- style/vendor/iCheck/square/yellow.png | Bin 2131 -> 0 bytes style/vendor/iCheck/square/yellow@2x.png | Bin 4385 -> 0 bytes style/vendor/icheck-material.min.css | 6 + 122 files changed, 289 insertions(+), 5172 deletions(-) delete mode 100644 style/vendor/iCheck/all.css delete mode 100644 style/vendor/iCheck/flat/_all.css delete mode 100644 style/vendor/iCheck/flat/aero.css delete mode 100644 style/vendor/iCheck/flat/aero.png delete mode 100644 style/vendor/iCheck/flat/aero@2x.png delete mode 100644 style/vendor/iCheck/flat/blue.css delete mode 100644 style/vendor/iCheck/flat/blue.png delete mode 100644 style/vendor/iCheck/flat/blue@2x.png delete mode 100644 style/vendor/iCheck/flat/flat.css delete mode 100644 style/vendor/iCheck/flat/flat.png delete mode 100644 style/vendor/iCheck/flat/flat@2x.png delete mode 100644 style/vendor/iCheck/flat/green.css delete mode 100644 style/vendor/iCheck/flat/green.png delete mode 100644 style/vendor/iCheck/flat/green@2x.png delete mode 100644 style/vendor/iCheck/flat/grey.css delete mode 100644 style/vendor/iCheck/flat/grey.png delete mode 100644 style/vendor/iCheck/flat/grey@2x.png delete mode 100644 style/vendor/iCheck/flat/orange.css delete mode 100644 style/vendor/iCheck/flat/orange.png delete mode 100644 style/vendor/iCheck/flat/orange@2x.png delete mode 100644 style/vendor/iCheck/flat/pink.css delete mode 100644 style/vendor/iCheck/flat/pink.png delete mode 100644 style/vendor/iCheck/flat/pink@2x.png delete mode 100644 style/vendor/iCheck/flat/purple.css delete mode 100644 style/vendor/iCheck/flat/purple.png delete mode 100644 style/vendor/iCheck/flat/purple@2x.png delete mode 100644 style/vendor/iCheck/flat/red.css delete mode 100644 style/vendor/iCheck/flat/red.png delete mode 100644 style/vendor/iCheck/flat/red@2x.png delete mode 100644 style/vendor/iCheck/flat/yellow.css delete mode 100644 style/vendor/iCheck/flat/yellow.png delete mode 100644 style/vendor/iCheck/flat/yellow@2x.png delete mode 100644 style/vendor/iCheck/futurico/futurico.css delete mode 100644 style/vendor/iCheck/futurico/futurico.png delete mode 100644 style/vendor/iCheck/futurico/futurico@2x.png delete mode 100644 style/vendor/iCheck/line/_all.css delete mode 100644 style/vendor/iCheck/line/aero.css delete mode 100644 style/vendor/iCheck/line/blue.css delete mode 100644 style/vendor/iCheck/line/green.css delete mode 100644 style/vendor/iCheck/line/grey.css delete mode 100644 style/vendor/iCheck/line/line.css delete mode 100644 style/vendor/iCheck/line/line.png delete mode 100644 style/vendor/iCheck/line/line@2x.png delete mode 100644 style/vendor/iCheck/line/orange.css delete mode 100644 style/vendor/iCheck/line/pink.css delete mode 100644 style/vendor/iCheck/line/purple.css delete mode 100644 style/vendor/iCheck/line/red.css delete mode 100644 style/vendor/iCheck/line/yellow.css delete mode 100644 style/vendor/iCheck/minimal/_all.css delete mode 100644 style/vendor/iCheck/minimal/aero.css delete mode 100644 style/vendor/iCheck/minimal/aero.png delete mode 100644 style/vendor/iCheck/minimal/aero@2x.png delete mode 100644 style/vendor/iCheck/minimal/blue.css delete mode 100644 style/vendor/iCheck/minimal/blue.png delete mode 100644 style/vendor/iCheck/minimal/blue@2x.png delete mode 100644 style/vendor/iCheck/minimal/green.css delete mode 100644 style/vendor/iCheck/minimal/green.png delete mode 100644 style/vendor/iCheck/minimal/green@2x.png delete mode 100644 style/vendor/iCheck/minimal/grey.css delete mode 100644 style/vendor/iCheck/minimal/grey.png delete mode 100644 style/vendor/iCheck/minimal/grey@2x.png delete mode 100644 style/vendor/iCheck/minimal/minimal.css delete mode 100644 style/vendor/iCheck/minimal/minimal.png delete mode 100644 style/vendor/iCheck/minimal/minimal@2x.png delete mode 100644 style/vendor/iCheck/minimal/orange.css delete mode 100644 style/vendor/iCheck/minimal/orange.png delete mode 100644 style/vendor/iCheck/minimal/orange@2x.png delete mode 100644 style/vendor/iCheck/minimal/pink.css delete mode 100644 style/vendor/iCheck/minimal/pink.png delete mode 100644 style/vendor/iCheck/minimal/pink@2x.png delete mode 100644 style/vendor/iCheck/minimal/purple.css delete mode 100644 style/vendor/iCheck/minimal/purple.png delete mode 100644 style/vendor/iCheck/minimal/purple@2x.png delete mode 100644 style/vendor/iCheck/minimal/red.css delete mode 100644 style/vendor/iCheck/minimal/red.png delete mode 100644 style/vendor/iCheck/minimal/red@2x.png delete mode 100644 style/vendor/iCheck/minimal/yellow.css delete mode 100644 style/vendor/iCheck/minimal/yellow.png delete mode 100644 style/vendor/iCheck/minimal/yellow@2x.png delete mode 100644 style/vendor/iCheck/polaris/polaris.css delete mode 100644 style/vendor/iCheck/polaris/polaris.png delete mode 100644 style/vendor/iCheck/polaris/polaris@2x.png delete mode 100644 style/vendor/iCheck/square/_all.css delete mode 100644 style/vendor/iCheck/square/aero.css delete mode 100644 style/vendor/iCheck/square/aero.png delete mode 100644 style/vendor/iCheck/square/aero@2x.png delete mode 100644 style/vendor/iCheck/square/blue.css delete mode 100644 style/vendor/iCheck/square/blue.png delete mode 100644 style/vendor/iCheck/square/blue@2x.png delete mode 100644 style/vendor/iCheck/square/green.css delete mode 100644 style/vendor/iCheck/square/green.png delete mode 100644 style/vendor/iCheck/square/green@2x.png delete mode 100644 style/vendor/iCheck/square/grey.css delete mode 100644 style/vendor/iCheck/square/grey.png delete mode 100644 style/vendor/iCheck/square/grey@2x.png delete mode 100644 style/vendor/iCheck/square/orange.css delete mode 100644 style/vendor/iCheck/square/orange.png delete mode 100644 style/vendor/iCheck/square/orange@2x.png delete mode 100644 style/vendor/iCheck/square/pink.css delete mode 100644 style/vendor/iCheck/square/pink.png delete mode 100644 style/vendor/iCheck/square/pink@2x.png delete mode 100644 style/vendor/iCheck/square/purple.css delete mode 100644 style/vendor/iCheck/square/purple.png delete mode 100644 style/vendor/iCheck/square/purple@2x.png delete mode 100644 style/vendor/iCheck/square/red.css delete mode 100644 style/vendor/iCheck/square/red.png delete mode 100644 style/vendor/iCheck/square/red@2x.png delete mode 100644 style/vendor/iCheck/square/square.css delete mode 100644 style/vendor/iCheck/square/square.png delete mode 100644 style/vendor/iCheck/square/square@2x.png delete mode 100644 style/vendor/iCheck/square/yellow.css delete mode 100644 style/vendor/iCheck/square/yellow.png delete mode 100644 style/vendor/iCheck/square/yellow@2x.png create mode 100644 style/vendor/icheck-material.min.css diff --git a/db_queries.php b/db_queries.php index 18b729d9..fdb2f055 100644 --- a/db_queries.php +++ b/db_queries.php @@ -43,21 +43,21 @@
-
- +

+
-
- +

+
-
- +

+
-
-
- +

+

+
diff --git a/groups-domains.php b/groups-domains.php index 3d23b723..45d9a0bd 100644 --- a/groups-domains.php +++ b/groups-domains.php @@ -52,7 +52,7 @@ - + diff --git a/queries.php b/queries.php index a1e2695b..3723ed17 100644 --- a/queries.php +++ b/queries.php @@ -138,7 +138,10 @@ if(strlen($showing) > 0) -
+
+ + +
diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js index b5b69460..05fe1097 100644 --- a/scripts/pi-hole/js/footer.js +++ b/scripts/pi-hole/js/footer.js @@ -125,6 +125,15 @@ function testCookies() { return ret; } +function applyCheckboxRadioStyle() { + var chkboxStyle = localStorage.getItem("theme_icheck"); + if (chkboxStyle === null) { + chkboxStyle = "material-blue"; + } + $("input[type='radio'],input[type='checkbox']").parent().removeClass(); + $("input[type='radio'],input[type='checkbox']").parent().addClass("icheck-" + chkboxStyle); +} + $(function () { var enaT = $("#enableTimer"); var target = new Date(parseInt(enaT.html())); @@ -137,12 +146,8 @@ $(function () { $("#cookieInfo").show(); } - var checkboxTheme = $("#checkbox_theme").text(); - $("input").icheck({ - checkboxClass: "icheckbox_" + checkboxTheme, - radioClass: "iradio_" + checkboxTheme, - increaseArea: "20%" - }); + applyCheckboxRadioStyle(); + // Run check immediately after page loading ... checkMessages(); // ... and once again with five seconds delay diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js index 37598007..de0d994d 100644 --- a/scripts/pi-hole/js/settings.js +++ b/scripts/pi-hole/js/settings.js @@ -274,4 +274,17 @@ $(function () { bargraphs.click(function () { localStorage.setItem("barchart_chkbox", bargraphs.prop("checked")); }); + + // iCheck style toggle + var iCheckSelect = $("#iCheckStyle"); + var iCheckStyle = localStorage.getItem("theme_icheck"); + if (iCheckStyle === null) { + iCheckStyle = "material-blue"; + } + iCheckSelect.val(iCheckStyle); + + iCheckSelect.change(function () { + localStorage.setItem("theme_icheck", iCheckSelect.val()); + applyCheckboxRadioStyle(); + }); }); diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php index 65ed77fc..56468546 100644 --- a/scripts/pi-hole/php/header.php +++ b/scripts/pi-hole/php/header.php @@ -214,7 +214,7 @@ - + @@ -226,7 +226,6 @@ -