diff options
| -rw-r--r-- | design/design.css | 26 | ||||
| -rw-r--r-- | src/View/Timer.elm | 62 |
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 |