Add a remove icon to empty a input text field

13 files changed, 81 insertions, 77 deletions

diff --git a/src/client/elm/Dialog/AddPayment/View.elm b/src/client/elm/Dialog/AddPayment/View.elm
index 8915b1d..79381dd 100644
--- a/src/client/elm/Dialog/AddPayment/View.elm
+++ b/src/client/elm/Dialog/AddPayment/View.elm
@@ -53,12 +53,12 @@ view loggedData frequency =
 
 addPaymentForm : LoggedData -> Form String DialogModel.AddPayment -> Html Msg
 addPaymentForm loggedData addPayment =
-  let htmlMap = Html.map (Msg.Dialog << Dialog.UpdateModel << DialogMsg.AddPaymentMsg)
-  in  Html.form
-        [ class "addPayment"
-        , onSubmitPrevDefault Msg.NoOp
-        ]
-        [ Form.textInput loggedData.translations addPayment htmlMap "payment" "name"
-        , Form.textInput loggedData.translations addPayment htmlMap "payment" "cost"
-        , Form.radioInputs loggedData.translations addPayment htmlMap "payment" "frequency" [ toString Punctual, toString Monthly ]
-        ]
+  Html.map (Msg.Dialog << Dialog.UpdateModel << DialogMsg.AddPaymentMsg) <|
+    Html.form
+      [ class "addPayment"
+      , onSubmitPrevDefault Form.NoOp
+      ]
+      [ Form.textInput loggedData.translations addPayment "payment" "name"
+      , Form.textInput loggedData.translations addPayment "payment" "cost"
+      , Form.radioInputs loggedData.translations addPayment "payment" "frequency" [ toString Punctual, toString Monthly ]
+      ]
diff --git a/src/client/elm/LoggedIn/Home/Header/View.elm b/src/client/elm/LoggedIn/Home/Header/View.elm
index f9fbb6a..67ff1f4 100644
--- a/src/client/elm/LoggedIn/Home/Header/View.elm
+++ b/src/client/elm/LoggedIn/Home/Header/View.elm
@@ -11,6 +11,7 @@ import Dict
 
 import Form exposing (Form)
 import View.Form as Form
+import View.Events exposing (onSubmitPrevDefault)
 
 import Msg exposing (Msg)
 import LoggedIn.Msg as LoggedInMsg
@@ -50,14 +51,14 @@ searchLine loggedData search frequency =
 
 searchForm : LoggedData -> Form String Home.Search -> Html Msg
 searchForm loggedData search =
-  let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.SearchMsg)
-  in  Html.form
-        []
-        [ Form.textInput loggedData.translations search htmlMap "search" "name"
-        , if List.isEmpty (Payment.monthly loggedData.payments)
-            then text ""
-            else Form.radioInputs loggedData.translations search htmlMap "search" "frequency" [ toString Punctual, toString Monthly ]
-        ]
+  Html.map (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.SearchMsg) <|
+    Html.form
+      [ onSubmitPrevDefault Form.NoOp ]
+      [ Form.textInput loggedData.translations search "search" "name"
+      , if List.isEmpty (Payment.monthly loggedData.payments)
+          then text ""
+          else Form.radioInputs loggedData.translations search "search" "frequency" [ toString Punctual, toString Monthly ]
+      ]
 
 infos : LoggedData -> Payments -> Html Msg
 infos loggedData payments =
diff --git a/src/client/elm/LoggedIn/Home/View/Expand.elm b/src/client/elm/LoggedIn/Home/View/Expand.elm
index e0c13a3..2bcfec1 100644
--- a/src/client/elm/LoggedIn/Home/View/Expand.elm
+++ b/src/client/elm/LoggedIn/Home/View/Expand.elm
@@ -3,7 +3,7 @@ module LoggedIn.Home.View.Expand exposing
   , ExpandType(..)
   )
 
-import Color exposing (Color)
+import View.Color as Color
 
 import FontAwesome
 
diff --git a/src/client/elm/LoggedIn/Home/View/Table.elm b/src/client/elm/LoggedIn/Home/View/Table.elm
index 9cd43a7..323a45d 100644
--- a/src/client/elm/LoggedIn/Home/View/Table.elm
+++ b/src/client/elm/LoggedIn/Home/View/Table.elm
@@ -5,9 +5,9 @@ module LoggedIn.Home.View.Table exposing
 import Dict exposing (..)
 import Date exposing (Date)
 import String exposing (append)
-import Color
 
 import FontAwesome
+import View.Color as Color
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm
index be15c6b..3019fea 100644
--- a/src/client/elm/LoggedIn/Income/View.elm
+++ b/src/client/elm/LoggedIn/Income/View.elm
@@ -5,7 +5,6 @@ module LoggedIn.Income.View exposing
 import Dict
 import Date
 import Time exposing (Time)
-import Color
 import Task
 
 import FontAwesome
@@ -14,7 +13,11 @@ import Html exposing (..)
 import Html.Events exposing (..)
 import Html.Attributes exposing (..)
 import Html.App as Html
+
 import Form exposing (Form)
+import View.Form as Form
+import View.Events exposing (onSubmitPrevDefault)
+
 import Dialog
 
 import Msg exposing (Msg)
@@ -35,8 +38,6 @@ import LoggedIn.View.Date exposing (renderShortDate)
 import LoggedIn.View.Format as Format
 
 import LoggedIn.View.Date exposing (renderLongDate)
-import View.Events exposing (onSubmitPrevDefault)
-import View.Form as Form
 import View.Color as Color
 
 view : LoggedData -> IncomeModel.Model -> Html Msg
@@ -80,10 +81,11 @@ addIncomeView loggedData addIncome =
   let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.IncomeMsg << IncomeMsg.AddIncomeMsg)
   in  Html.form
         [ onSubmitPrevDefault Msg.NoOp ]
-        [ Form.textInput loggedData.translations addIncome htmlMap "income" "creation"
-        , Form.textInput loggedData.translations addIncome htmlMap "income" "amount"
+        [ htmlMap <| Form.textInput loggedData.translations addIncome "income" "creation"
+        , htmlMap <| Form.textInput loggedData.translations addIncome "income" "amount"
         , button
-            [ case Form.getOutput addIncome of
+            [ class "add"
+            , case Form.getOutput addIncome of
                 Just data ->
                   onClick (Msg.UpdateLoggedIn <| LoggedInMsg.AddIncome data.time data.amount)
                 Nothing ->
diff --git a/src/client/elm/SignIn/View.elm b/src/client/elm/SignIn/View.elm
index 7ee4ecd..daaa527 100644
--- a/src/client/elm/SignIn/View.elm
+++ b/src/client/elm/SignIn/View.elm
@@ -3,9 +3,9 @@ module SignIn.View exposing
   )
 
 import Json.Decode as Json
-import Color
 
 import FontAwesome
+import View.Color as Color
 
 import Html as H exposing (..)
 import Html.Attributes exposing (..)
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 (..)
 
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index c2537f1..00de12d 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -16,6 +16,7 @@ design = do
   let inputHeight = 30
   let inputTop = 22
   let inputPaddingBottom = 3
+  let inputZIndex = 1
 
   ".textInput" ? do
     position relative
@@ -25,7 +26,7 @@ design = do
 
     input ? do
       position relative
-      zIndex 1
+      zIndex inputZIndex
       backgroundColor transparent
       paddingBottom (px inputPaddingBottom)
       borderStyle none
@@ -45,6 +46,12 @@ design = do
       color Color.silver
       transition "all" (sec 0.2) easeIn (sec 0)
 
+    button ? do
+      position absolute
+      right (px 0)
+      top (px 27)
+      zIndex inputZIndex
+
     (input # ".filled" |+ label) <> (input # focus |+ label) ? do
       top (px 0)
       fontSize (pct 80)
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index a229132..2594f25 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -38,20 +38,6 @@ design = do
     ".row" ? do
       fontSize (px 18)
       height (px rowHeightPx)
-      ".cell:first-child::before" ? do
-        display block
-        content (stringContent "")
-        position absolute
-        top (px 0)
-        left (px 0)
-        width (px 0)
-        height (px rowHeightPx)
-        backgroundColor Color.mossGreen
-        transition "width" (sec 0.3) ease (sec 0)
-        opacity (0.8)
-
-      hover & do
-        ".cell:first-child::before" ? width (px 5)
 
       nthChild "odd" & do
         backgroundColor Color.wildSand
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
index bebd136..84ae521 100644
--- a/src/server/Design/LoggedIn/Income.hs
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -21,7 +21,7 @@ design = do
     "margin-bottom" -: "4vh"
     ".textInput" ? marginRight (px 30)
 
-    button ? do
+    button # ".add" ? do
       Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       marginTop (px 3)