From a00f26d8a4b211aa2beb9a131edea192e80430f2 Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Wed, 28 May 2025 21:22:21 -0400
Subject: [PATCH] UI/UX Draggables now switch to a hand on hover, updated the
 UI in invoice quote and reccuring invoice so buttons do not wrap and are
 grouped. Seperated the Dragable button using a button link, did the same for
 tasks in tickets

---
 admin_ticket_template_details.php | 18 ++++----
 css/itflow_custom.css             |  7 ++--
 invoice.php                       | 41 +++++++++----------
 project_details.php               |  8 ++--
 quote.php                         | 44 +++++++++-----------
 recurring_invoice.php             | 39 ++++++++----------
 ticket.php                        | 68 ++++++++++++++++---------------
 7 files changed, 106 insertions(+), 119 deletions(-)

diff --git a/admin_ticket_template_details.php b/admin_ticket_template_details.php
index 57fd3a47..99b3ab78 100644
--- a/admin_ticket_template_details.php
+++ b/admin_ticket_template_details.php
@@ -45,7 +45,7 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
 </ol>
 
 <div class="row">
-    <div class="col-8">
+    <div class="col-9">
 
         <div class="card card-dark">
             <div class="card-header">
@@ -72,7 +72,7 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
 
     </div>
 
-    <div class="col-4">
+    <div class="col-3">
 
         <div class="card card-dark">
             <div class="card-header">
@@ -82,10 +82,7 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
                 <form action="post.php" method="post" autocomplete="off">
                     <input type="hidden" name="ticket_template_id" value="<?php echo $ticket_template_id; ?>">
                     <div class="form-group">
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-tasks"></i></span>
-                            </div>
+                        <div class="input-group input-group-sm">
                             <input type="text" class="form-control" name="task_name" placeholder="Create a task" required maxlength="200">
                             <div class="input-group-append">
                                 <button type="submit" name="add_ticket_template_task" class="btn btn-primary"><i class="fas fa-fw fa-check"></i></button>
@@ -103,15 +100,14 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
                         ?>
                         <tr data-task-id="<?php echo $task_id; ?>">
                             <td>
-                                <a href="#" class="drag-handle"><i class="fas fa-bars text-muted mr-1"></i></a>
-                                <span class="text-secondary"><?php echo $task_completion_estimate; ?>m</span>
-                                <span class="text-dark"> - <?php echo $task_name; ?></span>
+                                <a href="#" class="drag-handle"><i class="fas fa-bars text-muted mr-2"></i></a>
+                                <span class="text-dark"><?php echo $task_name; ?></span>
                             </td>
                             <td class="text-right">
                                 <div class="float-right">
                                     <div class="dropdown dropleft text-center">
-                                        <button class="btn btn-link text-secondary btn-sm" type="button" data-toggle="dropdown">
-                                            <i class="fas fa-fw fa-ellipsis-v"></i>
+                                        <button class="btn btn-light text-secondary btn-sm" type="button" data-toggle="dropdown">
+                                            <i class="fas fa-ellipsis-v"></i>
                                         </button>
                                         <div class="dropdown-menu">
                                             <a class="dropdown-item" href="#"
diff --git a/css/itflow_custom.css b/css/itflow_custom.css
index 8b93a921..50b0d582 100644
--- a/css/itflow_custom.css
+++ b/css/itflow_custom.css
@@ -21,10 +21,9 @@
 }
 
 .drag-handle {
-    cursor: grab;
-    touch-action: none;
-    user-select: none;
+    cursor: grab !important;
 }
+
 .drag-handle:active {
-    cursor: grabbing;
+    cursor: grabbing !important;
 }
\ No newline at end of file
diff --git a/invoice.php b/invoice.php
index c8d93a91..531e1cc6 100644
--- a/invoice.php
+++ b/invoice.php
@@ -384,31 +384,30 @@ if (isset($_GET['invoice_id'])) {
                                     <tr data-item-id="<?php echo $item_id; ?>">
                                         <td class="d-print-none">
                                             <?php if ($invoice_status !== "Paid" && $invoice_status !== "Cancelled") { ?>
-                                                <div class="row">
-                                                    <div class="col">
-                                                        <button type="button" class="btn btn-sm btn-light drag-handle">
-                                                            <i class="fas fa-bars text-muted"></i>
+                                                
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-sm btn-link drag-handle">
+                                                        <i class="fas fa-bars text-muted"></i>
+                                                    </button>
+                                            
+                                                    <div class="dropdown">
+                                                        <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
+                                                            <i class="fas fa-ellipsis-v"></i>
                                                         </button>
-                                                    </div>
-                                                    <div class="col">
-                                                        <div class="dropdown">
-                                                            <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
-                                                                <i class="fas fa-ellipsis-v"></i>
-                                                            </button>
-                                                            <div class="dropdown-menu">
-                                                                <a class="dropdown-item" href="#"
-                                                                    data-toggle="ajax-modal"
-                                                                    data-ajax-url="ajax/ajax_item_edit.php"
-                                                                    data-ajax-id="<?php echo $item_id; ?>"
-                                                                    >
-                                                                    <i class="fa fa-fw fa-edit mr-2"></i>Edit
-                                                                </a>
-                                                                <div class="dropdown-divider"></div>
-                                                                <a class="dropdown-item text-danger confirm-link" href="post.php?delete_invoice_item=<?php echo $item_id; ?>"><i class="fa fa-fw fa-trash mr-2"></i>Delete</a>
-                                                            </div>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#"
+                                                                data-toggle="ajax-modal"
+                                                                data-ajax-url="ajax/ajax_item_edit.php"
+                                                                data-ajax-id="<?php echo $item_id; ?>"
+                                                                >
+                                                                <i class="fa fa-fw fa-edit mr-2"></i>Edit
+                                                            </a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item text-danger confirm-link" href="post.php?delete_invoice_item=<?php echo $item_id; ?>"><i class="fa fa-fw fa-trash mr-2"></i>Delete</a>
                                                         </div>
                                                     </div>
                                                 </div>
+                                            
                                             <?php } ?>
                                         </td>
                                         <td><?php echo $item_name; ?></td>
diff --git a/project_details.php b/project_details.php
index 4157c230..4bfc25da 100644
--- a/project_details.php
+++ b/project_details.php
@@ -271,7 +271,7 @@ if (isset($_GET['project_id'])) {
     </div>
 
     <div class="row">
-        <div class="col-md-8">
+        <div class="col-md-9">
 
             <!-- Tickets card -->
             <?php if (mysqli_num_rows($sql_tickets) > 0) { ?>
@@ -419,7 +419,7 @@ if (isset($_GET['project_id'])) {
             <?php } ?>
         </div>
 
-        <div class="col-md-4">
+        <div class="col-md-3">
 
             <!-- Tasks Card -->
             <?php if (mysqli_num_rows($sql_tasks) > 0) { ?>
@@ -435,10 +435,10 @@ if (isset($_GET['project_id'])) {
                             <tr>
                                 <td>
                                     <?php if ($task_completed_at) { ?>
-                                        <i class="far fa-fw fa-check-square text-primary mr-3"></i>
+                                        <i class="far fa-check-square text-primary mr-2"></i>
                                     <?php } else { ?>
                                         <a href="post.php?complete_task=<?php echo $task_id; ?>">
-                                            <i class="far fa-fw fa-square text-secondary mr-3"></i>
+                                            <i class="far fa-square text-secondary mr-2"></i>
                                         </a>
                                     <?php } ?>
                                     <?php echo $task_name; ?>
diff --git a/quote.php b/quote.php
index 322f2960..1ce765fc 100644
--- a/quote.php
+++ b/quote.php
@@ -344,31 +344,27 @@ if (isset($_GET['quote_id'])) {
                                         <tr data-item-id="<?php echo $item_id; ?>">
                                             <td class="d-print-none">
                                                 <?php if ($quote_status !== "Invoiced" && $quote_status !== "Accepted" && $quote_status !== "Declined" && lookupUserPermission("module_sales") >= 2) { ?>
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <button type="button" class="btn btn-sm btn-light drag-handle">
-                                                                <i class="fas fa-bars text-muted"></i>
-                                                            </button>
-                                                        </div>
-                                                        <div class="col">
+                                                    <div class="btn-group">
+                                                        <button type="button" class="btn btn-sm btn-link drag-handle">
+                                                            <i class="fas fa-bars text-muted"></i>
+                                                        </button>
 
-                                                            <div class="dropdown">
-                                                                <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
-                                                                    <i class="fas fa-ellipsis-v"></i>
-                                                                </button>
-                                                                <div class="dropdown-menu">
-                                                                    <a class="dropdown-item" href="#"
-                                                                        data-toggle="ajax-modal"
-                                                                        data-ajax-url="ajax/ajax_item_edit.php"
-                                                                        data-ajax-id="<?php echo $item_id; ?>"
-                                                                        >
-                                                                        <i class="fa fa-fw fa-edit mr-2"></i>Edit
-                                                                    </a>
-                                                                    <div class="dropdown-divider"></div>
-                                                                    <a class="dropdown-item text-danger confirm-link" href="post.php?delete_quote_item=<?php echo $item_id; ?>">
-                                                                        <i class="fa fa-fw fa-trash mr-2"></i>Delete
-                                                                    </a>
-                                                                </div>
+                                                        <div class="dropdown">
+                                                            <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
+                                                                <i class="fas fa-ellipsis-v"></i>
+                                                            </button>
+                                                            <div class="dropdown-menu">
+                                                                <a class="dropdown-item" href="#"
+                                                                    data-toggle="ajax-modal"
+                                                                    data-ajax-url="ajax/ajax_item_edit.php"
+                                                                    data-ajax-id="<?php echo $item_id; ?>"
+                                                                    >
+                                                                    <i class="fa fa-fw fa-edit mr-2"></i>Edit
+                                                                </a>
+                                                                <div class="dropdown-divider"></div>
+                                                                <a class="dropdown-item text-danger confirm-link" href="post.php?delete_quote_item=<?php echo $item_id; ?>">
+                                                                    <i class="fa fa-fw fa-trash mr-2"></i>Delete
+                                                                </a>
                                                             </div>
                                                         </div>
                                                     </div>
diff --git a/recurring_invoice.php b/recurring_invoice.php
index 8e77d03e..939259a6 100644
--- a/recurring_invoice.php
+++ b/recurring_invoice.php
@@ -274,29 +274,24 @@ if (isset($_GET['recurring_invoice_id'])) {
 
                                     <tr data-item-id="<?php echo $item_id; ?>">
                                         <td class="d-print-none">
-                                            <div class="row">
-                                                <div class="col">
-                                                    <button type="button" class="btn btn-sm btn-light drag-handle">
-                                                        <i class="fas fa-bars text-muted"></i>
+                                            <div class="btn-group">
+                                                <button type="button" class="btn btn-sm btn-link drag-handle">
+                                                    <i class="fas fa-bars text-muted"></i>
+                                                </button>  
+                                                <div class="dropdown">
+                                                    <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
+                                                        <i class="fas fa-ellipsis-v"></i>
                                                     </button>
-                                                </div>
-                                                <div class="col">
-
-                                                    <div class="dropdown">
-                                                        <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
-                                                            <i class="fas fa-ellipsis-v"></i>
-                                                        </button>
-                                                        <div class="dropdown-menu">
-                                                            <a class="dropdown-item" href="#"
-                                                                data-toggle="ajax-modal"
-                                                                data-ajax-url="ajax/ajax_item_edit.php"
-                                                                data-ajax-id="<?php echo $item_id; ?>"
-                                                                >
-                                                                <i class="fa fa-fw fa-edit mr-2"></i>Edit
-                                                            </a>
-                                                            <div class="dropdown-divider"></div>
-                                                            <a class="dropdown-item text-danger confirm-link" href="post.php?delete_recurring_invoice_item=<?php echo $item_id; ?>"><i class="fa fa-fw fa-trash mr-2"></i>Delete</a>
-                                                        </div>
+                                                    <div class="dropdown-menu">
+                                                        <a class="dropdown-item" href="#"
+                                                            data-toggle="ajax-modal"
+                                                            data-ajax-url="ajax/ajax_item_edit.php"
+                                                            data-ajax-id="<?php echo $item_id; ?>"
+                                                            >
+                                                            <i class="fa fa-fw fa-edit mr-2"></i>Edit
+                                                        </a>
+                                                        <div class="dropdown-divider"></div>
+                                                        <a class="dropdown-item text-danger confirm-link" href="post.php?delete_recurring_invoice_item=<?php echo $item_id; ?>"><i class="fa fa-fw fa-trash mr-2"></i>Delete</a>
                                                     </div>
                                                 </div>
                                             </div>
diff --git a/ticket.php b/ticket.php
index 84e49946..bb64dfb2 100644
--- a/ticket.php
+++ b/ticket.php
@@ -953,47 +953,49 @@ if (isset($_GET['ticket_id'])) {
                                 <tr data-task-id="<?php echo $task_id; ?>">
                                     <td>
                                         <?php if ($task_completed_at) { ?>
-                                            <i class="far fa-fw fa-check-square text-primary"></i>
+                                            <i class="far fa-check-square text-primary"></i>
                                         <?php } elseif (lookupUserPermission("module_support") >= 2) { ?>
                                             <a href="post.php?complete_task=<?php echo $task_id; ?>">
-                                                <i class="far fa-fw fa-square text-secondary"></i>
+                                                <i class="far fa-square text-secondary"></i>
                                             </a>
                                         <?php } ?>
-                                    </td>
-                                    <td>
-                                        <a href="#" class="drag-handle"><i class="fas fa-bars text-muted mr-1"></i></a>
-                                        <span class="text-secondary"><?php echo $task_completion_estimate; ?>m</span>
-                                        <span class="text-dark"> - <?php echo $task_name; ?></span>
+                                        <span class="text-dark ml-2"><?php echo $task_name; ?></span>
                                     </td>
                                     <td>
                                         <div class="float-right">
-                                            <?php if (empty($ticket_resolved_at) && lookupUserPermission("module_support") >= 2) { ?>
-                                                   
-                                                <div class="dropdown dropleft text-center">
-                                                    <button class="btn btn-link text-secondary btn-sm" type="button" data-toggle="dropdown">
-                                                        <i class="fas fa-fw fa-ellipsis-v"></i>
-                                                    </button>
-                                                    <div class="dropdown-menu">
-                                                        <a class="dropdown-item" href="#"
-                                                           data-toggle = "ajax-modal"
-                                                           data-ajax-url = "ajax/ajax_ticket_task_edit.php"
-                                                           data-ajax-id = "<?php echo $task_id; ?>"
-                                                        >
-                                                            <i class="fas fa-fw fa-edit mr-2"></i>Edit
-                                                        </a>
-                                                        <?php if ($task_completed_at) { ?>
-                                                            <a class="dropdown-item" href="post.php?undo_complete_task=<?php echo $task_id; ?>">
-                                                                <i class="fas fa-fw fa-arrow-circle-left mr-2"></i>Mark incomplete
-                                                            </a>
-                                                        <?php } ?>
-                                                        <div class="dropdown-divider"></div>
-                                                        <a class="dropdown-item text-danger confirm-link" href="post.php?delete_task=<?php echo $task_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>">
-                                                            <i class="fas fa-fw fa-trash-alt mr-2"></i>Delete
-                                                        </a>
-                                                    </div>
-                                                </div>
+
+                                            <div class="btn-group">
                                             
-                                            <?php } ?>
+                                                <button class="btn btn-sm btn-link drag-handle"><i class="fas fa-bars text-muted mr-1"></i></button>
+
+                                                <?php if (empty($ticket_resolved_at) && lookupUserPermission("module_support") >= 2) { ?>
+                                                       
+                                                    <div class="dropdown dropleft text-center">
+                                                        <button class="btn btn-light text-secondary btn-sm" type="button" data-toggle="dropdown">
+                                                            <i class="fas fa-ellipsis-v"></i>
+                                                        </button>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#"
+                                                               data-toggle = "ajax-modal"
+                                                               data-ajax-url = "ajax/ajax_ticket_task_edit.php"
+                                                               data-ajax-id = "<?php echo $task_id; ?>"
+                                                            >
+                                                                <i class="fas fa-fw fa-edit mr-2"></i>Edit
+                                                            </a>
+                                                            <?php if ($task_completed_at) { ?>
+                                                                <a class="dropdown-item" href="post.php?undo_complete_task=<?php echo $task_id; ?>">
+                                                                    <i class="fas fa-fw fa-arrow-circle-left mr-2"></i>Mark incomplete
+                                                                </a>
+                                                            <?php } ?>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item text-danger confirm-link" href="post.php?delete_task=<?php echo $task_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>">
+                                                                <i class="fas fa-fw fa-trash-alt mr-2"></i>Delete
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                
+                                                <?php } ?>
+                                            </div>
                                         </div>
                                     </td>
                                 </tr>