Adding a play / pause button

3 files changed, 14 insertions, 7 deletions

diff --git a/design/design.css b/design/design.css
index 5e737a0..53a2eed 100644
--- a/design/design.css
+++ b/design/design.css
@@ -38,7 +38,7 @@ button.addTimer {
   border-radius: 2px;
 }
 
-.timer.isRunning > .name {
+.timer.isRunning > .time {
   color: #33AA22;
 }
 
diff --git a/src/Update/UpdateTimer.elm b/src/Update/UpdateTimer.elm
index b3be088..3eba549 100644
--- a/src/Update/UpdateTimer.elm
+++ b/src/Update/UpdateTimer.elm
@@ -7,15 +7,15 @@ import Model.Timer (..)
 import Model.Id (..)
 
 type TimerAction =
-  ToggleRunning
-  | Restart
+  Restart
+  | ToggleRunning
   | Stop
 
 updateTimer : TimerAction -> Timer -> Timer
 updateTimer action timer =
   case action of
     ToggleRunning ->
-      { timer | isRunning <- not timer.isRunning }
+      { timer | isRunning <- timer.currentTime > 0.0 && not timer.isRunning }
     Restart ->
       { timer
       | isRunning <- True
diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index 5d34c7e..e38b6cb 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -20,9 +20,7 @@ timerView (id, timer) =
   div
     [ class <| "timer" ++ (if timer.isRunning then " isRunning" else "") ]
     [ button
-        [ class "name block"
-        , onClick (Signal.send updates (UpdateTimer id ToggleRunning))
-        ]
+        [ class "name block" ]
         [ text timer.name ]
     , div
         [ class <| "time block" ]
@@ -33,6 +31,15 @@ timerView (id, timer) =
         ]
         [ i [ class "fa fa-fw fa-backward" ] [] ]
     , button
+        [ class <| "playPause block"
+        , onClick (Signal.send updates (UpdateTimer id ToggleRunning))
+        ]
+        [ let icon = if timer.isRunning then "fa-pause" else "fa-play"
+          in  i
+                [ class <| "fa fa-fw " ++ icon ]
+                []
+        ]
+    , button
         [ class <| "stop block"
         , onClick (Signal.send updates (UpdateTimer id Stop))
         ]