UI build page tweaks

* set right padding to 16px for history build number * add right boarder to history build number * set build title to white for aborted build Signed-off-by: Rui Yang <[email protected]>
pablokbs · Apr 8, 2022 · 7f79f23 · 7f79f23
1 parent b7e89d8
commit 7f79f23
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/web/assets/css/production.less b/web/assets/css/production.less
@@ -113,8 +113,7 @@
  line-height: 24px;
  text-align: center;
  margin: 0;
- padding: 4px 6px 4px 4px;
- min-width: 24px;
+ padding: 4px 16px;
  height: 24px;
  display: block;
  font-weight: bold;

diff --git a/web/elm/src/Build/Header/Views.elm b/web/elm/src/Build/Header/Views.elm
@@ -117,8 +117,8 @@ viewHeader header =
  ]
  ++ Styles.header header.backgroundColor
  )
- [ Html.div [] (List.map viewWidget header.leftWidgets)
- , Html.div [ style "display" "flex" ] (List.map viewWidget header.rightWidgets)
+ [ Html.div [] (List.map (viewWidget header.backgroundColor) header.leftWidgets)
+ , Html.div [ style "display" "flex" ] (List.map (viewWidget header.backgroundColor) header.rightWidgets)
  ]
  , viewHistory header.backgroundColor header.tabs
  ]
@@ -140,24 +140,28 @@ viewHeader header =
  )
 
 
-viewWidget : Widget -> Html Message
-viewWidget widget =
+viewWidget : BuildStatus -> Widget -> Html Message
+viewWidget status widget =
+ let
+ textColor =
+ Styles.titleTextColor status
+ in
  case widget of
  Button button ->
  Maybe.map viewButton button |> Maybe.withDefault (Html.text "")
 
  Title name jobId createdBy ->
- viewTitle name jobId createdBy
+ viewTitle name textColor jobId createdBy
 
  Duration duration ->
- viewDuration duration
+ viewDuration duration textColor
 
 
-viewDuration : BuildDuration -> Html Message
-viewDuration buildDuration =
+viewDuration : BuildDuration -> String -> Html Message
+viewDuration buildDuration textColor =
  Html.table
  [ class "dictionary build-duration"
- , style "color" Colors.black
+ , style "color" textColor
  ]
  [ Html.tr []
  [ Html.td [ class "horizontal-cell" ] <|
@@ -374,8 +378,8 @@ viewButton { type_, backgroundColor, backgroundShade, isClickable } =
  ]
 
 
-viewTitle : String -> Maybe Concourse.JobIdentifier -> Concourse.BuildCreatedBy -> Html Message
-viewTitle name jobID createdBy =
+viewTitle : String -> String -> Maybe Concourse.JobIdentifier -> Concourse.BuildCreatedBy -> Html Message
+viewTitle name textColor jobID createdBy =
  let
  hasCreatedBy =
  createdBy /= Nothing
@@ -400,7 +404,7 @@ viewTitle name jobID createdBy =
  , onMouseLeave <| Hover Nothing
  , id <| toHtmlID Message.JobName
  , buildNameLineHeight
- , style "color" Colors.buildTitleTextColor
+ , style "color" textColor
  ]
  [ Html.span [ class "build-name" ] [ Html.text jid.jobName ]
  , Html.span
@@ -430,7 +434,7 @@ viewTitle name jobID createdBy =
  , style "text-overflow" "ellipsis"
  , style "white-space" "nowrap"
  , style "overflow" "hidden"
- , style "color" Colors.buildTitleTextColor
+ , style "color" textColor
  , title text
  ]
  [ Html.text text ]

diff --git a/web/elm/src/Build/Styles.elm b/web/elm/src/Build/Styles.elm
@@ -18,6 +18,7 @@ module Build.Styles exposing
  , stepHeaderLabel
  , stepStatusIcon
  , tab
+ , titleTextColor
  , triggerButton
  )
 
@@ -58,6 +59,16 @@ header status =
  ]
 
 
+titleTextColor : BuildStatus -> String
+titleTextColor status =
+ case status of
+ BuildStatusAborted ->
+ Colors.white
+
+ _ ->
+ Colors.buildTitleTextColor
+
+
 body : List (Html.Attribute msg)
 body =
  [ style "overflow-y" "auto"
@@ -72,13 +83,17 @@ historyItem currentBuildStatus isCurrent status =
  let
  borderColor =
  Colors.buildTabBorderColor isCurrent currentBuildStatus
+
+ borderStyle =
+ "1px solid " ++ borderColor
  in
  [ style "position" "relative"
  , style "letter-spacing" "-1px"
  , style "padding-top" "0"
  , style "padding-bottom" "0"
- , style "border-top" <| "1px solid " ++ borderColor
- , style "border-bottom" <| "1px solid " ++ borderColor
+ , style "border-top" borderStyle
+ , style "border-right" borderStyle
+ , style "border-bottom" borderStyle
  ]
  ++ buildTabBackground isCurrent status