Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,117 @@
+# 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:
+1. **Dual Mode Support**: Component now accepts either a string (system status) or a status object with color property
+2. **Custom Color Application**: When a status object with color is provided, applies the custom background color
+3. **Contrast Calculation**: Automatically calculates whether to use black or white text based on background luminance
+4. **Backward Compatibility**: Existing usage with string statuses continues to work with default variant styling
+
+#### Implementation Details:
+
+```typescript
+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)
+```vue
+<TaskStatusBadge status="in_progress" />
+<TaskStatusBadge status="approved" :compact="true" />
+```
+
+### Custom Status (Object)
+```vue
+<TaskStatusBadge 
+  :status="{ 
+    id: 'custom_1', 
+    name: 'Ready for Review', 
+    color: '#3b82f6' 
+  }" 
+/>
+```
+
+### Mixed Usage
+```vue
+<!-- 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:
+1. ✅ System statuses with default variant styling
+2. ✅ Custom status objects with various colors
+3. ✅ Light background colors (verifying black text)
+4. ✅ Dark background colors (verifying white text)
+5. ✅ 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:
+1. `EditableTaskStatus.vue` - Task status dropdown
+2. `TaskStatusFilter.vue` - Asset task status filter
+3. `ShotTaskStatusFilter.vue` - Shot task status filter
+4. `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)