diff --git a/ui/src/components/OperationPanel.jsx b/ui/src/components/OperationPanel.jsx index 4e158ee..dc6292a 100644 --- a/ui/src/components/OperationPanel.jsx +++ b/ui/src/components/OperationPanel.jsx @@ -93,6 +93,30 @@ function Button({ onClick, active, children, title, disabled }) { // "copy rows from" sitting above "scale cloned rows by" above "tag". const LABEL_W = 'w-24' +// Context on demand. The explanations used to be printed under the controls, +// which put a line of prose beside every toggle -- and a line of prose beside a +// toggle is skipped, while still costing the dock a row. Hovering gives it +// (native title, which nothing can clip), clicking pins it. +function Help({ text }) { + const [open, setOpen] = useState(false) + if (!text) return null + return ( + + + {open && ( + + {text} + + )} + + ) +} + // `stack` puts the label above its control instead of beside it. The aligned // label column costs 6rem, which is most of a narrow zone -- the tag field in // the bottom dock had 12rem of box left to type an initiative name into. @@ -100,18 +124,17 @@ function Field({ label, children, hint, stack }) { if (stack) { return (
- {label} + {label}
{children}
- {hint &&

{hint}

}
) } return (
{label} -
-
{children}
- {hint &&

{hint}

} +
+ {children} +
) @@ -1063,11 +1086,7 @@ function ScaleLedger({ currentTotals, scaleInputs, setScaleInputs, scalePlug, se )} - {perSlice && ( - - figures above are combined totals - - )} +
)} @@ -1342,7 +1361,10 @@ export default function OperationPanel({ // it is one line, they are one line, and stacked they cost three rows of a // dock that is 260px tall to begin with. const applyField = multi ? ( - + ) : null