From 71cb8369a0296f3b3f5f2fe1f92b985e99db7a32 Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Fri, 25 Sep 2026 16:14:13 +0200
Subject: [PATCH] feat(interventions): improve non-applicable button symbology
 in operations

---
 .../detail/desktop_operations_editor.js       | 23 +++++++++----
 .../interventions/detail/styles.html          | 23 +++++++++++++
 .../includes/_desktop_operation_card.html     |  6 ++--
 .../includes/_mobile_operation_card.html      |  6 ++--
 .../intervention_detail_mobile.html           | 34 +++++++++++++++++--
 5 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/loko/interventions/static/interventions/detail/desktop_operations_editor.js b/loko/interventions/static/interventions/detail/desktop_operations_editor.js
index 9a63b04..b92af7d 100644
--- a/loko/interventions/static/interventions/detail/desktop_operations_editor.js
+++ b/loko/interventions/static/interventions/detail/desktop_operations_editor.js
@@ -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') {
diff --git a/loko/interventions/templates/interventions/detail/styles.html b/loko/interventions/templates/interventions/detail/styles.html
index e3616d6..b646f41 100644
--- a/loko/interventions/templates/interventions/detail/styles.html
+++ b/loko/interventions/templates/interventions/detail/styles.html
@@ -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;
diff --git a/loko/interventions/templates/interventions/includes/_desktop_operation_card.html b/loko/interventions/templates/interventions/includes/_desktop_operation_card.html
index 78d0f83..bdc18b2 100644
--- a/loko/interventions/templates/interventions/includes/_desktop_operation_card.html
+++ b/loko/interventions/templates/interventions/includes/_desktop_operation_card.html
@@ -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" 
diff --git a/loko/interventions/templates/interventions/includes/_mobile_operation_card.html b/loko/interventions/templates/interventions/includes/_mobile_operation_card.html
index 98cc4bf..61409e3 100644
--- a/loko/interventions/templates/interventions/includes/_mobile_operation_card.html
+++ b/loko/interventions/templates/interventions/includes/_mobile_operation_card.html
@@ -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" 
diff --git a/loko/interventions/templates/interventions/intervention_detail_mobile.html b/loko/interventions/templates/interventions/intervention_detail_mobile.html
index 23320bb..dd0a7cf 100644
--- a/loko/interventions/templates/interventions/intervention_detail_mobile.html
+++ b/loko/interventions/templates/interventions/intervention_detail_mobile.html
@@ -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') {