[WIP] Left-Sidebar updated

elm.json

@@ -7,7 +7,7 @@
     "dependencies": {
         "direct": {
             "NoRedInk/elm-json-decode-pipeline": "1.0.0",
-            "PaackEng/elm-ui-dialog": "1.0.0",
+            "PaackEng/elm-ui-dialog": "1.0.1",
             "avh4/elm-color": "1.0.0",
             "carwow/elm-slider": "11.1.6",
             "elm/browser": "1.0.2",
@@ -18,7 +18,7 @@
             "elm/svg": "1.0.1",
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
-            "elm-community/list-extra": "8.3.0",
+            "elm-community/list-extra": "8.3.1",
             "icidasset/elm-material-icons": "7.0.0",
             "mdgriffith/elm-ui": "1.1.8"
         },
@@ -32,7 +32,7 @@
     },
     "test-dependencies": {
         "direct": {
-            "avh4/elm-program-test": "3.4.0",
+            "avh4/elm-program-test": "3.5.0",
             "elm-explorations/test": "1.2.2"
         },
         "indirect": {

src/Components/Frame.elm

@@ -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.showRightSidebarMenu layoutType.rightSidebarExtended layoutType.rightSidebarMsg (layoutType.windowHeight - PlayerRow.playerHeight) layoutType.connection
+    , leftSidebar = LeftSidebar.view layoutType.leftSidebarControl
     , dialogBox = (Dialog.view dialogConfig)
     }

src/Components/LayoutType.elm

@@ -1,12 +1,14 @@
-module Components.LayoutType exposing (DialogType(..), ControlMenu, CurrentlyPlaying, LayoutType, PlayerControl, VolumeAndControls)
+module Components.LayoutType exposing (DialogType(..), LeftSidebarControl, ShowRightSidebarMenu, ControlMenu, CurrentlyPlaying, LayoutType, PlayerControl, VolumeAndControls)
 
 import Element exposing (Element)
 import Spa.Document exposing (Document)
-import WSDecoder exposing (Connection, ItemDetails)
+import WSDecoder exposing (LeftSidebarMenuHover, Connection, ItemDetails)
 
 type alias LayoutType msg =
     { page : Document msg
     , controlMenu : ControlMenu msg
+    , leftSidebarControl : LeftSidebarControl msg
+    , showRightSidebarMenu : ShowRightSidebarMenu msg
     , playerControl : PlayerControl msg
     , currentlyPlaying : CurrentlyPlaying msg
     , volumeAndControls : VolumeAndControls msg
@@ -40,6 +42,19 @@ type alias VolumeAndControls msg =
     , volumeSlider : Element msg
     }
 
+type alias LeftSidebarControl msg =
+    { leftSidebarMenuHover : LeftSidebarMenuHover
+    , leftSidebarMusicHoverMsg : msg
+    , leftSidebarMoviesHoverMsg : msg
+    , leftSidebarTVShowHoverMsg : msg
+    , leftSidebarAddonsHoverMsg : msg
+    , leftSidebarPlaylistHoverMsg : msg
+    , leftSidebarBrowserHoverMsg : msg
+    , leftSidebarSettingsHoverMsg : msg
+    , leftSidebarThumbsUpHoverMsg : msg
+    , leftSidebarHelpHoverMsg : msg
+    , leftSidebarNotHoverMsg : msg
+    }
 
 type alias ControlMenu msg =
     { controlMenu : Bool
@@ -49,6 +64,11 @@ type alias ControlMenu msg =
     , scanMusicLibraryMsg : msg
     }
 
+type alias ShowRightSidebarMenu msg =
+    { showRightSidebarMenu : Bool
+    , showRightSidebarMenuMsg : msg
+    }
+
 type alias DialogBox msg =
     { showDialog : DialogType
     , attemptReconnectionMsg : msg
@@ -58,4 +78,3 @@ type alias DialogBox msg =
     }
 
 type DialogType = ConnectionDialog | TextInputDialog | None
-

src/Components/LeftSidebar.elm

@@ -3,86 +3,107 @@ 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)
+import Components.LayoutType exposing (LeftSidebarControl)
+import WSDecoder exposing (LeftSidebarMenuHover(..))
+
+
+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
+        ]
 
 
-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
-        ]
+materialIconLink : LeftSidebarMenuHover -> msg -> msg -> LeftSidebarMenuHover -> String -> Icon msg -> Route -> Element msg
+materialIconLink  elementHover elementHoverMsg elementLeaveMsg iconHoverName name icon route =
+    let
+      leftSidebarIcon =
+        if elementHover == iconHoverName then
+                row[]
+                [el [paddingXY 7 0] (Element.html (icon 20 Inherit))
+                , el [paddingXY 5 0, Font.size 14] (text name)
+                ]
 
+            else
+                el [paddingXY 7 0] (Element.html (icon 20 Inherit))
 
-materialIconLink : ( Icon msg, Route ) -> Element msg
-materialIconLink ( icon, route ) =
-    el
-        [ Element.mouseOver
-            [ scale 1.1
-            , Background.color Colors.brandPrimary
-            ]
-        ]
-    <|
-        Element.link []
+      leftSidebarIconStyle =
+        if elementHover == iconHoverName then
+            [Background.color Colors.brandPrimary, Font.color (rgb255 255 255 255), padding 8]
+
+          else
+            [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.leftSidebarMenuHover leftSidebarControl.leftSidebarMusicHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Music "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.leftSidebarMenuHover leftSidebarControl.leftSidebarMoviesHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Movies "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.leftSidebarMenuHover leftSidebarControl.leftSidebarTVShowHoverMsg leftSidebarControl.leftSidebarNotHoverMsg TVShow "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.leftSidebarMenuHover leftSidebarControl.leftSidebarBrowserHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Browser "Browser" Filled.list Route.Browser
 
 
-addonsButton : Element msg
-addonsButton =
-    materialIconLink ( Filled.extension, Route.Addons )
+addonsButton : LeftSidebarControl msg -> Element msg
+addonsButton leftSidebarControl =
+    materialIconLink leftSidebarControl.leftSidebarMenuHover leftSidebarControl.leftSidebarAddonsHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Addons "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.leftSidebarMenuHover leftSidebarControl.leftSidebarThumbsUpHoverMsg leftSidebarControl.leftSidebarNotHoverMsg ThumbsUp "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.leftSidebarMenuHover leftSidebarControl.leftSidebarPlaylistHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Playlist "Playlists" Filled.assignment Route.Playlists
 
 
-settingsButton : Element msg
-settingsButton =
-    materialIconLink ( Filled.settings, Route.Settings__Web )
+settingsButton : LeftSidebarControl msg -> Element msg
+settingsButton leftSidebarControl =
+    materialIconLink leftSidebarControl.leftSidebarMenuHover leftSidebarControl.leftSidebarSettingsHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Settings "Settings" Filled.settings Route.Settings__Web
 
 
-helpButton : Element msg
-helpButton =
-    materialIconLink ( Filled.help, Route.Help )
+helpButton : LeftSidebarControl msg -> Element msg
+helpButton leftSidebarControl =
+    materialIconLink leftSidebarControl.leftSidebarMenuHover leftSidebarControl.leftSidebarHelpHoverMsg leftSidebarControl.leftSidebarNotHoverMsg Help "Help" Filled.help Route.Help

src/Components/RightSidebar.elm

@@ -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 (ShowRightSidebarMenu)
+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
@@ -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 : ShowRightSidebarMenu msg -> Bool -> msg -> Int -> Connection -> Element msg
+view { showRightSidebarMenu, showRightSidebarMenuMsg } 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 showRightSidebarMenu)
                     (case connection of
                         Connected ->
                             Element.text "Connected"
@@ -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 showRightSidebarMenuMsg
                     , label =
                         Element.html
                             (Filled.more_vert 32 (MITypes.Color <| greyIcon))
@@ -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 showRightSidebarMenu =
+    if showRightSidebarMenu 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
+        []