Add a remove icon to empty a input text field

4 files changed, 43 insertions, 35 deletions

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 (..)