232 lines
8.1 KiB
HTML
232 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TaskStatusBadge Custom Colors Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 0;
|
|
}
|
|
.badge-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.test-case {
|
|
margin-bottom: 15px;
|
|
}
|
|
.test-case h3 {
|
|
margin: 10px 0 5px 0;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
.status-info {
|
|
font-size: 12px;
|
|
color: #888;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>TaskStatusBadge Custom Colors Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test 1: System Statuses (No Custom Colors)</h2>
|
|
<p>These should use the default variant styling:</p>
|
|
<div class="badge-container" id="system-statuses"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test 2: Custom Status Objects with Colors</h2>
|
|
<p>These should display with custom background colors and calculated contrast text:</p>
|
|
<div class="badge-container" id="custom-statuses"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test 3: Light Background Colors (Should have black text)</h2>
|
|
<div class="badge-container" id="light-backgrounds"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test 4: Dark Background Colors (Should have white text)</h2>
|
|
<div class="badge-container" id="dark-backgrounds"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test 5: Compact Mode</h2>
|
|
<div class="badge-container" id="compact-mode"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Test data
|
|
const systemStatuses = [
|
|
'not_started',
|
|
'in_progress',
|
|
'submitted',
|
|
'approved',
|
|
'retake'
|
|
];
|
|
|
|
const customStatuses = [
|
|
{ id: 'custom_1', name: 'Ready for Review', color: '#3b82f6' },
|
|
{ id: 'custom_2', name: 'Client Review', color: '#8b5cf6' },
|
|
{ id: 'custom_3', name: 'Final Approval', color: '#10b981' },
|
|
{ id: 'custom_4', name: 'On Hold', color: '#f59e0b' },
|
|
{ id: 'custom_5', name: 'Blocked', color: '#ef4444' }
|
|
];
|
|
|
|
const lightBackgrounds = [
|
|
{ id: 'light_1', name: 'Pale Yellow', color: '#fef3c7' },
|
|
{ id: 'light_2', name: 'Light Blue', color: '#dbeafe' },
|
|
{ id: 'light_3', name: 'Light Green', color: '#d1fae5' },
|
|
{ id: 'light_4', name: 'Light Pink', color: '#fce7f3' }
|
|
];
|
|
|
|
const darkBackgrounds = [
|
|
{ id: 'dark_1', name: 'Dark Blue', color: '#1e3a8a' },
|
|
{ id: 'dark_2', name: 'Dark Purple', color: '#581c87' },
|
|
{ id: 'dark_3', name: 'Dark Green', color: '#14532d' },
|
|
{ id: 'dark_4', name: 'Dark Red', color: '#7f1d1d' }
|
|
];
|
|
|
|
// Helper function to calculate contrast color
|
|
function getContrastColor(hexColor) {
|
|
const hex = hexColor.replace('#', '');
|
|
const r = parseInt(hex.substring(0, 2), 16);
|
|
const g = parseInt(hex.substring(2, 4), 16);
|
|
const b = parseInt(hex.substring(4, 6), 16);
|
|
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
return luminance > 0.5 ? '#000000' : '#ffffff';
|
|
}
|
|
|
|
// Helper function to format status name
|
|
function formatStatus(status) {
|
|
switch (status) {
|
|
case 'not_started': return 'Not Started';
|
|
case 'in_progress': return 'In Progress';
|
|
case 'submitted': return 'Submitted';
|
|
case 'approved': return 'Approved';
|
|
case 'retake': return 'Retake';
|
|
default: return status;
|
|
}
|
|
}
|
|
|
|
// Helper function to get status variant class
|
|
function getStatusVariantClass(status) {
|
|
switch (status) {
|
|
case 'not_started': return 'bg-secondary text-secondary-foreground';
|
|
case 'in_progress': return 'bg-primary text-primary-foreground';
|
|
case 'submitted': return 'border border-input bg-background';
|
|
case 'approved': return 'bg-primary text-primary-foreground';
|
|
case 'retake': return 'bg-destructive text-destructive-foreground';
|
|
default: return 'bg-secondary text-secondary-foreground';
|
|
}
|
|
}
|
|
|
|
// Render system statuses
|
|
const systemContainer = document.getElementById('system-statuses');
|
|
systemStatuses.forEach(status => {
|
|
const div = document.createElement('div');
|
|
div.className = 'test-case';
|
|
div.innerHTML = `
|
|
<div class="inline-flex items-center justify-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors w-[130px] ${getStatusVariantClass(status)}">
|
|
${formatStatus(status)}
|
|
</div>
|
|
<div class="status-info">System status: ${status}</div>
|
|
`;
|
|
systemContainer.appendChild(div);
|
|
});
|
|
|
|
// Render custom statuses
|
|
const customContainer = document.getElementById('custom-statuses');
|
|
customStatuses.forEach(status => {
|
|
const textColor = getContrastColor(status.color);
|
|
const div = document.createElement('div');
|
|
div.className = 'test-case';
|
|
div.innerHTML = `
|
|
<div class="inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors w-[130px]"
|
|
style="background-color: ${status.color}; color: ${textColor}; border-color: ${status.color}">
|
|
${status.name}
|
|
</div>
|
|
<div class="status-info">Color: ${status.color} | Text: ${textColor}</div>
|
|
`;
|
|
customContainer.appendChild(div);
|
|
});
|
|
|
|
// Render light backgrounds
|
|
const lightContainer = document.getElementById('light-backgrounds');
|
|
lightBackgrounds.forEach(status => {
|
|
const textColor = getContrastColor(status.color);
|
|
const div = document.createElement('div');
|
|
div.className = 'test-case';
|
|
div.innerHTML = `
|
|
<div class="inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors w-[130px]"
|
|
style="background-color: ${status.color}; color: ${textColor}; border-color: ${status.color}">
|
|
${status.name}
|
|
</div>
|
|
<div class="status-info">Color: ${status.color} | Text: ${textColor} (should be black)</div>
|
|
`;
|
|
lightContainer.appendChild(div);
|
|
});
|
|
|
|
// Render dark backgrounds
|
|
const darkContainer = document.getElementById('dark-backgrounds');
|
|
darkBackgrounds.forEach(status => {
|
|
const textColor = getContrastColor(status.color);
|
|
const div = document.createElement('div');
|
|
div.className = 'test-case';
|
|
div.innerHTML = `
|
|
<div class="inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors w-[130px]"
|
|
style="background-color: ${status.color}; color: ${textColor}; border-color: ${status.color}">
|
|
${status.name}
|
|
</div>
|
|
<div class="status-info">Color: ${status.color} | Text: ${textColor} (should be white)</div>
|
|
`;
|
|
darkContainer.appendChild(div);
|
|
});
|
|
|
|
// Render compact mode
|
|
const compactContainer = document.getElementById('compact-mode');
|
|
const compactStatuses = [
|
|
{ id: 'compact_1', name: 'Review', color: '#3b82f6' },
|
|
{ id: 'compact_2', name: 'Hold', color: '#f59e0b' }
|
|
];
|
|
compactStatuses.forEach(status => {
|
|
const textColor = getContrastColor(status.color);
|
|
const div = document.createElement('div');
|
|
div.className = 'test-case';
|
|
div.innerHTML = `
|
|
<div class="inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors w-[100px]"
|
|
style="background-color: ${status.color}; color: ${textColor}; border-color: ${status.color}">
|
|
${status.name}
|
|
</div>
|
|
<div class="status-info">Compact mode (w-[100px])</div>
|
|
`;
|
|
compactContainer.appendChild(div);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|