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

     1  module Views.Styles exposing
     2      ( TooltipPosition(..)
     3      , breadcrumbComponent
     4      , breadcrumbContainer
     5      , breadcrumbItem
     6      , concourseLogo
     7      , defaultFont
     8      , fontFamilyDefault
     9      , fontWeightBold
    10      , fontWeightDefault
    11      , fontWeightLight
    12      , pageBelowTopBar
    13      , pageHeaderHeight
    14      , pageIncludingTopBar
    15      , pauseToggle
    16      , pauseToggleIcon
    17      , pauseToggleTooltip
    18      , separator
    19      , topBar
    20      )
    21  
    22  import Assets
    23  import Colors
    24  import Html
    25  import Html.Attributes exposing (style)
    26  import Routes
    27  
    28  
    29  defaultFont : List (Html.Attribute msg)
    30  defaultFont =
    31      [ style "font-size" "12px"
    32      , style "font-family" fontFamilyDefault
    33      , style "font-weight" fontWeightDefault
    34      ]
    35  
    36  
    37  fontFamilyDefault : String
    38  fontFamilyDefault =
    39      "Inconsolata,monospace"
    40  
    41  
    42  fontWeightLight : String
    43  fontWeightLight =
    44      "400"
    45  
    46  
    47  fontWeightDefault : String
    48  fontWeightDefault =
    49      "700"
    50  
    51  
    52  fontWeightBold : String
    53  fontWeightBold =
    54      "900"
    55  
    56  
    57  pageHeaderHeight : Float
    58  pageHeaderHeight =
    59      54
    60  
    61  
    62  pageIncludingTopBar : List (Html.Attribute msg)
    63  pageIncludingTopBar =
    64      [ style "height" "100%"
    65      ]
    66  
    67  
    68  pageBelowTopBar : Routes.Route -> List (Html.Attribute msg)
    69  pageBelowTopBar route =
    70      style "padding-top" "54px"
    71          :: (case route of
    72                  Routes.FlySuccess _ _ ->
    73                      [ style "height" "100%" ]
    74  
    75                  Routes.Resource _ ->
    76                      [ style "box-sizing" "border-box"
    77                      , style "height" "100%"
    78                      , style "display" "flex"
    79                      ]
    80  
    81                  Routes.Pipeline _ ->
    82                      [ style "box-sizing" "border-box"
    83                      , style "height" "100%"
    84                      , style "display" "flex"
    85                      ]
    86  
    87                  Routes.Dashboard _ ->
    88                      [ style "box-sizing" "border-box"
    89                      , style "display" "flex"
    90                      , style "height" "100%"
    91                      , style "padding-bottom" "50px"
    92                      ]
    93  
    94                  Routes.Build _ ->
    95                      [ style "box-sizing" "border-box"
    96                      , style "height" "100%"
    97                      , style "display" "flex"
    98                      ]
    99  
   100                  Routes.OneOffBuild _ ->
   101                      [ style "box-sizing" "border-box"
   102                      , style "height" "100%"
   103                      , style "display" "flex"
   104                      ]
   105  
   106                  Routes.Job _ ->
   107                      [ style "box-sizing" "border-box"
   108                      , style "height" "100%"
   109                      , style "display" "flex"
   110                      ]
   111             )
   112  
   113  
   114  topBar : Bool -> List (Html.Attribute msg)
   115  topBar isPaused =
   116      [ style "position" "fixed"
   117      , style "top" "0"
   118      , style "width" "100%"
   119      , style "height" "54px"
   120      , style "z-index" "999"
   121      , style "display" "flex"
   122      , style "justify-content" "space-between"
   123      , style "background-color" <|
   124          if isPaused then
   125              Colors.paused
   126  
   127          else
   128              Colors.topBarBackground
   129      , style "border-bottom" <| "1px solid " ++ Colors.border
   130      ]
   131  
   132  
   133  concourseLogo : List (Html.Attribute msg)
   134  concourseLogo =
   135      [ style "background-image" <|
   136          Assets.backgroundImage <|
   137              Just Assets.ConcourseLogoWhite
   138      , style "background-position" "50% 50%"
   139      , style "background-repeat" "no-repeat"
   140      , style "background-size" "42px 42px"
   141      , style "display" "inline-block"
   142      , style "width" "54px"
   143      , style "height" "54px"
   144      ]
   145  
   146  
   147  breadcrumbContainer : List (Html.Attribute msg)
   148  breadcrumbContainer =
   149      [ style "flex-grow" "1"
   150      , style "display" "flex"
   151      ]
   152  
   153  
   154  breadcrumbComponent :
   155      { component : Assets.ComponentType
   156      , widthPx : Float
   157      , heightPx : Float
   158      }
   159      -> List (Html.Attribute msg)
   160  breadcrumbComponent { component, widthPx, heightPx } =
   161      [ style "background-image" <|
   162          Assets.backgroundImage <|
   163              Just <|
   164                  Assets.BreadcrumbIcon component
   165      , style "background-repeat" "no-repeat"
   166      , style "background-size" "contain"
   167      , style "background-position" "center"
   168      , style "display" "inline-block"
   169      , style "height" <| String.fromFloat heightPx ++ "px"
   170      , style "width" <| String.fromFloat widthPx ++ "px"
   171      , style "margin-right" "10px"
   172      ]
   173  
   174  
   175  breadcrumbItem : Bool -> List (Html.Attribute msg)
   176  breadcrumbItem clickable =
   177      [ style "display" "inline-flex"
   178      , style "align-items" "center"
   179      , style "font-size" "18px"
   180      , style "padding" "0 10px"
   181      , style "line-height" "54px"
   182      , style "cursor" <|
   183          if clickable then
   184              "pointer"
   185  
   186          else
   187              "default"
   188      , style "color" Colors.white
   189      ]
   190  
   191  
   192  pauseToggle : String -> List (Html.Attribute msg)
   193  pauseToggle margin =
   194      [ style "position" "relative"
   195      , style "margin" margin
   196      ]
   197  
   198  
   199  pauseToggleIcon :
   200      { isHovered : Bool
   201      , isClickable : Bool
   202      }
   203      -> List (Html.Attribute msg)
   204  pauseToggleIcon { isHovered, isClickable } =
   205      [ style "opacity" <|
   206          if not isClickable then
   207              "0.2"
   208  
   209          else if isHovered then
   210              "1"
   211  
   212          else
   213              "0.5"
   214      , style "cursor" <|
   215          if isClickable then
   216              "pointer"
   217  
   218          else
   219              "default"
   220      ]
   221  
   222  
   223  type TooltipPosition
   224      = Above
   225      | Below
   226  
   227  
   228  pauseToggleTooltip : TooltipPosition -> List (Html.Attribute msg)
   229  pauseToggleTooltip ttp =
   230      [ style "background-color" Colors.tooltipBackground
   231      , style "position" "absolute"
   232      , style
   233          (case ttp of
   234              Above ->
   235                  "bottom"
   236  
   237              Below ->
   238                  "top"
   239          )
   240          "100%"
   241      , style "white-space" "nowrap"
   242      , style "padding" "2.5px"
   243      , style "margin-bottom" "5px"
   244      , style "right" "-150%"
   245      , style "z-index" "1"
   246      ]
   247  
   248  
   249  separator : Float -> Html.Html msg
   250  separator topMargin =
   251      Html.div
   252          [ style "border-bottom" "1px solid black"
   253          , style "margin-top" <| String.fromFloat topMargin ++ "px"
   254          ]
   255          []