github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/src/Build/Styles.elm (about)

     1  module Build.Styles exposing
     2      ( MetadataCellType(..)
     3      , abortButton
     4      , acrossStepSubHeaderLabel
     5      , body
     6      , buttonTooltip
     7      , buttonTooltipArrow
     8      , changedStepTooltip
     9      , durationTooltip
    10      , errorLog
    11      , header
    12      , historyItem
    13      , imageSteps
    14      , initializationToggle
    15      , metadataCell
    16      , metadataTable
    17      , retryTabList
    18      , stepHeader
    19      , stepHeaderLabel
    20      , stepStatusIcon
    21      , tab
    22      , triggerButton
    23      )
    24  
    25  import Application.Styles
    26  import Build.Models exposing (StepHeaderType(..))
    27  import Build.StepTree.Models exposing (StepState(..))
    28  import Colors
    29  import Concourse.BuildStatus exposing (BuildStatus(..))
    30  import Dashboard.Styles exposing (striped)
    31  import Html
    32  import Html.Attributes exposing (style)
    33  import Views.Styles
    34  
    35  
    36  header : BuildStatus -> List (Html.Attribute msg)
    37  header status =
    38      [ style "display" "flex"
    39      , style "justify-content" "space-between"
    40      , style "height" "60px"
    41      , style "background" <|
    42          case status of
    43              BuildStatusStarted ->
    44                  Colors.startedFaded
    45  
    46              BuildStatusPending ->
    47                  Colors.pending
    48  
    49              BuildStatusSucceeded ->
    50                  Colors.success
    51  
    52              BuildStatusFailed ->
    53                  Colors.failure
    54  
    55              BuildStatusErrored ->
    56                  Colors.error
    57  
    58              BuildStatusAborted ->
    59                  Colors.aborted
    60      ]
    61  
    62  
    63  body : List (Html.Attribute msg)
    64  body =
    65      [ style "overflow-y" "auto"
    66      , style "outline" "none"
    67      , style "position" "relative"
    68      , style "-webkit-overflow-scrolling" "touch"
    69      ]
    70  
    71  
    72  historyItem : BuildStatus -> Bool -> BuildStatus -> List (Html.Attribute msg)
    73  historyItem currentBuildStatus isCurrent status =
    74      [ style "letter-spacing" "-1px"
    75      , style "padding" "0 2px 0 2px"
    76      , style "border-top" <| "1px solid " ++ Colors.buildStatusColor isCurrent currentBuildStatus
    77      , style "border-right" <| "1px solid " ++ Colors.buildStatusColor False status
    78      , style "opacity" <|
    79          if isCurrent then
    80              "1"
    81  
    82          else
    83              "0.8"
    84      ]
    85          ++ (case status of
    86                  BuildStatusStarted ->
    87                      striped
    88                          { pipelineRunningKeyframes = "pipeline-running"
    89                          , thickColor = Colors.startedFaded
    90                          , thinColor = Colors.started
    91                          }
    92  
    93                  BuildStatusPending ->
    94                      [ style "background" Colors.pending ]
    95  
    96                  BuildStatusSucceeded ->
    97                      [ style "background" Colors.success ]
    98  
    99                  BuildStatusFailed ->
   100                      [ style "background" Colors.failure ]
   101  
   102                  BuildStatusErrored ->
   103                      [ style "background" Colors.error ]
   104  
   105                  BuildStatusAborted ->
   106                      [ style "background" Colors.aborted ]
   107             )
   108  
   109  
   110  triggerButton : Bool -> Bool -> BuildStatus -> List (Html.Attribute msg)
   111  triggerButton buttonDisabled hovered status =
   112      [ style "cursor" <|
   113          if buttonDisabled then
   114              "default"
   115  
   116          else
   117              "pointer"
   118      , style "position" "relative"
   119      , style "background-color" <|
   120          Colors.buildStatusColor (not hovered || buttonDisabled) status
   121      ]
   122          ++ button
   123  
   124  
   125  abortButton : Bool -> List (Html.Attribute msg)
   126  abortButton isHovered =
   127      [ style "cursor" "pointer"
   128      , style "background-color" <|
   129          if isHovered then
   130              Colors.failureFaded
   131  
   132          else
   133              Colors.failure
   134      ]
   135          ++ button
   136  
   137  
   138  button : List (Html.Attribute msg)
   139  button =
   140      [ style "padding" "10px"
   141      , style "outline" "none"
   142      , style "margin" "0"
   143      , style "border-width" "0 0 0 1px"
   144      , style "border-color" Colors.background
   145      , style "border-style" "solid"
   146      ]
   147  
   148  
   149  buttonTooltipArrow : List (Html.Attribute msg)
   150  buttonTooltipArrow =
   151      [ style "width" "0"
   152      , style "height" "0"
   153      , style "left" "50%"
   154      , style "bottom" "0"
   155      , style "margin-left" "-5px"
   156      , style "border-bottom" <| "5px solid " ++ Colors.frame
   157      , style "border-left" "5px solid transparent"
   158      , style "border-right" "5px solid transparent"
   159      , style "position" "absolute"
   160      ]
   161  
   162  
   163  buttonTooltip : Int -> List (Html.Attribute msg)
   164  buttonTooltip width =
   165      [ style "position" "absolute"
   166      , style "right" "0"
   167      , style "top" "100%"
   168      , style "width" <| String.fromInt width ++ "px"
   169      , style "color" Colors.text
   170      , style "background-color" Colors.frame
   171      , style "padding" "10px"
   172      , style "text-align" "right"
   173      , style "pointer-events" "none"
   174      , style "z-index" "1"
   175  
   176      -- ^ need a value greater than 0 (inherited from .fixed-header) since this
   177      -- element is earlier in the document than the build tabs
   178      ]
   179          ++ Views.Styles.defaultFont
   180  
   181  
   182  stepHeader : StepState -> List (Html.Attribute msg)
   183  stepHeader state =
   184      [ style "display" "flex"
   185      , style "justify-content" "space-between"
   186      , style "border-color" <|
   187          case state of
   188              StepStateFailed ->
   189                  Colors.failure
   190  
   191              StepStateErrored ->
   192                  Colors.error
   193  
   194              StepStatePending ->
   195                  "transparent"
   196  
   197              StepStateRunning ->
   198                  Colors.started
   199  
   200              StepStateInterrupted ->
   201                  "transparent"
   202  
   203              StepStateCancelled ->
   204                  "transparent"
   205  
   206              StepStateSucceeded ->
   207                  "transparent"
   208      ]
   209  
   210  
   211  stepHeaderLabel : Bool -> List (Html.Attribute msg)
   212  stepHeaderLabel changed =
   213      [ style "color" <|
   214          if changed then
   215              Colors.started
   216  
   217          else
   218              Colors.pending
   219      , style "line-height" "28px"
   220      , style "padding-left" "6px"
   221      ]
   222  
   223  
   224  acrossStepSubHeaderLabel : List (Html.Attribute msg)
   225  acrossStepSubHeaderLabel =
   226      [ style "line-height" "28px"
   227      , style "padding-left" "6px"
   228      ]
   229  
   230  
   231  stepStatusIcon : List (Html.Attribute msg)
   232  stepStatusIcon =
   233      [ style "background-size" "14px 14px"
   234      , style "position" "relative"
   235      ]
   236  
   237  
   238  changedStepTooltip : List (Html.Attribute msg)
   239  changedStepTooltip =
   240      [ style "background-color" Colors.tooltipBackground
   241      , style "padding" "5px"
   242      , style "z-index" "100"
   243      , style "width" "fit-content"
   244      , style "pointer-events" "none"
   245      ]
   246          ++ Application.Styles.disableInteraction
   247  
   248  
   249  durationTooltip : List (Html.Attribute msg)
   250  durationTooltip =
   251      [ style "background-color" Colors.tooltipBackground
   252      , style "padding" "5px"
   253      , style "z-index" "100"
   254      , style "width" "fit-content"
   255      , style "pointer-events" "none"
   256      ]
   257          ++ Application.Styles.disableInteraction
   258  
   259  
   260  errorLog : List (Html.Attribute msg)
   261  errorLog =
   262      [ style "color" Colors.errorLog
   263      , style "background-color" Colors.frame
   264      , style "padding" "5px 10px"
   265      ]
   266  
   267  
   268  tabList : List (Html.Attribute msg)
   269  tabList =
   270      [ style "line-height" "26px"
   271      , style "background-color" Colors.background
   272      ]
   273  
   274  
   275  retryTabList : List (Html.Attribute msg)
   276  retryTabList =
   277      style "font-size" "16px"
   278          :: style "margin" "0"
   279          :: tabList
   280  
   281  
   282  tab :
   283      { isHovered : Bool, isCurrent : Bool, isStarted : Bool }
   284      -> List (Html.Attribute msg)
   285  tab { isHovered, isCurrent, isStarted } =
   286      [ style "display" "inline-block"
   287      , style "position" "relative"
   288      , style "padding" "0 5px"
   289      , style "font-weight" Views.Styles.fontWeightDefault
   290      , style "cursor" "pointer"
   291      , style "color" Colors.retryTabText
   292      , style "background-color" <|
   293          if isHovered || isCurrent then
   294              Colors.paginationHover
   295  
   296          else
   297              Colors.background
   298      , style "opacity" <|
   299          if isStarted then
   300              "1"
   301  
   302          else
   303              "0.5"
   304      ]
   305  
   306  
   307  type MetadataCellType
   308      = Key
   309      | Value
   310  
   311  
   312  metadataTable : List (Html.Attribute msg)
   313  metadataTable =
   314      [ style "border-collapse" "collapse"
   315      , style "margin-bottom" "5px"
   316      ]
   317  
   318  
   319  metadataCell : MetadataCellType -> List (Html.Attribute msg)
   320  metadataCell cell =
   321      case cell of
   322          Key ->
   323              [ style "text-align" "left"
   324              , style "vertical-align" "top"
   325              , style "background-color" "rgb(45,45,45)"
   326              , style "border-bottom" "5px solid rgb(45,45,45)"
   327              , style "padding" "5px"
   328              ]
   329  
   330          Value ->
   331              [ style "text-align" "left"
   332              , style "vertical-align" "top"
   333              , style "background-color" "rgb(30,30,30)"
   334              , style "border-bottom" "5px solid rgb(45,45,45)"
   335              , style "padding" "5px"
   336              ]
   337  
   338  
   339  imageSteps : List (Html.Attribute msg)
   340  imageSteps =
   341      [ style "padding" "10px"
   342      , style "background" Colors.backgroundDark
   343      ]
   344  
   345  
   346  initializationToggle : Bool -> List (Html.Attribute msg)
   347  initializationToggle expanded =
   348      [ style "color" <|
   349          if expanded then
   350              Colors.text
   351  
   352          else
   353              Colors.pending
   354      , style "background" <|
   355          if expanded then
   356              Colors.backgroundDark
   357  
   358          else
   359              "transparent"
   360      ]