diff options
| author | Ben Sima <ben@bensima.com> | 2025-11-29 22:31:49 -0500 |
|---|---|---|
| committer | Ben Sima <ben@bensima.com> | 2025-11-29 22:31:49 -0500 |
| commit | 6333f4d8db56e26d384de9901cf0c990f8befec7 (patch) | |
| tree | 4d5bdef83d2fbe8ecb066decd6cb41229b5e2506 /Omni/Jr/Web/Style.hs | |
| parent | d58b2f547f474648edbacdf2ffdfdef6e019fe7d (diff) | |
Add clickable priority dropdown on task detail pages
The build passes successfully. Let me provide a summary of the
changes m
I implemented the clickable priority dropdown on task detail pages,
mirr
1. **Added new API route** for priority updates:
```haskell "tasks" :> Capture "id" Text :> "priority" :> ReqBody
'[FormUrlEncode ```
2. **Added new types**:
- `PriorityBadgePartial` - partial response for HTMX updates -
`PriorityForm` - form data for priority changes with `FromForm` ins
3. **Added handler** `taskPriorityHandler` that updates task
priority vi
4. **Added priority dropdown components**:
- `priorityBadgeWithForm` - container with clickable badge and
dropdo - `clickablePriorityBadge` - the clickable badge showing
current prio - `priorityDropdownOptions` - dropdown menu with
P0-P4 options - `priorityOption` - individual priority option with
HTMX form
5. **Added JavaScript** `priorityDropdownJs` for dropdown toggle/close
b
6. **Updated task detail page** to use `priorityBadgeWithForm`
instead o
7. **Added `ToHtml` instance** for `PriorityBadgePartial`
1. **Added priority badge styles** for P0-P4 with appropriate colors
2. **Added priority dropdown styles** (mirroring status dropdown)
3. **Added dark mode styles** for priority badges and dropdown
Task-Id: t-182
Diffstat (limited to 'Omni/Jr/Web/Style.hs')
| -rw-r--r-- | Omni/Jr/Web/Style.hs | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs index 02352ec..fbaaa82 100644 --- a/Omni/Jr/Web/Style.hs +++ b/Omni/Jr/Web/Style.hs @@ -623,6 +623,66 @@ statusBadges = do ".status-badge-clickable" # focus ? do Stylesheet.key "outline" ("2px solid #0066cc" :: Text) Stylesheet.key "outline-offset" ("2px" :: Text) + ".badge-p0" ? do + backgroundColor "#fee2e2" + color "#991b1b" + ".badge-p1" ? do + backgroundColor "#fef3c7" + color "#92400e" + ".badge-p2" ? do + backgroundColor "#dbeafe" + color "#1e40af" + ".badge-p3" ? do + backgroundColor "#e5e7eb" + color "#4b5563" + ".badge-p4" ? do + backgroundColor "#f3f4f6" + color "#6b7280" + ".priority-badge-dropdown" ? do + position relative + display inlineBlock + ".priority-badge-clickable" ? do + cursor pointer + Stylesheet.key "user-select" ("none" :: Text) + ".priority-badge-clickable" # hover ? do + opacity 0.85 + ".priority-dropdown-menu" ? do + display none + position absolute + left (px 0) + top (pct 100) + marginTop (px 2) + backgroundColor white + borderRadius (px 4) (px 4) (px 4) (px 4) + Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.15)" :: Text) + zIndex 100 + padding (px 4) (px 4) (px 4) (px 4) + minWidth (px 100) + ".priority-badge-dropdown.open" |> ".priority-dropdown-menu" ? do + display block + ".priority-option-form" ? do + margin (px 0) (px 0) (px 0) (px 0) + padding (px 0) (px 0) (px 0) (px 0) + ".priority-dropdown-option" ? do + display block + width (pct 100) + textAlign (alignSide sideLeft) + margin (px 2) (px 0) (px 2) (px 0) + border (px 0) none transparent + cursor pointer + transition "opacity" (ms 150) ease (sec 0) + ".priority-dropdown-option" # hover ? do + opacity 0.7 + ".priority-dropdown-option" # focus ? do + opacity 0.85 + Stylesheet.key "outline" ("2px solid #0066cc" :: Text) + Stylesheet.key "outline-offset" ("1px" :: Text) + ".priority-dropdown-option.selected" ? do + Stylesheet.key "outline" ("2px solid #0066cc" :: Text) + Stylesheet.key "outline-offset" ("1px" :: Text) + ".priority-badge-clickable" # focus ? do + Stylesheet.key "outline" ("2px solid #0066cc" :: Text) + Stylesheet.key "outline-offset" ("2px" :: Text) buttonStyles :: Css buttonStyles = do @@ -1445,6 +1505,24 @@ darkModeStyles = ".badge-done" ? do backgroundColor "#064e3b" color "#6ee7b7" + ".badge-p0" ? do + backgroundColor "#7f1d1d" + color "#fca5a5" + ".badge-p1" ? do + backgroundColor "#78350f" + color "#fcd34d" + ".badge-p2" ? do + backgroundColor "#1e3a8a" + color "#93c5fd" + ".badge-p3" ? do + backgroundColor "#374151" + color "#d1d5db" + ".badge-p4" ? do + backgroundColor "#1f2937" + color "#9ca3af" + ".priority-dropdown-menu" ? do + backgroundColor "#1f2937" + Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.3)" :: Text) ".action-btn" ? do backgroundColor "#374151" borderColor "#4b5563" |
