Adding a remove button to delete a timer

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