feat(record-inputs): tap-to-adjust steppers + inputmode keypad hint

Adds [-] / [+] buttons around every numeric input in the Record Inputs
dialog (single-value, dual-entry, and pass_fail+range branches). Tap
to increment / decrement by the recipe-author-derived step size
(stepFor() already computes this from target_min/target_max precision,
falling back to input-type defaults).

- Decrement clamps at 0 (typical qty/time/temp on a plating floor
  doesn't go negative; if needed, operator can still tap the input
  and type a negative value)
- Increment uses _stepRound() to avoid floating-point fuzz on decimals
- Center-aligned monospace-ish input between the buttons for clarity
- inputmode='decimal' (or 'numeric' for time fields) hint so when the
  operator does tap the input, the iPad shows a number keypad instead
  of the full keyboard

Touches single-value, dual-entry (min/max), and pass_fail+range. Other
multi-field widgets (multi-point thickness, bath chemistry panel) still
use plain inputs — separate request if they need steppers too.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-24 19:43:00 -04:00
parent 8d4c85cc52
commit 7dab5fb9c6
4 changed files with 201 additions and 34 deletions

View File

@@ -801,3 +801,49 @@ $rid-warn : var(--fp-rid-warn, #{$_fp-rid-warn-hex});
color: $rid-required;
}
}
// Numeric stepper (tap-to-increment / tap-to-decrement around the input).
// Operator can still tap the input to open the keypad (inputmode="decimal"
// gives them the number keypad on iPad).
.o_fp_ri_stepper {
display: flex;
align-items: stretch;
gap: 0;
max-width: 16rem;
}
.o_fp_ri_stepper_btn {
flex: 0 0 auto;
width: 3.2rem;
border: 1px solid #cdd0d4;
background: #f5f6f8;
color: #1d1d1f;
font-size: 1.3rem;
cursor: pointer;
transition: background 80ms;
display: flex;
align-items: center;
justify-content: center;
&:hover, &:active { background: #e5e7eb; }
&.o_fp_ri_stepper_minus {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-right: 0;
}
&.o_fp_ri_stepper_plus {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-left: 0;
}
}
.o_fp_ri_stepper_input {
flex: 1 1 auto;
border-radius: 0;
text-align: center;
font-size: 1.2rem;
font-weight: 600;
min-width: 4rem;
}