From 4e5f27a5b1428b9ad190a87a6bf0d4fe187387c9 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Mon, 16 Mar 2015 20:37:44 +0100 Subject: Adding a remove button to delete a timer --- design/design.css | 25 +++++++++++++++++-------- design/reset.css | 5 +++++ src/Model/Model.elm | 11 ++++++----- src/Update/Update.elm | 3 +++ src/View/Timer.elm | 17 +++++++++++------ 5 files changed, 42 insertions(+), 19 deletions(-) diff --git a/design/design.css b/design/design.css index 245e498..b6047d8 100644 --- a/design/design.css +++ b/design/design.css @@ -28,23 +28,32 @@ h1 { } .timer { - font-size: 26px; - line-height: 26px; + line-height: 50px; + height: 50px; } .block { display: inline-block; + background-color: #DDDDDD; + text-align: center; + height: 50px; +} + +.timer.isRunning > .name { + background-color: green; +} + +.timer > button.name { width: 200px; - background-color: #EEEEEE; - padding: 5px; + border: none; } -.timerTime { - cursor: pointer; +.timer > .time { + width: 100px; } -.isRunning { - background-color: green; +.timer > button.remove { + border: none; } .timer:not(last-child) { diff --git a/design/reset.css b/design/reset.css index a70d2bc..419794c 100644 --- a/design/reset.css +++ b/design/reset.css @@ -53,3 +53,8 @@ html { *, *:before, *:after { box-sizing: inherit; } + +button { + cursor: pointer; + box-sizing: border-box; +} diff --git a/src/Model/Model.elm b/src/Model/Model.elm index fa97d7b..a3b4780 100644 --- a/src/Model/Model.elm +++ b/src/Model/Model.elm @@ -21,11 +21,12 @@ type alias Model = initialModel : Time -> Model initialModel initialTime = - { currentTime = initialTime - , newTimerName = "" - , timers = Dict.empty - , timerIdGenerator = initialIdGenerator - } + let (id, idGenerator) = getId initialIdGenerator + in { currentTime = initialTime + , newTimerName = "" + , timers = Dict.insert id (initialTimer initialTime "Timer") Dict.empty + , timerIdGenerator = idGenerator + } substractTimersTime : Time -> Dict Id Timer -> Dict Id Timer substractTimersTime t timers = diff --git a/src/Update/Update.elm b/src/Update/Update.elm index 0252fc8..635e29d 100644 --- a/src/Update/Update.elm +++ b/src/Update/Update.elm @@ -22,6 +22,7 @@ type Action = | AddNewTimer | DeltaTime Time | UpdateTimer Id TimerAction + | RemoveTimer Id updates : Signal.Channel Action updates = Signal.channel NoOp @@ -46,3 +47,5 @@ update action model = } UpdateTimer id action -> { model | timers <- Dict.update id (Maybe.map (updateTimer action)) model.timers } + RemoveTimer id -> + { model | timers <- Dict.remove id model.timers } diff --git a/src/View/Timer.elm b/src/View/Timer.elm index 668bf08..13f071c 100644 --- a/src/View/Timer.elm +++ b/src/View/Timer.elm @@ -18,15 +18,20 @@ import Update.UpdateTimer (..) timerView : (Id, Timer) -> Html timerView (id, timer) = div - [ class "timer" ] - [ div - [ class "block" ] - [ text timer.name ] - , div - [ class <| "timerTime block" ++ (if timer.isRunning then " isRunning" else "") + [ class <| "timer" ++ (if timer.isRunning then " isRunning" else "") ] + [ button + [ class "name block" , onClick (Signal.send updates (UpdateTimer id ToggleRunning)) ] + [ text timer.name ] + , div + [ class <| "time block" ] [ text (timeView timer.time) ] + , button + [ class <| "remove block" + , onClick (Signal.send updates (RemoveTimer id)) + ] + [ i [ class "fa fa-fw fa-remove" ] [] ] ] timeView : Time -> String -- cgit v1.2.3