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/Dialog/AddPayment/View.elm | 18 ++++---- src/client/elm/LoggedIn/Home/Header/View.elm | 17 ++++---- src/client/elm/LoggedIn/Home/View/Expand.elm | 2 +- src/client/elm/LoggedIn/Home/View/Table.elm | 2 +- src/client/elm/LoggedIn/Income/View.elm | 14 ++++--- src/client/elm/SignIn/View.elm | 2 +- 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 +- 10 files changed, 72 insertions(+), 61 deletions(-) (limited to 'src/client/elm') 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 (..) -- cgit v1.2.3