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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user