pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement per-browser checkbox and radio button styling using icheck-material.

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2020-05-26 00:58:44 +02:00
committed by Adam Warner
parent 580149e91f
commit 0e4d1e4e7f
122 changed files with 289 additions and 5172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/pi-hole/js/footer.js
+11 -6
View File
@@ -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
scripts/pi-hole/js/settings.js
+13
View File
@@ -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();
});
});
scripts/pi-hole/php/header.php
+1 -2
View File
@@ -214,7 +214,7 @@
<link rel="stylesheet" href="style/vendor/bootstrap-select.min.css">
<link rel="stylesheet" href="style/vendor/bootstrap-toggle.min.css">
<?php } ?>
<link rel="stylesheet" href="style/vendor/iCheck/<?php echo $checkbox_theme_name;?>/<?php echo $checkbox_theme_variant;?>.css">
<link rel="stylesheet" href="style/vendor/icheck-material.min.css">
<link rel="stylesheet" href="style/pi-hole.css">
<link rel="stylesheet" href="style/themes/<?php echo $theme; ?>.css">
<noscript><link rel="stylesheet" href="style/vendor/js-warn.css"></noscript>
@@ -226,7 +226,6 @@
<script src="scripts/vendor/datatables.min.js"></script>
<script src="scripts/vendor/moment.min.js"></script>
<script src="scripts/vendor/Chart.min.js"></script>
<script src="scripts/vendor/iCheck.min.js"></script>
</head>
<body class="hold-transition sidebar-mini <?php if($boxedlayout){ ?>layout-boxed<?php } ?>">
<noscript>
scripts/pi-hole/php/theme.php
+4 -9
View File
@@ -12,12 +12,9 @@ $available_themes = [];
* 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] = Radio/checkbox theme name
* Array[4] = Radio/checkbox theme variant
*/
$available_themes["default-light"] = ["Pi-hole default theme (light, default)", false, "default-light", "minimal", "blue"];
$available_themes["default-dark"] = ["Pi-hole midnight theme (dark)", true, "default-dark", "polaris", "polaris"];
$available_themes["default-dark2"] = ["Pi-hole afternoon theme (dark)", true, "default-dark", "futurico", "futurico"];
$available_themes["default-light"] = ["Pi-hole default theme (light, default)", false, "default-light"];
$available_themes["default-dark"] = ["Pi-hole midnight theme (dark)", true, "default-dark"];
$webtheme = "";
// Try to load theme settings from setupVars.conf
@@ -39,14 +36,12 @@ if(!array_key_exists($webtheme,$available_themes)) {
$darkmode = $available_themes[$webtheme][1];
$theme = $available_themes[$webtheme][2];
$checkbox_theme_name = $available_themes[$webtheme][3];
$checkbox_theme_variant = $available_themes[$webtheme][4];
function theme_selection() {
global $available_themes, $webtheme;
foreach ($available_themes as $key => $value) {
?><input type="radio" name="webtheme" value="<?php echo $key; ?>" id="webtheme_<?php echo $key; ?>" <?php if ($key === $webtheme){ ?>checked<?php } ?>>
<label for="webtheme_<?php echo $key; ?>"><?php echo $value[0]; ?></label><br><?php
?><div><input type="radio" name="webtheme" value="<?php echo $key; ?>" id="webtheme_<?php echo $key; ?>" <?php if ($key === $webtheme){ ?>checked<?php } ?>>
<label for="webtheme_<?php echo $key; ?>"><strong><?php echo $value[0]; ?></strong></label></div><?php
}
}
?>