Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Left-Sidebar updated #64

Merged
merged 7 commits into from
Jun 9, 2021
Merged

[WIP] Left-Sidebar updated #64

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
871e12c
left-sidebar
priyanshu0405 May 30, 2021
c845fd9
left-sidebar updated
priyanshu0405 May 30, 2021
ba5b019
Fix type and use correct el parameters
razzeee May 31, 2021
2f78495
leftsidebar complete
priyanshu0405 Jun 5, 2021
e85160e
rightSidebarmenu model name changed
priyanshu0405 Jun 7, 2021
a7f2633
npm updated
priyanshu0405 Jun 8, 2021
f8a0d45
leftSidebar model updated
priyanshu0405 Jun 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9,896 changes: 18 additions & 9,878 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/Components/Frame.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ layout layoutType =
}
, header = Header.view layoutType.searchChanged
, playerBar = PlayerRow.view layoutType
, rightSidebar = RightSidebar.view layoutType.rightSidebarExtended layoutType.rightSidebarMsg (layoutType.windowHeight - PlayerRow.playerHeight) layoutType.connection
, leftSidebar = LeftSidebar.view
, rightSidebar = RightSidebar.view layoutType.rightSidebarMenu layoutType.rightSidebarExtended layoutType.rightSidebarMsg (layoutType.windowHeight - PlayerRow.playerHeight) layoutType.connection
, leftSidebar = LeftSidebar.view layoutType.leftSidebarControl
, dialogBox = (Dialog.view dialogConfig)
}
40 changes: 37 additions & 3 deletions src/Components/LayoutType.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module Components.LayoutType exposing (DialogType(..), ControlMenu, CurrentlyPlaying, LayoutType, PlayerControl, VolumeAndControls)
module Components.LayoutType exposing (DialogType(..), LeftSidebarControl, RightSidebarMenu, ControlMenu, CurrentlyPlaying, LayoutType, PlayerControl, VolumeAndControls)

import Element exposing (Element)
import Spa.Document exposing (Document)
Expand All @@ -7,6 +7,8 @@ import WSDecoder exposing (Connection, ItemDetails)
type alias LayoutType msg =
{ page : Document msg
, controlMenu : ControlMenu msg
, leftSidebarControl : LeftSidebarControl msg
, rightSidebarMenu : RightSidebarMenu msg
, playerControl : PlayerControl msg
, currentlyPlaying : CurrentlyPlaying msg
, volumeAndControls : VolumeAndControls msg
Expand Down Expand Up @@ -40,7 +42,35 @@ type alias VolumeAndControls msg =
, volumeSlider : Element msg
}


type alias LeftSidebarControl msg =
{ musicHover : Bool
, musicHoverMsg : msg
, musicLeaveMsg : msg
, moviesHover : Bool
, moviesHoverMsg : msg
, moviesLeaveMsg : msg
, tvshowHover : Bool
, tvshowHoverMsg : msg
, tvshowLeaveMsg : msg
, browserHover : Bool
, browserHoverMsg : msg
, browserLeaveMsg : msg
, addonsHover : Bool
, addonsHoverMsg : msg
, addonsLeaveMsg : msg
, thumbsupHover : Bool
, thumbsupHoverMsg : msg
, thumbsupLeaveMsg : msg
, playlistHover : Bool
, playlistHoverMsg : msg
, playlistLeaveMsg : msg
, settingsHover : Bool
, settingsHoverMsg : msg
, settingsLeaveMsg : msg
, helpHover : Bool
, helpHoverMsg : msg
, helpLeaveMsg : msg
}
type alias ControlMenu msg =
{ controlMenu : Bool
, controlMenuMsg : msg
Expand All @@ -49,6 +79,11 @@ type alias ControlMenu msg =
, scanMusicLibraryMsg : msg
}

type alias RightSidebarMenu msg =
{ rightSidebarMenu : Bool
, rightSidebarMenuMsg : msg
}

type alias DialogBox msg =
{ showDialog : DialogType
, attemptReconnectionMsg : msg
Expand All @@ -58,4 +93,3 @@ type alias DialogBox msg =
}

type DialogType = ConnectionDialog | TextInputDialog | None

126 changes: 74 additions & 52 deletions src/Components/LeftSidebar.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,86 +3,108 @@ module Components.LeftSidebar exposing (view)
import Colors
import Element exposing (..)
import Element.Background as Background
import Element.Font as Font
import Element.Events as Events
import Html.Attributes
import Material.Icons as Filled
import Material.Icons.Types as MITypes exposing (Coloring(..), Icon)
import Spa.Generated.Route as Route exposing (Route)


view : Element msg
view =
column [ height fill, centerX, spacing 20, padding 15, alignLeft, htmlAttribute <| Html.Attributes.style "pointer-events" "all" ]
[ musicButton
, movieButton
, tvshowButton
, browserButton
, addonsButton
, thumbsupButton
, playlistButton
, settingsButton
, helpButton
import Components.LayoutType exposing (LeftSidebarControl)


view : LeftSidebarControl msg -> Element msg
view leftSidebarControl =
column [ height fill, centerX, alignLeft, htmlAttribute <| Html.Attributes.style "pointer-events" "all" ]
[ el [height (px 20)] (text "" )
, musicButton leftSidebarControl
, movieButton leftSidebarControl
, tvshowButton leftSidebarControl
, browserButton leftSidebarControl
, addonsButton leftSidebarControl
, thumbsupButton leftSidebarControl
, playlistButton leftSidebarControl
, settingsButton leftSidebarControl
, helpButton leftSidebarControl
]


materialIconLink : ( Icon msg, Route ) -> Element msg
materialIconLink ( icon, route ) =
el
[ Element.mouseOver
[ scale 1.1
, Background.color Colors.brandPrimary
]
]
<|
Element.link []
materialIconLink : Bool -> msg -> msg -> String -> Icon msg -> Route -> Element msg
materialIconLink elementHover elementHoverMsg elementLeaveMsg name icon route =
let
leftSidebarIcon =
case elementHover of
True ->
row[]
[el [paddingXY 7 0] (Element.html (icon 20 Inherit))
, el [paddingXY 5 0, Font.size 14] (text name)
]

False ->
el [paddingXY 7 0] (Element.html (icon 20 Inherit))

leftSidebarIconStyle =
case elementHover of
True ->
[Background.color Colors.brandPrimary, Font.color (rgb255 255 255 255), padding 8]

False ->
[Font.color (rgb255 0 0 0), padding 8]
in
el []

(Element.link (Events.onMouseEnter elementHoverMsg
:: Events.onMouseLeave elementLeaveMsg
:: leftSidebarIconStyle)
{ url = Route.toString route
, label = Element.html (icon 20 (MITypes.Color <| (Colors.fromElementColorToColor <| Colors.greyscaleOuterSpace)))
, label = leftSidebarIcon
}
)



-- buttons


musicButton : Element msg
musicButton =
materialIconLink ( Filled.library_music, Route.Music )
musicButton : LeftSidebarControl msg -> Element msg
musicButton leftSidebarControl =
materialIconLink leftSidebarControl.musicHover leftSidebarControl.musicHoverMsg leftSidebarControl.musicLeaveMsg "Music" Filled.library_music Route.Music


movieButton : Element msg
movieButton =
materialIconLink ( Filled.movie, Route.Movies__Recent )
movieButton : LeftSidebarControl msg -> Element msg
movieButton leftSidebarControl =
materialIconLink leftSidebarControl.moviesHover leftSidebarControl.moviesHoverMsg leftSidebarControl.moviesLeaveMsg "Movies" Filled.movie Route.Movies__Recent


tvshowButton : Element msg
tvshowButton =
materialIconLink ( Filled.tv, Route.Tvshows__Recent )
tvshowButton : LeftSidebarControl msg -> Element msg
tvshowButton leftSidebarControl =
materialIconLink leftSidebarControl.tvshowHover leftSidebarControl.tvshowHoverMsg leftSidebarControl.tvshowLeaveMsg "TV shows" Filled.tv Route.Tvshows__Recent


browserButton : Element msg
browserButton =
materialIconLink ( Filled.list, Route.Browser )
browserButton : LeftSidebarControl msg -> Element msg
browserButton leftSidebarControl =
materialIconLink leftSidebarControl.browserHover leftSidebarControl.browserHoverMsg leftSidebarControl.browserLeaveMsg "Browser" Filled.list Route.Browser


addonsButton : Element msg
addonsButton =
materialIconLink ( Filled.extension, Route.Addons )
addonsButton : LeftSidebarControl msg -> Element msg
addonsButton leftSidebarControl =
materialIconLink leftSidebarControl.addonsHover leftSidebarControl.addonsHoverMsg leftSidebarControl.addonsLeaveMsg "Add-ons" Filled.extension Route.Addons


thumbsupButton : Element msg
thumbsupButton =
materialIconLink ( Filled.thumb_up, Route.Thumbsup )
thumbsupButton : LeftSidebarControl msg -> Element msg
thumbsupButton leftSidebarControl =
materialIconLink leftSidebarControl.thumbsupHover leftSidebarControl.thumbsupHoverMsg leftSidebarControl.thumbsupLeaveMsg "Thumbs up" Filled.thumb_up Route.Thumbsup


playlistButton : Element msg
playlistButton =
materialIconLink ( Filled.assignment, Route.Playlists )
playlistButton : LeftSidebarControl msg -> Element msg
playlistButton leftSidebarControl =
materialIconLink leftSidebarControl.playlistHover leftSidebarControl.playlistHoverMsg leftSidebarControl.playlistLeaveMsg "Playlists" Filled.assignment Route.Playlists


settingsButton : Element msg
settingsButton =
materialIconLink ( Filled.settings, Route.Settings__Web )
settingsButton : LeftSidebarControl msg -> Element msg
settingsButton leftSidebarControl =
materialIconLink leftSidebarControl.settingsHover leftSidebarControl.settingsHoverMsg leftSidebarControl.settingsLeaveMsg "Settings" Filled.settings Route.Settings__Web


helpButton : Element msg
helpButton =
materialIconLink ( Filled.help, Route.Help )
helpButton : LeftSidebarControl msg -> Element msg
helpButton leftSidebarControl =
materialIconLink leftSidebarControl.helpHover leftSidebarControl.helpHoverMsg leftSidebarControl.helpLeaveMsg "Help" Filled.help Route.Help
31 changes: 25 additions & 6 deletions src/Components/RightSidebar.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
module Components.RightSidebar exposing (view)

import Colors exposing (greyIcon)
import Element exposing (Element, alignRight, centerX, column, el, fill, height, htmlAttribute, padding, paddingXY, px, rgb, row, spacing, text, width)
import Components.LayoutType exposing (RightSidebarMenu)
import Element exposing (Attribute, Element, alignRight, centerX, centerY, column, el, fill, height, htmlAttribute, padding, paddingXY, px, rgb, row, spacing, text, width)
import Element.Background as Background
import Element.Input as Input
import Html.Attributes
Expand All @@ -10,15 +11,15 @@ import Material.Icons.Types as MITypes
import WSDecoder exposing (Connection(..))


view : Bool -> msg -> Int -> Connection -> Element msg
view rightSidebarExtended rightSidebarMsg panelHeight connection =
view : RightSidebarMenu msg -> Bool -> msg -> Int -> Connection -> Element msg
view { rightSidebarMenu, rightSidebarMenuMsg } rightSidebarExtended rightSidebarMsg panelHeight connection =
if rightSidebarExtended then
column
[ height (px panelHeight), width (px 400), Background.color Colors.playlistHeaderBackground, alignRight, htmlAttribute <| Html.Attributes.style "pointer-events" "all" ]
[ row [ width fill ]
[ Input.button [ Background.color Colors.backgroundKodi, height (px 50), width (px 100), padding 8 ] { onPress = Just rightSidebarMsg, label = Element.text "Kodi" }
, Input.button [ Background.color Colors.backgroundLocal, height (px 50), width (px 100), padding 8 ] { onPress = Just rightSidebarMsg, label = Element.text "Local" }
, el []
, el (rightSidebarMenuDropDown rightSidebarMenu)
(case connection of
Connected ->
Element.text "Connected"
Expand All @@ -29,8 +30,8 @@ view rightSidebarExtended rightSidebarMsg panelHeight connection =
NotAsked ->
Element.text "Not asked"
)
, Input.button [ Background.color Colors.playlistHeaderBackground, height (px 50), width (px 50), centerX, alignRight ]
{ onPress = Just rightSidebarMsg
, Input.button ( [ Background.color Colors.playlistHeaderBackground, height (px 50), width (px 50), centerX, alignRight, centerY ])
{ onPress = Just rightSidebarMenuMsg
, label =
Element.html
(Filled.more_vert 32 (MITypes.Color <| greyIcon))
Expand All @@ -45,3 +46,21 @@ view rightSidebarExtended rightSidebarMsg panelHeight connection =
[ height (px panelHeight), width (px 50), Background.color Colors.playlistBackground, alignRight, htmlAttribute <| Html.Attributes.style "pointer-events" "all" ]
[ Input.button [ centerX, height (px 50) ] { onPress = Just rightSidebarMsg, label = Element.text "<" }
]

rightSidebarMenuDropDown : Bool -> List (Attribute msg)
rightSidebarMenuDropDown rightSidebarMenu =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be good to name rightSidebarMenu something along the lines of isRightSidebarMenuVisible or showRightSidebarMenu. As it was very unclear to me, what this variable was about, when I saw it in the other places that the name is used.

if rightSidebarMenu then
[ Element.below
(Element.column [ width (px 150), Background.color Colors.white ]
[ Input.button [ width fill, Element.mouseOver [ Background.color Colors.playerControl ], Element.padding 7 ] {onPress = Nothing, label = el [] (text "Current playlist") }
, Input.button [ width fill, Element.mouseOver [ Background.color Colors.playerControl ], Element.padding 7 ] {onPress = Nothing, label = el [] (text "Clear playlist") }
, Input.button [ width fill, Element.mouseOver [ Background.color Colors.playerControl ], Element.padding 7 ] {onPress = Nothing, label = el [] (text "Refresh playlist") }
, Input.button [ width fill, Element.mouseOver [ Background.color Colors.playerControl ], Element.padding 7 ] {onPress = Nothing, label = el [] (text "Party mode") }
, Input.button [ width fill, Element.mouseOver [ Background.color Colors.playerControl ], Element.padding 7 ] {onPress = Nothing, label = el [] (text "Kodi") }
, Input.button [ width fill, Element.mouseOver [ Background.color Colors.playerControl ], Element.padding 7 ] {onPress = Nothing, label = el [] (text "Save Kodi playlist") }
]
)
]

else
[]
Loading