Amelioring UX

2 files changed, 36 insertions, 37 deletions

diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index c4b3bbb..4672594 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -29,18 +29,23 @@ import Utils.Maybe exposing (..)
 timerView : Model -> (Id, Timer) -> Html
 timerView model (id, timer) =
   div
-    [ class "timer" ]
+    [ [ (True, "timer")
+      , (timer.state == Ringing, "isRinging")
+      , (timer.state == Running, "isRunning")
+      ]
+        |> activatedClasses
+    ]
     [ renderMaybeEdition model id Name (nameBlockReadOnly id timer) (nameBlockEdition id timer)
-    , renderMaybeEdition model id Time (timeBlockReadOnly id timer) (timeBlockEdition timer)
-    , playPauseBlock (id, timer)
-    , stopBlock (id, timer)
-    , removeBlock (id, timer)
+    , renderMaybeEdition model id Time (timeBlockReadOnly (id, timer)) (timeBlockEdition (id, timer))
+    , playPauseTimer (id, timer)
+    , stopTimer (id, timer)
+    , removeTimer (id, timer)
     ]
 
 nameBlockReadOnly : Id -> Timer -> Html
 nameBlockReadOnly id timer =
   div
-    [ class "name block"
+    [ class "name"
     , onClick actions.address (Edit id Name)
     ]
     [ text (timerName id timer) ]
@@ -48,7 +53,7 @@ nameBlockReadOnly id timer =
 nameBlockEdition : Id -> Timer -> Edition -> Html
 nameBlockEdition id timer edition =
   div
-    [ [ (True, "name block edition")
+    [ [ (True, "name edition")
       , (isEmpty edition, "empty")
       ]
         |> activatedClasses
@@ -67,24 +72,18 @@ nameBlockEdition id timer edition =
 timerName : Id -> Timer -> String
 timerName id = Maybe.withDefault ("Timer " ++ toString id) << .name
 
-timeBlockReadOnly : Id -> Timer -> Html
-timeBlockReadOnly id timer =
+timeBlockReadOnly : (Id, Timer) -> Html
+timeBlockReadOnly (id, timer) =
   div
-    [ [ (True, "time block")
-      , (timer.state == Ringing, "isRinging")
-      , (timer.state == Running, "isRunning")
-      ]
-        |> activatedClasses
-    , if timer.state == Ringing
-         then onClick actions.address (UpdateTimer id Stop)
-         else onClick actions.address (Edit id Time)
+    [ class "time"
+    , onClick actions.address (Edit id Time)
     ]
-    [ timeWithProgressBar timer ]
+    [ timeWithProgressBar (id, timer) ]
 
-timeBlockEdition : Timer -> Edition -> Html
-timeBlockEdition timer edition =
+timeBlockEdition : (Id, Timer) -> Edition -> Html
+timeBlockEdition (id, timer) edition =
   div
-    [ [ (True, "time block edition")
+    [ [ (True, "time edition")
       , (isEmpty edition, "empty")
       ]
         |> activatedClasses
@@ -92,7 +91,7 @@ timeBlockEdition timer edition =
     ]
     [ if isEmpty edition
         then
-          timeWithProgressBar timer
+          timeWithProgressBar (id, timer)
         else
           text (editionView edition.chars)
     ]
@@ -104,24 +103,25 @@ editionView numbers =
 
 timeView : Time -> String
 timeView time =
-  let totalSeconds = truncate (time / 1000)
+  let totalSeconds = ceiling (time / 1000)
       totalMinutes = totalSeconds // 60
       restSeconds = totalSeconds `rem` 60
   in  (String.padLeft 2 '0' (toString totalMinutes)) ++ " : " ++ (String.padLeft 2 '0' (toString restSeconds))
 
-timeWithProgressBar : Timer -> Html
-timeWithProgressBar timer =
+timeWithProgressBar : (Id, Timer) -> Html
+timeWithProgressBar (id, timer) =
   div
     []
     [ span
         [ class "progressBar"
         , let width =
-                1 - timer.currentTime / (initTime timer.initialTime)
-                  |> (*) 198
+                1 - timer.currentTime / timer.initialTime
+                  |> (*) 1020
                   |> round
                   |> toString
                   |> flip String.append "px"
           in style [ ("width", width) ]
+        , onClick actions.address (UpdateTimer id Stop)
         ]
         []
     , span
@@ -129,10 +129,10 @@ timeWithProgressBar timer =
         [ text (timeView timer.currentTime) ]
     ]
 
-playPauseBlock : (Id, Timer) -> Html
-playPauseBlock (id, timer) =
+playPauseTimer : (Id, Timer) -> Html
+playPauseTimer (id, timer) =
   button
-    [ class <| "playPause block"
+    [ class <| "playPause"
     , onClick actions.address (UpdateTimer id ToggleRunning)
     ]
     [ let icon = if timer.state == Running then "fa-pause" else "fa-play"
@@ -141,18 +141,18 @@ playPauseBlock (id, timer) =
             []
     ]
 
-stopBlock : (Id, Timer) -> Html
-stopBlock (id, timer) =
+stopTimer : (Id, Timer) -> Html
+stopTimer (id, timer) =
   button
-    [ class <| "stop block"
+    [ class <| "stop"
     , onClick actions.address (UpdateTimer id Stop)
     ]
     [ i [ class "fa fa-fw fa-stop" ] [] ]
 
-removeBlock : (Id, Timer) -> Html
-removeBlock (id, timer) =
+removeTimer : (Id, Timer) -> Html
+removeTimer (id, timer) =
   button
-    [ class <| "remove block"
+    [ class <| "remove"
     , onClick actions.address (RemoveTimer id)
     ]
     [ i [ class "fa fa-fw fa-remove" ] [] ]
diff --git a/src/View/View.elm b/src/View/View.elm
index b3d1dcc..a69d662 100644
--- a/src/View/View.elm
+++ b/src/View/View.elm
@@ -26,7 +26,6 @@ view model =
     , model.timers
         |> Dict.toList
         |> List.sortBy (.creationTime << snd)
-        |> List.reverse
         |> timers model
     ]