306c96328e
- Created ProjectStatusDropdownSimple component for managing project statuses with a simple dropdown interface. - Updated ProjectTasksDashboard and ProjectTasksSection to use the new ProjectStatusDropdownSimple component. - Refactored TaskStatusDropdown to simplify its structure and added debugging features. - Introduced TaskStatusDropdownDebug for testing purposes with enhanced logging and debugging UI. - Added TaskStatusDropdownSimple for task statuses, mirroring the functionality of the project status dropdown. - Created comprehensive HTML test files for dropdown functionality validation. - Added a batch script to clear Next.js cache and start the development server.
157 lines
4.4 KiB
HTML
157 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Dropdown Test</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.debug-border {
|
|
border: 2px solid red !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="p-8 bg-gray-100">
|
|
<h1 class="text-2xl mb-4">Dropdown Visibility Test</h1>
|
|
|
|
<!-- Test basic dropdown structure -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg mb-2">Basic Dropdown Test</h2>
|
|
<div class="relative">
|
|
<button
|
|
id="test-btn"
|
|
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
>
|
|
Click me
|
|
</button>
|
|
<div
|
|
id="test-dropdown"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-[9999] min-w-[120px]"
|
|
>
|
|
<div class="px-3 py-2 hover:bg-gray-50">Option 1</div>
|
|
<div class="px-3 py-2 hover:bg-gray-50">Option 2</div>
|
|
<div class="px-3 py-2 hover:bg-gray-50">Option 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test with high z-index -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg mb-2">High Z-Index Test</h2>
|
|
<div class="relative">
|
|
<button
|
|
id="test-btn-2"
|
|
class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
|
|
>
|
|
Click me (z-index 9999)
|
|
</button>
|
|
<div
|
|
id="test-dropdown-2"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]"
|
|
>
|
|
<div class="px-3 py-2 hover:bg-gray-50 bg-yellow-100">
|
|
High Z Option 1
|
|
</div>
|
|
<div class="px-3 py-2 hover:bg-gray-50 bg-yellow-100">
|
|
High Z Option 2
|
|
</div>
|
|
<div class="px-3 py-2 hover:bg-gray-50 bg-yellow-100">
|
|
High Z Option 3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test in table container -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg mb-2">Table Container Test</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full bg-white border border-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left">Name</th>
|
|
<th class="px-6 py-3 text-left">Status</th>
|
|
<th class="px-6 py-3 text-left">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-t">
|
|
<td class="px-6 py-4">Test Task</td>
|
|
<td class="px-6 py-4">
|
|
<div class="relative">
|
|
<button
|
|
id="table-btn"
|
|
class="bg-purple-500 text-white px-3 py-1 rounded text-sm"
|
|
>
|
|
Status Dropdown
|
|
</button>
|
|
<div
|
|
id="table-dropdown"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-[9999] min-w-[120px]"
|
|
>
|
|
<div class="px-3 py-2 hover:bg-gray-50 bg-blue-100">
|
|
Pending
|
|
</div>
|
|
<div class="px-3 py-2 hover:bg-gray-50 bg-green-100">
|
|
In Progress
|
|
</div>
|
|
<div class="px-3 py-2 hover:bg-gray-50 bg-red-100">
|
|
Completed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">Edit</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add click handlers
|
|
document
|
|
.getElementById("test-btn")
|
|
.addEventListener("click", function () {
|
|
const dropdown = document.getElementById("test-dropdown");
|
|
dropdown.classList.toggle("hidden");
|
|
console.log(
|
|
"Dropdown 1 toggled, hidden:",
|
|
dropdown.classList.contains("hidden")
|
|
);
|
|
});
|
|
|
|
document
|
|
.getElementById("test-btn-2")
|
|
.addEventListener("click", function () {
|
|
const dropdown = document.getElementById("test-dropdown-2");
|
|
dropdown.classList.toggle("hidden");
|
|
console.log(
|
|
"Dropdown 2 toggled, hidden:",
|
|
dropdown.classList.contains("hidden")
|
|
);
|
|
});
|
|
|
|
document
|
|
.getElementById("table-btn")
|
|
.addEventListener("click", function () {
|
|
const dropdown = document.getElementById("table-dropdown");
|
|
dropdown.classList.toggle("hidden");
|
|
console.log(
|
|
"Table dropdown toggled, hidden:",
|
|
dropdown.classList.contains("hidden")
|
|
);
|
|
});
|
|
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener("click", function (e) {
|
|
if (!e.target.closest(".relative")) {
|
|
document.querySelectorAll('[id$="-dropdown"]').forEach((dropdown) => {
|
|
dropdown.classList.add("hidden");
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|