From ce4580451def7e86d0f67d2c353ac65239e17fd1 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Sun, 22 Mar 2015 09:29:09 +0100 Subject: More coherent design with progress bar --- src/View/Timer.elm | 62 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 37 insertions(+), 25 deletions(-) (limited to 'src/View/Timer.elm') 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 -- cgit v1.2.3