From e2df6c1881f88d3be2c8fc6458492a35ff3bb8bf Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Wed, 9 Jun 2021 16:30:21 +0200 Subject: [PATCH] svg icons --- elm.json | 1 + index.html | 5 ++++ src/Icons.elm | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/Main.elm | 9 ++++--- 4 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 src/Icons.elm diff --git a/elm.json b/elm.json index 90af5ca..63a45bb 100644 --- a/elm.json +++ b/elm.json @@ -11,6 +11,7 @@ "elm/core": "1.0.5", "elm/html": "1.0.0", "elm/json": "1.1.3", + "elm/svg": "1.0.1", "mdgriffith/elm-ui": "1.1.8" }, "indirect": { diff --git a/index.html b/index.html index 2fdeef4..1c9553d 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,11 @@ twitch.tforgione.fr +
diff --git a/src/Icons.elm b/src/Icons.elm new file mode 100644 index 0000000..c54ad1e --- /dev/null +++ b/src/Icons.elm @@ -0,0 +1,71 @@ +module Icons exposing + ( maximize + , minimize + , pause + , play + , playCircle + ) + +import Element exposing (Element) +import Html exposing (Html) +import Svg exposing (Svg, svg) +import Svg.Attributes exposing (..) + + +svgFeatherIcon : String -> List (Svg msg) -> Bool -> Element msg +svgFeatherIcon className lines f = + Element.html + (svg + [ if f then + class <| "filled feather feather-" ++ className + + else + class <| "feather feather-" ++ className + , fill "none" + , height "24" + , stroke "currentColor" + , strokeLinecap "round" + , strokeLinejoin "round" + , strokeWidth "2" + , viewBox "0 0 24 24" + , width "24" + ] + lines + ) + + +maximize : Bool -> Element msg +maximize = + svgFeatherIcon "maximize" + [ Svg.path [ d "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" ] [] + ] + + +minimize : Bool -> Element msg +minimize = + svgFeatherIcon "minimize" + [ Svg.path [ d "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" ] [] + ] + + +pause : Bool -> Element msg +pause = + svgFeatherIcon "pause" + [ Svg.rect [ Svg.Attributes.x "6", y "4", width "4", height "16" ] [] + , Svg.rect [ Svg.Attributes.x "14", y "4", width "4", height "16" ] [] + ] + + +play : Bool -> Element msg +play = + svgFeatherIcon "play" + [ Svg.polygon [ points "5 3 19 12 5 21 5 3" ] [] + ] + + +playCircle : Bool -> Element msg +playCircle = + svgFeatherIcon "play-circle" + [ Svg.circle [ cx "12", cy "12", r "10" ] [] + , Svg.polygon [ points "10 8 16 12 10 16 10 8" ] [] + ] diff --git a/src/Main.elm b/src/Main.elm index 23fe26e..e0cb5b8 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -10,6 +10,7 @@ import Element.Input as Input import Html import Html.Attributes import Html.Events +import Icons import Json.Decode as Decode @@ -179,7 +180,7 @@ video model = , Element.row [ Element.spacing 10 ] [ playPauseButton model.playing - , Element.text (formatTime model.position ++ " / " ++ formatTime model.duration) + , Element.el [ Element.moveDown 2.5 ] (Element.text (formatTime model.position ++ " / " ++ formatTime model.duration)) ] ] in @@ -192,13 +193,13 @@ playPauseButton playing = let icon = if playing then - "⏸" + Icons.pause True else - "▶" + Icons.play True in Input.button [] - { label = Element.text icon + { label = icon , onPress = Just PlayPause }