Support view scroll and rename ImageButton to ImgButton to avoid conflics

LoginFrame.qml

@@ -119,15 +119,16 @@ Item {
 
                     KeyNavigation.backtab: userButton; KeyNavigation.tab: shutdownButton
                 }
-                ImageButton {
+                ImgButton {
                     id: loginButton
                     anchors {
                         right: parent.right
                         verticalCenter: parent.verticalCenter
                     }
 
-                    // Fixme, This is vary strange
-                    source: "icons/login_normal.png"
+                    normalImg: "icons/login_normal.png"
+                    hoverImg: "icons/login_normal.png"
+                    pressImg: "icons/login_press.png"
                     onClicked: {
                         glowAnimation.running = true
                         sddm.login(userNameText.text, passwdInput.text, sessionIndex)

Main.qml

@@ -216,35 +216,37 @@ Rectangle {
                 anchors.rightMargin: hMargin
                 anchors.verticalCenter: parent.verticalCenter
 
-                ImageButton {
+                ImgButton {
                     id: sessionButton
                     width: m_powerButtonSize
                     height: m_powerButtonSize
                     visible: sessionFrame.isMultipleSessions()
-                    source: sessionFrame.getCurrentSessionIconIndicator()
+                    normalImg: sessionFrame.getCurrentSessionIconIndicator()
                     onClicked: root.state = "stateSession"
                 }
 
-                ImageButton {
+                ImgButton {
                     id: userButton
                     width: m_powerButtonSize
                     height: m_powerButtonSize
                     visible: userFrame.isMultipleUsers()
 
-                    source: "icons/switchframe/userswitch_normal.png"
+                    normalImg: "icons/switchframe/userswitch_normal.png"
+                    hoverImg: "icons/switchframe/userswitch_hover.png"
+                    pressImg: "icons/switchframe/userswitch_press.png"
                     onClicked: {
                         console.log("Switch User...")
                         root.state = "stateUser"
                     }
                 }
 
-                ImageButton {
+                ImgButton {
                     id: shutdownButton
                     width: m_powerButtonSize
                     height: m_powerButtonSize
                     visible: true//sddm.canPowerOff
 
-                    source: "icons/switchframe/powermenu.png"
+                    normalImg: "icons/switchframe/powermenu.png"
                     onClicked: {
                         console.log("Show shutdown menu")
                         root.state = "statePower"

PowerFrame.qml

@@ -17,7 +17,7 @@ Item {
             width: 100
             height: 150
 
-            ImageButton {
+            ImgButton {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 normalImg: "icons/powerframe/shutdown_normal.png"
@@ -41,7 +41,7 @@ Item {
             width: 100
             height: 150
 
-            ImageButton {
+            ImgButton {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 normalImg: "icons/powerframe/restart_normal.png"
@@ -65,7 +65,7 @@ Item {
             width: 100
             height: 150
 
-            ImageButton {
+            ImgButton {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 normalImg: "icons/powerframe/suspend_normal.png"

SessionFrame.qml

@@ -6,6 +6,8 @@ Item {
     signal selected(var index)
     signal needClose()
 
+    readonly property int m_viewMaxWidth: frame.width - prevSession.width - nextSession.width - 230;
+    property bool shouldShowBG: false
     property var sessionTypeList: ["deepin", "enlightenment", "fluxbox", "gnome", "kde", "lxde", "ubuntu"]
     function getIconName(sessionName) {
         for (var item in sessionTypeList) {
@@ -27,21 +29,47 @@ Item {
         return sessionList.count > 1
     }
 
+    onOpacityChanged: {
+        shouldShowBG = false
+    }
+
+    ImgButton {
+        id: prevSession
+        visible: sessionList.childrenRect.width > m_viewMaxWidth
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: 10
+        normalImg: "icons/angle-left.png"
+        onClicked: {
+            sessionList.decrementCurrentIndex()
+            shouldShowBG = true
+        }
+//        KeyNavigation.backtab: btnShutdown; KeyNavigation.tab: listView
+    }
+
     ListView {
         id: sessionList
         anchors.centerIn: parent
-        width: childrenRect.width
-        height: 80
+        width:  childrenRect.width > m_viewMaxWidth ? m_viewMaxWidth : childrenRect.width
+        height: 150
+        clip: true
         model: sessionModel
         currentIndex: sessionModel.lastIndex
         orientation: ListView.Horizontal
-        delegate: Item {
+        spacing: 10
+        delegate: Rectangle {
             property string iconIndicator: iconButton.indicator
+            property bool activeBG: sessionList.currentIndex === index && shouldShowBG
 
-            width: 250
+            border.width: 3
+            border.color: activeBG ? "#33ffffff" : "transparent"
+            radius: 8
+            color: activeBG ? "#55000000" : "transparent"
+
+            width: 230
             height: 150
 
-            ImageButton {
+            ImgButton {
                 id: iconButton
                 anchors.top: parent.top
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -73,6 +101,20 @@ Item {
         }
     }
 
+    ImgButton {
+        id: nextSession
+        visible: sessionList.childrenRect.width > m_viewMaxWidth
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: 10
+        normalImg: "icons/angle-right.png"
+        onClicked: {
+            sessionList.incrementCurrentIndex()
+            shouldShowBG = true
+        }
+//        KeyNavigation.backtab: listView; KeyNavigation.tab: session
+    }
+
     MouseArea {
         z: -1
         anchors.fill: parent

UserFrame.qml

@@ -6,25 +6,54 @@ Item {
     signal selected(var userName)
     signal needClose()
 
+    readonly property int m_viewMaxWidth: frame.width - prevUser.width - nextUser.width - 130
     property string currentIconPath: usersList.currentItem.iconPath
     property string currentUserName: usersList.currentItem.userName
+    property bool shouldShowBG: false
 
     function isMultipleUsers() {
         return usersList.count > 1
     }
 
+    onOpacityChanged: {
+        shouldShowBG = false
+    }
+
+    ImgButton {
+        id: prevUser
+        visible: usersList.childrenRect.width > m_viewMaxWidth
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: 10
+        normalImg: "icons/angle-left.png"
+        onClicked: {
+            usersList.decrementCurrentIndex()
+            shouldShowBG = true
+        }
+//        KeyNavigation.backtab: btnShutdown; KeyNavigation.tab: listView
+    }
+
     ListView {
         id: usersList
         anchors.centerIn: parent
-        width: childrenRect.width
-        height: 80
+        width: childrenRect.width > m_viewMaxWidth ? m_viewMaxWidth : childrenRect.width
+        height: 150
         model: userModel
+        clip: true
+        spacing: 10
         orientation: ListView.Horizontal
-        delegate: Item {
+
+        delegate: Rectangle {
             property string iconPath: icon
             property string userName: nameText.text
+            property bool activeBG: usersList.currentIndex === index && shouldShowBG
 
-            width: 150
+            border.width: 3
+            border.color: activeBG ? "#33ffffff" : "transparent"
+            radius: 8
+            color: activeBG ? "#55000000" : "transparent"
+
+            width: 130
             height: 150
 
             UserAvatar {
@@ -65,6 +94,20 @@ Item {
         }
     }
 
+    ImgButton {
+        id: nextUser
+        visible: usersList.childrenRect.width > m_viewMaxWidth
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: 10
+        normalImg: "icons/angle-right.png"
+        onClicked: {
+            usersList.incrementCurrentIndex()
+            shouldShowBG = true
+        }
+//        KeyNavigation.backtab: listView; KeyNavigation.tab: session
+    }
+
     MouseArea {
         z: -1
         anchors.fill: parent