From 0886d5916ae28e2a0d1d5c70fb81842a6d0dc70f Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 25 Jun 2016 22:51:12 +0200 Subject: Add a remove icon to empty a input text field --- src/client/elm/View/Color.elm | 10 +++++-- src/client/elm/View/Events.elm | 4 +-- src/client/elm/View/Form.elm | 62 +++++++++++++++++++++++------------------- src/client/elm/View/Header.elm | 2 +- 4 files changed, 43 insertions(+), 35 deletions(-) (limited to 'src/client/elm/View') diff --git a/src/client/elm/View/Color.elm b/src/client/elm/View/Color.elm index 882dd69..a2a20c7 100644 --- a/src/client/elm/View/Color.elm +++ b/src/client/elm/View/Color.elm @@ -1,8 +1,12 @@ -module View.Color exposing - ( chestnutRose - ) +module View.Color exposing (..) import Color exposing (Color) chestnutRose : Color chestnutRose = Color.rgb 207 92 86 + +white : Color +white = Color.white + +silver : Color +silver = Color.rgb 200 200 200 diff --git a/src/client/elm/View/Events.elm b/src/client/elm/View/Events.elm index 2802709..c50fe98 100644 --- a/src/client/elm/View/Events.elm +++ b/src/client/elm/View/Events.elm @@ -7,9 +7,7 @@ import Html exposing (..) import Html.Events exposing (..) import Html.Attributes exposing (..) -import Msg exposing (Msg) - -onSubmitPrevDefault : Msg -> Attribute Msg +onSubmitPrevDefault : msg -> Attribute msg onSubmitPrevDefault value = onWithOptions "submit" diff --git a/src/client/elm/View/Form.elm b/src/client/elm/View/Form.elm index b123db9..9b83bf7 100644 --- a/src/client/elm/View/Form.elm +++ b/src/client/elm/View/Form.elm @@ -5,10 +5,15 @@ module View.Form exposing import Html exposing (..) import Html.Attributes exposing (..) +import Html.Events exposing (..) + +import FontAwesome +import View.Color as Color import Form exposing (Form, FieldState) import Form.Input as Input import Form.Error as FormError exposing (Error(..)) +import Form.Field as Field import Msg exposing (Msg) @@ -18,8 +23,8 @@ import Model.Translations as Translations exposing (Translations) import Utils.Maybe exposing (isJust) -textInput : Translations -> Form String a -> (Html Form.Msg -> Html msg) -> String -> String -> Html msg -textInput translations form htmlMap formName fieldName = +textInput : Translations -> Form String a -> String -> String -> Html Form.Msg +textInput translations form formName fieldName = let field = Form.getFieldAsString fieldName form in div [ classList @@ -27,22 +32,24 @@ textInput translations form htmlMap formName fieldName = , ("error", isJust field.liveError) ] ] - [ htmlMap <| - Input.textInput - field - [ id (formName ++ fieldName) - , classList [ ("filled", isJust field.value) ] - ] + [ Input.textInput + field + [ id (formName ++ fieldName) + , classList [ ("filled", isJust field.value) ] + ] , label [ for (formName ++ fieldName) ] [ text (Translations.getMessage (formName ++ fieldName) translations) ] + , button + [ onClick (Form.Input fieldName Field.EmptyField) ] + [ FontAwesome.times Color.silver 15 ] , case field.liveError of Just error -> formError translations error Nothing -> text "" ] -radioInputs : Translations -> Form String a -> (Html Form.Msg -> Html msg) -> String -> String -> List String -> Html msg -radioInputs translations form htmlMap formName radioName fieldNames = +radioInputs : Translations -> Form String a -> String -> String -> List String -> Html Form.Msg +radioInputs translations form formName radioName fieldNames = let field = Form.getFieldAsString radioName form in div [ classList @@ -55,29 +62,28 @@ radioInputs translations form htmlMap formName radioName fieldNames = [ text (Translations.getMessage (formName ++ radioName) translations) ] , div [ class "radioInputs" ] - (List.map (radioInput translations field htmlMap formName) fieldNames) + (List.map (radioInput translations field formName) fieldNames) , case field.liveError of Just error -> formError translations error Nothing -> text "" ] -radioInput : Translations -> FieldState String String -> (Html Form.Msg -> Html msg) -> String -> String -> Html msg -radioInput translations field htmlMap formName fieldName = - htmlMap <| - div - [ class "radioInput" ] - [ Input.radioInput - field.path - field - [ id (formName ++ fieldName) - , value fieldName - , checked (field.value == Just fieldName) - ] - , label - [ for (formName ++ fieldName) ] - [ text (Translations.getMessage (formName ++ fieldName) translations) - ] - ] +radioInput : Translations -> FieldState String String -> String -> String -> Html Form.Msg +radioInput translations field formName fieldName = + div + [ class "radioInput" ] + [ Input.radioInput + field.path + field + [ id (formName ++ fieldName) + , value fieldName + , checked (field.value == Just fieldName) + ] + , label + [ for (formName ++ fieldName) ] + [ text (Translations.getMessage (formName ++ fieldName) translations) + ] + ] formError : Translations -> FormError.Error String -> Html msg formError translations error = diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm index 00f55d5..d5969b9 100644 --- a/src/client/elm/View/Header.elm +++ b/src/client/elm/View/Header.elm @@ -3,9 +3,9 @@ module View.Header exposing ) import Dict -import Color import FontAwesome +import View.Color as Color import Page exposing (..) -- cgit v1.2.3