Skip to content

UI editor: move Collapse all / Expand all next to the JSON heading, leave Edit raw alone on the right #548

Description

@smunini

Summary

In the resource editor's JSON pane, all three header buttons are currently bunched together on the right. Split them: Collapse all and Expand all belong next to the "JSON" heading on the left, and Edit raw should sit alone on the right.

Current markup

crates/ui/templates/partials/editor-body.html:31-38 puts all three in one .card-head__tools container:

<div class="card-head">
  <h3><span class="icon"></span> {{ i18n.t("editor-view-json") }}</h3>
  <div class="card-head__tools">
    <button  data-json-fold="all">{{ i18n.t("editor-collapse-all") }}</button>
    <button  data-json-fold="none">{{ i18n.t("editor-expand-all") }}</button>
    <button  id="editor-json-edit">{{ i18n.t("editor-edit-raw") }}</button>
  </div>
</div>

.card-head is display: flex; justify-content: space-between (crates/ui/assets/app.css:2948-2955), so the heading pins left and the single tools group pins right.

Wanted

[ <> JSON ] [Collapse all] [Expand all] ……………………… [Edit raw]

The two fold controls read as operations on the JSON view and belong with it; "Edit raw" is a mode switch and deserves the visual separation.

Notes for whoever picks this up

  • No JS changes needed. Both click handlers are delegated from the editor body container — crates/ui/assets/resources.js:93-97 (modal) and crates/ui/assets/editor.js:233-262 (standalone page) — and match on [data-json-fold] / #editor-json-edit, not on DOM position. Moving the buttons inside the same container is safe.
  • .card-head is shared. It's also used by the Guided form header in the same fragment (editor-body.html:66), by pages/batch.html:33,77, and by pages/editor.html:56. Prefer a modifier or an extra wrapper over changing .card-head's own flex rules, so the other four headers don't shift.
  • The fragment renders in two places — the standalone /ui/editor page and the Resources edit modal — so check both; the modal pane is narrower and is where crowding shows first.
  • Related: UI: unify the stylesheet approach so pages can't diverge (Import vs Resources style drift) #543 tracks unifying the stylesheet approach. If a shared header primitive comes out of that work, this layout should be expressed through it rather than as a one-off.

Acceptance criteria

  • Collapse all / Expand all sit immediately after the "JSON" heading on the left.
  • Edit raw sits alone at the right edge of the pane header.
  • Collapse all, Expand all, and Edit raw all still work, on /ui/editor and in the Resources modal.
  • The Guided form header, batch.html, and editor.html headers are visually unchanged.
  • Layout holds at the modal's narrower width without the buttons colliding or wrapping awkwardly.

Pointers

  • crates/ui/templates/partials/editor-body.html:31-38
  • crates/ui/assets/app.css:2948-2971 (.card-head, .card-head__tools), :2972-2984 (.editor-json__act)
  • crates/ui/assets/resources.js:93-97, crates/ui/assets/editor.js:233-262

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions