diff options
| -rw-r--r-- | docs/dashboard.md | 6 | ||||
| -rw-r--r-- | src/api/dashboard/dashboard.html | 23 |
2 files changed, 22 insertions, 7 deletions
diff --git a/docs/dashboard.md b/docs/dashboard.md index eeeca9b..afcd755 100644 --- a/docs/dashboard.md +++ b/docs/dashboard.md @@ -250,7 +250,8 @@ second likewise (`…BytesPerSec`, `bytesPerSec`). ## Document -The swarm's document, as this node holds it, its first level open. A branch is read +The swarm's document, as this node holds it: its keys listed at the top level, how +many beside the title, with the `+` that adds one. A branch is read when opened, and read again when the document changes there; what changed or came breathes once, as the map's labels do: its row glows and fades. @@ -261,7 +262,8 @@ to the whole swarm like any other: or list whole. Saved, it is shown open. The red `Delete` beside `Save` deletes the entry instead, on a second click (`Delete: sure?`) from half a second to 3 s later: a double-click doesn't delete. -* **`+` on a map's row** adds a key and its value. +* **`+` on a map's row** adds a key and its value (beside the title: a key at the top + level). * **`+` on a list's row** inserts an item at an index (`-1`: at the end); the items from there on move up. diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html index baffcf2..8bec226 100644 --- a/src/api/dashboard/dashboard.html +++ b/src/api/dashboard/dashboard.html @@ -76,6 +76,7 @@ section.collapsed { align-self: start; } section.collapsed h2 { margin: 0; } section.collapsed h2 .toggle { display: none; } + section.collapsed h2 button.add { display: none; } /* A choice beside a box's title (the console's filter). */ section h2 label.choice { font-size: 12px; text-transform: none; letter-spacing: 0; margin-left: 1em; cursor: pointer; } @@ -240,11 +241,17 @@ max-height: 20em; overflow: auto; } .note { color: var(--muted); font-style: italic; } .error { color: var(--bad); } - .tree button.add { font: inherit; line-height: 1; padding: 0 4px; margin-left: 4px; + .tree button.add, #document-head button.add { font: inherit; line-height: 1; padding: 0 4px; margin-left: 4px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; } - .tree button.add:hover { color: var(--fg); border-color: var(--muted); } + .tree button.add:hover, #document-head button.add:hover { color: var(--fg); border-color: var(--muted); } .tree .nested { padding-left: 1.1em; } + /* The store's root is the box: its keys listed at the top level, its size and its "+" + in the title (`#document-head`). */ + #document > details.root { padding-left: 0; } + #document > details.root > summary { display: none; } + section h2 .count { text-transform: none; letter-spacing: 0; font-weight: normal; + margin-left: .5em; } .editor input.extra[type=text] { width: 12em; margin-bottom: 2px; display: block; } .editor { margin: 2px 0 4px; } .tree details > .editor { margin-left: 1.1em; } @@ -332,7 +339,7 @@ <div class="scroll"><div id="stats" class="tree"></div></div> </section> <section id="document-box"> - <h2>Document<button id="remake-toggle" class="toggle" aria-expanded="false" + <h2>Document<span id="document-head" class="count"></span><button id="remake-toggle" class="toggle" aria-expanded="false" title="Propose a remake of the document: compacted, replaced by JSON, or imported from an Automerge document (docs/remakes.md)">remake…</button></h2> <form id="remake" class="popdown" hidden> <label>kind <select id="remake-kind"> @@ -1779,8 +1786,14 @@ function documentChanged(change) { if (change.all || change.paths.some(path => related(path, branch.path))) branch.refresh(); } } -document.getElementById("document").replaceChildren( - documentEntry("store", { type: "map", size: "…" }, [])); +// The store's root, always open: its keys are the box's top level, and its size and its +// "+" (everything its row has but its key) go into the title. +const documentRoot = documentEntry("store", { type: "map", size: "…" }, []); +documentRoot.classList.add("root"); +documentRoot.open = true; +document.getElementById("document-head").append( + ...[...documentRoot.querySelector(":scope > summary").childNodes].slice(1)); +document.getElementById("document").replaceChildren(documentRoot); // A box is busy while text in it is selected: drawing it anew would lose the selection, // so it waits (`held`) until it's gone. |