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

feat(interventions): improve non-applicable button symbology in operations

Browse source
This commit is contained in:
kdeterme 2026-09-25 16:14:13 +02:00
parent ce924d7af4
commit 71cb8369a0
5 changed files with 77 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
loko/interventions/static/interventions/detail/desktop_operations_editor.js
View file

@ -77,9 +77,15 @@
// Trigger the visual update
const toggleBtn = operationsCard.querySelector(`.operation-na-toggle[data-operation-id="${input.dataset.operationId}"]`);
if (toggleBtn) {
toggleBtn.classList.toggle('text-warning', wasChecked);
toggleBtn.classList.toggle('text-secondary', !wasChecked);
toggleBtn.classList.toggle('opacity-50', !wasChecked);
toggleBtn.classList.toggle('active', wasChecked);
toggleBtn.classList.toggle('bg-secondary', wasChecked);
toggleBtn.classList.toggle('text-white', wasChecked);
const naIcon = toggleBtn.querySelector('i');
if (naIcon) {
naIcon.classList.toggle('bi-slash-circle-fill', wasChecked);
naIcon.classList.toggle('bi-slash-circle', !wasChecked);
}
toggleBtn.title = wasChecked ? gettext('Marquer comme applicable') : gettext('Marquer comme non applicable');
}
// Update card styling
const card = input.closest('[data-operation-card]');
@ -333,9 +339,14 @@
checkbox.checked = isNA;
// Update toggle button appearance
toggleBtn.classList.toggle('text-warning', isNA);
toggleBtn.classList.toggle('text-secondary', !isNA);
toggleBtn.classList.toggle('opacity-50', !isNA);
toggleBtn.classList.toggle('active', isNA);
toggleBtn.classList.toggle('bg-secondary', isNA);
toggleBtn.classList.toggle('text-white', isNA);
const naIcon = toggleBtn.querySelector('i');
if (naIcon) {
naIcon.classList.toggle('bi-slash-circle-fill', isNA);
naIcon.classList.toggle('bi-slash-circle', !isNA);
}
toggleBtn.title = isNA ? gettext('Marquer comme applicable') : gettext('Marquer comme non applicable');
if (opType === 'measurement') {

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

@ -200,6 +200,29 @@
opacity: 0.6;
background: #f8f9fa;
}
/* Operation N/A toggle button */
.operation-na-toggle {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
padding: 0.1rem 0.5rem !important;
white-space: nowrap;
transition: all 0.15s ease-in-out;
border-color: #ced4da;
color: #6c757d;
background-color: transparent;
text-decoration: none;
}
.operation-na-toggle:hover {
color: #495057;
border-color: #6c757d;
background-color: #f8f9fa;
}
.operation-na-toggle.active {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #fff !important;
}
.desktop-operation-card .card-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #dee2e6;

6
loko/interventions/templates/interventions/includes/_desktop_operation_card.html
View file

@ -14,15 +14,15 @@
{{ op.name_fr }}
{% endif %}
</p>
<div class="d-flex gap-1 align-items-center">
<div class="d-flex gap-1 align-items-center flex-shrink-0">
{# N/A toggle button #}
<button type="button"
class="btn btn-link p-0 operation-na-toggle {% if op.is_not_applicable %}text-warning{% else %}text-secondary opacity-50{% endif %}"
class="btn btn-sm btn-outline-secondary operation-na-toggle py-0 px-2 rounded-pill {% if op.is_not_applicable %}active bg-secondary text-white{% endif %}"
data-operation-id="{{ op.id }}"
data-operation-type="{% if op.measurement_definition %}measurement{% else %}status{% endif %}"
title="{% if op.is_not_applicable %}{% translate 'Marquer comme applicable' %}{% else %}{% translate 'Marquer comme non applicable' %}{% endif %}"
aria-label="{% translate 'Non applicable' %}">
<i class="bi bi-slash-circle"></i>
<i class="bi bi-slash-circle{% if op.is_not_applicable %}-fill{% endif %} me-1"></i>{% translate "N/A" %}
</button>
{# Hidden checkbox for form submission #}
<input type="checkbox"

6
loko/interventions/templates/interventions/includes/_mobile_operation_card.html
View file

@ -11,15 +11,15 @@
{{ op.name_fr }}
{% endif %}
</p>
<div class="d-flex gap-1">
<div class="d-flex gap-1 align-items-center flex-shrink-0">
<!-- N/A toggle button -->
<button type="button"
class="btn btn-link p-0 operation-na-toggle {% if op.is_not_applicable %}text-warning{% else %}text-secondary opacity-50{% endif %}"
class="btn btn-sm btn-outline-secondary operation-na-toggle py-0 px-2 rounded-pill {% if op.is_not_applicable %}active bg-secondary text-white{% endif %}"
data-operation-id="{{ op.id }}"
data-operation-type="{% if op.measurement_definition %}measurement{% else %}status{% endif %}"
title="{% if op.is_not_applicable %}{% translate 'Marquer comme applicable' %}{% else %}{% translate 'Marquer comme non applicable' %}{% endif %}"
aria-label="{% translate 'Non applicable' %}">
<i class="bi bi-slash-circle"></i>
<i class="bi bi-slash-circle{% if op.is_not_applicable %}-fill{% endif %} me-1"></i>{% translate "N/A" %}
</button>
<!-- Hidden checkbox for form submission -->
<input type="checkbox"

34
loko/interventions/templates/interventions/intervention_detail_mobile.html
View file

@ -18,6 +18,29 @@
font-size: 0.75rem;
}
.operation-na-toggle {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
padding: 0.1rem 0.5rem !important;
white-space: nowrap;
transition: all 0.15s ease-in-out;
border-color: #ced4da;
color: #6c757d;
background-color: transparent;
text-decoration: none;
}
.operation-na-toggle:hover {
color: #495057;
border-color: #6c757d;
background-color: #f8f9fa;
}
.operation-na-toggle.active {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #fff !important;
}
.card-title {
font-size: 1rem;
}
@ -3585,9 +3608,14 @@ document.addEventListener('DOMContentLoaded', function() {
checkbox.checked = isNA;
// Update toggle button appearance
this.classList.toggle('text-warning', isNA);
this.classList.toggle('text-secondary', !isNA);
this.classList.toggle('opacity-50', !isNA);
this.classList.toggle('active', isNA);
this.classList.toggle('bg-secondary', isNA);
this.classList.toggle('text-white', isNA);
const naIcon = this.querySelector('i');
if (naIcon) {
naIcon.classList.toggle('bi-slash-circle-fill', isNA);
naIcon.classList.toggle('bi-slash-circle', !isNA);
}
this.title = isNA ? gettext('Marquer comme applicable') : gettext('Marquer comme non applicable');
if (opType === 'measurement') {