Conditionally include a 'Cancel' button next to 'Save' (CFM-31) (#236)

COmanage · Dec 15, 2024 · ab01d71 · ab01d71
1 parent 1db6c9a
commit ab01d71
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/app/plugins/CoreEnroller/templates/EnrollmentAttributes/fields.inc b/app/plugins/CoreEnroller/templates/EnrollmentAttributes/fields.inc
@@ -48,6 +48,12 @@ if (empty($attribute_type)) {
 $hidden = [
   'attribute' => $attribute_type
 ];
+
+/*
+ *  Include a "cancel" button next to the "save" button
+ */
+
+$this->set('vv_include_cancel',true);
 
 /*
  * Common Fields for all attributes

diff --git a/app/templates/element/form/submit.php b/app/templates/element/form/submit.php
@@ -37,6 +37,11 @@
       </div>
       <div class="field-info">
         <?= $this->Form->submit($label) ?>
+        <?php if(!empty($vv_include_cancel)): ?>
+          <button type="button" onclick="history.back()" class="btn btn-cancel">
+            <?= __d('operation','cancel') ?>
+          </button>
+        <?php endif; ?>
       </div>
     </div>
   </li>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1526,6 +1526,10 @@ ul.form-list .not-set {
 ul.form-list li.fields-submit .required {
   font-style: italic;
 }
+ul.form-list li.fields-submit .field-info {
+  display: flex;
+  gap: 1em;
+}
 ul.field-children {
   margin: 0.5em;
   padding: 0;
@@ -2209,10 +2213,12 @@ button, .btn, .btn:hover {
 .btn-secondary,
 .btn-tertiary,
 .btn-default,
+.btn-cancel,
 .btn-primary:active,
 .btn-secondary:active,
 .btn-tertiary:active,
-.btn-default:active {
+.btn-default:active,
+.btn-cancel:active {
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 .btn-primary:hover,
@@ -2224,6 +2230,10 @@ button, .btn, .btn:hover {
   border-color: var(--cmg-color-btn-bg-002);
   text-decoration: none !important;
 }
+.btn-cancel:hover {
+  background-color: var(--cmg-color-bg-009);
+  text-decoration: none !important;
+}
 .btn-primary.disabled,
 .btn-primary:disabled {
   color: var(--cmg-color-txt-inverse);