github.com/simpleiot/simpleiot@v0.18.3/frontend/src/UI/Form.elm (about)

     1  module UI.Form exposing
     2      ( button
     3      , buttonRow
     4      , onEnter
     5      , onEnterEsc
     6      )
     7  
     8  import Element exposing (..)
     9  import Element.Font as Font
    10  import Element.Input as Input
    11  import Html.Events
    12  import Json.Decode as Decode
    13  import UI.Style as Style
    14  
    15  
    16  onEnter : msg -> Element.Attribute msg
    17  onEnter msg =
    18      Element.htmlAttribute
    19          (Html.Events.on "keyup"
    20              (Decode.field "key" Decode.string
    21                  |> Decode.andThen
    22                      (\key ->
    23                          if key == "Enter" then
    24                              Decode.succeed msg
    25  
    26                          else
    27                              Decode.fail "Not the enter key"
    28                      )
    29              )
    30          )
    31  
    32  
    33  onEnterEsc : msg -> msg -> Element.Attribute msg
    34  onEnterEsc enterMsg escMsg =
    35      Element.htmlAttribute
    36          (Html.Events.on "keyup"
    37              (Decode.field "key" Decode.string
    38                  |> Decode.andThen
    39                      (\key ->
    40                          if key == "Enter" then
    41                              Decode.succeed enterMsg
    42  
    43                          else if key == "Escape" then
    44                              Decode.succeed escMsg
    45  
    46                          else
    47                              Decode.fail "Not the enter key"
    48                      )
    49              )
    50          )
    51  
    52  
    53  buttonRow : List (Element msg) -> Element msg
    54  buttonRow =
    55      row
    56          [ Font.size 16
    57          , Font.bold
    58          , width fill
    59          , padding 16
    60          , spacing 16
    61          ]
    62  
    63  
    64  button :
    65      { color : Color
    66      , onPress : msg
    67      , label : String
    68      }
    69      -> Element msg
    70  button options =
    71      Input.button
    72          (Style.button options.color)
    73          { onPress = Just options.onPress
    74          , label = el [ centerX ] <| text options.label
    75          }