diff options
Diffstat (limited to 'Omni')
| -rw-r--r-- | Omni/Jr/Web.hs | 86 | ||||
| -rw-r--r-- | Omni/Jr/Web/Style.hs | 37 |
2 files changed, 76 insertions, 47 deletions
diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs index f65f001..a479bf9 100644 --- a/Omni/Jr/Web.hs +++ b/Omni/Jr/Web.hs @@ -71,6 +71,16 @@ renderRelativeTimestamp now timestamp = ] (Lucid.toHtml (formatRelativeTime now timestamp)) +metaSep :: (Monad m) => Lucid.HtmlT m () +metaSep = Lucid.span_ [Lucid.class_ "meta-sep"] "ยท" + +priorityDesc :: TaskCore.Priority -> Text +priorityDesc TaskCore.P0 = "Critical" +priorityDesc TaskCore.P1 = "High" +priorityDesc TaskCore.P2 = "Normal" +priorityDesc TaskCore.P3 = "Low" +priorityDesc TaskCore.P4 = "Defer" + data TaskFilters = TaskFilters { filterStatus :: Maybe TaskCore.Status, filterPriority :: Maybe TaskCore.Priority, @@ -994,45 +1004,35 @@ instance Lucid.ToHtml TaskDetailPage where renderRetryContextBanner (TaskCore.taskId task) maybeRetry Lucid.div_ [Lucid.class_ "task-detail"] <| do - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "ID:" - Lucid.code_ [Lucid.class_ "detail-value"] (Lucid.toHtml (TaskCore.taskId task)) - - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Type:" - Lucid.span_ [Lucid.class_ "detail-value"] (Lucid.toHtml (tshow (TaskCore.taskType task))) - - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Status:" - Lucid.span_ [Lucid.class_ "detail-value"] <| statusBadgeWithForm (TaskCore.taskStatus task) (TaskCore.taskId task) - - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Priority:" - Lucid.span_ [Lucid.class_ "detail-value"] <| do - Lucid.toHtml (tshow (TaskCore.taskPriority task)) - Lucid.span_ [Lucid.class_ "priority-desc"] (Lucid.toHtml (priorityDesc (TaskCore.taskPriority task))) - - case TaskCore.taskNamespace task of - Nothing -> pure () - Just ns -> - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Namespace:" - Lucid.span_ [Lucid.class_ "detail-value"] (Lucid.toHtml ns) - - case TaskCore.taskParent task of - Nothing -> pure () - Just pid -> - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Parent:" - Lucid.a_ [Lucid.href_ ("/tasks/" <> pid), Lucid.class_ "detail-value task-link"] (Lucid.toHtml pid) - - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Created:" - Lucid.span_ [Lucid.class_ "detail-value"] (renderRelativeTimestamp now (TaskCore.taskCreatedAt task)) - - Lucid.div_ [Lucid.class_ "detail-row"] <| do - Lucid.span_ [Lucid.class_ "detail-label"] "Updated:" - Lucid.span_ [Lucid.class_ "detail-value"] (renderRelativeTimestamp now (TaskCore.taskUpdatedAt task)) + Lucid.div_ [Lucid.class_ "task-meta"] <| do + Lucid.div_ [Lucid.class_ "task-meta-primary"] <| do + Lucid.code_ [Lucid.class_ "task-meta-id"] (Lucid.toHtml (TaskCore.taskId task)) + metaSep + Lucid.span_ [Lucid.class_ "task-meta-type"] (Lucid.toHtml (tshow (TaskCore.taskType task))) + metaSep + statusBadgeWithForm (TaskCore.taskStatus task) (TaskCore.taskId task) + metaSep + Lucid.span_ [Lucid.class_ "task-meta-priority"] <| do + Lucid.toHtml (tshow (TaskCore.taskPriority task)) + Lucid.span_ [Lucid.class_ "priority-desc"] (Lucid.toHtml (priorityDesc (TaskCore.taskPriority task))) + case TaskCore.taskNamespace task of + Nothing -> pure () + Just ns -> do + metaSep + Lucid.span_ [Lucid.class_ "task-meta-ns"] (Lucid.toHtml ns) + + Lucid.div_ [Lucid.class_ "task-meta-secondary"] <| do + case TaskCore.taskParent task of + Nothing -> pure () + Just pid -> do + Lucid.span_ [Lucid.class_ "task-meta-label"] "Parent:" + Lucid.a_ [Lucid.href_ ("/tasks/" <> pid), Lucid.class_ "task-link"] (Lucid.toHtml pid) + metaSep + Lucid.span_ [Lucid.class_ "task-meta-label"] "Created" + renderRelativeTimestamp now (TaskCore.taskCreatedAt task) + metaSep + Lucid.span_ [Lucid.class_ "task-meta-label"] "Updated" + renderRelativeTimestamp now (TaskCore.taskUpdatedAt task) let deps = TaskCore.taskDependencies task unless (null deps) <| do @@ -1128,14 +1128,6 @@ instance Lucid.ToHtml TaskDetailPage where ] "Review This Task" where - priorityDesc :: TaskCore.Priority -> Text - priorityDesc p = case p of - TaskCore.P0 -> " (Critical)" - TaskCore.P1 -> " (High)" - TaskCore.P2 -> " (Medium)" - TaskCore.P3 -> " (Low)" - TaskCore.P4 -> " (Backlog)" - renderDependency :: (Monad m) => TaskCore.Dependency -> Lucid.HtmlT m () renderDependency dep = Lucid.li_ <| do diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs index 1fc74b0..84e01ed 100644 --- a/Omni/Jr/Web/Style.hs +++ b/Omni/Jr/Web/Style.hs @@ -34,6 +34,7 @@ stylesheet = do commitStyles markdownStyles retryBannerStyles + taskMetaStyles responsiveStyles darkModeStyles @@ -1132,6 +1133,36 @@ retryBannerStyles = do color "#991b1b" fontWeight (weight 500) +taskMetaStyles :: Css +taskMetaStyles = do + ".task-meta" ? do + marginBottom (px 12) + ".task-meta-primary" ? do + display flex + alignItems center + flexWrap Flexbox.wrap + Stylesheet.key "gap" ("6px" :: Text) + fontSize (px 14) + marginBottom (px 4) + ".task-meta-secondary" ? do + display flex + alignItems center + flexWrap Flexbox.wrap + Stylesheet.key "gap" ("6px" :: Text) + fontSize (px 12) + color "#6b7280" + ".task-meta-id" ? do + fontFamily ["SF Mono", "Monaco", "monospace"] [monospace] + fontSize (px 13) + backgroundColor "#f3f4f6" + padding (px 1) (px 4) (px 1) (px 4) + borderRadius (px 2) (px 2) (px 2) (px 2) + ".task-meta-label" ? do + color "#6b7280" + ".meta-sep" ? do + color "#d1d5db" + Stylesheet.key "user-select" ("none" :: Text) + responsiveStyles :: Css responsiveStyles = do query Media.screen [Media.maxWidth (px 600)] <| do @@ -1255,6 +1286,12 @@ darkModeStyles = code ? do backgroundColor "#374151" color "#f3f4f6" + ".task-meta-id" ? do + backgroundColor "#374151" + color "#e5e7eb" + ".task-meta-secondary" ? color "#9ca3af" + ".meta-sep" ? color "#4b5563" + ".task-meta-label" ? color "#9ca3af" ".detail-section" ? borderTopColor "#374151" ".description" ? do backgroundColor "#374151" |
