Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2026-02-15 07:25:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

New layout for "All Settings" page (#3042)

Browse Source
This commit is contained in:
RD WebDesign
2024-06-06 19:13:05 -03:00
committed by GitHub
parent 4402d56026 20fc994fac
commit 5b6c8bbf41
4 changed files with 265 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
scripts/pi-hole/js/settings-advanced.js
View File

@@ -24,42 +24,24 @@ function addAllowedValues(allowed) {
}
}
function generateRow(topic, key, value) {
// If the value is an object, we need to recurse
if (!("description" in value)) {
Object.keys(value).forEach(function (subkey) {
var subvalue = value[subkey];
generateRow(topic, key + "." + subkey, subvalue);
});
return;
}
// else: we have a setting we can display
var box =
'<div class="box">' +
'<div class="box-header">' +
'<h3 class="box-title" data-key="' +
key +
'" data-modified="' +
(value.modified ? "true" : "false") +
'">' +
key +
function boxIcons(value) {
return (
'<span class="box-icons">' +
(value.modified
? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
? '<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
: "") +
(value.flags.restart_dnsmasq
? '&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
? '<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
: "") +
(value.flags.env_var
? '&nbsp;&nbsp;<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
? '<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
: "") +
"</h3>" +
"<p>" +
utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
"</p>" +
"</div>" +
'<div class="box-body">' +
'<div class="form-group">';
"</span>"
);
}
function valueDetails(key, value) {
// Define default hint text
let defaultValueHint = "";
if (value.modified) {
defaultValueHint = "";
@@ -91,18 +73,21 @@ function generateRow(topic, key, value) {
}
}
// Define extraAttributes, if needed
let extraAttributes = "";
if (value.flags.env_var) {
extraAttributes = " disabled";
}
// Format the output depending on the value type
let content = "";
switch (value.type) {
case "IPv4 address":
case "IPv6 address":
case "string": {
box +=
'<label class="col-sm-4 control-label">Value (string)</label>' +
'<div class="col-sm-8">' +
content +=
'<label class="col-sm-2 control-label">Value <small>(string)</small></label>' +
'<div class="col-sm-10">' +
'<input type="text" class="form-control" value="' +
value.value +
'" data-key="' +
@@ -118,7 +103,8 @@ function generateRow(topic, key, value) {
}
case "boolean": {
box +=
content +=
'<div class="col-sm-12">' +
'<div><input type="checkbox" ' +
(value.value ? " checked" : "") +
' id="' +
@@ -131,16 +117,16 @@ function generateRow(topic, key, value) {
key +
'-checkbox">Enabled ' +
defaultValueHint +
"</label>" +
"</label></div>" +
" </div>";
break;
}
case "double": {
box +=
'<label class="col-sm-4 control-label">Value</label>' +
'<div class="col-sm-8">' +
content +=
'<label class="col-sm-2 control-label">Value</label>' +
'<div class="col-sm-10">' +
'<input type="number" class="form-control" value="' +
value.value +
'" data-key="' +
@@ -155,9 +141,9 @@ function generateRow(topic, key, value) {
}
case "integer": {
box +=
'<label class="col-sm-4 control-label">Value (integer)</label>' +
'<div class="col-sm-8">' +
content +=
'<label class="col-sm-2 control-label">Value <small>(integer)</small></label>' +
'<div class="col-sm-10">' +
'<input type="number" step="1" class="form-control" value="' +
value.value +
'" data-key="' +
@@ -172,8 +158,8 @@ function generateRow(topic, key, value) {
}
case "unsigned integer": {
box +=
'<label class="col-sm-4 control-label">Value (unsigned integer)</label>' +
content +=
'<label class="col-sm-4 control-label">Value <small>(unsigned integer)</small></label>' +
'<div class="col-sm-8">' +
'<input type="number" step="1" min="0" class="form-control" value="' +
value.value +
@@ -189,8 +175,8 @@ function generateRow(topic, key, value) {
}
case "unsigned integer (16 bit)": {
box +=
'<label class="col-sm-4 control-label">Value (unsigned 16bit integer)</label>' +
content +=
'<label class="col-sm-4 control-label">Value <small>(unsigned 16bit integer)</small></label>' +
'<div class="col-sm-8">' +
'<input type="number" step="1" min="0" max="65535" class="form-control" value="' +
value.value +
@@ -206,9 +192,9 @@ function generateRow(topic, key, value) {
}
case "string array": {
box +=
'<label class="col-sm-5 control-label">Values (one item per line)</label>' +
'<div class="col-sm-7">' +
content +=
'<label class="col-sm-12 control-label">Values <small>(one item per line)</small></label>' +
'<div class="col-sm-12">' +
'<textarea class="form-control field-sizing-content" data-key="' +
key +
'"' +
@@ -225,39 +211,32 @@ function generateRow(topic, key, value) {
case "enum (unsigned integer)": // fallthrough
case "enum (string)": {
box +=
'<label class="col-sm-4 control-label">Selected Option</label>' +
'<div class="col-sm-8">' +
'<select class="form-control" data-key="' +
key +
'"' +
extraAttributes +
">";
value.allowed.forEach(function (option) {
box +=
'<option value="' +
option.item +
'"' +
(option.item === value.value ? " selected" : "") +
content += '<div class="col-sm-12">';
value.allowed.forEach(function (option, i) {
content +=
"<div>" +
// Radio button
'<input type="radio" class="form-control" ' +
`value="${option.item}" name="${key}" id="${key}_${i}" data-key="${key}"${extraAttributes}` +
(option.item === value.value ? " checked" : "") +
">" +
option.item +
"</option>";
});
box +=
"</select> " +
defaultValueHint +
"</div>" +
'<div class="col-sm-12">' +
addAllowedValues(value.allowed) +
// Label
`<label for="${key}_${i}"><strong>${utils.escapeHtml(option.item)}` +
(option.item === value.default ? " <em>(default)</em>" : "") +
"</strong></label>" +
// Paragraph with description
`<p class="help-block">${option.description}</p>` +
"</div>";
});
content += "</div>";
break;
}
case "password (write-only string)": {
box +=
'<label class="col-sm-4 control-label">Value (string)</label>' +
'<div class="col-sm-8">' +
content +=
'<label class="col-sm-2 control-label">Value <small>(string)</small></label>' +
'<div class="col-sm-10">' +
'<input type="password" class="form-control" value="' +
value.value +
'" data-key="' +
@@ -273,11 +252,43 @@ function generateRow(topic, key, value) {
}
default: {
box += "TYPE " + value.type + " NOT DEFINED";
content += "TYPE " + value.type + " NOT DEFINED";
}
}
box += "</div></div> ";
return '<div class="row">' + content + "</div>";
}
function generateRow(topic, key, value) {
// If the value is an object, we need to recurse
if (!("description" in value)) {
Object.keys(value).forEach(function (subkey) {
var subvalue = value[subkey];
generateRow(topic, key + "." + subkey, subvalue);
});
return;
}
// else: we have a setting we can display
var box =
'<div class="box settings-box">' +
'<div class="box-header with-border">' +
'<h3 class="box-title" data-key="' +
key +
'" data-modified="' +
(value.modified ? "true" : "false") +
'">' +
key +
boxIcons(value) +
"</h3>" +
"</div>" +
'<div class="box-body">' +
utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
"</div>" +
'<div class="box-footer">' +
valueDetails(key, value) +
"</div></div> ";
var topKey = key.split(".")[0];
var elem = $("#advanced-content-" + topKey + "-flex");
elem.append(box);
@@ -288,41 +299,38 @@ function createDynamicConfigTabs() {
url: "/api/config?detailed=true",
})
.done(function (data) {
// Create the content for the advanced dynamic config topics
// Create the tabs for the advanced dynamic config topics
Object.keys(data.topics).forEach(function (n) {
var topic = data.topics[n];
$("#advanced-content").append(
'<div class="col-lg-12" id="advanced-content-' +
topic.name +
'">' +
'<div class="box box-success">' +
'<div class="box-header with-border no-user-select">' +
'<h3 class="box-title">' +
topic.description +
" (<code>" +
topic.name +
"</code>)" +
"</h3>" +
"</div>" +
'<div class="box-body">' +
'<div class="row" id="advanced-content-' +
topic.name +
'-body">' +
'<div class="col-xs-12 settings-container" id="advanced-content-' +
topic.name +
'-flex"></div>' +
"</div>" +
"</div>" +
"</div>" +
"</div>"
);
$("#advanced-settings-tabs").append(`
<div id="advanced-content-${topic.name}" role="tabpanel" class="tab-pane fade">
<h3 class="page-header">${topic.description} (<code>${topic.name}</code>)</h3>
<div class="row" id="advanced-content-${topic.name}-body">
<div class="col-xs-12 settings-container" id="advanced-content-${topic.name}-flex"></div>
</div>
</div>
`);
// Dynamically create the settings menu
$("#advanced-settings-menu ul").append(`
<li role="presentation">
<a href="#advanced-content-${topic.name}" class="btn btn-default" aria-controls="advanced-content-${topic.name}" role="pill" data-toggle="pill">${topic.description.replace(" settings", "")}</a>
</li>
`);
});
// Dynamically fill the tabs with config topics
Object.keys(data.config).forEach(function (topic) {
var value = data.config[topic];
generateRow(topic, topic, value, data);
});
$("#advanced-overlay").hide();
// Select the first tab and show the content
$("#advanced-settings-menu ul li:first-child").addClass("active");
$("#advanced-settings-tabs > div:first-child").addClass("active in");
$("button[id='save']").on("click", function () {
saveSettings();
});
@@ -365,28 +373,32 @@ function initOnlyChanged() {
function applyOnlyChanged() {
if (localStorage.getItem("only-changed") === "true") {
// Hide all boxes that have a data-key attribute
// Show only modified settings (hide tabs menu and empty tabs).
// Hide the tabs menu
$("#advanced-settings-menu").hide();
// Show all tabs, except the ones containing "data-modified='true'" attribute
// to prevent empty tabs (using the same classes used by Boostrap3)
$("#advanced-settings-tabs > .tab-pane").addClass("in active");
$("#advanced-settings-tabs > .tab-pane:not(:has(h3[data-modified='true']))").removeClass(
"in active"
);
// Hide all boxes with data-key attribute, except the ones with "data-modified='true'" attribute
$(".box-title[data-key]").not("[data-modified='true']").closest(".box").hide();
} else {
// Show all boxes that have a data-key attribute
// Show the tabs menu and activate only the first button (deactivate other buttons)
$("#advanced-settings-menu").show();
$("#advanced-settings-menu ul li").removeClass("active");
$("#advanced-settings-menu ul li:first-child").addClass("active");
// Hide all tabs, except the first one (removing the classes used by Boostrap3)
$("#advanced-settings-tabs > .tab-pane:not(:first-child)").removeClass("in active");
// Show all boxes with data-key attribute
$(".box-title[data-key]").closest(".box").show();
}
// Hide group headers on the all settings page after toggling to show only
// modified settings if there are no modified settings within that group. This
// prevents empty boxes when only-changed is enabled by hiding all boxes if
// the box does not have at least one visible box as a child
$(".box-title:not([data-key])").each(function () {
const box = $(this).closest(".box");
if (
box.find(".box-title[data-key]:visible").length === 0 &&
localStorage.getItem("only-changed") === "true"
) {
box.hide();
} else {
box.show();
}
});
}
$(document).ready(function () {

14
settings-all.lp
View File

@@ -14,11 +14,21 @@ PageTitle = "All Settings"
mg.include('scripts/pi-hole/lua/settings_header.lp','r')
?>
<div class="row settings-level-expert" id="advanced-content">
<!-- dynamically filled with content -->
<div class="overlay" id="advanced-overlay">
<i class="fa fa-sync fa-spin"></i>
</div>
<div class="col-lg-12 settings-level-expert save-button-container">
<div class="col-sm-12" id="advanced-settings-menu">
<ul class="nav nav-pills" role="tablist">
<!-- dynamically filled with content -->
</ul>
</div>
<div class="col-sm-12 tab-content" id="advanced-settings-tabs">
<!-- dynamically filled with content -->
</div>
<div class="col-sm-12 settings-level-expert save-button-container">
<button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
</div>
</div>

120
style/pi-hole.css
View File

@@ -547,22 +547,6 @@ td.details-control {
padding-right: 20px;
}
.settings-container {
--number-of-columns: 2;
display: flex;
flex-wrap: wrap;
}
.settings-container > .box {
margin: 10px;
width: calc((100% / var(--number-of-columns)) - 20px);
}
@media screen and (max-width: 991px) {
.settings-container {
--number-of-columns: 1;
}
}
/*** Login page ***/
.login-page {
padding: 15px;
@@ -898,13 +882,6 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
flex: 1 0 auto;
}
/* Global settings level selector container */
.settings-selector {
padding: 14px 0 0;
order: 2;
font-size: 18px;
}
.navbar-nav {
height: 50px;
}
@@ -1163,6 +1140,95 @@ table.dataTable tbody > tr > .selected {
}
}
.settings-container {
--columns: 2;
--gap: 20px;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.settings-container > .box {
margin: 0;
width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
border: none;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
.settings-box .control-label small {
font-weight: normal;
display: block;
}
/* Settings containers without modified items and with hidden boxes will display this text */
.settings-container:not(:has(h3[data-modified="true"])):has(.box[style*="display: none;"])::before {
content: "No modified settings to display";
opacity: 0.7;
font-style: italic;
}
#advanced-settings-menu {
margin-bottom: 1.5em;
}
#advanced-settings-menu ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.5em;
}
#advanced-settings-menu ul:before,
#advanced-settings-menu ul:after {
content: none;
}
#advanced-settings-menu ul > li {
margin: 0;
min-width: 112px;
flex: 1 1 auto;
text-align: center;
}
#advanced-settings-menu ul > li a {
border: 1px solid rgba(127, 127, 127, 0.2);
border-radius: 3px;
}
#advanced-settings-menu ul > li:not(.active) a {
color: inherit;
}
#advanced-settings-menu ul > li:not(.active) a:hover,
#advanced-settings-menu ul > li:not(.active) a:focus {
background: rgba(127, 127, 127, 0.1);
}
#advanced-settings-tabs > .tab-pane {
margin-bottom: 2em;
}
@media screen and (min-width: 2250px) {
/* show 3 columns in larger screens */
.settings-container {
--columns: 3;
}
}
@media screen and (max-width: 1150px) {
/* avoid narrow columns in medium screens with sidebar expanded */
body:not(.sidebar-collapse) .settings-container {
--columns: 1;
}
}
@media screen and (max-width: 940px) {
/* show 1 columns in smaller screens */
.settings-container {
--columns: 1;
}
}
/* Global settings level selector container */
.settings-selector {
padding: 14px 0 0;
order: 2;
font-size: 18px;
}
/* Hide the checkbox used for settings level selector */
#expert-settings,
#only-changed {
@@ -1471,6 +1537,14 @@ table.dataTable tbody > tr > .selected {
}
}
.box-icons {
margin: 0 5px;
}
.box-icons svg {
margin: 0 4px;
}
textarea.field-sizing-content {
min-block-size: 3.5rlh;
max-block-size: 20rlh;

24
style/themes/lcars.css
View File

@@ -2149,3 +2149,27 @@ td.highlight {
right: calc((100% - 1320px) / 2 + 0.85em);
}
}
.flex-header h1 {
margin-right: 0;
}
.settings-selector {
order: -1;
}
.settings-selector .toggle {
width: 125px !important;
}
#advanced-settings-menu ul > li a {
border: none;
border-radius: 20px;
color: #000;
}
#advanced-settings-menu ul > li:not(.active) a:hover,
#advanced-settings-menu ul > li a:focus {
background: #fff;
}
#advanced-settings-menu ul > li:not(.active) a {
color: #000;
}