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

feat(job_workspace): polish header buttons + workflow bar + next button

Browse Source 
Same polish pass as the plant kanban — bigger touch targets, gradient
backgrounds (light + dark via existing token system), more readable
typography.

Header (top row):
  - Back: bigger padding, hover lift
  - Hand Off: was btn-sm \u2192 full size; gold gradient + shadow
    matching the plant kanban .toolbar-btn.handoff treatment
  - WO #: 1.1rem \u2192 1.3rem
  - Pills (qty done, due date, holds): bigger padding + font, subtle
    gradient bg, hold pills get tinted gradients
  - Customer / part name: 0.95rem (more readable)

Workflow bar (step dots + next button):
  - Step dots: 14px \u2192 18px, current scales 1.15x with bigger
    halo, gradient fills (green for done, blue for current)
  - Step labels: 0.65rem \u2192 0.8rem (the original was unreadable
    at arm's length on a tablet)
  - Connector links: 2px \u2192 3px, rounded
  - Next button: prominent green gradient (was generic btn-primary),
    bigger padding + font, hover lift + shadow

Manifest: fusion_plating_shopfloor 19.0.34.1.0 \u2192 19.0.34.2.0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-25 11:03:06 -04:00
parent caeba27846
commit 0ed4f88da2
3 changed files with 100 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fusion_plating/fusion_plating_shopfloor/__manifest__.py
View File

@@ -5,7 +5,7 @@
{
'name': 'Fusion Plating — Shop Floor',
'version': '19.0.34.1.0',
'version': '19.0.34.2.0',
'category': 'Manufacturing/Plating',
'summary': 'Shop-floor tablet stations, QR scanning, bake window enforcer.',
'description': """

129
fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss
View File

@@ -35,10 +35,11 @@ $_ws-text-hex: #1d1d1f;
}
// ---- HEADER ------------------------------------------------------------
// 2026-05-25: header buttons bigger + gradients (matches plant kanban polish).
.o_fp_ws_head {
background: $_ws-card-hex;
border-bottom: 1px solid $_ws-border-hex;
padding: 0.6rem 1rem;
padding: 0.8rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -49,101 +50,167 @@ $_ws-text-hex: #1d1d1f;
.o_fp_ws_head_l, .o_fp_ws_head_r {
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.6rem;
flex-wrap: wrap;
}
.o_fp_ws_back { padding: 0.25rem 0.5rem; }
.o_fp_ws_wo { font-weight: 700; font-size: 1.1rem; }
.o_fp_ws_back {
padding: 0.5rem 0.85rem;
font-size: 0.95rem;
font-weight: 500;
border-radius: 7px;
transition: transform 0.1s ease, background 0.1s ease;
&:hover {
transform: translateY(-1px);
background: rgba(0,0,0,0.04);
}
}
// Hand-Off button — gold gradient, prominent, matches plant kanban .handoff
.o_fp_ws_handoff {
padding: 0.55rem 1.1rem;
font-size: 0.95rem;
font-weight: 700;
border-radius: 7px;
background: linear-gradient(135deg, #ffd966 0%, #ffc107 100%);
border: 1px solid #d39e00;
color: #5e4400;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
transition: transform 0.1s ease, box-shadow 0.1s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0,0,0,0.12);
background: linear-gradient(135deg, #ffd966 0%, #ffc107 100%);
border-color: #d39e00;
color: #5e4400;
}
}
.o_fp_ws_wo { font-weight: 700; font-size: 1.3rem; letter-spacing: 0.01em; }
.o_fp_ws_dot { color: var(--text-secondary, #999); }
.o_fp_ws_cust, .o_fp_ws_part { color: var(--text-secondary, #555); }
.o_fp_ws_cust, .o_fp_ws_part { color: var(--text-secondary, #555); font-size: 0.95rem; }
.o_fp_ws_pill {
background: $_ws-page-hex;
background: linear-gradient(135deg, $_ws-card-hex 0%, $_ws-page-hex 100%);
border: 1px solid $_ws-border-hex;
padding: 0.2rem 0.55rem;
border-radius: 4px;
font-size: 0.78rem;
padding: 0.4rem 0.85rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary, #555);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.o_fp_ws_holds_ok {
background: rgba(52, 199, 89, 0.12);
background: linear-gradient(135deg, rgba(52, 199, 89, 0.18) 0%, rgba(52, 199, 89, 0.08) 100%);
color: #1d6e2f;
border-color: rgba(52, 199, 89, 0.3);
border-color: rgba(52, 199, 89, 0.35);
font-weight: 600;
}
.o_fp_ws_holds_red {
background: rgba(255, 59, 48, 0.12);
background: linear-gradient(135deg, rgba(255, 59, 48, 0.18) 0%, rgba(255, 59, 48, 0.08) 100%);
color: #b00018;
border-color: rgba(255, 59, 48, 0.3);
border-color: rgba(255, 59, 48, 0.35);
font-weight: 600;
}
// ---- WORKFLOW BAR ------------------------------------------------------
// 2026-05-25: bigger step dots + labels + the Next button. Dots were
// 14px with 0.65rem labels — too small to read at arm's length.
.o_fp_ws_bar {
background: $_ws-page-hex;
border-bottom: 1px solid $_ws-border-hex;
padding: 0.55rem 1rem;
padding: 0.75rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
gap: 1.25rem;
}
.o_fp_ws_bar_line {
flex: 1;
display: flex;
align-items: center;
gap: 0.3rem;
gap: 0.35rem;
}
.o_fp_ws_dot_wrap {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
min-width: 72px;
.o_fp_ws_bar_dot {
width: 14px;
height: 14px;
width: 18px;
height: 18px;
border-radius: 50%;
background: $_ws-border-hex;
border: 2px solid $_ws-border-hex;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.o_fp_ws_bar_label {
font-size: 0.65rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary, #888);
margin-top: 0.2rem;
margin-top: 0.35rem;
text-align: center;
}
&.done .o_fp_ws_bar_dot {
background: #34c759;
border-color: #34c759;
background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
border-color: #22c55e;
}
&.current .o_fp_ws_bar_dot {
background: #0071e3;
background: linear-gradient(135deg, #3b82f6 0%, #0071e3 100%);
border-color: #0071e3;
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22);
transform: scale(1.15);
}
&.current .o_fp_ws_bar_label {
color: #0071e3;
font-weight: 600;
font-weight: 700;
}
}
.o_fp_ws_link {
flex: 0 0 8px;
height: 2px;
flex: 0 0 12px;
height: 3px;
background: $_ws-border-hex;
margin-top: -16px;
margin-top: -22px;
border-radius: 2px;
&.done { background: #34c759; }
&.done { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
}
.o_fp_ws_next { white-space: nowrap; }
// "Next: Issue Certs" / "Mark Job Done" milestone-advance button.
// Green gradient = celebratory forward motion (matches the done dots).
.o_fp_ws_next {
white-space: nowrap;
padding: 0.65rem 1.4rem;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
border: 1px solid #15803d;
color: #fff;
box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
transition: transform 0.1s ease, box-shadow 0.1s ease;
i { margin-left: 0.4rem; }
&:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
border-color: #15803d;
color: #fff;
box-shadow: 0 4px 8px rgba(22, 163, 74, 0.32);
}
&:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(22, 163, 74, 0.2);
}
}
// ---- MAIN (step list + side panel) -------------------------------------
.o_fp_ws_main {

2
fusion_plating/fusion_plating_shopfloor/static/src/xml/job_workspace.xml
View File

@@ -23,7 +23,7 @@
<i class="fa fa-arrow-left"/> Back
</button>
<!-- Phase 6.2 — Hand-Off: lock the tablet -->
<button class="btn btn-sm btn-warning ms-2"
<button class="btn btn-warning o_fp_ws_handoff ms-2"
t-on-click="handOff"
title="Lock the tablet for the next operator">
<i class="fa fa-lock"/> Hand Off