feat(sub12b): shared SCSS for Move/Rack/Timer dialogs (Task 14)

3-column grid layout for field rows (label / input / hint).
Compliance prompts + Blockers blocks have their own backgrounds.
Soft blockers amber + left border, hard blockers red + left border —
matches the spec's protocol.

Token pattern + dark-mode @if branch (CLAUDE.md rule: Odoo 19 doesn't
flip dark mode via runtime DOM class; we branch at SCSS compile time
on $o-webclient-color-scheme).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-27 21:15:12 -04:00
parent 270f427d7f
commit 11bc0ca742

View File

@@ -0,0 +1,131 @@
// Sub 12b — shared SCSS for Move Parts / Move Rack / Rack Parts /
// Stop Timer dialogs. Tokens follow the existing fp_shopfloor pattern
// with a dark-mode SCSS @if branch (CLAUDE.md rule for Odoo 19 dark
// mode — runtime DOM class flips do not work in 19; we branch at SCSS
// compile time on $o-webclient-color-scheme).
$o-webclient-color-scheme: bright !default;
$_fp_md_card_hex: #ffffff;
$_fp_md_border_hex: #d8dadd;
$_fp_md_accent_hex: #2e7d6b;
$_fp_md_muted_hex: #6b7280;
$_fp_md_warn_hex: #fff3cd;
$_fp_md_danger_hex: #f8d7da;
$_fp_md_page_hex: #f3f4f6;
@if $o-webclient-color-scheme == dark {
$_fp_md_card_hex: #22262d !global;
$_fp_md_border_hex: #3a3f47 !global;
$_fp_md_warn_hex: #4a3a1a !global;
$_fp_md_danger_hex: #4a1f1f !global;
$_fp_md_page_hex: #1a1d21 !global;
}
$fp-md-card: var(--fp-card-bg, #{$_fp_md_card_hex});
$fp-md-border: var(--fp-border-color, #{$_fp_md_border_hex});
$fp-md-accent: var(--fp-accent, #{$_fp_md_accent_hex});
$fp-md-muted: var(--fp-muted, #{$_fp_md_muted_hex});
$fp-md-warn: var(--fp-warn-bg, #{$_fp_md_warn_hex});
$fp-md-danger: var(--fp-danger-bg, #{$_fp_md_danger_hex});
$fp-md-page: var(--fp-page-bg, #{$_fp_md_page_hex});
.o_fp_move_dialog,
.o_fp_rack_dialog,
.o_fp_timer_dialog {
display: flex;
flex-direction: column;
gap: .75rem;
.o_fp_move_field {
display: grid;
grid-template-columns: 9rem 1fr auto;
align-items: center;
gap: .5rem;
label {
font-weight: 500;
margin: 0;
}
input, select, textarea {
padding: .375rem .5rem;
border: 1px solid $fp-md-border;
border-radius: 4px;
background: $fp-md-card;
font-size: .9rem;
min-height: 2rem;
}
textarea { min-height: 4rem; }
}
.o_fp_compliance_prompts,
.o_fp_blockers {
margin-top: .5rem;
padding: .75rem;
border: 1px solid $fp-md-border;
border-radius: 4px;
background: $fp-md-page;
h5 {
margin: 0 0 .5rem 0;
color: $fp-md-accent;
font-size: .9rem;
font-weight: 600;
}
}
.o_fp_blocker_row {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem;
margin-bottom: .25rem;
border-radius: 4px;
&.o_fp_blocker_soft {
background: $fp-md-warn;
border-left: 4px solid #f59e0b;
}
&.o_fp_blocker_hard {
background: $fp-md-danger;
border-left: 4px solid #dc2626;
}
.o_fp_blocker_icon { font-size: 1.25rem; }
.o_fp_blocker_msg { flex: 1; font-size: .9rem; }
}
.o_fp_rack_parts_list {
margin: 0;
padding-left: 1.25rem;
li { font-size: .9rem; line-height: 1.6; }
}
.o_fp_billed_inputs {
display: flex;
align-items: center;
gap: .25rem;
input { width: 4rem; }
}
}
.o_fp_rack_tag_chip {
display: inline-block;
padding: .125rem .5rem;
margin-right: .25rem;
border-radius: 999px;
font-size: .75rem;
background: $fp-md-card;
border: 1px solid $fp-md-border;
}
.o_fp_timer_summary {
padding: .5rem;
background: $fp-md-page;
border-radius: 4px;
color: $fp-md-muted;
font-size: .875rem;
border-left: 4px solid $fp-md-accent;
}