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

fix(shopfloor): Manager Desk pickers — overflow + chevron + Take Over label

Browse Source 
Two issues from the wet-WO card screenshot:

**1. Tank picker bleeding past the card's right edge**

Native <select> defaults to `box-sizing: content-box`, so my
`width:100% + padding-right:2.25rem` rendered the picker wider than
its flex slot — the second picker (Tank, on wet WOs) overflowed the
card border at the typical card width.

Fix on `.o_fp_mgr_picker`:
  • `box-sizing: border-box` — keep total width inside the slot
  • `min-width: 0` — let flex actually shrink it past its content
  • Custom SVG chevron via background-image so we control the
    indicator's position exactly (Bootstrap's native chevron sits
    almost flush with the right border, which the user flagged
    earlier). 1rem of clearance from the right edge.

**2. Take Over button**

Earlier I'd collapsed it to icon-only because the wet card was too
wide; user pointed out the icon alone is confusing. Restored the
"Take Over" label (with icon prefix) so both buttons read cleanly:

   [👤 Take Over]  [↗ Open WO]

Asset cache cleared as part of the deploy so the recompiled SCSS
+ refreshed XML template ship together. A hard browser refresh
(DevTools → Empty Cache + Hard Reload) is needed to pick them up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-19 13:15:00 -04:00
parent e01a2a0e35
commit 5c3e7a3cf3
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss
View File

@@ -487,25 +487,45 @@
} }
} }
// Action group sits to the RIGHT of info on wide rows. flex:1 so it
// takes the remaining horizontal space (the dropdown then grows to
// fill); flex-wrap so on narrow widths the dropdown sits on its own
// line and the buttons go below at 50/50.
.o_fp_mgr_wo_actions { .o_fp_mgr_wo_actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: $fp-space-2; gap: $fp-space-2;
flex: 0 0 auto; flex: 1 1 360px; // takes remaining width, never under 360px
justify-content: flex-end;
} }
.o_fp_mgr_picker { .o_fp_mgr_picker {
min-width: 180px; // box-sizing matters: native <select> defaults to content-box, so
// `width: 100% + padding-right` overflows. border-box keeps the
// picker inside its flex slot — the Tank dropdown was bleeding
// past the card's right edge before this.
box-sizing: border-box;
flex: 1 1 220px; // grows to fill, but stays usable
min-width: 0; // lets flex actually shrink it
min-height: 40px; min-height: 40px;
padding: 0 $fp-space-3; // Custom chevron via SVG background — controls its position
// exactly (browsers crowd the native chevron right against the
// edge). pe: none on chevron so the click still hits the select.
appearance: none;
-webkit-appearance: none;
background-color: $fp-card;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 7L0 1l1.4-1.4L6 4.2 10.6-.4 12 1z'/></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
padding: 0 2.5rem 0 $fp-space-3;
border: 1px solid #{$fp-border}; border: 1px solid #{$fp-border};
border-radius: $fp-radius-sm; border-radius: $fp-radius-sm;
background-color: $fp-card;
color: $fp-ink; color: $fp-ink;
font-size: $fp-text-sm; font-size: $fp-text-sm;
&:focus { @include fp-focus-ring; border-color: $fp-accent; } &:focus { @include fp-focus-ring; border-color: $fp-accent; }
} }
.o_fp_mgr_btn,
.o_fp_mgr_wo_row .btn { .o_fp_mgr_wo_row .btn {
min-height: 40px; min-height: 40px;
padding: 0 $fp-space-3; padding: 0 $fp-space-3;
@@ -517,14 +537,23 @@
color: $fp-ink; color: $fp-ink;
white-space: nowrap; white-space: nowrap;
transition: filter $fp-dur-fast $fp-ease; transition: filter $fp-dur-fast $fp-ease;
flex: 0 0 auto;
&:hover { filter: brightness(0.95); } &:hover { filter: brightness(0.95); }
} }
@media (max-width: 720px) { @media (max-width: 900px) {
// Stack info + actions vertically on narrow viewports // Mobile / narrow tablet: dropdown takes full width on its own
.o_fp_mgr_wo_actions { width: 100%; } // line; the two buttons split 50/50 underneath.
.o_fp_mgr_picker { flex: 1 1 100%; max-width: 100%; } .o_fp_mgr_wo_actions {
.o_fp_mgr_wo_row .btn { min-height: $fp-touch-min; } flex: 1 1 100%;
justify-content: stretch;
}
.o_fp_mgr_picker { flex: 1 1 100%; }
.o_fp_mgr_btn,
.o_fp_mgr_wo_row .btn {
flex: 1 1 calc(50% - #{$fp-space-2});
min-height: $fp-touch-min;
}
} }

10
fusion_plating/fusion_plating_shopfloor/static/src/xml/manager_dashboard.xml
View File

@@ -185,14 +185,14 @@
</option> </option>
</t> </t>
</select> </select>
<button class="btn" <button class="btn o_fp_mgr_btn"
t-on-click="() => this.onTakeOver(wo)" t-on-click="() => this.onTakeOver(wo)"
title="Assign yourself"> title="Assign this WO to yourself">
<i class="fa fa-user"/> <i class="fa fa-user me-1"/>Take Over
</button> </button>
<button class="btn" <button class="btn o_fp_mgr_btn"
t-on-click="() => this.openRecord('mrp.workorder', wo.id)"> t-on-click="() => this.openRecord('mrp.workorder', wo.id)">
Open WO <i class="fa fa-external-link me-1"/>Open WO
</button> </button>
</div> </div>
</div> </div>