diff options
| -rw-r--r-- | alarm.wav | bin | 91164 -> 661032 bytes | |||
| -rw-r--r-- | design/design.css | 132 | ||||
| -rw-r--r-- | design/reset.css | 4 | ||||
| -rw-r--r-- | src/Model/Timer.elm | 6 | ||||
| -rw-r--r-- | src/Update/UpdateTimer.elm | 30 | ||||
| -rw-r--r-- | src/View/Timer.elm | 72 | ||||
| -rw-r--r-- | src/View/View.elm | 1 |
7 files changed, 106 insertions, 139 deletions
| Binary files 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 ] |