More coherent design with progress bar

2 files changed, 56 insertions, 32 deletions

diff --git a/design/design.css b/design/design.css
index 7d66650..11002aa 100644
--- a/design/design.css
+++ b/design/design.css
@@ -123,19 +123,27 @@
   border-radius: 0px;
 }
 
-.timer > .time > .text {
+.timer > .time .text {
   position: relative;
 }
 
-.timer > .time > .progressBar {
-  background-color: #CDE4C2;
+.timer > .time .progressBar {
+  background-color: darkgrey;
   position: absolute;
   left: 0;
   top: 0;
   height: 79px;
 }
 
-.timer > .time:hover > .progressBar {
+.timer > .time:hover .progressBar {
+  background-color: grey;
+}
+
+.timer > .time.isRunning .progressBar {
+  background-color: #CDE4C2;
+}
+
+.timer > .time.isRunning:hover .progressBar {
   background-color: #B5CEAA;
 }
 
@@ -143,18 +151,22 @@
   cursor: pointer;
 }
 
-.timer > .time.isRinging > .progressBar {
+.timer > .time.isRinging .progressBar {
   background-color: #FED5AE;
 }
 
-.timer > .time.isRinging:hover > .progressBar {
+.timer > .time.isRinging:hover .progressBar {
   background-color: #F2CAA5;
 }
 
-.timer > .edition {
+.timer > .edition.empty {
   color: #DDDDDD;
 }
 
+.timer > .edition:not(.empty) {
+  color: darkgrey;
+}
+
 .timer > button {
   width: 100px;
   font-size: 30px;
diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index efabf8f..604b045 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -46,20 +46,26 @@ timeBlock model (id, timer) =
   let maybeEdition = filterMaybe (\te -> te.id == id) model.timerEdition
   in  case maybeEdition of
         Just edition ->
-          button
-            [ class "time block edition"
-            , onClick (Signal.send updates ValidTimerEdition)
-            ]
-            [ if List.isEmpty edition.numbers
-                then
-                  text (timeView timer.currentTime)
-                else
-                  text (editionView edition.numbers)
-            ]
+          let isEmptyEdition = List.isEmpty edition.numbers
+          in  button
+                [ [ (True, "time block edition")
+                  , (isEmptyEdition, "empty")
+                  ]
+                    |> activatedClasses
+                , onClick (Signal.send updates ValidTimerEdition)
+                ]
+                [ if isEmptyEdition
+                    then
+                      timeWithProgressBar timer
+                    else
+                      text (editionView edition.numbers)
+                ]
+
         Nothing ->
           button
             [ [ (True, "time block")
               , (timer.state == Ringing, "isRinging")
+              , (timer.state == Running, "isRunning")
               ]
                 |> activatedClasses
             , onClick
@@ -67,21 +73,7 @@ timeBlock model (id, timer) =
                      then Signal.send updates (UpdateTimer id Stop)
                      else Signal.send updates (EditTimer id)
             ]
-            [ span
-                [ class "progressBar"
-                , let width =
-                        1 - timer.currentTime / (initTime timer.initialTime)
-                          |> (*) 198
-                          |> round
-                          |> toString
-                          |> flip String.append "px"
-                  in style [ ("width", width) ]
-                ]
-                []
-            , span
-                [ class "text" ]
-                [ text (timeView timer.currentTime) ]
-            ]
+            [ timeWithProgressBar timer ]
 
 editionView : Numbers -> String
 editionView numbers =
@@ -95,6 +87,26 @@ timeView time =
       restSeconds = totalSeconds `rem` 60
   in  (String.padLeft 2 '0' (toString totalMinutes)) ++ " : " ++ (String.padLeft 2 '0' (toString restSeconds))
 
+timeWithProgressBar : Timer -> Html
+timeWithProgressBar timer =
+  div
+    []
+    [ span
+        [ class "progressBar"
+        , let width =
+                1 - timer.currentTime / (initTime timer.initialTime)
+                  |> (*) 198
+                  |> round
+                  |> toString
+                  |> flip String.append "px"
+          in style [ ("width", width) ]
+        ]
+        []
+    , span
+        [ class "text" ]
+        [ text (timeView timer.currentTime) ]
+    ]
+
 playPauseBlock : (Id, Timer) -> Html
 playPauseBlock (id, timer) =
   button