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

     1  module Views.Toggle exposing (TextDirection(..), toggleSwitch)
     2  
     3  import Assets
     4  import Html exposing (Html)
     5  import Html.Attributes exposing (attribute, href, style)
     6  import Message.Message exposing (DomID(..), Message(..))
     7  import Routes
     8  
     9  
    10  type TextDirection
    11      = Left
    12      | Right
    13  
    14  
    15  toggleSwitch :
    16      { on : Bool
    17      , hrefRoute : Routes.Route
    18      , text : String
    19      , textDirection : TextDirection
    20      , ariaLabel : String
    21      , styles : List (Html.Attribute Message)
    22      }
    23      -> Html Message
    24  toggleSwitch { ariaLabel, hrefRoute, text, textDirection, styles, on } =
    25      let
    26          textElem =
    27              Html.text text
    28  
    29          iconElem =
    30              Html.div
    31                  [ style "background-image" <|
    32                      Assets.backgroundImage <|
    33                          Just (Assets.ToggleSwitch on)
    34                  , style "background-size" "contain"
    35                  , style "height" "20px"
    36                  , style "width" "35px"
    37                  , style "flex-shrink" "0"
    38                  , case textDirection of
    39                      Left ->
    40                          style "margin-left" "10px"
    41  
    42                      Right ->
    43                          style "margin-right" "10px"
    44                  ]
    45                  []
    46      in
    47      Html.a
    48          ([ href <| Routes.toString hrefRoute
    49           , attribute "aria-label" ariaLabel
    50           , style "display" "flex"
    51           , style "align-items" "center"
    52           , style "flex-direction" <|
    53              case textDirection of
    54                  Right ->
    55                      "row"
    56  
    57                  Left ->
    58                      "row-reverse"
    59           ]
    60              ++ styles
    61          )
    62          [ iconElem, textElem ]