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

Draw the derived ledger rows as output, not input

Browse Source 
One box per measure is live; the other two are the same number said
differently. Both states were full input boxes differing by a border
colour, so three typed figures appeared where there was one typed figure
and two calculations -- and with six boxes on screen there was no reading
which one the adjustment would be built from.

The live box keeps its blue border and ground and gains weight; the derived
two lose their border and background and go muted. They are still editable,
which is what the border on hover says, and the title spells out that
clicking enters the number that way instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Trowbridge 2026-09-21 22:50:34 -04:00
parent 75f662d12a
commit 1035dae76b
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -237,6 +237,15 @@ const FIELDS = [
['pct', '% change'],
]
// Exactly one box per measure is live -- scaleInputs is keyed by measure, so
// focusing another row hands that measure's edit over rather than adding a
// second one. The other two are the same number said differently, so they are
// drawn as output: no border, no ground, muted. They are still editable, and a
// border on hover is what says so.
//
// Both states used to be full input boxes differing by a border colour, which
// made three typed figures out of one typed figure and two calculations.
//
// given the active edit for a measure, what do the three rows read?
// dp is the measure's own precision, so the editable rows read the same way as
// the lines above them -- whole dollars against whole dollars, five places
@ -328,11 +337,16 @@ function LedgerInput({ value, active, onChange, onFocus, suffix }) {
onChange(el.value.replace(/,/g, ''))
}}
onFocus={onFocus} placeholder="—"
title={active ? undefined : 'Derived — click to enter the number this way instead'}
className={`border rounded py-0.5 text-xs w-24 text-right font-mono tabular-nums
transition-colors
${suffix ? 'pl-2 pr-5' : 'px-2'}
${active ? 'border-blue-400 bg-blue-50/40 text-gray-800' : 'border-gray-200 bg-white text-gray-700'}`} />
${active
? 'border-blue-400 bg-blue-50/40 text-gray-900 font-medium'
: 'border-transparent bg-transparent text-gray-400 hover:border-gray-300 hover:bg-white'}`} />
{suffix && (
<span className="absolute right-1.5 text-gray-400 pointer-events-none"
<span className={`absolute right-1.5 pointer-events-none
${active ? 'text-gray-500' : 'text-gray-300'}`}
style={{ fontSize: '10px' }}>{suffix}</span>
)}
</span>