svg icons
This commit is contained in:
parent
1ac7a45ddd
commit
e2df6c1881
1
elm.json
1
elm.json
|
@ -11,6 +11,7 @@
|
||||||
"elm/core": "1.0.5",
|
"elm/core": "1.0.5",
|
||||||
"elm/html": "1.0.0",
|
"elm/html": "1.0.0",
|
||||||
"elm/json": "1.1.3",
|
"elm/json": "1.1.3",
|
||||||
|
"elm/svg": "1.0.1",
|
||||||
"mdgriffith/elm-ui": "1.1.8"
|
"mdgriffith/elm-ui": "1.1.8"
|
||||||
},
|
},
|
||||||
"indirect": {
|
"indirect": {
|
||||||
|
|
|
@ -4,6 +4,11 @@
|
||||||
<title>twitch.tforgione.fr</title>
|
<title>twitch.tforgione.fr</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
.filled {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
|
|
|
@ -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" ] []
|
||||||
|
]
|
|
@ -10,6 +10,7 @@ import Element.Input as Input
|
||||||
import Html
|
import Html
|
||||||
import Html.Attributes
|
import Html.Attributes
|
||||||
import Html.Events
|
import Html.Events
|
||||||
|
import Icons
|
||||||
import Json.Decode as Decode
|
import Json.Decode as Decode
|
||||||
|
|
||||||
|
|
||||||
|
@ -179,7 +180,7 @@ video model =
|
||||||
, Element.row
|
, Element.row
|
||||||
[ Element.spacing 10 ]
|
[ Element.spacing 10 ]
|
||||||
[ playPauseButton model.playing
|
[ 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
|
in
|
||||||
|
@ -192,13 +193,13 @@ playPauseButton playing =
|
||||||
let
|
let
|
||||||
icon =
|
icon =
|
||||||
if playing then
|
if playing then
|
||||||
"⏸"
|
Icons.pause True
|
||||||
|
|
||||||
else
|
else
|
||||||
"▶"
|
Icons.play True
|
||||||
in
|
in
|
||||||
Input.button []
|
Input.button []
|
||||||
{ label = Element.text icon
|
{ label = icon
|
||||||
, onPress = Just PlayPause
|
, onPress = Just PlayPause
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue