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

     1  module Dashboard.Styles exposing
     2      ( asciiArt
     3      , cardBody
     4      , cardFooter
     5      , clusterName
     6      , content
     7      , dropdownContainer
     8      , dropdownItem
     9      , highDensityToggle
    10      , info
    11      , infoBar
    12      , infoCliIcon
    13      , infoItem
    14      , jobPreview
    15      , jobPreviewLink
    16      , jobsDisabledTooltip
    17      , legend
    18      , legendItem
    19      , legendSeparator
    20      , loadingView
    21      , noPipelineCard
    22      , noPipelineCardHd
    23      , noPipelineCardHeader
    24      , noPipelineCardTextHd
    25      , noResults
    26      , pipelineCard
    27      , pipelineCardBanner
    28      , pipelineCardBannerArchived
    29      , pipelineCardBannerArchivedHd
    30      , pipelineCardBannerHd
    31      , pipelineCardBannerStale
    32      , pipelineCardBannerStaleHd
    33      , pipelineCardBody
    34      , pipelineCardBodyHd
    35      , pipelineCardFooter
    36      , pipelineCardHd
    37      , pipelineCardHeader
    38      , pipelineCardTransitionAge
    39      , pipelineCardTransitionAgeStale
    40      , pipelineName
    41      , pipelinePreviewGrid
    42      , pipelineSectionHeader
    43      , pipelineStatusIcon
    44      , previewPlaceholder
    45      , resourceErrorTriangle
    46      , searchButton
    47      , searchClearButton
    48      , searchContainer
    49      , searchInput
    50      , showArchivedToggle
    51      , showSearchContainer
    52      , striped
    53      , teamNameHd
    54      , topBarContent
    55      , topCliIcon
    56      , visibilityToggle
    57      , visibilityTooltip
    58      , welcomeCard
    59      , welcomeCardBody
    60      , welcomeCardTitle
    61      )
    62  
    63  import Application.Styles
    64  import Assets
    65  import ColorValues
    66  import Colors
    67  import Concourse
    68  import Concourse.BuildStatus exposing (BuildStatus(..))
    69  import Concourse.Cli as Cli
    70  import Concourse.PipelineStatus exposing (PipelineStatus(..))
    71  import Dashboard.PipelineGrid.Constants as PipelineGridConstants
    72  import Html
    73  import Html.Attributes exposing (style)
    74  import ScreenSize exposing (ScreenSize(..))
    75  import Views.Styles
    76  
    77  
    78  content : Bool -> List (Html.Attribute msg)
    79  content highDensity =
    80      [ style "align-content" "flex-start"
    81      , style "display" <|
    82          if highDensity then
    83              "flex"
    84  
    85          else
    86              "initial"
    87      , style "flex-flow" "column wrap"
    88      , style "padding" <|
    89          if highDensity then
    90              "60px"
    91  
    92          else
    93              "0"
    94      , style "flex-grow" "1"
    95      , style "overflow-y" "auto"
    96      , style "height" "100%"
    97      , style "width" "100%"
    98      , style "box-sizing" "border-box"
    99      , style "-webkit-overflow-scrolling" "touch"
   100      , style "flex-direction" <|
   101          if highDensity then
   102              "column"
   103  
   104          else
   105              "row"
   106      ]
   107  
   108  
   109  pipelineCard : List (Html.Attribute msg)
   110  pipelineCard =
   111      [ style "height" "100%"
   112      , style "display" "flex"
   113      , style "flex-direction" "column"
   114      ]
   115  
   116  
   117  pipelineCardBanner :
   118      { status : PipelineStatus
   119      , pipelineRunningKeyframes : String
   120      }
   121      -> List (Html.Attribute msg)
   122  pipelineCardBanner { status, pipelineRunningKeyframes } =
   123      let
   124          color =
   125              Colors.statusColor status
   126  
   127          isRunning =
   128              Concourse.PipelineStatus.isRunning status
   129      in
   130      style "height" "7px" :: texture pipelineRunningKeyframes isRunning color
   131  
   132  
   133  pipelineCardBannerStale : List (Html.Attribute msg)
   134  pipelineCardBannerStale =
   135      [ style "height" "7px"
   136      , style "background-color" Colors.unknown
   137      ]
   138  
   139  
   140  pipelineCardBannerArchived : List (Html.Attribute msg)
   141  pipelineCardBannerArchived =
   142      [ style "height" "7px"
   143      , style "background-color" Colors.backgroundDark
   144      ]
   145  
   146  
   147  pipelineStatusIcon : List (Html.Attribute msg)
   148  pipelineStatusIcon =
   149      [ style "background-size" "contain" ]
   150  
   151  
   152  noPipelineCard : List (Html.Attribute msg)
   153  noPipelineCard =
   154      [ style "display" "flex"
   155      , style "flex-direction" "column"
   156      , style "width" <| String.fromInt PipelineGridConstants.cardWidth ++ "px"
   157      , style "height" <| String.fromInt PipelineGridConstants.cardHeight ++ "px"
   158      , style "margin-left" <| String.fromInt PipelineGridConstants.padding ++ "px"
   159      ]
   160  
   161  
   162  noPipelineCardHd : List (Html.Attribute msg)
   163  noPipelineCardHd =
   164      [ style "background-color" Colors.card
   165      , style "font-size" "14px"
   166      , style "width" "200px"
   167      , style "height" "60px"
   168      , style "display" "flex"
   169      , style "align-items" "center"
   170      , style "letter-spacing" "1px"
   171      , style "margin-right" "60px"
   172      ]
   173  
   174  
   175  noPipelineCardTextHd : List (Html.Attribute msg)
   176  noPipelineCardTextHd =
   177      [ style "padding" "10px"
   178      ]
   179  
   180  
   181  noPipelineCardHeader : List (Html.Attribute msg)
   182  noPipelineCardHeader =
   183      [ style "color" Colors.dashboardPipelineHeaderText
   184      , style "background-color" Colors.card
   185      , style "font-size" "1.5em"
   186      , style "letter-spacing" "0.1em"
   187      , style "padding" "12.5px"
   188      , style "text-align" "center"
   189      ]
   190  
   191  
   192  pipelineCardHeader : List (Html.Attribute msg)
   193  pipelineCardHeader =
   194      [ style "background-color" Colors.card
   195      , style "color" Colors.dashboardPipelineHeaderText
   196      , style "font-size" "1.5em"
   197      , style "letter-spacing" "0.1em"
   198      , style "padding" "12.5px"
   199      ]
   200  
   201  
   202  pipelineName : List (Html.Attribute msg)
   203  pipelineName =
   204      [ style "width" "245px"
   205      , style "white-space" "nowrap"
   206      , style "overflow" "hidden"
   207      , style "text-overflow" "ellipsis"
   208      ]
   209  
   210  
   211  cardBody : List (Html.Attribute msg)
   212  cardBody =
   213      [ style "padding" "20px 36px"
   214      , style "background-color" Colors.card
   215      , style "margin" "2px 0"
   216      , style "display" "flex"
   217      , style "flex-grow" "1"
   218      ]
   219  
   220  
   221  pipelineCardBody : List (Html.Attribute msg)
   222  pipelineCardBody =
   223      [ style "background-color" Colors.card
   224      , style "margin" "2px 0"
   225      , style "flex-grow" "1"
   226      , style "display" "flex"
   227      ]
   228  
   229  
   230  pipelinePreviewGrid : List (Html.Attribute msg)
   231  pipelinePreviewGrid =
   232      [ style "box-sizing" "border-box"
   233      , style "width" "100%"
   234      ]
   235  
   236  
   237  cardFooter : List (Html.Attribute msg)
   238  cardFooter =
   239      [ style "height" "47px"
   240      , style "background-color" Colors.card
   241      ]
   242  
   243  
   244  previewPlaceholder : List (Html.Attribute msg)
   245  previewPlaceholder =
   246      [ style "background-color" Colors.noPipelinesPlaceholderBackground
   247      , style "flex-grow" "1"
   248      ]
   249  
   250  
   251  teamNameHd : List (Html.Attribute msg)
   252  teamNameHd =
   253      [ style "letter-spacing" ".2em"
   254      ]
   255  
   256  
   257  pipelineCardHd : PipelineStatus -> List (Html.Attribute msg)
   258  pipelineCardHd status =
   259      [ style "display" "flex"
   260      , style "height" "60px"
   261      , style "width" "200px"
   262      , style "margin" "0 60px 4px 0"
   263      , style "position" "relative"
   264      , style "background-color" <|
   265          case status of
   266              PipelineStatusSucceeded _ ->
   267                  Colors.successFaded
   268  
   269              PipelineStatusFailed _ ->
   270                  Colors.failure
   271  
   272              PipelineStatusErrored _ ->
   273                  Colors.error
   274  
   275              _ ->
   276                  Colors.card
   277      , style "font-size" "19px"
   278      , style "letter-spacing" "1px"
   279      ]
   280  
   281  
   282  pipelineCardBodyHd : List (Html.Attribute msg)
   283  pipelineCardBodyHd =
   284      [ style "width" "180px"
   285      , style "white-space" "nowrap"
   286      , style "overflow" "hidden"
   287      , style "text-overflow" "ellipsis"
   288      , style "align-self" "center"
   289      , style "padding" "10px"
   290      ]
   291  
   292  
   293  pipelineCardBannerHd :
   294      { status : PipelineStatus
   295      , pipelineRunningKeyframes : String
   296      }
   297      -> List (Html.Attribute msg)
   298  pipelineCardBannerHd { status, pipelineRunningKeyframes } =
   299      let
   300          color =
   301              Colors.statusColor status
   302  
   303          isRunning =
   304              Concourse.PipelineStatus.isRunning status
   305      in
   306      style "width" "8px" :: texture pipelineRunningKeyframes isRunning color
   307  
   308  
   309  pipelineCardBannerStaleHd : List (Html.Attribute msg)
   310  pipelineCardBannerStaleHd =
   311      [ style "width" "8px"
   312      , style "background-color" Colors.unknown
   313      ]
   314  
   315  
   316  pipelineCardBannerArchivedHd : List (Html.Attribute msg)
   317  pipelineCardBannerArchivedHd =
   318      [ style "width" "8px"
   319      , style "background-color" Colors.backgroundDark
   320      ]
   321  
   322  
   323  solid : String -> List (Html.Attribute msg)
   324  solid color =
   325      [ style "background-color" color ]
   326  
   327  
   328  striped :
   329      { pipelineRunningKeyframes : String
   330      , thickColor : String
   331      , thinColor : String
   332      }
   333      -> List (Html.Attribute msg)
   334  striped { pipelineRunningKeyframes, thickColor, thinColor } =
   335      [ style "background-image" <| withStripes thickColor thinColor
   336      , style "background-size" "106px 114px"
   337      , style "animation" <| pipelineRunningKeyframes ++ " 3s linear infinite"
   338      ]
   339  
   340  
   341  withStripes : String -> String -> String
   342  withStripes thickColor thinColor =
   343      "repeating-linear-gradient(-115deg,"
   344          ++ thinColor
   345          ++ " 0px,"
   346          ++ thickColor
   347          ++ " 1px,"
   348          ++ thickColor
   349          ++ " 10px,"
   350          ++ thinColor
   351          ++ " 11px,"
   352          ++ thinColor
   353          ++ " 16px)"
   354  
   355  
   356  texture : String -> Bool -> String -> List (Html.Attribute msg)
   357  texture pipelineRunningKeyframes isRunning color =
   358      if isRunning then
   359          striped
   360              { pipelineRunningKeyframes = pipelineRunningKeyframes
   361              , thickColor = Colors.card
   362              , thinColor = color
   363              }
   364  
   365      else
   366          solid color
   367  
   368  
   369  pipelineCardFooter : List (Html.Attribute msg)
   370  pipelineCardFooter =
   371      [ style "padding" "13.5px"
   372      , style "display" "flex"
   373      , style "justify-content" "space-between"
   374      , style "background-color" Colors.card
   375      ]
   376  
   377  
   378  pipelineCardTransitionAge : PipelineStatus -> List (Html.Attribute msg)
   379  pipelineCardTransitionAge status =
   380      [ style "color" <| Colors.statusColor status
   381      , style "font-size" "18px"
   382      , style "line-height" "20px"
   383      , style "letter-spacing" "0.05em"
   384      , style "margin-left" "8px"
   385      ]
   386  
   387  
   388  pipelineCardTransitionAgeStale : List (Html.Attribute msg)
   389  pipelineCardTransitionAgeStale =
   390      [ style "color" Colors.unknown
   391      , style "font-size" "18px"
   392      , style "line-height" "20px"
   393      , style "letter-spacing" "0.05em"
   394      , style "margin-left" "8px"
   395      ]
   396  
   397  
   398  infoBar :
   399      { hideLegend : Bool, screenSize : ScreenSize.ScreenSize }
   400      -> List (Html.Attribute msg)
   401  infoBar { hideLegend, screenSize } =
   402      [ style "position" "fixed"
   403      , style "z-index" "2"
   404      , style "bottom" "0"
   405      , style "line-height" "35px"
   406      , style "padding" "7.5px 30px"
   407      , style "background-color" Colors.infoBarBackground
   408      , style "width" "100%"
   409      , style "box-sizing" "border-box"
   410      , style "display" "flex"
   411      , style "justify-content" <|
   412          if hideLegend then
   413              "flex-end"
   414  
   415          else
   416              "space-between"
   417      ]
   418          ++ (case screenSize of
   419                  ScreenSize.Mobile ->
   420                      [ style "flex-direction" "column" ]
   421  
   422                  ScreenSize.Desktop ->
   423                      [ style "flex-direction" "column" ]
   424  
   425                  ScreenSize.BigDesktop ->
   426                      []
   427             )
   428  
   429  
   430  legend : List (Html.Attribute msg)
   431  legend =
   432      [ style "display" "flex"
   433      , style "flex-wrap" "wrap"
   434      ]
   435  
   436  
   437  legendItem : List (Html.Attribute msg)
   438  legendItem =
   439      [ style "display" "flex"
   440      , style "text-transform" "uppercase"
   441      , style "align-items" "center"
   442      , style "color" Colors.bottomBarText
   443      , style "margin-right" "20px"
   444      ]
   445  
   446  
   447  legendSeparator : List (Html.Attribute msg)
   448  legendSeparator =
   449      [ style "color" Colors.bottomBarText
   450      , style "margin-right" "20px"
   451      , style "display" "flex"
   452      , style "align-items" "center"
   453      ]
   454  
   455  
   456  highDensityToggle : List (Html.Attribute msg)
   457  highDensityToggle =
   458      [ style "color" Colors.bottomBarText
   459      , style "margin-right" "20px"
   460      , style "text-transform" "uppercase"
   461      ]
   462  
   463  
   464  showArchivedToggle : List (Html.Attribute msg)
   465  showArchivedToggle =
   466      [ style "margin-right" "10px"
   467      , style "padding-left" "10px"
   468      , style "border-left" <| "1px solid " ++ Colors.showArchivedButtonBorder
   469      ]
   470  
   471  
   472  info : List (Html.Attribute msg)
   473  info =
   474      [ style "display" "flex"
   475      , style "color" Colors.bottomBarText
   476      , style "font-size" "1.25em"
   477      ]
   478  
   479  
   480  infoItem : List (Html.Attribute msg)
   481  infoItem =
   482      [ style "margin-right" "30px"
   483      , style "display" "flex"
   484      , style "align-items" "center"
   485      ]
   486  
   487  
   488  infoCliIcon : { hovered : Bool, cli : Cli.Cli } -> List (Html.Attribute msg)
   489  infoCliIcon { hovered, cli } =
   490      [ style "margin-right" "10px"
   491      , style "width" "20px"
   492      , style "height" "20px"
   493      , style "background-image" <|
   494          Assets.backgroundImage <|
   495              Just (Assets.CliIcon cli)
   496      , style "background-repeat" "no-repeat"
   497      , style "background-position" "50% 50%"
   498      , style "background-size" "contain"
   499      , style "opacity" <|
   500          if hovered then
   501              "1"
   502  
   503          else
   504              "0.5"
   505      ]
   506  
   507  
   508  topCliIcon : { hovered : Bool, cli : Cli.Cli } -> List (Html.Attribute msg)
   509  topCliIcon { hovered, cli } =
   510      [ style "opacity" <|
   511          if hovered then
   512              "1"
   513  
   514          else
   515              "0.5"
   516      , style "background-image" <|
   517          Assets.backgroundImage <|
   518              Just (Assets.CliIcon cli)
   519      , style "background-position" "50% 50%"
   520      , style "background-repeat" "no-repeat"
   521      , style "width" "32px"
   522      , style "height" "32px"
   523      , style "margin" "5px"
   524      , style "z-index" "1"
   525      ]
   526  
   527  
   528  welcomeCard : List (Html.Attribute msg)
   529  welcomeCard =
   530      [ style "background-color" Colors.card
   531      , style "margin" "25px"
   532      , style "padding" "40px"
   533      , style "position" "relative"
   534      , style "overflow" "hidden"
   535      , style "font-weight" Views.Styles.fontWeightLight
   536      , style "display" "flex"
   537      , style "flex-direction" "column"
   538      ]
   539  
   540  
   541  welcomeCardBody : List (Html.Attribute msg)
   542  welcomeCardBody =
   543      [ style "font-size" "16px"
   544      , style "z-index" "2"
   545      , style "color" Colors.welcomeCardText
   546      ]
   547  
   548  
   549  welcomeCardTitle : List (Html.Attribute msg)
   550  welcomeCardTitle =
   551      [ style "font-size" "32px" ]
   552  
   553  
   554  resourceErrorTriangle : List (Html.Attribute msg)
   555  resourceErrorTriangle =
   556      [ style "position" "absolute"
   557      , style "top" "0"
   558      , style "right" "0"
   559      , style "width" "0"
   560      , style "height" "0"
   561      , style "border-top" <| "30px solid " ++ Colors.resourceError
   562      , style "border-left" "30px solid transparent"
   563      ]
   564  
   565  
   566  asciiArt : List (Html.Attribute msg)
   567  asciiArt =
   568      [ style "font-size" "16px"
   569      , style "line-height" "8px"
   570      , style "position" "absolute"
   571      , style "top" "0"
   572      , style "left" "23em"
   573      , style "margin" "0"
   574      , style "white-space" "pre"
   575      , style "color" Colors.asciiArt
   576      , style "z-index" "1"
   577      ]
   578          ++ Application.Styles.disableInteraction
   579  
   580  
   581  noResults : List (Html.Attribute msg)
   582  noResults =
   583      [ style "text-align" "center"
   584      , style "font-size" "13px"
   585      , style "margin-top" "20px"
   586      ]
   587  
   588  
   589  topBarContent : List (Html.Attribute msg)
   590  topBarContent =
   591      [ style "display" "flex"
   592      , style "flex-grow" "1"
   593      , style "justify-content" "center"
   594      ]
   595  
   596  
   597  searchContainer : ScreenSize -> List (Html.Attribute msg)
   598  searchContainer screenSize =
   599      [ style "display" "flex"
   600      , style "flex-direction" "column"
   601      , style "margin" "12px"
   602      , style "position" "relative"
   603      , style "align-items" "stretch"
   604      ]
   605          ++ (case screenSize of
   606                  Mobile ->
   607                      [ style "flex-grow" "1" ]
   608  
   609                  _ ->
   610                      []
   611             )
   612  
   613  
   614  searchInput : ScreenSize -> Bool -> List (Html.Attribute msg)
   615  searchInput screenSize hasQuery =
   616      let
   617          widthStyles =
   618              case screenSize of
   619                  Mobile ->
   620                      []
   621  
   622                  Desktop ->
   623                      [ style "width" "251px" ]
   624  
   625                  BigDesktop ->
   626                      [ style "width" "251px" ]
   627  
   628          borderColor =
   629              if hasQuery then
   630                  ColorValues.grey30
   631  
   632              else
   633                  ColorValues.grey60
   634  
   635          bgImage =
   636              if hasQuery then
   637                  Just Assets.SearchIconWhite
   638  
   639              else
   640                  Just Assets.SearchIconGrey
   641      in
   642      [ style "background-color" ColorValues.grey90
   643      , style "background-image" <|
   644          Assets.backgroundImage <|
   645              bgImage
   646      , style "background-repeat" "no-repeat"
   647      , style "background-position" "12px 8px"
   648      , style "height" "30px"
   649      , style "min-height" "30px"
   650      , style "padding" "0 42px"
   651      , style "border" <| "1px solid " ++ borderColor
   652      , style "color" Colors.white
   653      , style "font-size" "12px"
   654      , style "font-family" Views.Styles.fontFamilyDefault
   655      , style "outline" "0"
   656      ]
   657          ++ widthStyles
   658  
   659  
   660  searchClearButton : List (Html.Attribute msg)
   661  searchClearButton =
   662      [ style "background-image" <|
   663          Assets.backgroundImage <|
   664              Just Assets.CloseIcon
   665      , style "background-repeat" "no-repeat"
   666      , style "background-position" "10px 10px"
   667      , style "border" "0"
   668      , style "color" "transparent"
   669      , style "position" "absolute"
   670      , style "right" "0"
   671      , style "padding" "17px"
   672      ]
   673  
   674  
   675  dropdownItem : Bool -> Bool -> List (Html.Attribute msg)
   676  dropdownItem isSelected hasQuery =
   677      let
   678          coloration =
   679              if isSelected then
   680                  [ style "background-color" Colors.dropdownItemSelectedBackground
   681                  , style "color" Colors.dropdownItemSelectedText
   682                  ]
   683  
   684              else
   685                  [ style "background-color" Colors.dropdownFaded
   686                  , style "color" Colors.dropdownUnselectedText
   687                  ]
   688  
   689          borderColor =
   690              if hasQuery then
   691                  ColorValues.grey30
   692  
   693              else
   694                  ColorValues.grey60
   695      in
   696      [ style "padding" "0 42px"
   697      , style "line-height" "30px"
   698      , style "list-style-type" "none"
   699      , style "border" <| "1px solid " ++ borderColor
   700      , style "margin-top" "-1px"
   701      , style "font-size" "1.15em"
   702      , style "cursor" "pointer"
   703      ]
   704          ++ coloration
   705  
   706  
   707  dropdownContainer : ScreenSize -> List (Html.Attribute msg)
   708  dropdownContainer screenSize =
   709      [ style "top" "100%"
   710      , style "margin" "0"
   711      , style "width" "100%"
   712      ]
   713          ++ (case screenSize of
   714                  Mobile ->
   715                      []
   716  
   717                  _ ->
   718                      [ style "position" "absolute" ]
   719             )
   720  
   721  
   722  showSearchContainer :
   723      { a
   724          | screenSize : ScreenSize
   725          , highDensity : Bool
   726      }
   727      -> List (Html.Attribute msg)
   728  showSearchContainer { highDensity } =
   729      let
   730          flexLayout =
   731              if highDensity then
   732                  []
   733  
   734              else
   735                  [ style "align-items" "flex-start" ]
   736      in
   737      [ style "display" "flex"
   738      , style "flex-direction" "column"
   739      , style "flex-grow" "1"
   740      , style "justify-content" "center"
   741      , style "padding" "12px"
   742      , style "position" "relative"
   743      ]
   744          ++ flexLayout
   745  
   746  
   747  searchButton : List (Html.Attribute msg)
   748  searchButton =
   749      [ style "background-image" <|
   750          Assets.backgroundImage <|
   751              Just Assets.SearchIconGrey
   752      , style "background-repeat" "no-repeat"
   753      , style "background-position" "12px 8px"
   754      , style "height" "32px"
   755      , style "width" "32px"
   756      , style "display" "inline-block"
   757      , style "float" "left"
   758      ]
   759  
   760  
   761  visibilityToggle :
   762      { public : Bool
   763      , isClickable : Bool
   764      , isHovered : Bool
   765      }
   766      -> List (Html.Attribute msg)
   767  visibilityToggle { public, isClickable, isHovered } =
   768      [ style "background-image" <|
   769          Assets.backgroundImage <|
   770              Just (Assets.VisibilityToggleIcon public)
   771      , style "height" "20px"
   772      , style "width" "20px"
   773      , style "background-position" "50% 50%"
   774      , style "background-repeat" "no-repeat"
   775      , style "position" "relative"
   776      , style "background-size" "contain"
   777      , style "cursor" <|
   778          if isClickable then
   779              "pointer"
   780  
   781          else
   782              "default"
   783      , style "opacity" <|
   784          if isClickable && isHovered then
   785              "1"
   786  
   787          else
   788              "0.5"
   789      ]
   790  
   791  
   792  visibilityTooltip : List (Html.Attribute msg)
   793  visibilityTooltip =
   794      [ style "background-color" Colors.tooltipBackground
   795      , style "white-space" "nowrap"
   796      , style "padding" "2.5px"
   797      , style "color" Colors.tooltipText
   798      ]
   799  
   800  
   801  jobsDisabledTooltip : List (Html.Attribute msg)
   802  jobsDisabledTooltip =
   803      [ style "background-color" Colors.tooltipBackground
   804      , style "padding" "2.5px"
   805      ]
   806  
   807  
   808  jobPreview : Concourse.Job -> Bool -> List (Html.Attribute msg)
   809  jobPreview job isHovered =
   810      [ style "flex-grow" "1"
   811      , style "display" "flex"
   812      , style "margin" "2px"
   813      ]
   814          ++ (if job.paused then
   815                  [ style "background-color" <|
   816                      Colors.statusColor PipelineStatusPaused
   817                  ]
   818  
   819              else
   820                  let
   821                      finishedBuildStatus =
   822                          job.finishedBuild
   823                              |> Maybe.map .status
   824                              |> Maybe.withDefault BuildStatusPending
   825  
   826                      isRunning =
   827                          job.nextBuild /= Nothing
   828  
   829                      color =
   830                          Colors.buildStatusColor
   831                              (not isHovered)
   832                              finishedBuildStatus
   833                  in
   834                  if isRunning then
   835                      striped
   836                          { pipelineRunningKeyframes = "pipeline-running"
   837                          , thickColor =
   838                              Colors.buildStatusColor
   839                                  False
   840                                  finishedBuildStatus
   841                          , thinColor =
   842                              Colors.buildStatusColor
   843                                  True
   844                                  finishedBuildStatus
   845                          }
   846  
   847                  else
   848                      solid color
   849             )
   850  
   851  
   852  jobPreviewLink : List (Html.Attribute msg)
   853  jobPreviewLink =
   854      [ style "flex-grow" "1" ]
   855  
   856  
   857  clusterName : List (Html.Attribute msg)
   858  clusterName =
   859      [ style "font-size" "21px"
   860      , style "color" Colors.white
   861      , style "letter-spacing" "0.1em"
   862      , style "margin-left" "10px"
   863      ]
   864  
   865  
   866  loadingView : List (Html.Attribute msg)
   867  loadingView =
   868      [ style "display" "flex"
   869      , style "justify-content" "center"
   870      , style "align-items" "center"
   871      , style "width" "100%"
   872      , style "height" "100%"
   873      ]
   874  
   875  
   876  pipelineSectionHeader : List (Html.Attribute msg)
   877  pipelineSectionHeader =
   878      [ style "font-size" "22px"
   879      , style "font-weight" Views.Styles.fontWeightBold
   880      , style "padding" "30px 0 10px 37.5px"
   881      ]