admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(jobs): v3 wizard — chrome on <td>, verified from Odoo source (16.3)

Browse Source 
I was wrong about the DOM. Verified from Odoo 19 source on entech:

  web/static/src/views/fields/float/float_field.xml
  web/static/src/views/fields/char/char_field.xml
  web/static/src/views/list/list_renderer.xml

Float/Char fields render as a BARE <span> (read mode) or BARE
<input class="o_input"> (edit mode) directly inside the <td>.
There is NO .o_field_widget wrapper. So all my prior CSS targeting
.o_field_widget matched nothing.

Also discovered: Odoo's getCellClass() in list_renderer.js calls
canUseFormatter() which strips custom <field> classes when the
column has widget="..." set:

    canUseFormatter(column, record) {
        if (column.widget) {
            return false;   // ← class stripped here
        }
        ...
    }

So o_fp_iw_value class doesn't even land on cells with
widget="boolean_toggle"/"image". Those cells render natively;
boolean toggle and image styling now targets the widgets directly
wherever they appear (.o_boolean_toggle, .o_field_image).

Fix: put visible chrome (border, bg, padding, min-height) on the
<td> itself for prompt/meta/value/extras cells. Make inner span
and input transparent + inherit. Focus ring travels up via
:focus-within on the td.

Cells now look like obvious input boxes from first paint, regardless
of whether the user has clicked into edit mode.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-03 22:06:53 -04:00
parent 875828c588
commit 328599d539
2 changed files with 160 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fusion_plating/fusion_plating_jobs/__manifest__.py
View File

@@ -3,7 +3,7 @@
# License OPL-1 (Odoo Proprietary License v1.0)
{
'name': 'Fusion Plating — Native Jobs',
'version': '19.0.8.16.2',
'version': '19.0.8.16.3',
'category': 'Manufacturing/Plating',
'summary': 'Native plating job model — replaces mrp.production / mrp.workorder bridge.',
'author': 'Nexa Systems Inc.',

308
fusion_plating/fusion_plating_jobs/static/src/scss/fp_job_step_input_wizard_v3.scss
View File

@@ -207,28 +207,37 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex});
}
// ---------- Card header — prompt name ----------
// Char field renders as bare <span> (read) or <input> (edit)
// directly in the td. Style typography on the td and make
// the inner element inherit + transparent.
td.o_fp_iw_prompt {
grid-area: prompt;
font-size: 1rem;
font-weight: 600;
color: $fp-iw-ink;
line-height: 1.4;
input, .o_field_widget {
font-size: 1rem;
font-weight: 600;
color: $fp-iw-ink;
> span,
> input,
> input.o_input {
display: block;
background: transparent !important;
color: inherit !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
line-height: inherit !important;
box-shadow: none !important;
outline: none !important;
cursor: text;
min-height: 0 !important;
height: auto !important;
&[readonly], &:disabled {
cursor: default;
}
}
// Required asterisk — driven by data-required attribute
// OR a server-side compute. We can't easily inspect the
// model field here, so the asterisk is rendered by the
// XML view via a span sibling (.o_fp_iw_required_marker).
}
// ---------- Meta pills — type + unit each in its OWN column ----
@@ -238,99 +247,116 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex});
td.o_fp_iw_meta_type { grid-area: type; }
td.o_fp_iw_meta_unit { grid-area: unit; }
// Meta pills — input_type (Selection) and target_unit
// (Selection) render as bare <span> (read mode) or <select>
// (edit mode) directly inside the td. Style the td as a
// pill, make the inner element transparent.
td.o_fp_iw_meta {
align-self: center;
display: inline-flex !important;
align-items: center !important;
width: auto !important;
font-size: 0.75rem;
color: $fp-iw-ink-mute;
padding: 4px 10px !important;
background-color: $fp-iw-pill-bg !important;
color: $fp-iw-ink-soft !important;
border: 1px solid $fp-iw-border !important;
border-radius: 999px !important;
line-height: 1.2 !important;
.o_field_widget {
width: auto;
}
// The pill itself — applied to whatever input/select
// Odoo renders for the field type (Selection → select).
select,
input,
.o_input,
.o_field_widget > span {
> span,
> select,
> input,
> input.o_input {
display: inline-block;
font-size: 0.75rem;
padding: 4px 10px !important;
background-color: $fp-iw-pill-bg !important;
color: $fp-iw-ink-soft !important;
border: 1px solid $fp-iw-border !important;
border-radius: 999px !important;
line-height: 1.2 !important;
background: transparent !important;
color: inherit !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
height: auto !important;
min-height: 0 !important;
line-height: inherit !important;
box-shadow: none !important;
outline: none !important;
width: auto !important;
}
}
// ---------- 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
// <input> 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 <input> transparent so it inherits.
// VERIFIED FROM ODOO 19 SOURCE
// (web/static/src/views/fields/float/float_field.xml +
// web/static/src/views/fields/char/char_field.xml +
// web/static/src/views/list/list_renderer.xml)
//
// Float/Char/Date fields render as a BARE <span> (read mode)
// or BARE <input class="o_input"> (edit mode) directly inside
// the <td>. There is NO .o_field_widget wrapper. So the
// visible "input box" chrome must go on the <td> itself.
// The inner span/input is then made transparent.
//
// Cells with widget="boolean_toggle"/"image" don't get our
// o_fp_iw_value class at all (Odoo's canUseFormatter strips
// custom classes when column.widget is set), so they render
// natively — handled in their own rules below.
// ---------------------------------------------------------------
td.o_fp_iw_value {
grid-area: value;
position: relative;
// Override the global "td { display: block; }" rule above —
// we need flex layout so the inner span/input centers.
display: flex !important;
align-items: center !important;
width: 100% !important;
max-width: 420px;
min-height: 48px;
padding: 10px 14px !important;
background-color: $fp-iw-page !important;
color: $fp-iw-ink !important;
border: 1px solid $fp-iw-ink-faint !important;
border-radius: 8px !important;
cursor: text;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.4;
transition: border-color 120ms ease,
background-color 120ms ease,
box-shadow 120ms ease;
// 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;
}
&:hover {
border-color: $fp-iw-ink-mute !important;
}
// 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 {
// td via :focus-within (works even though the input
// is the focused element, not the td).
&: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);
#{$fp-iw-border-focus} 25%, transparent) !important;
}
// 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,
.o_field_widget > span,
.o_field_widget > div {
// Inner span (read mode) — fills the cell, left-aligned,
// inherits typography from the td.
> span {
display: block;
width: 100%;
text-align: left;
color: inherit;
font: inherit;
}
// Inner input (edit mode) — same treatment as the span,
// fully transparent so the td chrome shows through.
> input,
> input.o_input,
> input[type="text"],
> input[type="number"],
> input[type="datetime-local"] {
flex: 1 1 auto;
width: 100% !important;
background: transparent !important;
color: inherit !important;
@@ -338,9 +364,8 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex});
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: 1.4 !important;
font: inherit !important;
line-height: inherit !important;
min-height: 0 !important;
height: auto !important;
box-shadow: none !important;
@@ -351,101 +376,86 @@ $fp-iw-pill-bg : var(--fp-pill-bg, #{$_fp-iw-pill-bg-hex});
font-weight: 400;
}
}
}
// ---------- 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;
// ---------- Boolean toggle cells — render bare ---------------
// value_boolean has widget="boolean_toggle" so canUseFormatter
// returns false → our o_fp_iw_value class is NOT added.
// We target the cell via the type flag column's td position
// (4th visible td when is_boolean_type) — easier: target the
// toggle directly anywhere it appears.
.o_boolean_toggle,
.form-switch {
transform: scale(1.5);
transform-origin: left center;
margin: 12px 0 12px 16px;
}
&:focus-within {
background: transparent !important;
box-shadow: none !important;
}
}
// ---------- Image / photo cells — constrain ------------------
// Same canUseFormatter issue — widget="image" strips our class.
// Target the o_field_image natively wherever it lands.
.o_field_image {
max-width: 240px;
// Boolean toggle — bigger pill for fat fingers
.o_boolean_toggle,
.form-switch {
transform: scale(1.5);
transform-origin: left center;
margin: 12px 0 12px 16px;
}
// Image / photo widget — constrain the WHOLE field
// (upload area + preview) so it doesn't blow up.
.o_field_image {
img,
.o_image,
.o_form_uri,
.o_form_image_controls {
max-width: 240px;
img,
.o_image,
.o_form_uri,
.o_form_image_controls {
max-width: 240px;
max-height: 180px;
border-radius: 8px;
border: 1px solid $fp-iw-border;
}
max-height: 180px;
border-radius: 8px;
border: 1px solid $fp-iw-border;
}
}
// ---------- Extras — composite types (multi-point, panel) ----
// Same display/edit-mode trick as the value cell: chrome
// on the wrapper, transparent input inside.
// Same approach as value cells: chrome on the td itself,
// because Float fields render as bare span/input.
td.o_fp_iw_extra {
grid-area: extras;
display: inline-flex;
gap: 6px;
align-items: center;
display: inline-flex !important;
align-items: center !important;
width: 80px !important;
min-height: 38px;
padding: 6px 10px !important;
margin-right: 12px;
background-color: $fp-iw-page !important;
color: $fp-iw-ink !important;
border: 1px solid $fp-iw-ink-faint !important;
border-radius: 6px !important;
cursor: text;
font-size: 1rem;
line-height: 1.3;
&::before {
content: attr(data-label);
display: inline-block;
font-size: 0.75rem;
color: $fp-iw-ink-mute;
margin-right: 4px;
&:focus-within {
border-color: $fp-iw-border-focus !important;
background-color: $fp-iw-card !important;
}
> .o_field_widget,
> div.o_field_widget {
display: inline-flex;
align-items: center;
width: 80px;
min-height: 38px;
padding: 6px 10px;
background-color: $fp-iw-page;
color: $fp-iw-ink;
border: 1px solid $fp-iw-ink-faint;
border-radius: 6px;
cursor: text;
// Per-cell label (R1/R2/.../pH/Conc/Temp/Bath) is the
// field's `string=` attribute — Odoo renders it inside
// the cell when in form mode but skips it in list mode.
// We surface it via the data-label attr if present, or
// fall back to no-label (composite cells stack inline
// and the visual order makes them obvious).
&:focus-within {
border-color: $fp-iw-border-focus;
background-color: $fp-iw-card;
}
}
input {
> span,
> input,
> input.o_input {
display: block;
width: 100% !important;
background: transparent !important;
color: inherit !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
font: inherit !important;
line-height: inherit !important;
box-shadow: none !important;
outline: none !important;
min-height: 0 !important;
height: auto !important;
}
}