Provide topLinks delete for edit view; also clean up some DOM element… (

#8, CFM-55)

* Provide topLinks delete for edit view; also clean up some DOM elements to ensure HTML and WCAG validation (CMF-55)

* trivial cleanup for actionMenu (remove unused code) (CMF-55)

app/src/View/Helper/MenuHelper.php

@@ -49,6 +49,7 @@ public function getMenuOrder($action) {
     }
 
     $order = array(
+      'Add'           => 3,    // add_circle
       'View'          => 5,    // visibility
       'Edit'          => 10,   // edit
       'Default'       => 20,   // link - default starting order for arbitrary action menu items 
@@ -72,6 +73,7 @@ public function getMenuIcon($action) {
     }
 
     $icon = array(
+      'Add'           =>  'add_circle',
       'View'          =>  'visibility',
       'Edit'          =>  'edit',
       'Default'       =>  'link',  // default icon for arbitrary menu items

app/templates/Standard/add-edit-view.php

@@ -41,6 +41,41 @@
   <div class="pageTitle">
     <h1><?= $vv_title; ?></h1>
   </div>
+  <?php
+    // Action list for top menu dropdown / button listing
+    $action_args = array();
+    $action_args['vv_attr_id'] =  $vv_obj->id;
+
+    // TODO: More actions in the config? Add them to $action_args['vv_actions'][] here.
+
+    // Delete
+    if($vv_action != 'add' && !empty($vv_obj->id) && $vv_permissions['delete']) {
+      $actionPostBtnArray = ['action' => 'delete', $vv_obj->id];
+      $actionUrl = $this->Url->build(['action' => 'delete', $vv_obj->id]);
+      $action_args['vv_actions'][] = array(
+        'order' => $this->Menu->getMenuOrder('Delete'),
+        'icon' =>  $this->Menu->getMenuIcon('Delete'),
+        'url' => 'javascript:void(0);',
+        'label' => __d('operation', 'delete'),
+        'class' => 'deletebutton nospin',
+        'onclick' => array(
+          'dg_bd_txt' => __d('operation', 'delete.confirm', [$vv_obj->id]),
+          'dg_post_btn_array' => $actionPostBtnArray,
+          'dg_url' => $actionUrl,
+          'dg_conf_btn' => __d('operation', 'remove'),
+          'dg_cancel_btn' => __d('operation', 'cancel'),
+          'dg_title' => __d('operation', 'remove'),
+          'dg_bd_txt_repl_str' => ''
+        )
+      );
+    }
+
+    if(!empty($action_args['vv_actions'])) {
+      print '<div class="field-actions top-links">';
+      print $this->element('menuAction', $action_args);
+      print '</div>';
+    }
+  ?>
 </div>
 <?php
 // XXX this doesn't work yet because we don't include fields.inc until later
@@ -54,23 +89,6 @@
 </div>
 <?php endforeach; // $banners
 }
-?>
-<?php
-// XXX CO-647
-// XXX move delete to some form of buttons.inc?
-// XXX duplicates index.ctp though strangely this is working whereas index delete throws csrf error
-// This is a bit overlap with Elements/pageTitleAndButtons
-if($vv_action != 'add' && !empty($vv_obj->id) && $vv_permissions['delete']) {
-  print '<ul id="topLinks">';
-  print "<li>" . $this->Form->postLink(
-    __d('operation', 'delete'),
-    ['action' => 'delete', $vv_obj->id],
-// XXX should be configurable which field we put in, maybe displayField?
-    ['confirm' => __d('operation', 'confirm', [$vv_obj->id]),
-     'class'   => 'deletebutton']
-  ) . "</li>";
-  print "</ul>\n";
-}
 
 // By default, the form will POST to the current controller
 // Note we need to open the form for view so Cake will autopopulate values

app/templates/Standard/index.php

@@ -301,7 +301,6 @@ function _column_key($modelsName, $c, $tz=null) {
 
           // Action list for command menu dropdown / button listing
           $action_args = array();
-          $action_args['vv_attr_mdl'] = "Index";
           $action_args['vv_attr_id'] =  $entity->id;
 
           // Edit
@@ -323,7 +322,7 @@ function _column_key($modelsName, $c, $tz=null) {
 
           // Insert additional actions as per the .inc file
           if(!empty($indexActions)) {
-
+// TODO: create an element or move this to MenuHelper so it can be used by topLinks as well as indexActions 
 // XXX this isn't quite the right test
 //          if(isset($entity->status) && $entity->status == StatusEnum::Active) {
               $actionOrderDefault = $this->Menu->getMenuOrder('Default');

app/templates/element/dialog.php

@@ -35,7 +35,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <h2 class="modal-title" id="dialog-title"><?= __d('operation', 'confirm'); ?></h2>
-        <button type="button" class="btn-close nospin" data-bs-dismiss="modal" aria-label="<?= __d('operation', 'close'); ?>"/>
+        <button type="button" class="btn-close nospin" data-bs-dismiss="modal" aria-label="<?= __d('operation', 'close'); ?>"></button>
       </div>
       <div id="dialog-text" class="modal-body">
       </div>

app/templates/element/menuAction.php

@@ -28,7 +28,7 @@
 $actionsCount = count($vv_actions);
 $actionsCountClass = $actionsCount > 0 ? ' actions-count-' . $actionsCount : '';
 $actionsMenuClass = 'field-actions-menu dropdown dropleft' . $actionsCountClass;
-$actionsMenuUid = md5($vv_attr_mdl . $vv_attr_id);
+$actionsMenuUid = md5($vv_attr_id);
 ?>
 
 <div id="action-menu_<?= $actionsMenuUid; ?>"
@@ -39,8 +39,8 @@ class="<?= $actionsMenuClass; ?>">
     'class' => 'nospin action-menu-toggle',
     'escape' => false,
     'data-bs-toggle' => 'dropdown',
-    'aria-haspopup' => true,
-    'aria-expanded' => false,
+    'aria-haspopup' => 'true',
+    'aria-expanded' => 'false',
     'title' => __d('field', 'action')
   );
   print $this->Html->link(

app/templates/layout/default.php

@@ -179,7 +179,7 @@
 
     <!-- Get timezone detection -->
     <?php print $this->Html->script('jstimezonedetect/jstz.min.js'); ?>
-    <script type="text/javascript">
+    <script>
       // Determines the time zone of the browser client
       var tz = jstz.determine();
       // This won't be available for the first delivered page, but after that the

app/webroot/css/co-responsive.css

@@ -242,6 +242,13 @@
   td.actions {
     text-align: left;
   }
+  /* EDIT / VIEW ACTION TOP MENU */
+  .field-actions.top-links {
+    align-self: end;
+  }
+  .field-actions.top-links .dropdown-menu {
+    min-width: 0;
+  }
   /* FOOTER */
   #co-footer {
     position: static;