Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

change matrix colors to reflect task size

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-05 10:46:12 -06:00
parent 61f0f2185a
commit ca8de37310
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/constants.ts
+4 -4
View File
@@ -18,10 +18,10 @@ export const URGENCY_OPTIONS = [
{ value: "7", label: "7 - Half-Week" }, { value: "7", label: "7 - Half-Week" },
{ value: "6", label: "6 - This Week/5 Days" }, { value: "6", label: "6 - This Week/5 Days" },
{ value: "5", label: "5 - Next Week/10 Days" }, { value: "5", label: "5 - Next Week/10 Days" },
{ value: "4", label: "4 - 3 Weeks" }, { value: "4", label: "4 - Three Weeks" },
{ value: "3", label: "3 - 6 Weeks" }, { value: "3", label: "3 - Six Weeks" },
{ value: "2", label: "2 - 3 Months" }, { value: "2", label: "2 - Three Months" },
{ value: "1", label: "1 - 6 Months" } { value: "1", label: "1 - Six Months" }
]; ];
export const URGENCY_HOURS: Record<number, number> = { export const URGENCY_HOURS: Record<number, number> = {
10: 12, 10: 12,
src/views/MatrixView.tsx
+6 -5
View File
@@ -1,5 +1,5 @@
import { type Component, For, createMemo } from "solid-js"; 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 { cn } from "@/lib/utils";
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
@@ -85,11 +85,11 @@ export const MatrixView: Component = () => {
}; };
const urgencyScore = calculateUrgencyScore(task.dueDate); const urgencyScore = calculateUrgencyScore(task.dueDate);
const combinedScore = getCombinedScore(task);
// Map 1-10 to HSL Hue (0 = Red, 240 = Blue) // Map task size (0-10) to HSL Hue (240 = Blue/Cool, 0 = Red/Warm)
// Using a slightly limited range for better aesthetics (0 to 220) // This creates a "true gradient" from small to large tasks.
const hue = ((10 - combinedScore) / 9) * 220; const taskSize = task.size ?? 5;
const hue = (1 - (taskSize / 10)) * 240;
const dotColor = `hsl(${hue}, 85%, 55%)`; const dotColor = `hsl(${hue}, 85%, 55%)`;
return ( return (
@@ -123,6 +123,7 @@ export const MatrixView: Component = () => {
<p class="text-xs font-bold leading-tight">{task.title}</p> <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"> <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">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> <span class="text-[9px] text-muted-foreground">P: {task.priority}</span>
</div> </div>
</div> </div>