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

This commit is contained in:
johnnyq 2025-05-28 21:22:21 -04:00
parent eeef63d1c3
commit a00f26d8a4
7 changed files with 106 additions and 119 deletions

View File

@ -45,7 +45,7 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
</ol> </ol>
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-9">
<div class="card card-dark"> <div class="card card-dark">
<div class="card-header"> <div class="card-header">
@ -72,7 +72,7 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
</div> </div>
<div class="col-4"> <div class="col-3">
<div class="card card-dark"> <div class="card card-dark">
<div class="card-header"> <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"> <form action="post.php" method="post" autocomplete="off">
<input type="hidden" name="ticket_template_id" value="<?php echo $ticket_template_id; ?>"> <input type="hidden" name="ticket_template_id" value="<?php echo $ticket_template_id; ?>">
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-fw fa-tasks"></i></span>
</div>
<input type="text" class="form-control" name="task_name" placeholder="Create a task" required maxlength="200"> <input type="text" class="form-control" name="task_name" placeholder="Create a task" required maxlength="200">
<div class="input-group-append"> <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> <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; ?>"> <tr data-task-id="<?php echo $task_id; ?>">
<td> <td>
<a href="#" class="drag-handle"><i class="fas fa-bars text-muted mr-1"></i></a> <a href="#" class="drag-handle"><i class="fas fa-bars text-muted mr-2"></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"> - <?php echo $task_name; ?></span>
</td> </td>
<td class="text-right"> <td class="text-right">
<div class="float-right"> <div class="float-right">
<div class="dropdown dropleft text-center"> <div class="dropdown dropleft text-center">
<button class="btn btn-link text-secondary btn-sm" type="button" data-toggle="dropdown"> <button class="btn btn-light text-secondary btn-sm" type="button" data-toggle="dropdown">
<i class="fas fa-fw fa-ellipsis-v"></i> <i class="fas fa-ellipsis-v"></i>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#" <a class="dropdown-item" href="#"

View File

@ -21,10 +21,9 @@
} }
.drag-handle { .drag-handle {
cursor: grab; cursor: grab !important;
touch-action: none;
user-select: none;
} }
.drag-handle:active { .drag-handle:active {
cursor: grabbing; cursor: grabbing !important;
} }

View File

@ -384,31 +384,30 @@ if (isset($_GET['invoice_id'])) {
<tr data-item-id="<?php echo $item_id; ?>"> <tr data-item-id="<?php echo $item_id; ?>">
<td class="d-print-none"> <td class="d-print-none">
<?php if ($invoice_status !== "Paid" && $invoice_status !== "Cancelled") { ?> <?php if ($invoice_status !== "Paid" && $invoice_status !== "Cancelled") { ?>
<div class="row">
<div class="col"> <div class="btn-group">
<button type="button" class="btn btn-sm btn-light drag-handle"> <button type="button" class="btn btn-sm btn-link drag-handle">
<i class="fas fa-bars text-muted"></i> <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> </button>
</div> <div class="dropdown-menu">
<div class="col"> <a class="dropdown-item" href="#"
<div class="dropdown"> data-toggle="ajax-modal"
<button class="btn btn-sm btn-light" type="button" data-toggle="dropdown"> data-ajax-url="ajax/ajax_item_edit.php"
<i class="fas fa-ellipsis-v"></i> data-ajax-id="<?php echo $item_id; ?>"
</button> >
<div class="dropdown-menu"> <i class="fa fa-fw fa-edit mr-2"></i>Edit
<a class="dropdown-item" href="#" </a>
data-toggle="ajax-modal" <div class="dropdown-divider"></div>
data-ajax-url="ajax/ajax_item_edit.php" <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>
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>
</div> </div>
</div> </div>
<?php } ?> <?php } ?>
</td> </td>
<td><?php echo $item_name; ?></td> <td><?php echo $item_name; ?></td>

View File

@ -271,7 +271,7 @@ if (isset($_GET['project_id'])) {
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-9">
<!-- Tickets card --> <!-- Tickets card -->
<?php if (mysqli_num_rows($sql_tickets) > 0) { ?> <?php if (mysqli_num_rows($sql_tickets) > 0) { ?>
@ -419,7 +419,7 @@ if (isset($_GET['project_id'])) {
<?php } ?> <?php } ?>
</div> </div>
<div class="col-md-4"> <div class="col-md-3">
<!-- Tasks Card --> <!-- Tasks Card -->
<?php if (mysqli_num_rows($sql_tasks) > 0) { ?> <?php if (mysqli_num_rows($sql_tasks) > 0) { ?>
@ -435,10 +435,10 @@ if (isset($_GET['project_id'])) {
<tr> <tr>
<td> <td>
<?php if ($task_completed_at) { ?> <?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 { ?> <?php } else { ?>
<a href="post.php?complete_task=<?php echo $task_id; ?>"> <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> </a>
<?php } ?> <?php } ?>
<?php echo $task_name; ?> <?php echo $task_name; ?>

View File

@ -344,31 +344,27 @@ if (isset($_GET['quote_id'])) {
<tr data-item-id="<?php echo $item_id; ?>"> <tr data-item-id="<?php echo $item_id; ?>">
<td class="d-print-none"> <td class="d-print-none">
<?php if ($quote_status !== "Invoiced" && $quote_status !== "Accepted" && $quote_status !== "Declined" && lookupUserPermission("module_sales") >= 2) { ?> <?php if ($quote_status !== "Invoiced" && $quote_status !== "Accepted" && $quote_status !== "Declined" && lookupUserPermission("module_sales") >= 2) { ?>
<div class="row"> <div class="btn-group">
<div class="col"> <button type="button" class="btn btn-sm btn-link drag-handle">
<button type="button" class="btn btn-sm btn-light drag-handle"> <i class="fas fa-bars text-muted"></i>
<i class="fas fa-bars text-muted"></i> </button>
</button>
</div>
<div class="col">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-sm btn-light" type="button" data-toggle="dropdown"> <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i> <i class="fas fa-ellipsis-v"></i>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#" <a class="dropdown-item" href="#"
data-toggle="ajax-modal" data-toggle="ajax-modal"
data-ajax-url="ajax/ajax_item_edit.php" data-ajax-url="ajax/ajax_item_edit.php"
data-ajax-id="<?php echo $item_id; ?>" data-ajax-id="<?php echo $item_id; ?>"
> >
<i class="fa fa-fw fa-edit mr-2"></i>Edit <i class="fa fa-fw fa-edit mr-2"></i>Edit
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item text-danger confirm-link" href="post.php?delete_quote_item=<?php echo $item_id; ?>"> <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 <i class="fa fa-fw fa-trash mr-2"></i>Delete
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -274,29 +274,24 @@ if (isset($_GET['recurring_invoice_id'])) {
<tr data-item-id="<?php echo $item_id; ?>"> <tr data-item-id="<?php echo $item_id; ?>">
<td class="d-print-none"> <td class="d-print-none">
<div class="row"> <div class="btn-group">
<div class="col"> <button type="button" class="btn btn-sm btn-link drag-handle">
<button type="button" class="btn btn-sm btn-light drag-handle"> <i class="fas fa-bars text-muted"></i>
<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> </button>
</div> <div class="dropdown-menu">
<div class="col"> <a class="dropdown-item" href="#"
data-toggle="ajax-modal"
<div class="dropdown"> data-ajax-url="ajax/ajax_item_edit.php"
<button class="btn btn-sm btn-light" type="button" data-toggle="dropdown"> data-ajax-id="<?php echo $item_id; ?>"
<i class="fas fa-ellipsis-v"></i> >
</button> <i class="fa fa-fw fa-edit mr-2"></i>Edit
<div class="dropdown-menu"> </a>
<a class="dropdown-item" href="#" <div class="dropdown-divider"></div>
data-toggle="ajax-modal" <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>
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>
</div> </div>
</div> </div>

View File

@ -953,47 +953,49 @@ if (isset($_GET['ticket_id'])) {
<tr data-task-id="<?php echo $task_id; ?>"> <tr data-task-id="<?php echo $task_id; ?>">
<td> <td>
<?php if ($task_completed_at) { ?> <?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) { ?> <?php } elseif (lookupUserPermission("module_support") >= 2) { ?>
<a href="post.php?complete_task=<?php echo $task_id; ?>"> <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> </a>
<?php } ?> <?php } ?>
</td> <span class="text-dark ml-2"><?php echo $task_name; ?></span>
<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>
</td> </td>
<td> <td>
<div class="float-right"> <div class="float-right">
<?php if (empty($ticket_resolved_at) && lookupUserPermission("module_support") >= 2) { ?>
<div class="dropdown dropleft text-center"> <div class="btn-group">
<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-sm btn-link drag-handle"><i class="fas fa-bars text-muted mr-1"></i></button>
</button>
<div class="dropdown-menu"> <?php if (empty($ticket_resolved_at) && lookupUserPermission("module_support") >= 2) { ?>
<a class="dropdown-item" href="#"
data-toggle = "ajax-modal" <div class="dropdown dropleft text-center">
data-ajax-url = "ajax/ajax_ticket_task_edit.php" <button class="btn btn-light text-secondary btn-sm" type="button" data-toggle="dropdown">
data-ajax-id = "<?php echo $task_id; ?>" <i class="fas fa-ellipsis-v"></i>
> </button>
<i class="fas fa-fw fa-edit mr-2"></i>Edit <div class="dropdown-menu">
</a> <a class="dropdown-item" href="#"
<?php if ($task_completed_at) { ?> data-toggle = "ajax-modal"
<a class="dropdown-item" href="post.php?undo_complete_task=<?php echo $task_id; ?>"> data-ajax-url = "ajax/ajax_ticket_task_edit.php"
<i class="fas fa-fw fa-arrow-circle-left mr-2"></i>Mark incomplete data-ajax-id = "<?php echo $task_id; ?>"
>
<i class="fas fa-fw fa-edit mr-2"></i>Edit
</a> </a>
<?php } ?> <?php if ($task_completed_at) { ?>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="post.php?undo_complete_task=<?php echo $task_id; ?>">
<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-arrow-circle-left mr-2"></i>Mark incomplete
<i class="fas fa-fw fa-trash-alt mr-2"></i>Delete </a>
</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>
</div>
<?php } ?> <?php } ?>
</div>
</div> </div>
</td> </td>
</tr> </tr>