Links instead of button

This commit is contained in:
Thomas Forgione 2020-10-08 16:18:22 +02:00
parent f22e1c576b
commit 1ba2bbd8ce
4 changed files with 49 additions and 23 deletions

View File

@ -1,5 +1,6 @@
module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, subscriptions, update)
import Browser
import Browser.Events as Events
import Browser.Navigation as Nav
import Dict exposing (Dict)
@ -38,6 +39,7 @@ type Msg
| PlaylistClicked Twitch.Playlist
| VideoClicked Twitch.Playlist Twitch.Video
| UrlReceived Url.Url
| UrlRequested Browser.UrlRequest
| SizeReceived Int Int
@ -166,6 +168,14 @@ update msg model =
in
( Loaded { m | page = page }, Cmd.batch [ cmd, extraCmd ] )
( UrlRequested u, Loaded m ) ->
case u of
Browser.Internal url ->
( model, Nav.pushUrl m.key (Url.toString url) )
Browser.External s ->
( model, Nav.load s )
_ ->
( model, Cmd.none )

View File

@ -13,5 +13,5 @@ main =
, view = Views.view
, subscriptions = Core.subscriptions
, onUrlChange = Core.UrlReceived
, onUrlRequest = \_ -> Core.Noop
, onUrlRequest = Core.UrlRequested
}

12
src/Ui.elm Normal file
View File

@ -0,0 +1,12 @@
module Ui exposing (link)
import Element exposing (Element)
import Element.Input as Input
link : List (Element.Attribute msg) -> { label : Element msg, url : String } -> Element msg
link attr data =
Input.button attr
{ label = Element.link [ Element.width Element.fill, Element.height Element.fill ] data
, onPress = Nothing
}

View File

@ -16,6 +16,7 @@ import Json.Encode as Encode
import Time
import TimeUtils
import Twitch
import Ui
view : Core.FullModel -> Browser.Document Core.Msg
@ -88,14 +89,13 @@ topBar =
homeButton : Element Core.Msg
homeButton =
Input.button
Ui.link
[ Element.padding Consts.homePadding
, Element.height Element.fill
, Element.mouseOver [ Background.color Colors.primaryOver ]
, Font.bold
]
{ label = Element.text Consts.name
, onPress = Just Core.HomeClicked
, url = "/"
}
@ -175,9 +175,13 @@ playlistView playlist =
]
button =
Input.button [ Element.width Element.fill, Element.alignTop ]
Input.button [ Element.width Element.fill ]
{ label =
Ui.link [ Element.width Element.fill, Element.alignTop ]
{ label = display
, onPress = Just (Core.PlaylistClicked playlist)
, url = "/#" ++ playlist.url
}
, onPress = Nothing
}
in
button
@ -253,9 +257,9 @@ videoMiniatureView zone playlist video =
]
button =
Input.button [ Element.width Element.fill, Element.alignTop ]
Ui.link [ Element.width Element.fill, Element.alignTop ]
{ label = display
, onPress = Just (Core.VideoClicked playlist video)
, url = "/#" ++ playlist.url ++ video.url
}
in
button
@ -264,19 +268,6 @@ videoMiniatureView zone playlist video =
videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
videoInList zone playlist activeVideo video =
let
( msg, attr ) =
if video == activeVideo then
( Nothing
, [ Element.width Element.fill
, Background.color Colors.selected
, Border.color Colors.primary
, Border.width 2
]
)
else
( Just (Core.VideoClicked playlist video), [ Element.width Element.fill ] )
label =
Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ]
@ -285,7 +276,20 @@ videoInList zone playlist activeVideo video =
(videoDescription zone video)
]
in
Input.button attr { label = label, onPress = msg }
if video == activeVideo then
Element.el
[ Element.width Element.fill
, Background.color Colors.selected
, Border.color Colors.primary
, Border.width 2
]
label
else
Ui.link [ Element.width Element.fill ]
{ label = label
, url = "/#" ++ playlist.url ++ video.url
}
videoView : Element.Device -> Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg