Index action command menus visible on wider screens (not in dropdown)…

…. (CO-2230)
COmanage · Oct 12, 2021 · 9572d6a · 9572d6a
1 parent 7d62ef6
commit 9572d6a
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 47 deletions.
diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
@@ -157,7 +157,7 @@ function _column_key($modelsName, $c, $tz=null) {
         }
       ?></th>
       <?php endforeach; ?>
-      <th><?= __('match.fd.action'); ?></th>
+      <th class="actions"><?= __('match.fd.action'); ?></th>
     </tr>
   <?php foreach(${$vv_tablename} as $entity): ?>
     <?php
@@ -280,7 +280,7 @@ function _column_key($modelsName, $c, $tz=null) {
         ?>
       </td>
       <?php endforeach; // $indexColumns ?>
-      <td>
+      <td class="actions">
         <?php
 
           // Action list for command menu dropdown / button listing

diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
@@ -36,7 +36,7 @@ class="<?= $actionsMenuClass; ?>">
   <?php
   $linkparams = array(
     'id' => 'action-menu-content_' . $actionsMenuUid,
-    'class' => 'nospin coAddEditButtons',
+    'class' => 'nospin action-menu-toggle',
     'escape' => false,
     'data-toggle' => 'dropdown',
     'aria-haspopup' => true,
@@ -58,39 +58,41 @@ class="<?= $actionsMenuClass; ?>">
   ?>
   <ul id="action-list_<?= $actionsMenuUid; ?>" class="dropdown-menu nospin">
     <?php foreach($vv_actions as $action): ?>
-      <?php $actionCssClass = (!empty($action['class'])) ? "dropdown-item " . $action['class'] : "dropdown-item"; ?>
-      <?php if(empty($action['onclick'])): ?>
-        <a class="<?= $actionCssClass; ?>" href="<?= $action['url']; ?>">
-          <?php if(!empty($action['icon'])): ?>
-            <em class="material-icons"><?= $action['icon']; ?></em>
-          <?php endif; ?>
-          <?= $action['label']; ?>
-        </a>
-      <?php else: ?>
-        <?php
-          // Build a link to a confirm dialog box. The confirm button of the dialog
-          // will trigger the postButton built below the menu link.
-          $actionUid = 'action-' . md5($action['onclick']['dg_url']);
-          $dg_onclick = 'javascript:js_confirm_generic(\''
-          . $action['onclick']['dg_bd_txt'] . '\',\''            // dialog body text
-          . $actionUid . '\',\''                                 // ID of postButton element to click on confirm
-          . $action['onclick']['dg_conf_btn'] . '\',\''          // dialog confirm button
-          . $action['onclick']['dg_cancel_btn'] . '\',\''        // dialog cancel button
-          . $action['onclick']['dg_title'] . '\',[\''            // dialog title
-          . $action['onclick']['dg_bd_txt_repl_str']             // dialog body text replacement strings
-          . '\']);';
-        ?>
-        <a class="<?= $actionCssClass; ?>" href="#" onclick="<?= $dg_onclick; ?>"  
-           data-toggle="modal" data-target="#dialog">
-          <?php if(!empty($action['icon'])): ?>
-            <em class="material-icons"><?= $action['icon']; ?></em>
-          <?php endif; ?>
-          <?= $action['label']; ?>
-        </a>
-        <?php // build the postButton element that will be clicked by the modal dialog: ?>
-        <?= $this->Form->postButton($action['onclick']['dg_conf_btn'], 
-            $action['onclick']['dg_post_btn_array'],['id' => $actionUid, 'class'   => 'hidden']); ?>
-      <?php endif; ?>
+      <li class="action-list-item">
+        <?php $actionCssClass = (!empty($action['class'])) ? "dropdown-item " . $action['class'] : "dropdown-item"; ?>
+        <?php if(empty($action['onclick'])): ?>
+          <a class="<?= $actionCssClass; ?>" href="<?= $action['url']; ?>">
+            <?php if(!empty($action['icon'])): ?>
+              <em class="material-icons"><?= $action['icon']; ?></em>
+            <?php endif; ?>
+            <?= $action['label']; ?>
+          </a>
+        <?php else: ?>
+          <?php
+            // Build a link to a confirm dialog box. The confirm button of the dialog
+            // will trigger the postButton built below the menu link.
+            $actionUid = 'action-' . md5($action['onclick']['dg_url']);
+            $dg_onclick = 'javascript:js_confirm_generic(\''
+            . $action['onclick']['dg_bd_txt'] . '\',\''            // dialog body text
+            . $actionUid . '\',\''                                 // ID of postButton element to click on confirm
+            . $action['onclick']['dg_conf_btn'] . '\',\''          // dialog confirm button
+            . $action['onclick']['dg_cancel_btn'] . '\',\''        // dialog cancel button
+            . $action['onclick']['dg_title'] . '\',[\''            // dialog title
+            . $action['onclick']['dg_bd_txt_repl_str']             // dialog body text replacement strings
+            . '\']);';
+          ?>
+          <a class="<?= $actionCssClass; ?>" href="#" onclick="<?= $dg_onclick; ?>"  
+             data-toggle="modal" data-target="#dialog">
+            <?php if(!empty($action['icon'])): ?>
+              <em class="material-icons"><?= $action['icon']; ?></em>
+            <?php endif; ?>
+            <?= $action['label']; ?>
+          </a>
+          <?php // build the postButton element that will be clicked by the modal dialog: ?>
+          <?= $this->Form->postButton($action['onclick']['dg_conf_btn'], 
+              $action['onclick']['dg_post_btn_array'],['id' => $actionUid, 'class'   => 'hidden']); ?>
+        <?php endif; ?>
+      </li>
     <?php endforeach;?>
   </ul>
 </div>
diff --git a/app/templates/element/search.php b/app/templates/element/search.php
@@ -87,7 +87,7 @@
           <?php endif; ?>
       </span>
       <?php endif; ?>
-      <button class="cm-toggle" aria-expanded="false" aria-controls="top-search-fields" type="button"><em class="material-icons drop-arrow">arrow_drop_down</em></button>
+      <button class="cm-toggle nospin" aria-expanded="false" aria-controls="top-search-fields" type="button"><em class="material-icons drop-arrow">arrow_drop_down</em></button>
     </legend>
     <div id="top-search-fields">
       <div id="top-search-fields-subgroups">

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -704,9 +704,6 @@ body.logged-in #top-menu {
   margin-bottom: 2em;
   font-style: italic;
 }
-.actions {
-  white-space: nowrap;
-}
 /* MATCHGRID CONFIGURATION */
 #matchgrid-config-menu {
   list-style: none;
@@ -856,10 +853,6 @@ ul.data-list li:nth-child(2n) {
 ul.data-table li {
   background-color: unset;
 }
-.field-actions {
-   float: right;
-   padding: 2px;
-}
 .field-data {
   float: left;
   padding: 4px 0 0 10px;
@@ -1149,9 +1142,6 @@ tr td:last-child {
 tr.noborder td {
   border: none;
 }
-th.actionButtons {
-  width:70px;
-}
 tr:nth-child(odd) td {
   background-color: #f8f8f8;
 }

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -212,6 +212,31 @@
   #reconcile-table {
     font-size: 1em;
   }
+  /* INDEX ACTION COMMAND MENUS */
+  /* convert the dropdown menus to be visible on wider screens */
+  .field-actions .action-menu-toggle {
+    display: none;
+  }
+  .field-actions .dropdown-menu {
+    position: static;
+    display: inline-block;
+    font-size: 0.9em;
+    border: none;
+    background-color: transparent;
+  }
+  .field-actions .action-list-item {
+    display: inline-block;
+  }
+  .field-actions a.dropdown-item {
+    padding: 0 0.5em;
+    color: var(--cmg-color-link-primary);
+  }
+  .field-actions a.dropdown-item:hover {
+    background-color: transparent;
+  }
+  th.actions {
+    padding-left: 1.5em;
+  }
   /* FOOTER */
   #co-footer {
     position: static;