Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: standardize inspection result status badge styling and update CSS filter components

Browse source
This commit is contained in:
kdeterme 2026-08-28 14:39:25 +02:00
parent 0fc77df306
commit ce79d913ea
6 changed files with 77 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
loko/inspections/models.py
View file

@ -19,7 +19,7 @@ INSPECTION_RESULT_CONFIG = {
'non_compliant': { 'non_compliant': {
'label': _('Non conforme'), 'label': _('Non conforme'),
'badge_class': 'bg-warning text-dark', 'badge_class': 'bg-warning text-dark',
'btn_class': 'btn-outline-warning text-dark', 'btn_class': 'btn-outline-warning',
'icon': 'bi-exclamation-triangle-fill', 'icon': 'bi-exclamation-triangle-fill',
'color_hex': '#ffc107', 'color_hex': '#ffc107',
}, },
@ -39,7 +39,7 @@ INSPECTION_RESULT_CONFIG = {
}, },
'cancelled': { 'cancelled': {
'label': _('Annulé'), 'label': _('Annulé'),
'badge_class': 'bg-secondary text-white', 'badge_class': 'bg-secondary',
'btn_class': 'btn-outline-secondary', 'btn_class': 'btn-outline-secondary',
'icon': 'bi-slash-circle', 'icon': 'bi-slash-circle',
'color_hex': '#6c757d', 'color_hex': '#6c757d',

79
loko/inspections/static/inspections/inspections_index.css
View file

@ -89,36 +89,75 @@
/* Contextual color badges - inactive state */ /* Contextual color badges - inactive state */
.filter-option label.context-badge { .filter-option label.context-badge {
border-color: currentColor; background-color: #ffffff;
color: inherit; border-width: 1.5px;
background-color: transparent; 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-primary,
.filter-option label.btn-outline-danger { border-color: #dc3545; color: #dc3545; } .filter-option label.status-primary { border-color: #0c5cc9; color: #0c5cc9; background-color: #ffffff; }
.filter-option label.btn-outline-warning { border-color: #ffc107; color: #ffc107; } .filter-option label.btn-outline-danger,
.filter-option label.btn-outline-success { border-color: #28a745; color: #28a745; } .filter-option label.status-damaged { border-color: #dc3545; color: #dc3545; background-color: #ffffff; }
.filter-option label.btn-outline-info { border-color: #17a2b8; color: #17a2b8; } .filter-option label.btn-outline-warning,
.filter-option label.btn-outline-dark { border-color: #343a40; color: #343a40; } .filter-option label.status-non_compliant { border-color: #ffc107; color: #997404; background-color: #ffffff; }
.filter-option label.btn-outline-secondary { border-color: #6c757d; color: #6c757d; } .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 */ /* Default badges - checked state */
.filter-option input[type="checkbox"]:checked + label:not(.context-badge) { .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 */ /* 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,
.filter-option input[type="checkbox"]:checked + label.btn-outline-primary { background-color: #0c5cc9; border-color: #0c5cc9; } .filter-option input[type="checkbox"]:checked + label.status-primary {
.filter-option input[type="checkbox"]:checked + label.btn-outline-danger { background-color: #dc3545; border-color: #dc3545; } background-color: #0c5cc9 !important; border-color: #0c5cc9 !important; color: #ffffff !important;
.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-danger,
.filter-option input[type="checkbox"]:checked + label.btn-outline-info { background-color: #17a2b8; border-color: #17a2b8; } .filter-option input[type="checkbox"]:checked + label.status-damaged {
.filter-option input[type="checkbox"]:checked + label.btn-outline-dark { background-color: #343a40; border-color: #343a40; } background-color: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important;
.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-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"]: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 { .filter-option.subcategory-option label {
font-size: 0.875em; font-size: 0.875em;

10
loko/inspections/static/inspections/inspections_index.js
View file

@ -12,11 +12,11 @@ function truncateText(text, limit) {
} }
const RESULT_STATUS_METADATA = { const RESULT_STATUS_METADATA = {
compliant: { label: gettext('Conforme'), badge: 'bg-success', color: '#198754', icon: 'bi-check-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-circle' }, 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' }, damaged: { label: gettext('Endommagé'), badge: 'bg-danger', color: '#dc3545', icon: 'bi-x-circle-fill' },
missing: { label: gettext('Disparu / Absent'), badge: 'bg-dark', color: '#212529', icon: 'bi-question-circle' }, missing: { label: gettext('Absent / Retiré'), badge: 'bg-dark', color: '#212529', icon: 'bi-dash-circle-fill' },
cancelled: { label: gettext('Annulée'), badge: 'bg-secondary', color: '#6c757d', icon: 'bi-slash-circle' } cancelled: { label: gettext('Annulé'), badge: 'bg-secondary', color: '#6c757d', icon: 'bi-slash-circle' }
}; };
function getResultStatusMetadata(status) { function getResultStatusMetadata(status) {

4
loko/inspections/templates/inspections/inspections_index.html
View file

@ -72,10 +72,10 @@
</div> </div>
</div> </div>
<div class="filter-options" data-field="result_status"> <div class="filter-options" data-field="result_status">
{% for key, label, badge, color_hex, icon in result_status_choices %} {% for key, label, badge, icon in result_status_choices %}
<div class="filter-option"> <div class="filter-option">
<input type="checkbox" name="result_status" id="result_status_{{ key }}" value="{{ key }}" {% if key in selected_result_statuses %}checked{% endif %}> <input type="checkbox" name="result_status" id="result_status_{{ key }}" value="{{ key }}" {% if key in selected_result_statuses %}checked{% endif %}>
<label for="result_status_{{ key }}" class="context-badge btn-outline-{{ badge }}"> <label for="result_status_{{ key }}" class="context-badge status-{{ key }} btn-outline-{{ badge }}">
<i class="bi {{ icon }} me-1"></i>{{ label }} <i class="bi {{ icon }} me-1"></i>{{ label }}
</label> </label>
</div> </div>

3
loko/inspections/tests.py
View file

@ -440,8 +440,7 @@ class InspectionModelAndViewsTestCase(TestCase):
insp.refresh_from_db() insp.refresh_from_db()
self.assertTrue(insp.is_cancelled) self.assertTrue(insp.is_cancelled)
self.assertEqual(insp.result_status, 'cancelled') self.assertEqual(insp.status_badge_class, 'bg-secondary')
self.assertEqual(insp.status_badge_class, 'bg-secondary text-white')
# Restore inspection # Restore inspection
resp_restore = self.client.post(url, {'action': 'restore'}) resp_restore = self.client.post(url, {'action': 'restore'})

9
loko/inspections/views.py
View file

@ -322,8 +322,15 @@ def inspections_list(request):
) )
result_choices_config = Inspection.get_result_choices_config() 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 = [ 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 for cfg in result_choices_config
] ]