Improve accept/decline buttons in invitation acceptor (CFM-422) (#285)

COmanage · Feb 9, 2025 · cc81bba · cc81bba
1 parent 47d4229
commit cc81bba
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc b/app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc
@@ -39,16 +39,28 @@ if($vv_action == 'dispatch') {
   print $this->element('form/listItem', [
     'arguments' => [
       'fieldName' => 'accepted',
-      'fieldLabel' => "Accept this invitation?",
+      'fieldLabel' => __d('operation','accept.invitation'),
       'fieldOptions' => [
         'type' => 'radio',
         'options' => [
-          ['value' => '1', 'text' => 'Accept'],
-          ['value' => '0', 'text' => 'Decline'],
+          ['value' => '1', 'text' => __d('operation','accept')],
+          ['value' => '0', 'text' => __d('operation','decline')],
         ],
         'empty' => false,
         'required' => true,
-        'class' => 'crazything'
+        'class' => 'form-check-input'
       ]
   ]]);
+?>
+  <script>
+    $('#accepted-1').click(function() {
+      $(this).closest('label').addClass('is-selected');
+      $("label[for='accepted-0']").removeClass('is-selected');
+    });
+    $('#accepted-0').click(function() {
+      $(this).closest('label').addClass('is-selected');
+      $("label[for='accepted-1']").removeClass('is-selected');
+    });
+  </script>
+<?php  
 }
diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po
@@ -27,6 +27,9 @@
 msgid "accept"
 msgstr "Accept"
 
+msgid "accept.invitation"
+msgstr "Accept this invitation?"
+
 msgid "acknowledge"
 msgstr "Acknowledge"
 

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -2003,15 +2003,20 @@ body.start .submit {
 #dispatch-list-container ul.fields li.fields-accepted .field-info label {
   display: flex;
   align-items: center;
+  gap: 0.25em;
   padding: 0.5em 1.5em 0.5em 1.25em;
-  background-color: var(--cmg-color-highlight-006);
-  border: 1px solid var(--cmg-color-highlight-008);
+  background-color: var(--cmg-color-bg-005);
+  border: 1px solid var(--cmg-color-bg-006);
   border-radius: 3px;
   box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 3px 1px -3px rgba(0,0,0,.2),0 1px 3px 0 rgba(0,0,0,.12);
 }
-#dispatch-list-container ul.fields li.fields-accepted .field-info label:last-child {
-  background-color: var(--cmg-color-bg-005);
-  border: 1px solid var(--cmg-color-bg-006);
+#dispatch-list-container ul.fields li.fields-accepted .field-info label[for='accepted-1'].is-selected {
+  background-color: var(--cmg-color-highlight-006);
+  border: 1px solid var(--cmg-color-highlight-008);
+  color: var(--cmg-color-highlight-007);
+}
+#dispatch-list-container ul.fields li.fields-accepted .field-info label .form-check-input {
+  margin-top: 0;
 }
 #dispatch-list-container ul.fields li.fields-accepted .field .radio {
   gap: 0.5em;