summaryrefslogtreecommitdiff
path: root/Omni/Jr/Web/Style.hs
diff options
context:
space:
mode:
authorBen Sima <ben@bensima.com>2025-11-29 22:31:49 -0500
committerBen Sima <ben@bensima.com>2025-11-29 22:31:49 -0500
commit6333f4d8db56e26d384de9901cf0c990f8befec7 (patch)
tree4d5bdef83d2fbe8ecb066decd6cb41229b5e2506 /Omni/Jr/Web/Style.hs
parentd58b2f547f474648edbacdf2ffdfdef6e019fe7d (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.hs78
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"