mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 16:03:02 +00:00
Maurice
bdf5767a5f
The rail lists its sections in the order a book is made: Pages, Content, Layouts, Elements and Travel, then Theme and Layers set apart below a rule. Stickers are a tab of Elements beside the icons instead of a rail section of their own, and Elements has six tabs (text, shapes, lines, frames with the grids, icons, stickers). The quotation mark moved to the text styles, the outline rectangle to the basic shapes and the plain rule to the lines. The rail and every tab row are tab lists the arrow keys walk through, and a long name wraps instead of being cut. The icon and sticker searches say in the field how many match, which the sticker library's own head used to. Every panel on both sides opens on the same head, and every labelled control uses one row that moves the control under its label when the two do not fit, so no label sits in a fixed column any more. Number fields, chips, sliders, tab labels, theme names and travel cards wrap the same way, a country beside a stop wraps under itself, and an upload cell holds its words to two lines with the whole label in its tooltip. The heads, shelves and groups are real headings, so a screen reader can walk the panels by them. The inspector shows every kind in one order: what the element is and says, its position and size, its look, its effects, then Arrange. Align and the stacking buttons are one Arrange group with a button that opens the page in Layers; its rows sit under their labels, each in two sets that move to a second line whole. Rarely used groups start folded and open on an element that already uses them (a turned element, a map held at a zoom, a summary set in another face), and every group mounts afresh for the next selection. A sticker's duplicate angle and opacity are gone in favour of the shared position group, which now has the turn buttons for every kind. With several elements selected it keeps their angle, opacity and turn, and the mirror when all of them are stickers, and leaves the frame's numbers to one element. A photo's fill page and fill spread sit under its crop. With nothing selected the inspector shows the page background, the book's theme with the way to the Theme panel, and the page numbers. Seventeen translation keys nothing has used since before the rebuild (the old inspector title, the empty spread note, the summary and country list names, the roads buttons and others) are gone from every language. The broad key template the old panels used had counted them as reached; the format names, the empty photo grid messages and the map source hints are now named where the key check can read them. Also fixed on the way: the travel stops list shared its class with the gradient stops and was laid out as sixteen pixel handles; the alignment buttons were named in raw English; the map's print resolution note joined its two halves with a dash.
60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
/**
|
|
* The bar at the top of every Studio panel, on both sides of the page: what the
|
|
* panel is about, how many of it there are, and the things you do to it.
|
|
*
|
|
* One head for all of them. The panels on the left used to open on small grey
|
|
* capitals and the inspector on a darker title of its own, so the two sides of
|
|
* the screen had two ideas of what a panel's top looks like, and the left ones
|
|
* had none at all: their head was set exactly like every group label under it.
|
|
* Now each panel opens on its name in ink, the count beside it as a quiet
|
|
* figure, and the actions at the end. The head keeps one height whether it has
|
|
* actions or not, so the heads of the two sides line up across the page.
|
|
*
|
|
* Its own file so every panel can share it without importing another panel:
|
|
* `StudioSidebar` owns the rail, and a panel that reached back into it for a
|
|
* header would make the sidebar impossible to split.
|
|
*/
|
|
export function PanelHead({ label, count, meta, actions }: {
|
|
label: string
|
|
count?: number
|
|
/** A fact about the panel's subject in quiet type after the name, such as the page size. */
|
|
meta?: string
|
|
actions?: ReactNode
|
|
}) {
|
|
return (
|
|
<div className="st-panel-head">
|
|
<h2 className="st-what">
|
|
<span className="st-what-label">{label}</span>
|
|
{count != null && <em>{count}</em>}
|
|
</h2>
|
|
{meta && <span className="st-head-meta">{meta}</span>}
|
|
{actions && <span className="st-head-acts">{actions}</span>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* A titled group of things to add, in the panels on the left: a heading over a
|
|
* grid or a list, and a line of help under it when it needs one.
|
|
*
|
|
* Never folded. A shelf is browsed, and a library whose groups had to be opened
|
|
* one at a time would be a library read through a keyhole; the inspector's
|
|
* groups fold because they are a reference, these are a catalogue.
|
|
*/
|
|
export function Shelf({ label, hint, children, className = '' }: {
|
|
label?: string
|
|
hint?: string
|
|
children: ReactNode
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<div className={`st-section st-shelf ${className}`}>
|
|
{label && <h3 className="st-section-label">{label}</h3>}
|
|
{children}
|
|
{hint && <p className="st-hint st-shelf-hint">{hint}</p>}
|
|
</div>
|
|
)
|
|
}
|