pt/pf_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'op-panel-layout' into selection-follows-sort

Browse Source
This commit is contained in:
Paul Trowbridge 2026-09-23 22:36:24 -04:00
commit 4ad15cead2
1 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/components/OperationPanel.jsx
View File

@ -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 (
<span className="relative inline-flex shrink-0">
<button type="button" title={text} onClick={() => setOpen(o => !o)} onBlur={() => setOpen(false)}
aria-label={text}
className={`w-4 h-4 rounded-full border leading-none flex items-center justify-center transition-colors ${
open ? 'border-blue-400 text-blue-600 bg-blue-50' : 'border-gray-300 text-gray-500 hover:text-blue-600 hover:border-blue-400'}`}
style={{ fontSize: '10px' }}>?</button>
{open && (
<span className="absolute z-20 left-0 top-5 w-64 rounded border border-gray-200 bg-white shadow-lg px-2 py-1.5
text-gray-600 leading-snug normal-case tracking-normal">
{text}
</span>
)}
</span>
)
}
// `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 (
<div className="flex flex-col gap-1 min-w-0">
<span className="text-gray-600 whitespace-nowrap">{label}</span>
<span className="text-gray-600 whitespace-nowrap flex items-center gap-1.5">{label}<Help text={hint} /></span>
<div className="flex items-center gap-2 min-w-0">{children}</div>
{hint && <p className="text-gray-500 text-[11px] leading-snug">{hint}</p>}
</div>
)
}
return (
<div className="flex items-start gap-2">
<span className={`text-gray-600 whitespace-nowrap shrink-0 pt-1 ${LABEL_W}`}>{label}</span>
<div className="flex flex-col gap-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">{children}</div>
{hint && <p className="text-gray-500 text-[11px] leading-snug max-w-xs">{hint}</p>}
<div className="flex items-center gap-2 flex-wrap min-w-0">
{children}
<Help text={hint} />
</div>
</div>
)
@ -1063,11 +1086,7 @@ function ScaleLedger({ currentTotals, scaleInputs, setScaleInputs, scalePlug, se
</Field>
)}
{perSlice && (
<Field label="Per slice">
<span className="text-gray-500">figures above are combined totals</span>
</Field>
)}
</div>
)}
</div>
@ -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 ? (
<Field label="Apply">
<Field label="Apply"
hint={applyMode === 'each'
? `Each of the ${slices.length} slices reaches the target on its own, and each gets its own log entry. The ledger's figures are combined totals, so a slice's own change will differ from them.`
: `The ${slices.length} slices are one pool: a target is the new combined total, and each slice keeps its share of the mix. One log entry.`}>
<ApplyModeChooser op={activeOp} applyMode={applyMode} setApplyMode={setApplyMode} count={slices.length} />
</Field>
) : null