From 37f1f7e8a32f5dde109b249f54d9b21b58d41501 Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sun, 17 May 2026 02:57:29 -0400 Subject: [PATCH] refactor(portal): trim legacy catch-all SCSS, deduplicate vs new partials Removed (now superseded by Phase 1-3 partials): - .o_fp_dashboard .o_fp_dashboard_card (-> .o_fp_job_card + .o_fp_panel) - .o_fp_seg_progress (-> .o_fp_stepper) - .o_fp_portal_status_dot (-> .o_fp_badge_dot) - .o_fp_portal_progress (-> .o_fp_timeline) - .o_fp_jobs_list (dashboard wraps in .o_fp_dashboard instead) - fp-portal-tint mixin (unused after refactor) Kept (still referenced by untouched templates): - .o_fp_portal_card (empty-state cards + configurator coating cards) - .o_fp_part_row + .o_fp_file_drop_zone (RFQ wizard JS-driven elements) - .o_fp_portal_form (configurator forms) - .nav-tabs (quote-request filter tabs) File goes from 304 to 124 lines (-59%). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../src/scss/fusion_plating_portal.scss | 208 ++---------------- 1 file changed, 16 insertions(+), 192 deletions(-) diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fusion_plating_portal.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fusion_plating_portal.scss index 60fcb952..2107c105 100644 --- a/fusion_plating/fusion_plating_portal/static/src/scss/fusion_plating_portal.scss +++ b/fusion_plating/fusion_plating_portal/static/src/scss/fusion_plating_portal.scss @@ -1,43 +1,25 @@ // ============================================================================= -// Fusion Plating -- Customer Portal styles +// Fusion Plating โ€” Customer Portal ยท Legacy catch-all // Copyright 2026 Nexa Systems Inc. // License OPL-1 (Odoo Proprietary License v1.0) // -// THEME AWARENESS -// --------------- -// This stylesheet ships with the website / portal frontend bundle. It NEVER -// hardcodes hex values. Every colour comes from a Bootstrap CSS custom -// property so the portal renders correctly in BOTH light and dark themes -// without any duplication: +// This file holds the rules that pre-date the 2026-05-17 dashboard redesign +// AND are still referenced by templates that the redesign did NOT touch +// (RFQ wizard part rows, file drop zone, configurator forms, empty-state +// cards on the secondary portal pages). The redesigned surfaces use the +// new component partials (_fp_portal_tokens, fp_portal_buttons, etc.). // -// surface: var(--bs-body-bg) -// muted: var(--bs-secondary-bg) -// foreground: var(--bs-body-color) -// muted text: var(--bs-secondary-color) -// border: var(--bs-border-color) -// success: var(--bs-success) -// info: var(--bs-info) -// warning: var(--bs-warning) -// danger: var(--bs-danger) -// -// Status tints use color-mix() against a theme token so a green dot is darker -// on a light background and brighter on a dark background -- one rule, two -// looks. We never use @media (prefers-color-scheme) or .o_dark overrides. +// THEME AWARENESS: rules in this file still use Bootstrap CSS custom +// properties (var(--bs-*)) so they adapt to both light and dark portal +// themes. New component partials use the brand token system instead. // ============================================================================= // ----------------------------------------------------------------------------- -// Local helper -- tint a semantic colour onto the current surface -// ----------------------------------------------------------------------------- -@mixin fp-portal-tint($color-var, $amount: 14%) { - background-color: color-mix(in srgb, var(#{$color-var}) #{$amount}, transparent); - color: var(#{$color-var}); - border: 1px solid color-mix(in srgb, var(#{$color-var}) 35%, transparent); -} - - -// ----------------------------------------------------------------------------- -// Generic portal card surface for plating-specific blocks +// Generic portal card surface โ€” used by empty-state messages on the secondary +// portal pages (quote requests, POs, invoices, certifications) and by the +// configurator coating cards. Replaced by .o_fp_card on the redesigned +// surfaces (/my/home, /my/jobs, /my/jobs/). // ----------------------------------------------------------------------------- .o_fp_portal_card { background-color: var(--bs-body-bg); @@ -57,153 +39,7 @@ // ----------------------------------------------------------------------------- -// Dashboard layout -// ----------------------------------------------------------------------------- -.o_fp_dashboard { - .o_fp_dashboard_card { - border: 1px solid var(--bs-border-color); - border-radius: 10px; - overflow: hidden; - transition: border-color 120ms ease, box-shadow 120ms ease; - - &:hover { - border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color)); - box-shadow: 0 2px 12px color-mix(in srgb, var(--bs-primary) 8%, transparent); - } - - .card-header { - background-color: var(--bs-body-bg); - border-bottom: 1px solid var(--bs-border-color); - padding: 0.75rem 1rem; - - h6 { - color: var(--bs-body-color); - font-weight: 600; - font-size: 0.9rem; - } - } - - .card-body { - background-color: var(--bs-body-bg); - } - - .table { - margin-bottom: 0; - font-size: 0.875rem; - - thead th { - border-bottom-width: 1px; - font-weight: 600; - font-size: 0.78rem; - text-transform: uppercase; - letter-spacing: 0.03em; - color: var(--bs-secondary-color); - padding: 0.5rem 1rem; - } - - tbody td { - padding: 0.5rem 1rem; - vertical-align: middle; - border-bottom: 1px solid var(--bs-border-color); - } - - tbody tr:last-child td { - border-bottom: none; - } - } - } -} - - -// ----------------------------------------------------------------------------- -// Segmented progress bar (Receiving / In Progress / Shipping) -// ----------------------------------------------------------------------------- -.o_fp_seg_progress { - border-radius: 5px; - overflow: hidden; - background: var(--bs-secondary-bg); - - > div { - transition: opacity 300ms ease; - } -} - - -// ----------------------------------------------------------------------------- -// Job state -- small coloured dot used in the jobs list table -// ----------------------------------------------------------------------------- -.o_fp_portal_status_dot { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 50%; - background-color: var(--bs-secondary-color); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-secondary-color) 25%, transparent); - vertical-align: middle; - - &[data-state="received"] { - background-color: var(--bs-info); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-info) 25%, transparent); - } - &[data-state="in_progress"] { - background-color: var(--bs-primary); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 25%, transparent); - } - &[data-state="quality_check"] { - background-color: var(--bs-warning); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-warning) 25%, transparent); - } - &[data-state="ready_to_ship"] { - background-color: var(--bs-secondary-color); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-secondary-color) 25%, transparent); - } - &[data-state="shipped"], - &[data-state="complete"] { - background-color: var(--bs-success); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-success) 25%, transparent); - } -} - - -// ----------------------------------------------------------------------------- -// Job progress bar -- wraps Bootstrap .progress with state-aware fill colour -// (kept for backwards compatibility on job detail page) -// ----------------------------------------------------------------------------- -.o_fp_portal_progress { - - .progress { - background-color: color-mix(in srgb, var(--bs-secondary-color) 18%, transparent); - border: 1px solid var(--bs-border-color); - border-radius: 999px; - overflow: hidden; - } - - .progress-bar { - background-color: var(--bs-primary); - color: var(--bs-body-bg); - font-weight: 600; - font-size: 0.72rem; - line-height: 14px; - } - - &[data-state="received"] .progress-bar { - background-color: var(--bs-info); - } - &[data-state="quality_check"] .progress-bar { - background-color: var(--bs-warning); - } - &[data-state="ready_to_ship"] .progress-bar { - background-color: color-mix(in srgb, var(--bs-success) 70%, var(--bs-warning)); - } - &[data-state="shipped"] .progress-bar, - &[data-state="complete"] .progress-bar { - background-color: var(--bs-success); - } -} - - -// ----------------------------------------------------------------------------- -// RFQ Form -- Part row card +// RFQ Form โ€” Part row card (dynamically inserted by fp_rfq_form.js) // ----------------------------------------------------------------------------- .o_fp_part_row { background-color: var(--bs-body-bg); @@ -244,7 +80,7 @@ // ----------------------------------------------------------------------------- -// Drag-drop file upload zone +// Drag-drop file upload zone (RFQ + configurator) // ----------------------------------------------------------------------------- .o_fp_file_drop_zone { border: 2px dashed var(--bs-border-color); @@ -270,7 +106,7 @@ // ----------------------------------------------------------------------------- -// Portal form general +// Portal form general (form-label sizing) // ----------------------------------------------------------------------------- .o_fp_portal_form { .form-label { @@ -290,15 +126,3 @@ font-weight: 500; } } - - -// ----------------------------------------------------------------------------- -// Jobs list -- card-based layout -// ----------------------------------------------------------------------------- -.o_fp_jobs_list { - .o_fp_portal_card { - .card-body { - padding: 1rem; - } - } -}