From 62fee9133f36f655c1ed83e0c2e85394f9948bf5 Mon Sep 17 00:00:00 2001
From: Joris Guyonvarch
Date: Sun, 10 May 2015 16:32:08 +0200
Subject: Amelioring UX

---
 alarm.wav                  | Bin 91164 -> 661032 bytes
 design/design.css          | 132 ++++++++++++++++++++-------------------------
 design/reset.css           |   4 --
 src/Model/Timer.elm        |   6 +--
 src/Update/UpdateTimer.elm |  30 ++++-------
 src/View/Timer.elm         |  72 ++++++++++++-------------
 src/View/View.elm          |   1 -
 7 files changed, 106 insertions(+), 139 deletions(-)

diff --git a/alarm.wav b/alarm.wav
index 80479d8..41d6709 100644
Binary files a/alarm.wav and b/alarm.wav differ
diff --git a/design/design.css b/design/design.css
index 7d9cd39..7602c7d 100644
--- a/design/design.css
+++ b/design/design.css
@@ -1,8 +1,13 @@
+/**************/
+/* Header bar */
+/**************/
+
 .headerBar {
   background-color: #111111;
-  margin-bottom: 40px;
   font-size: 70px;
   box-shadow: 0px 2px 2px grey;
+  min-width: 1020px;
+  margin-bottom: 2px;
 }
 
 .headerBar > button {
@@ -36,16 +41,6 @@
   border-color: #CCCC88;
 }
 
-.timers {
-  text-align: center;
-  font-size: 30px;
-}
-
-.timer {
-  line-height: 80px;
-  height: 80px;
-}
-
 .headerBar > button {
   background-color: #111111;
   color: white;
@@ -77,111 +72,100 @@
   border-color: #CCCC88;
 }
 
+/**********/
+/* Timers */
+/**********/
+
 .timers {
   text-align: center;
   font-size: 30px;
+  display: table;
+  table-layout: auto;
+  margin-left: auto;
+  margin-right: auto;
+  width: 1020px;
 }
 
 .timer {
-  line-height: 80px;
-  height: 80px;
+  line-height: 140px;
+  height: 140px;
+  position: relative;
+  display: table-row;
 }
 
-.block {
-  display: inline-block;
-  background-color: #EEEEEE;
-  text-align: center;
-  height: 80px;
-  margin-right: 20px;
-  border-radius: 30px;
-  box-shadow: 0px 4px #AAAAAA;
-  border: 1px solid #DDDDDD;
+.timer:nth-child(even) {
+  background-color: #FAFAFA;
 }
 
-.block:hover {
-  background-color: #E6E6E6;
+.timer.isRinging:hover {
+  background-color: #FED5AE;
 }
 
-.block:focus {
-  border: 1px solid #AAAAAA;
+.timer .name,
+.timer .time,
+.timer button {
+  display: table-cell;
 }
 
-.block:active {
-  transform: translateY(2px);
-  box-shadow: 0px 2px #AAAAAA;
+.timer button {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  width: 140px;
+  height: 140px;
+  font-size: 35px;
+  padding: 0px;
+  position: relative;
 }
 
-.timer > .name {
+.timer button.remove {
+  color: #AA2222;
+}
+
+.timer:only-of-type button.remove {
+  color: grey;
+}
+
+.timer .name {
   width: 400px;
   letter-spacing: 2px;
   cursor: text;
 }
 
-.timer > .time {
+.timer .time {
   width: 200px;
   letter-spacing: 2px;
   cursor: text;
-  position: relative;
   border-radius: 0px;
 }
 
-.timer > .time .text {
-  position: relative;
-}
-
-.timer > .time .progressBar {
+.timer .progressBar {
   background-color: darkgrey;
   position: absolute;
   left: 0;
-  top: 0;
-  height: 79px;
+  top: 133px;
+  height: 10px;
 }
 
-.timer > .time:hover .progressBar {
-  background-color: grey;
-}
-
-.timer > .time.isRunning .progressBar {
+.timer.isRunning .progressBar {
   background-color: #CDE4C2;
 }
 
-.timer > .time.isRunning:hover .progressBar {
-  background-color: #B5CEAA;
-}
-
-.timer > .time.isRinging:hover {
-  cursor: pointer;
-}
-
-.timer > .time.isRinging .progressBar {
+.timer.isRinging .progressBar {
   background-color: #FED5AE;
 }
 
-.timer > .time.isRinging:hover .progressBar {
-  background-color: #F2CAA5;
+.timer:hover.isRinging .progressBar {
+  top: 0px;
+  height: 143px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
 }
 
-.timer > .edition.empty {
+.timer .edition.empty {
   color: #DDDDDD;
 }
 
-.timer > .edition:not(.empty) {
+.timer .edition:not(.empty) {
   color: darkgrey;
 }
-
-.timer > button {
-  width: 100px;
-  font-size: 30px;
-}
-
-.timer > button.remove {
-  color: #AA2222;
-}
-
-.timers > .timer:only-of-type > button.remove {
-  color: grey;
-}
-
-.timer:not(last-child) {
-  margin-bottom: 40px;
-}
diff --git a/design/reset.css b/design/reset.css
index d7942e1..58fedc2 100644
--- a/design/reset.css
+++ b/design/reset.css
@@ -66,7 +66,3 @@ button::-moz-focus-inner {
 button:focus {
   outline: 0;
 }
-
-button:active {
-  padding: 0;
-}
diff --git a/src/Model/Timer.elm b/src/Model/Timer.elm
index 20c0ea8..51d293d 100644
--- a/src/Model/Timer.elm
+++ b/src/Model/Timer.elm
@@ -1,7 +1,6 @@
 module Model.Timer
   ( Timer
   , initialTimer
-  , initTime
   ) where
 
 import List
@@ -23,9 +22,6 @@ initialTimer creationTime =
   in  { creationTime = creationTime
       , name = Nothing
       , initialTime = initialTime
-      , currentTime = initTime initialTime
+      , currentTime = initialTime
       , state = Idle
       }
-
-initTime : Time -> Time
-initTime t = t + 999
diff --git a/src/Update/UpdateTimer.elm b/src/Update/UpdateTimer.elm
index 49593d0..08b9969 100644
--- a/src/Update/UpdateTimer.elm
+++ b/src/Update/UpdateTimer.elm
@@ -25,30 +25,22 @@ updateTimer action timer =
     Pause ->
       { timer | state <- Idle }
     ToggleRunning ->
-      if timer.state == Ringing
-        then
-          { timer
-          | currentTime <- initTime timer.initialTime
-          , state <- Running
-          }
-        else
-          { timer
-          | state <-
-              if timer.currentTime > 0 && timer.state == Idle
-                then Running
-                else Idle
-          }
+      { timer
+      | state <-
+          if timer.currentTime > 0 && timer.state == Idle
+            then Running
+            else Idle
+      }
     Stop ->
       { timer
-      | currentTime <- initTime timer.initialTime
+      | currentTime <- timer.initialTime
       , state <- Idle
       }
     SetTime time ->
-      let augmentedTime = time + 999
-      in  { timer
-          | initialTime <- time
-          , currentTime <- augmentedTime
-          }
+      { timer
+      | initialTime <- time
+      , currentTime <- time
+      }
     SubstractTime time ->
       if timer.state == Running
         then
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
     ]
 
-- 
cgit v1.2.3