dashboard: move messages toggle to the legend row

1 files changed, 13 insertions, 7 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 784fdb6..3236973 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -120,6 +120,9 @@
   .legend .dot-size { display: inline-flex; align-items: center; gap: 4px; }
   .legend .dot-size::before { display: none; }
   .legend .dot-size input { width: 6em; height: 1em; margin: 0; }
+  /* After the slider, as tall; the kinds and the slider greyed while the dots are off. */
+  .legend button.toggle { float: none; margin-left: 0; line-height: 1em; }
+  .legend.off .message, .legend.off .dot-size { opacity: .45; }
   #legends { flex: none; }
   /* Hides the legend, and shows it again. */
   button.toggle { font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
@@ -190,8 +193,7 @@
 <main>
   <section id="map">
     <h2>Swarm <button id="legend-toggle" class="toggle">hide legend</button>
-      <button id="rtt-toggle" class="toggle">layout: static</button>
-      <button id="flows-toggle" class="toggle">messages: on</button></h2>
+      <button id="rtt-toggle" class="toggle">layout: static</button></h2>
     <div id="legends">
       <div class="legend">
         <span class="node self">this node</span>
@@ -202,7 +204,8 @@
         <span class="node focus">in focus (click a node)</span>
       </div>
       <div class="legend" id="legend"></div>
-      <div class="legend" id="messages-legend"></div>
+      <div class="legend" id="messages-legend"><button id="flows-toggle"
+        class="toggle">messages: on</button></div>
       <div class="legend">
         <span class="hint">drag to pan, wheel or pinch to zoom, turn with two fingers;
           drag a node to move it, double-click it to pin it there or let it go</span>
@@ -1580,22 +1583,25 @@ const kindColour = kind => (KIND_COLOURS.find(([name]) => kind === name ||
 let dotScale = 2;
 try { dotScale = Number(localStorage.getItem("continuum-dot-scale")) || 2; } catch (_) {}
 dotScale = Math.min(4, Math.max(1.25, dotScale));
+let dotSlider = null;
 function showMessagesLegend() {
   const legend = document.getElementById("messages-legend");
-  legend.hidden = !flowsShown;
-  if (legend.childElementCount === 0) {
-    const slider = el("input", { type: "range", min: "1.25", max: "4", step: ".25",
+  legend.classList.toggle("off", !flowsShown);
+  if (dotSlider === null) {
+    const slider = dotSlider = el("input", { type: "range", min: "1.25", max: "4", step: ".25",
       title: "How large the dots are" });
     slider.value = String(dotScale);
     slider.addEventListener("input", () => {
       dotScale = Number(slider.value);
       try { localStorage.setItem("continuum-dot-scale", String(dotScale)); } catch (_) {}
     });
-    legend.append(...KIND_COLOURS.map(([kind, colour]) =>
+    // Before the toggle, which ends the line.
+    legend.prepend(...KIND_COLOURS.map(([kind, colour]) =>
       el("span", { class: "message", style: "--colour: " + colour },
         kind === "paths" ? "paths (pings)" : kind)),
       el("label", { class: "dot-size" }, "size", slider));
   }
+  dotSlider.disabled = !flowsShown;
 }
 showMessagesLegend();
 // A dot's radius for a message of `bytes`: grows with the size's logarithm, from 1.5