diff --git a/fusion_plating/fusion_plating_jobs/__manifest__.py b/fusion_plating/fusion_plating_jobs/__manifest__.py index f61748de..d37c049f 100644 --- a/fusion_plating/fusion_plating_jobs/__manifest__.py +++ b/fusion_plating/fusion_plating_jobs/__manifest__.py @@ -3,7 +3,7 @@ # License OPL-1 (Odoo Proprietary License v1.0) { 'name': 'Fusion Plating — Native Jobs', - 'version': '19.0.8.16.1', + 'version': '19.0.8.16.2', 'category': 'Manufacturing/Plating', 'summary': 'Native plating job model — replaces mrp.production / mrp.workorder bridge.', 'author': 'Nexa Systems Inc.', diff --git a/fusion_plating/fusion_plating_jobs/static/src/scss/fp_job_step_input_wizard_v3.scss b/fusion_plating/fusion_plating_jobs/static/src/scss/fp_job_step_input_wizard_v3.scss index 82445261..068ce379 100644 --- a/fusion_plating/fusion_plating_jobs/static/src/scss/fp_job_step_input_wizard_v3.scss +++ b/fusion_plating/fusion_plating_jobs/static/src/scss/fp_job_step_input_wizard_v3.scss @@ -269,51 +269,82 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex}); } // ---------- Value — the live widget for this row's type -------- + // + // KEY INSIGHT: Odoo's editable list shows each cell as a + // read-mode span/text until the user clicks it (then a real + // swaps in). Targeting `input { ... }` only styles + // the focused state, leaving every other cell looking like + // bare un-clickable text. So we put the input chrome on + // the .o_field_widget wrapper (always in DOM, both modes) + // and make the inner transparent so it inherits. + // --------------------------------------------------------------- td.o_fp_iw_value { grid-area: value; + position: relative; - // Make the value widget container fill the available - // grid area, no centering, no shrinking. - .o_field_widget { - display: block; + // The wrapper IS the visible "input box" — both in + // display mode (showing a span) and in edit mode + // (showing an actual input). + > .o_field_widget, + > div.o_field_widget { + display: flex; + align-items: center; width: 100%; max-width: 420px; + min-height: 48px; + padding: 10px 14px; + background-color: $fp-iw-page; + color: $fp-iw-ink; + border: 1px solid $fp-iw-ink-faint; + border-radius: 8px; + text-align: left; + font-size: 1.125rem; + font-weight: 500; + cursor: text; + transition: border-color 120ms ease, + background-color 120ms ease, + box-shadow 120ms ease; + + &:hover { + border-color: $fp-iw-ink-mute; + } } - // Inputs — number/text/date/etc. all share the same - // chrome. Brighter border + slight surface tint so - // empty inputs are obviously interactive in dark mode. + // Focus ring travels up from the inner input to the + // wrapper via :focus-within so the visible chrome + // glows when the user clicks in. + > .o_field_widget:focus-within, + > div.o_field_widget:focus-within { + border-color: $fp-iw-border-focus !important; + background-color: $fp-iw-card !important; + box-shadow: 0 0 0 3px + color-mix(in srgb, + #{$fp-iw-border-focus} 25%, transparent); + } + + // Inner inputs / spans inherit from wrapper — fully + // transparent so they don't double-up on chrome. + input, input[type="text"], input[type="number"], input[type="datetime-local"], input.o_input, - input:not([type]) { + .o_field_widget > span, + .o_field_widget > div { width: 100% !important; + background: transparent !important; + color: inherit !important; + border: none !important; + padding: 0 !important; + margin: 0 !important; text-align: left !important; - font-size: 1.125rem; - font-weight: 500; - padding: 10px 14px !important; - min-height: 48px; - background-color: $fp-iw-page !important; - color: $fp-iw-ink !important; - border: 1px solid $fp-iw-ink-faint !important; - border-radius: 8px !important; + font-size: inherit !important; + font-weight: inherit !important; + line-height: 1.4 !important; + min-height: 0 !important; + height: auto !important; box-shadow: none !important; - transition: border-color 120ms ease, - box-shadow 120ms ease, - background-color 120ms ease; - - &:hover { - border-color: $fp-iw-ink-mute !important; - } - &:focus { - border-color: $fp-iw-border-focus !important; - background-color: $fp-iw-card !important; - box-shadow: 0 0 0 3px - color-mix(in srgb, - #{$fp-iw-border-focus} 25%, transparent) !important; - outline: none; - } + outline: none !important; &::placeholder { color: $fp-iw-ink-faint; @@ -321,6 +352,28 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex}); } } + // ---------- Special widgets — opt out of the input chrome ---- + // + // Boolean toggle, photo upload, multi-point and panel + // widgets each have their own visual treatment. They + // shouldn't sit inside an "input box" — they should + // render bare with their own chrome. + > .o_field_widget:has(.o_boolean_toggle), + > .o_field_widget:has(.form-switch), + > .o_field_widget.o_field_image, + > .o_field_widget:has(.o_form_image_controls) { + background: transparent !important; + border: none !important; + padding: 0 !important; + min-height: 0 !important; + box-shadow: none !important; + + &:focus-within { + background: transparent !important; + box-shadow: none !important; + } + } + // Boolean toggle — bigger pill for fat fingers .o_boolean_toggle, .form-switch { @@ -330,8 +383,7 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex}); } // Image / photo widget — constrain the WHOLE field - // (upload area + preview) so it doesn't blow up to - // fill the whole card width. + // (upload area + preview) so it doesn't blow up. .o_field_image { max-width: 240px; @@ -348,6 +400,8 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex}); } // ---------- Extras — composite types (multi-point, panel) ---- + // Same display/edit-mode trick as the value cell: chrome + // on the wrapper, transparent input inside. td.o_fp_iw_extra { grid-area: extras; display: inline-flex; @@ -355,7 +409,6 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex}); align-items: center; margin-right: 12px; - // Compact label-before-input grouping &::before { content: attr(data-label); display: inline-block; @@ -364,18 +417,35 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex}); margin-right: 4px; } - input, - input.o_input { - width: 80px !important; - text-align: left !important; - font-size: 1rem; - padding: 6px 10px !important; + > .o_field_widget, + > div.o_field_widget { + display: inline-flex; + align-items: center; + width: 80px; min-height: 38px; - background-color: $fp-iw-page !important; - color: $fp-iw-ink !important; - border: 1px solid $fp-iw-ink-faint !important; - border-radius: 6px !important; + padding: 6px 10px; + background-color: $fp-iw-page; + color: $fp-iw-ink; + border: 1px solid $fp-iw-ink-faint; + border-radius: 6px; + cursor: text; + + &:focus-within { + border-color: $fp-iw-border-focus; + background-color: $fp-iw-card; + } + } + + input { + width: 100% !important; + background: transparent !important; + color: inherit !important; + border: none !important; + padding: 0 !important; + text-align: left !important; box-shadow: none !important; + outline: none !important; + min-height: 0 !important; } }