dashboard: allow hiding legend

1 files changed, 29 insertions, 12 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 790a466..5ca7409 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -77,6 +77,12 @@
     box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--bad) 50%, transparent); }
   .legend .silent::before { border-top-style: dotted; --colour: var(--muted); }
   .legend .hint::before { display: none; }
+  #legends { flex: none; }
+  /* Hides the legend, and shows it again. */
+  button.toggle { font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
+    float: right; padding: 0 6px; color: var(--muted); background: none;
+    border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
+  button.toggle:hover { color: var(--fg); border-color: var(--muted); }
   /* Nodes: circles, as on the map. */
   .legend .node::before { width: 10px; height: 10px; border: 1.5px solid var(--fg);
     border-radius: 50%; background: var(--fg); }
@@ -135,18 +141,20 @@
 </header>
 <main>
   <section id="map">
-    <h2>Swarm</h2>
-    <div class="legend">
-      <span class="node self">this node</span>
-      <span class="node">reports its links</span>
-      <span class="node silent">reports none (no LINKS_REPLY)</span>
-      <span class="node dormant-node">dormant (to this node)</span>
-      <span class="node focus">in focus (click a node)</span>
-    </div>
-    <div class="legend" id="legend"></div>
-    <div class="legend">
-      <span class="hint">drag to pan, wheel to zoom, double-click to reset; drag a node to
-        pin it, double-click it to let go</span>
+    <h2>Swarm <button id="legend-toggle" class="toggle">hide legend</button></h2>
+    <div id="legends">
+      <div class="legend">
+        <span class="node self">this node</span>
+        <span class="node">reports its links</span>
+        <span class="node silent">reports none (no LINKS_REPLY)</span>
+        <span class="node dormant-node">dormant (to this node)</span>
+        <span class="node focus">in focus (click a node)</span>
+      </div>
+      <div class="legend" id="legend"></div>
+      <div class="legend">
+        <span class="hint">drag to pan, wheel to zoom, double-click to reset; drag a node to
+          pin it, double-click it to let go</span>
+      </div>
     </div>
     <svg id="graph"><g id="view"></g></svg>
   </section>
@@ -998,6 +1006,15 @@ function release() {
 }
 document.addEventListener("selectionchange", release);
 
+// The legend, hidden and shown again; the map takes the room.
+const legendToggle = document.getElementById("legend-toggle");
+legendToggle.addEventListener("click", () => {
+  const legends = document.getElementById("legends");
+  legends.hidden = !legends.hidden;
+  legendToggle.textContent = legends.hidden ? "show legend" : "hide legend";
+  if (state) renderGraph();
+});
+
 // --- Pan and zoom: the map's group moved and scaled. Lines, labels and nodes scale
 // with it, as on a map. ---
 const graph = document.getElementById("graph");