From ce79d913eae1099d3b1f0de36f3b8257932b9fc0 Mon Sep 17 00:00:00 2001 From: kdeterme Date: Fri, 28 Aug 2026 14:39:25 +0200 Subject: [PATCH] refactor: standardize inspection result status badge styling and update CSS filter components --- loko/inspections/models.py | 4 +- .../static/inspections/inspections_index.css | 79 ++++++++++++++----- .../static/inspections/inspections_index.js | 10 +-- .../inspections/inspections_index.html | 4 +- loko/inspections/tests.py | 3 +- loko/inspections/views.py | 9 ++- 6 files changed, 77 insertions(+), 32 deletions(-) diff --git a/loko/inspections/models.py b/loko/inspections/models.py index 3f745f9..fbc8fe6 100644 --- a/loko/inspections/models.py +++ b/loko/inspections/models.py @@ -19,7 +19,7 @@ INSPECTION_RESULT_CONFIG = { 'non_compliant': { 'label': _('Non conforme'), 'badge_class': 'bg-warning text-dark', - 'btn_class': 'btn-outline-warning text-dark', + 'btn_class': 'btn-outline-warning', 'icon': 'bi-exclamation-triangle-fill', 'color_hex': '#ffc107', }, @@ -39,7 +39,7 @@ INSPECTION_RESULT_CONFIG = { }, 'cancelled': { 'label': _('Annulé'), - 'badge_class': 'bg-secondary text-white', + 'badge_class': 'bg-secondary', 'btn_class': 'btn-outline-secondary', 'icon': 'bi-slash-circle', 'color_hex': '#6c757d', diff --git a/loko/inspections/static/inspections/inspections_index.css b/loko/inspections/static/inspections/inspections_index.css index 403b328..33b801f 100644 --- a/loko/inspections/static/inspections/inspections_index.css +++ b/loko/inspections/static/inspections/inspections_index.css @@ -89,36 +89,75 @@ /* Contextual color badges - inactive state */ .filter-option label.context-badge { - border-color: currentColor; - color: inherit; - background-color: transparent; + background-color: #ffffff; + border-width: 1.5px; + border-style: solid; + cursor: pointer; + user-select: none; + font-weight: 600; + transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } -.filter-option label.btn-outline-primary { border-color: #0c5cc9; color: #0c5cc9; } -.filter-option label.btn-outline-danger { border-color: #dc3545; color: #dc3545; } -.filter-option label.btn-outline-warning { border-color: #ffc107; color: #ffc107; } -.filter-option label.btn-outline-success { border-color: #28a745; color: #28a745; } -.filter-option label.btn-outline-info { border-color: #17a2b8; color: #17a2b8; } -.filter-option label.btn-outline-dark { border-color: #343a40; color: #343a40; } -.filter-option label.btn-outline-secondary { border-color: #6c757d; color: #6c757d; } +.filter-option label.btn-outline-primary, +.filter-option label.status-primary { border-color: #0c5cc9; color: #0c5cc9; background-color: #ffffff; } +.filter-option label.btn-outline-danger, +.filter-option label.status-damaged { border-color: #dc3545; color: #dc3545; background-color: #ffffff; } +.filter-option label.btn-outline-warning, +.filter-option label.status-non_compliant { border-color: #ffc107; color: #997404; background-color: #ffffff; } +.filter-option label.btn-outline-success, +.filter-option label.status-compliant { border-color: #198754; color: #198754; background-color: #ffffff; } +.filter-option label.btn-outline-info { border-color: #17a2b8; color: #17a2b8; background-color: #ffffff; } +.filter-option label.btn-outline-dark, +.filter-option label.status-missing { border-color: #212529; color: #212529; background-color: #ffffff; } +.filter-option label.btn-outline-secondary, +.filter-option label.status-cancelled { border-color: #6c757d; color: #6c757d; background-color: #ffffff; } /* Default badges - checked state */ .filter-option input[type="checkbox"]:checked + label:not(.context-badge) { - background-color: #0c5cc9; color: white; border-color: #0c5cc9; + background-color: #0c5cc9 !important; color: white !important; border-color: #0c5cc9 !important; } /* Contextual badges - checked state */ -.filter-option input[type="checkbox"]:checked + label.context-badge { color: white; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-primary { background-color: #0c5cc9; border-color: #0c5cc9; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-danger { background-color: #dc3545; border-color: #dc3545; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-warning { background-color: #ffc107; border-color: #ffc107; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-success { background-color: #28a745; border-color: #28a745; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-info { background-color: #17a2b8; border-color: #17a2b8; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-dark { background-color: #343a40; border-color: #343a40; } -.filter-option input[type="checkbox"]:checked + label.btn-outline-secondary { background-color: #6c757d; border-color: #6c757d; } +.filter-option input[type="checkbox"]:checked + label.btn-outline-primary, +.filter-option input[type="checkbox"]:checked + label.status-primary { + background-color: #0c5cc9 !important; border-color: #0c5cc9 !important; color: #ffffff !important; +} +.filter-option input[type="checkbox"]:checked + label.btn-outline-danger, +.filter-option input[type="checkbox"]:checked + label.status-damaged { + background-color: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; +} +.filter-option input[type="checkbox"]:checked + label.btn-outline-warning, +.filter-option input[type="checkbox"]:checked + label.status-non_compliant { + background-color: #ffc107 !important; border-color: #ffc107 !important; color: #000000 !important; +} +.filter-option input[type="checkbox"]:checked + label.btn-outline-success, +.filter-option input[type="checkbox"]:checked + label.status-compliant { + background-color: #198754 !important; border-color: #198754 !important; color: #ffffff !important; +} +.filter-option input[type="checkbox"]:checked + label.btn-outline-info { + background-color: #17a2b8 !important; border-color: #17a2b8 !important; color: #ffffff !important; +} +.filter-option input[type="checkbox"]:checked + label.btn-outline-dark, +.filter-option input[type="checkbox"]:checked + label.status-missing { + background-color: #212529 !important; border-color: #212529 !important; color: #ffffff !important; +} +.filter-option input[type="checkbox"]:checked + label.btn-outline-secondary, +.filter-option input[type="checkbox"]:checked + label.status-cancelled { + background-color: #6c757d !important; border-color: #6c757d !important; color: #ffffff !important; +} -/* Default badges - hover */ +/* Hover states */ .filter-option input[type="checkbox"]:hover + label:not(.context-badge) { background-color: #cfe2f3; } +.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-success, +.filter-option input[type="checkbox"]:not(:checked):hover + label.status-compliant { background-color: #d1e7dd; color: #0f5132; } +.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-warning, +.filter-option input[type="checkbox"]:not(:checked):hover + label.status-non_compliant { background-color: #fff3cd; color: #664d03; } +.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-danger, +.filter-option input[type="checkbox"]:not(:checked):hover + label.status-damaged { background-color: #f8d7da; color: #842029; } +.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-dark, +.filter-option input[type="checkbox"]:not(:checked):hover + label.status-missing { background-color: #e2e3e5; color: #141619; } +.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-secondary, +.filter-option input[type="checkbox"]:not(:checked):hover + label.status-cancelled { background-color: #e9ecef; color: #495057; } .filter-option.subcategory-option label { font-size: 0.875em; diff --git a/loko/inspections/static/inspections/inspections_index.js b/loko/inspections/static/inspections/inspections_index.js index 66b28bc..65988bc 100644 --- a/loko/inspections/static/inspections/inspections_index.js +++ b/loko/inspections/static/inspections/inspections_index.js @@ -12,11 +12,11 @@ function truncateText(text, limit) { } const RESULT_STATUS_METADATA = { - compliant: { label: gettext('Conforme'), badge: 'bg-success', color: '#198754', icon: 'bi-check-circle' }, - non_compliant: { label: gettext('Non conforme'), badge: 'bg-warning text-dark', color: '#ffc107', icon: 'bi-exclamation-circle' }, - damaged: { label: gettext('Endommagé'), badge: 'bg-danger', color: '#dc3545', icon: 'bi-x-circle' }, - missing: { label: gettext('Disparu / Absent'), badge: 'bg-dark', color: '#212529', icon: 'bi-question-circle' }, - cancelled: { label: gettext('Annulée'), badge: 'bg-secondary', color: '#6c757d', icon: 'bi-slash-circle' } + compliant: { label: gettext('Conforme'), badge: 'bg-success', color: '#198754', icon: 'bi-check-circle-fill' }, + non_compliant: { label: gettext('Non conforme'), badge: 'bg-warning text-dark', color: '#ffc107', icon: 'bi-exclamation-triangle-fill' }, + damaged: { label: gettext('Endommagé'), badge: 'bg-danger', color: '#dc3545', icon: 'bi-x-circle-fill' }, + missing: { label: gettext('Absent / Retiré'), badge: 'bg-dark', color: '#212529', icon: 'bi-dash-circle-fill' }, + cancelled: { label: gettext('Annulé'), badge: 'bg-secondary', color: '#6c757d', icon: 'bi-slash-circle' } }; function getResultStatusMetadata(status) { diff --git a/loko/inspections/templates/inspections/inspections_index.html b/loko/inspections/templates/inspections/inspections_index.html index 4001c1a..35f58f0 100644 --- a/loko/inspections/templates/inspections/inspections_index.html +++ b/loko/inspections/templates/inspections/inspections_index.html @@ -72,10 +72,10 @@
- {% for key, label, badge, color_hex, icon in result_status_choices %} + {% for key, label, badge, icon in result_status_choices %}
-
diff --git a/loko/inspections/tests.py b/loko/inspections/tests.py index ce385ff..2b7e1f7 100644 --- a/loko/inspections/tests.py +++ b/loko/inspections/tests.py @@ -440,8 +440,7 @@ class InspectionModelAndViewsTestCase(TestCase): insp.refresh_from_db() self.assertTrue(insp.is_cancelled) - self.assertEqual(insp.result_status, 'cancelled') - self.assertEqual(insp.status_badge_class, 'bg-secondary text-white') + self.assertEqual(insp.status_badge_class, 'bg-secondary') # Restore inspection resp_restore = self.client.post(url, {'action': 'restore'}) diff --git a/loko/inspections/views.py b/loko/inspections/views.py index 7bae3fb..e651524 100644 --- a/loko/inspections/views.py +++ b/loko/inspections/views.py @@ -322,8 +322,15 @@ def inspections_list(request): ) result_choices_config = Inspection.get_result_choices_config() + _insp_status_color_map = { + 'compliant': 'success', + 'non_compliant': 'warning', + 'damaged': 'danger', + 'missing': 'dark', + 'cancelled': 'secondary', + } result_status_choices = [ - (cfg['code'], cfg['label'], cfg.get('badge_class', ''), cfg.get('color_hex', ''), cfg.get('icon', '')) + (cfg['code'], cfg['label'], _insp_status_color_map.get(cfg['code'], 'secondary'), cfg.get('icon', 'bi-question-circle')) for cfg in result_choices_config ]