diff --git a/ImageButton.qml b/ImgButton.qml similarity index 100% rename from ImageButton.qml rename to ImgButton.qml diff --git a/LoginFrame.qml b/LoginFrame.qml index 27d2e75..e33fbb7 100644 --- a/LoginFrame.qml +++ b/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) diff --git a/Main.qml b/Main.qml index 57cd731..7c3e18c 100644 --- a/Main.qml +++ b/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" diff --git a/PowerFrame.qml b/PowerFrame.qml index ecbbe36..395e65a 100644 --- a/PowerFrame.qml +++ b/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" diff --git a/SessionFrame.qml b/SessionFrame.qml index 85a7c92..a157ae9 100644 --- a/SessionFrame.qml +++ b/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 diff --git a/UserFrame.qml b/UserFrame.qml index 2b84eb3..ecdf41d 100644 --- a/UserFrame.qml +++ b/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 diff --git a/icons/angle-left.png b/icons/angle-left.png new file mode 100644 index 0000000..f57eadd Binary files /dev/null and b/icons/angle-left.png differ diff --git a/icons/angle-right.png b/icons/angle-right.png new file mode 100644 index 0000000..675702b Binary files /dev/null and b/icons/angle-right.png differ