From 42126c14899c9626a9a2bdd5757794542dd3e860 Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Mon, 10 Dec 2018 16:16:39 -0800 Subject: [PATCH] Add icon view. --- elm.json | 1 + src/Scylla/Views.elm | 13 ++++++++++++- static/scss/style.scss | 13 +++++++++++++ static/svg/feather-sprite.svg | 1 + 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 static/svg/feather-sprite.svg diff --git a/elm.json b/elm.json index 6c4b220..6a3ccd2 100644 --- a/elm.json +++ b/elm.json @@ -12,6 +12,7 @@ "elm/html": "1.0.0", "elm/http": "2.0.0", "elm/json": "1.1.2", + "elm/svg": "1.0.1", "elm/url": "1.0.0" }, "indirect": { diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm index 281d15d..a723be9 100644 --- a/src/Scylla/Views.elm +++ b/src/Scylla/Views.elm @@ -3,6 +3,8 @@ import Scylla.Model exposing (..) import Scylla.Sync exposing (..) import Scylla.Route exposing (..) import Scylla.Fnv as Fnv +import Svg +import Svg.Attributes import Url.Builder import Json.Decode as Decode import Html exposing (Html, div, input, text, button, div, span, a, h2, table, td, tr) @@ -98,7 +100,7 @@ joinedRoomView m roomId jr = , onInput <| ChangeRoomText roomId , value <| Maybe.withDefault "" <| Dict.get roomId m.roomText ] [] - , button [ onClick <| SendRoomText roomId ] [ text "Send" ] + , button [ onClick <| SendRoomText roomId ] [ iconView "send" ] ] in div [ class "room-wrapper" ] @@ -107,6 +109,15 @@ joinedRoomView m roomId jr = , messageInput ] +iconView : String -> Html Msg +iconView name = + let + url = Url.Builder.absolute [ "static", "svg", "feather-sprite.svg" ] [] + in + Svg.svg + [ Svg.Attributes.class "feather-icon" + ] [ Svg.use [ Svg.Attributes.xlinkHref (url ++ "#" ++ name) ] [] ] + eventWrapperView : Model -> List (Html Msg) -> Html Msg eventWrapperView m es = div [ class "events-wrapper" ] [ table [ class "events-table" ] es ] diff --git a/static/scss/style.scss b/static/scss/style.scss index 5a6155f..4a61728 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -155,3 +155,16 @@ span.sender-wrapper { padding-right: 5px; float: right; } + +/** + * Icons + */ +.feather-icon { + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + fill: none; + height: 20px; + width: 20px; +} diff --git a/static/svg/feather-sprite.svg b/static/svg/feather-sprite.svg new file mode 100644 index 0000000..0a6c4ba --- /dev/null +++ b/static/svg/feather-sprite.svg @@ -0,0 +1 @@ + \ No newline at end of file