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

scripts/pi-hole/js/settings-advanced.js

@@ -24,42 +24,24 @@ function addAllowedValues(allowed) {
   }
 }
 
-function generateRow(topic, key, value) {
+function boxIcons(value) {
-  // If the value is an object, we need to recurse
+  return (
-  if (!("description" in value)) {
+    '<span class="box-icons">' +
-    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 +
     (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>" +
+    "</span>"
-    "<p>" +
+  );
-    utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
+}
-    "</p>" +
+
-    "</div>" +
+function valueDetails(key, value) {
-    '<div class="box-body">' +
+  // Define default hint text
-    '<div class="form-group">';
   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 +=
+      content +=
-        '<label class="col-sm-4 control-label">Value (string)</label>' +
+        '<label class="col-sm-2 control-label">Value <small>(string)</small></label>' +
-        '<div class="col-sm-8">' +
+        '<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 +=
+      content +=
-        '<label class="col-sm-4 control-label">Value</label>' +
+        '<label class="col-sm-2 control-label">Value</label>' +
-        '<div class="col-sm-8">' +
+        '<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 +=
+      content +=
-        '<label class="col-sm-4 control-label">Value (integer)</label>' +
+        '<label class="col-sm-2 control-label">Value <small>(integer)</small></label>' +
-        '<div class="col-sm-8">' +
+        '<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 +=
+      content +=
-        '<label class="col-sm-4 control-label">Value (unsigned integer)</label>' +
+        '<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 +=
+      content +=
-        '<label class="col-sm-4 control-label">Value (unsigned 16bit integer)</label>' +
+        '<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 +=
+      content +=
-        '<label class="col-sm-5 control-label">Values (one item per line)</label>' +
+        '<label class="col-sm-12 control-label">Values <small>(one item per line)</small></label>' +
-        '<div class="col-sm-7">' +
+        '<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 +=
+      content += '<div class="col-sm-12">';
-        '<label class="col-sm-4 control-label">Selected Option</label>' +
+      value.allowed.forEach(function (option, i) {
-        '<div class="col-sm-8">' +
+        content +=
-        '<select class="form-control" data-key="' +
+          "<div>" +
-        key +
+          // Radio button
-        '"' +
+          '<input type="radio" class="form-control" ' +
-        extraAttributes +
+          `value="${option.item}" name="${key}" id="${key}_${i}" data-key="${key}"${extraAttributes}` +
-        ">";
+          (option.item === value.value ? " checked" : "") +
-      value.allowed.forEach(function (option) {
-        box +=
-          '<option value="' +
-          option.item +
-          '"' +
-          (option.item === value.value ? " selected" : "") +
           ">" +
-          option.item +
+          // Label
-          "</option>";
+          `<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>";
       });
-      box +=
+      content += "</div>";
-        "</select> " +
-        defaultValueHint +
-        "</div>" +
-        '<div class="col-sm-12">' +
-        addAllowedValues(value.allowed) +
-        "</div>";
 
       break;
     }
 
     case "password (write-only string)": {
-      box +=
+      content +=
-        '<label class="col-sm-4 control-label">Value (string)</label>' +
+        '<label class="col-sm-2 control-label">Value <small>(string)</small></label>' +
-        '<div class="col-sm-8">' +
+        '<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-' +
+        $("#advanced-settings-tabs").append(`
-            topic.name +
+          <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="box box-success">' +
+            <div class="row" id="advanced-content-${topic.name}-body">
-            '<div class="box-header with-border no-user-select">' +
+              <div class="col-xs-12 settings-container" id="advanced-content-${topic.name}-flex"></div>
-            '<h3 class="box-title">' +
+            </div>
-            topic.description +
+          </div>
-            " (<code>" +
+        `);
-            topic.name +
+
-            "</code>)" +
+        // Dynamically create the settings menu
-            "</h3>" +
+        $("#advanced-settings-menu ul").append(`
-            "</div>" +
+          <li role="presentation">
-            '<div class="box-body">' +
+            <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>
-            '<div class="row" id="advanced-content-' +
+          </li>
-            topic.name +
+        `);
-            '-body">' +
-            '<div class="col-xs-12 settings-container" id="advanced-content-' +
-            topic.name +
-            '-flex"></div>' +
-            "</div>" +
-            "</div>" +
-            "</div>" +
-            "</div>"
-        );
       });
+
+      // 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 () {

settings-all.lp

@@ -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>

style/pi-hole.css

@@ -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;

style/themes/lcars.css

@@ -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;
+}