change matrix colors to reflect task size
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { type Component, For, createMemo } from "solid-js";
|
||||
import { store, calculateUrgencyScore, setActiveTaskId, setStore, getCombinedScore, matchesFilter } from "@/store";
|
||||
import { store, calculateUrgencyScore, setActiveTaskId, setStore, matchesFilter } from "@/store";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
|
||||
|
||||
@@ -85,11 +85,11 @@ export const MatrixView: Component = () => {
|
||||
};
|
||||
|
||||
const urgencyScore = calculateUrgencyScore(task.dueDate);
|
||||
const combinedScore = getCombinedScore(task);
|
||||
|
||||
// Map 1-10 to HSL Hue (0 = Red, 240 = Blue)
|
||||
// Using a slightly limited range for better aesthetics (0 to 220)
|
||||
const hue = ((10 - combinedScore) / 9) * 220;
|
||||
// Map task size (0-10) to HSL Hue (240 = Blue/Cool, 0 = Red/Warm)
|
||||
// This creates a "true gradient" from small to large tasks.
|
||||
const taskSize = task.size ?? 5;
|
||||
const hue = (1 - (taskSize / 10)) * 240;
|
||||
const dotColor = `hsl(${hue}, 85%, 55%)`;
|
||||
|
||||
return (
|
||||
@@ -123,6 +123,7 @@ export const MatrixView: Component = () => {
|
||||
<p class="text-xs font-bold leading-tight">{task.title}</p>
|
||||
<div class="flex items-center justify-between mt-2 pt-2 border-t border-border">
|
||||
<span class="text-[9px] text-muted-foreground">U: {urgencyScore}</span>
|
||||
<span class="text-[9px] text-muted-foreground">S: {task.size ?? 5}</span>
|
||||
<span class="text-[9px] text-muted-foreground">P: {task.priority}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user