diff --git a/assets/_reactor/debugger/pause-button-down.png b/assets/_reactor/debugger/pause-button-down.png deleted file mode 100644 index 94f0120..0000000 Binary files a/assets/_reactor/debugger/pause-button-down.png and /dev/null differ diff --git a/assets/_reactor/debugger/pause-button-hover.png b/assets/_reactor/debugger/pause-button-hover.png deleted file mode 100644 index d3c405b..0000000 Binary files a/assets/_reactor/debugger/pause-button-hover.png and /dev/null differ diff --git a/assets/_reactor/debugger/pause-button-up.png b/assets/_reactor/debugger/pause-button-up.png deleted file mode 100644 index 6574442..0000000 Binary files a/assets/_reactor/debugger/pause-button-up.png and /dev/null differ diff --git a/assets/_reactor/debugger/play-button-down.png b/assets/_reactor/debugger/play-button-down.png deleted file mode 100644 index 874cb4c..0000000 Binary files a/assets/_reactor/debugger/play-button-down.png and /dev/null differ diff --git a/assets/_reactor/debugger/play-button-hover.png b/assets/_reactor/debugger/play-button-hover.png deleted file mode 100644 index 7b55131..0000000 Binary files a/assets/_reactor/debugger/play-button-hover.png and /dev/null differ diff --git a/assets/_reactor/debugger/play-button-up.png b/assets/_reactor/debugger/play-button-up.png deleted file mode 100644 index 2cfd95a..0000000 Binary files a/assets/_reactor/debugger/play-button-up.png and /dev/null differ diff --git a/assets/_reactor/debugger/restart-button-down.png b/assets/_reactor/debugger/restart-button-down.png deleted file mode 100644 index 9a3f14d..0000000 Binary files a/assets/_reactor/debugger/restart-button-down.png and /dev/null differ diff --git a/assets/_reactor/debugger/restart-button-hover.png b/assets/_reactor/debugger/restart-button-hover.png deleted file mode 100644 index 04d3f75..0000000 Binary files a/assets/_reactor/debugger/restart-button-hover.png and /dev/null differ diff --git a/assets/_reactor/debugger/restart-button-up.png b/assets/_reactor/debugger/restart-button-up.png deleted file mode 100644 index 5876521..0000000 Binary files a/assets/_reactor/debugger/restart-button-up.png and /dev/null differ diff --git a/elm-package.json b/elm-package.json index d2a27fe..c8c2472 100644 --- a/elm-package.json +++ b/elm-package.json @@ -11,7 +11,8 @@ "dependencies": { "elm-lang/core": "2.0.0 <= v < 3.0.0", "evancz/elm-html": "3.0.0 <= v < 4.0.0", - "evancz/elm-markdown": "1.1.4 <= v < 2.0.0" + "evancz/elm-markdown": "1.1.4 <= v < 2.0.0", + "jystic/elm-font-awesome": "1.0.0 <= v < 2.0.0" }, "elm-version": "0.15.0 <= v < 0.16.0" } \ No newline at end of file diff --git a/frontend/SideBar/Controls.elm b/frontend/SideBar/Controls.elm index 6e7964f..bc8e187 100644 --- a/frontend/SideBar/Controls.elm +++ b/frontend/SideBar/Controls.elm @@ -10,7 +10,7 @@ import Json.Decode exposing (..) import List import String import Signal as S exposing (Signal, (<~), (~)) -import Text +import FontAwesome import Button import SideBar.Model as Model @@ -19,12 +19,15 @@ import Styles exposing (..) -- STYLE -buttonHeight = 40 -buttonWidth = 40 +buttonIconSize = 20 +buttonSideLength = 40 +buttonBorderRadius = 8 sideMargin = 20 textHeight = 20 panelWidth = 275 +playPauseButtonColor = Color.rgb 20 131 213 + blue = Color.rgb 28 129 218 lightGrey = Color.rgb 228 228 228 darkGrey = Color.rgb 74 74 74 @@ -37,36 +40,21 @@ eventNumberTextStyle = -- VIEW -buttonImage : String -> Button.Model -> Html -buttonImage name state = - let - stateName = - case state of - Button.Up -> "up" - Button.Down -> "down" - Button.Hover -> "hover" - - path = - "/_reactor/debugger/" ++ name ++ "-button-" ++ stateName ++ ".png" - in - img - [ src path - , Attr.width 40 - , Attr.height 40 - ] - [] - playPauseButton : Bool -> Button.Model -> Html playPauseButton isPlay state = let - name = - if isPlay then "play" else "pause" + icon = + if isPlay + then FontAwesome.play Color.white buttonIconSize + else FontAwesome.pause Color.white buttonIconSize + render state = + iconButton playPauseButtonColor icon in Button.view (Signal.forwardTo buttonStateMailbox.address Model.PlayPauseButtonAction) - pausedInputMailbox.address False - state (buttonImage name) + pausedInputMailbox.address (not isPlay) + state render pausedInputMailbox : Signal.Mailbox Bool @@ -76,10 +64,14 @@ pausedInputMailbox = restartButton : Button.Model -> Html restartButton state = - Button.view + let + render st = + iconButton lightGrey (FontAwesome.undo darkGrey buttonIconSize) + in + Button.view (Signal.forwardTo buttonStateMailbox.address Model.RestartButtonAction) restartMailbox.address () - state (buttonImage "restart") + state render restartMailbox : Signal.Mailbox () @@ -250,5 +242,30 @@ view showSwap permitSwap state = -- UTILITIES +iconButton : Color.Color -> Html -> Html +iconButton bgColor iconHtml = + let + transPx = + (buttonSideLength - buttonIconSize) // 2 + in + div + [ style + [ ("background-color", colorToCss bgColor) + , ("border-radius", intToPx buttonBorderRadius) + , ("width", intToPx buttonSideLength) + , ("height", intToPx buttonSideLength) + ] + ] + [ div + [ style [("transform", translateToCss transPx transPx)] ] + [ iconHtml ] + ] + + +translateToCss : Int -> Int -> String +translateToCss x y = + "translate(" ++ intToPx x ++ "," ++ intToPx y ++ ")" + + intToPx : Int -> String intToPx x = toString x ++ "px"