3.5 KiB

Raw Blame History

TaskStatusBadge Custom Colors Implementation

Overview

Updated the TaskStatusBadge component to support custom colors for custom task statuses while maintaining backward compatibility with system statuses.

Changes Made

Component Updates

File: frontend/src/components/task/TaskStatusBadge.vue

Key Features:

Dual Mode Support: Component now accepts either a string (system status) or a status object with color property
Custom Color Application: When a status object with color is provided, applies the custom background color
Contrast Calculation: Automatically calculates whether to use black or white text based on background luminance
Backward Compatibility: Existing usage with string statuses continues to work with default variant styling

Implementation Details:

interface StatusObject {
  id: string
  name: string
  color?: string
  is_system?: boolean
}

interface Props {
  status: string | StatusObject
  compact?: boolean
}

Contrast Color Algorithm:

Uses WCAG relative luminance formula: (0.299 * R + 0.587 * G + 0.114 * B) / 255
Returns black text for light backgrounds (luminance > 0.5)
Returns white text for dark backgrounds (luminance ≤ 0.5)

Rendering Logic:

If status has no color property → Use Badge component with variant styling
If status has color property → Render custom div with inline styles

Usage Examples

System Status (String)

<TaskStatusBadge status="in_progress" />
<TaskStatusBadge status="approved" :compact="true" />

Custom Status (Object)

<TaskStatusBadge 
  :status="{ 
    id: 'custom_1', 
    name: 'Ready for Review', 
    color: '#3b82f6' 
  }" 
/>

Mixed Usage

<!-- System status -->
<TaskStatusBadge status="not_started" />

<!-- Custom status with color -->
<TaskStatusBadge 
  :status="customStatus" 
/>

Testing

Created test file: frontend/test-task-status-badge-custom-colors.html

Test cases cover:

✅ System statuses with default variant styling
✅ Custom status objects with various colors
✅ Light background colors (verifying black text)
✅ Dark background colors (verifying white text)
✅ Compact mode with custom colors

Requirements Validated

✅ Requirement 7.1: Accept status object with color property
✅ Requirement 7.2: Apply custom background color from status
✅ Requirement 7.3: Calculate contrast color for text (black or white)
✅ Maintain existing styling for system statuses
✅ Backward compatibility with string status values

Next Steps

The following components will need to be updated to pass status objects instead of strings:

EditableTaskStatus.vue - Task status dropdown
TaskStatusFilter.vue - Asset task status filter
ShotTaskStatusFilter.vue - Shot task status filter
TaskBulkActionsMenu.vue - Bulk status update

These updates are covered in subsequent tasks (18-20) in the implementation plan.

Technical Notes

Color Format

Expects hex color format: #RRGGBB
Handles colors with or without # prefix
Validates RGB values for contrast calculation

Styling Consistency

Custom colored badges maintain same dimensions as system badges
Uses same border radius, padding, and font styling
Includes focus ring styles for accessibility

Performance

Contrast calculation is computed property (cached)
No external dependencies for color manipulation
Minimal overhead for system statuses (no calculation needed)

3.5 KiB Raw Blame History