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

style(interventions): standardize timeline status badge widths and use distinct purple for status event

Browse source 
- Assign fixed 115px width to all status badges for vertical alignment of transitions
- Unify left event badge width to 85px for a clean tabular layout
- Use purple (#6f42c1) for the 'Statut' badge and node icon to avoid visual collision with status colors
- Update timeline unit tests accordingly
This commit is contained in:
kdeterme 2026-09-25 22:24:05 +02:00
parent f510a086bd
commit fd794737a8
5 changed files with 68 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
loko/interventions/models.py
View file

@ -1331,7 +1331,7 @@ class InterventionTimeLine(models.Model):
def get_badge_class(self):
return {
'creation': 'bg-success',
'status_change': 'bg-primary',
'status_change': 'bg-purple',
'assignment': 'bg-info text-dark',
'transfer': 'bg-warning text-dark',
'modification': 'bg-secondary',

25
loko/interventions/static/interventions/timeline.css
View file

@ -237,3 +237,28 @@
margin-bottom: 0.25rem;
}
/* Badges de l'historique : type d'événement & statut */
.history-event-badge {
display: inline-block;
min-width: 85px;
text-align: center;
vertical-align: middle;
}
.history-status-badge {
display: inline-block;
width: 115px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Couleur violette/pourpre pour le badge et marqueur 'Statut' (absente des statuts d'intervention) */
.bg-purple {
background-color: #6f42c1 !important;
color: #ffffff !important;
}

26
loko/interventions/templates/interventions/detail/card_chronologie.html
View file

@ -55,43 +55,43 @@
<!-- Event Info -->
<div class="d-flex flex-wrap align-items-center gap-2">
{% if event.event_type == 'status_change' %}
<span class="badge bg-primary">{% translate "Statut" %}</span>
<span class="badge bg-purple history-event-badge">{% translate "Statut" %}</span>
{% if event.from_status %}
<span class="badge bg-{{ event.get_from_status_color }}">{{ event.get_from_status_display }}</span>
<span class="badge bg-{{ event.get_from_status_color }} history-status-badge" title="{{ event.get_from_status_display }}">{{ event.get_from_status_display }}</span>
<i class="bi bi-arrow-right text-muted small"></i>
{% endif %}
<span class="badge bg-{{ event.get_to_status_color }}">{{ event.get_to_status_display }}</span>
<span class="badge bg-{{ event.get_to_status_color }} history-status-badge" title="{{ event.get_to_status_display }}">{{ event.get_to_status_display }}</span>
{% if event.event_description %}
<span class="small text-muted ms-1">({{ event.event_description }})</span>
{% endif %}
{% elif event.event_type == 'assignment' %}
<span class="badge bg-info text-dark">{% translate "Assignation" %}</span>
<span class="badge bg-info text-dark history-event-badge">{% translate "Assignation" %}</span>
<span class="fw-semibold text-dark">{{ event.event_description|default:_("Assignation mise à jour") }}</span>
{% elif event.event_type == 'creation' %}
<span class="badge bg-success">{% translate "Création" %}</span>
<span class="badge bg-success history-event-badge">{% translate "Création" %}</span>
<span class="fw-semibold text-dark">{% translate "Intervention initialisée" %}</span>
{% if event.to_status %}
<span class="badge bg-{{ event.get_to_status_color }} ms-1">{{ event.get_to_status_display }}</span>
<span class="badge bg-{{ event.get_to_status_color }} history-status-badge ms-1" title="{{ event.get_to_status_display }}">{{ event.get_to_status_display }}</span>
{% endif %}
{% elif event.event_type == 'transfer' %}
<span class="badge bg-warning text-dark">{% translate "Transfert" %}</span>
<span class="badge bg-warning text-dark history-event-badge">{% translate "Transfert" %}</span>
<span class="fw-semibold text-dark">{{ event.event_description|default:_("Intervention transférée") }}</span>
{% elif event.event_type == 'modification' %}
<span class="badge bg-secondary">{% translate "Modification" %}</span>
<span class="badge bg-secondary history-event-badge">{% translate "Modification" %}</span>
<span class="fw-semibold text-secondary">{{ event.event_description|default:_("Attributs modifiés") }}</span>
{% elif event.event_type == 'note' %}
<span class="badge bg-info text-dark">{% translate "Note" %}</span>
<span class="badge bg-info text-dark history-event-badge">{% translate "Note" %}</span>
<span class="fw-semibold text-dark">{{ event.event_description }}</span>
{% elif event.event_type == 'document' %}
<span class="badge bg-secondary">{% translate "Document" %}</span>
<span class="badge bg-secondary history-event-badge">{% translate "Document" %}</span>
<span class="fw-semibold text-dark">{{ event.event_description }}</span>
{% elif event.event_type == 'link' %}
<span class="badge bg-dark">{% translate "Lien" %}</span>
<span class="badge bg-dark history-event-badge">{% translate "Lien" %}</span>
<span class="fw-semibold text-dark">{{ event.event_description }}</span>
{% else %}
<span class="badge bg-secondary">{{ event.get_event_type_display }}</span>
<span class="badge bg-secondary history-event-badge">{{ event.get_event_type_display }}</span>
{% if event.to_status %}
<span class="badge bg-{{ event.get_to_status_color }} ms-1">{{ event.get_to_status_display }}</span>
<span class="badge bg-{{ event.get_to_status_color }} history-status-badge ms-1" title="{{ event.get_to_status_display }}">{{ event.get_to_status_display }}</span>
{% endif %}
{% endif %}
</div>

24
loko/interventions/templates/interventions/detail/styles.html
View file

@ -582,4 +582,28 @@
padding-bottom: 0.25rem;
margin-bottom: 0.25rem;
}
/* Badges de l'historique : type d'événement & statut */
.history-event-badge {
display: inline-block;
min-width: 85px;
text-align: center;
vertical-align: middle;
}
.history-status-badge {
display: inline-block;
width: 115px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Couleur violette/pourpre pour le badge et marqueur 'Statut' (absente des statuts d'intervention) */
.bg-purple {
background-color: #6f42c1 !important;
color: #ffffff !important;
}
</style>

6
loko/interventions/tests/test_timeline_history.py
View file

@ -88,7 +88,7 @@ class TimelineHistoryTests(TestCase):
self.assertTrue(event_status.is_default_visible)
self.assertFalse(event_status.is_modification)
self.assertFalse(event_status.is_assignment)
self.assertEqual(event_status.get_badge_class(), 'bg-primary')
self.assertEqual(event_status.get_badge_class(), 'bg-purple')
self.assertEqual(event_status.get_icon(), 'bi-arrow-repeat')
# Assignment event
@ -466,4 +466,8 @@ class TimelineHistoryTests(TestCase):
self.assertContains(response, 'data-event-type="note"')
self.assertContains(response, 'data-event-type="document"')
self.assertContains(response, 'data-event-type="link"')
self.assertContains(response, 'history-event-badge')
self.assertContains(response, 'history-status-badge')
self.assertContains(response, 'bg-purple')