Commit e1a1b42a authored by marianarlt's avatar marianarlt

Improved Keyboard Navigation

parent 9cbdbc22
# Changelog
## [1.3] - 2019-10-04
### Fixed
- The Login button can now be activated with Return/Enter keys
### Added
- Up/Down arrow keys now intuitively navigate through the whole interface
- Enter/Return keys can be used to login directly from within the username and password fields
## [1.2] - 2019-07-15
### Added
- Option to completely hide and disable power buttons
......@@ -8,5 +16,5 @@
### Added
- Full support for the Qt Virtual Keyboard
## Changed
### Changed
- "Show Password" check box label now the same size as rest of secondary UI elements
\ No newline at end of file
/Assets/User.svgz by Baboon designs
from the Noun Project: https://thenounproject.com/baboondesigns/collection/user-icons/?i=839017
CCBY (https://creativecommons.org/licenses/by/4.0)
Exploding Lava Illustration from https://alpha.wallhaven.cc/wallpaper/629944
License unknown - Please contact the theme creator immediately if you find the original source with license details.
/Illustration.svg by Katerina Limpitsouni
from https://undraw.co/
MIT (https://opensource.org/licenses/MIT)
/Preview.jpg is based on a mockup created by Qeaql-studio - Freepik.com
https://www.freepik.com/free-photos-vectors/mockup
......@@ -26,7 +26,7 @@ Column {
id: inputContainer
Layout.fillWidth: true
property Control exposeLogin: loginButton
property Control exposeSession: sessionSelect.exposeSession
property bool failed
Item {
......@@ -43,6 +43,16 @@ Column {
width: parent.height
height: parent.height
anchors.left: parent.left
property var popkey: config.ForceRightToLeft == "true" ? Qt.Key_Right : Qt.Key_Left
Keys.onPressed: {
if (event.key == Qt.Key_Down && !popup.opened)
username.forceActiveFocus();
if ((event.key == Qt.Key_Up || event.key == popkey) && !popup.opened)
popup.open();
}
KeyNavigation.down: username
KeyNavigation.right: username
z: 2
model: userModel
......@@ -144,7 +154,7 @@ Column {
},
State {
name: "focused"
when: selectUser.visualFocus
when: selectUser.activeFocus
PropertyChanges {
target: usernameIcon
icon.color: root.palette.highlight
......@@ -180,7 +190,7 @@ Column {
border.width: parent.activeFocus ? 2 : 1
radius: config.RoundCorners || 0
}
Keys.onReturnPressed: loginButton.clicked()
onAccepted: loginButton.clicked()
KeyNavigation.down: password
z: 1
......@@ -227,7 +237,7 @@ Column {
border.width: parent.activeFocus ? 2 : 1
radius: config.RoundCorners || 0
}
Keys.onReturnPressed: loginButton.clicked()
onAccepted: loginButton.clicked()
KeyNavigation.down: revealSecret
}
......@@ -277,7 +287,7 @@ Column {
implicitWidth: root.font.pointSize
color: "transparent"
border.color: root.palette.text
border.width: parent.visualFocus ? 2 : 1
border.width: parent.activeFocus ? 2 : 1
Rectangle {
id: dot
anchors.centerIn: parent
......@@ -300,13 +310,14 @@ Column {
}
Keys.onReturnPressed: toggle()
Keys.onEnterPressed: toggle()
KeyNavigation.down: loginButton
background: Rectangle {
color: "transparent"
border.width: parent.visualFocus ? 1 : 0
border.color: parent.visualFocus ? root.palette.text : "transparent"
height: parent.visualFocus ? 2 : 0
border.width: parent.activeFocus ? 1 : 0
border.color: parent.activeFocus ? root.palette.text : "transparent"
height: parent.activeFocus ? 2 : 0
width: (indicator.width + indicatorLabel.contentWidth + indicatorLabel.anchors.leftMargin + 2)
anchors.top: indicatorLabel.bottom
anchors.left: parent.left
......@@ -358,7 +369,7 @@ Column {
},
State {
name: "focused"
when: revealSecret.visualFocus
when: revealSecret.activeFocus
PropertyChanges {
target: indicatorLabel
color: root.palette.highlight
......@@ -490,10 +501,10 @@ Column {
},
State {
name: "focused"
when: loginButton.visualFocus
when: loginButton.activeFocus
PropertyChanges {
target: buttonBackground
color: Qt.lighter(root.palette.highlight, 1.1)
color: Qt.lighter(root.palette.highlight, 1.2)
opacity: 1
}
PropertyChanges {
......@@ -525,8 +536,10 @@ Column {
}
]
Keys.onReturnPressed: clicked()
onClicked: sddm.login(username.text, password.text, sessionSelect.selectedSession)
Keys.onReturnPressed: clicked()
Keys.onEnterPressed: clicked()
KeyNavigation.down: sessionSelect.exposeSession
}
}
......
......@@ -52,7 +52,7 @@ ColumnLayout {
Layout.preferredHeight: root.height / 4
Layout.maximumHeight: root.height / 4
Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
exposedLogin: input.exposeLogin
exposedSession: input.exposeSession
}
}
......@@ -30,12 +30,29 @@ Item {
property var selectedSession: selectSession.currentIndex
property string textConstantSession
property int loginButtonWidth
property Control exposeSession: selectSession
ComboBox {
id: selectSession
hoverEnabled: true
anchors.left: parent.left
Keys.onPressed: {
if (event.key == Qt.Key_Up && loginButton.state != "enabled" && !popup.opened)
revealSecret.focus = true,
revealSecret.state = "focused",
currentIndex = currentIndex + 1;
if (event.key == Qt.Key_Up && loginButton.state == "enabled" && !popup.opened)
loginButton.focus = true,
loginButton.state = "focused",
currentIndex = currentIndex + 1;
if (event.key == Qt.Key_Down && !popup.opened)
systemButtons.children[0].focus = true,
systemButtons.children[0].state = "focused",
currentIndex = currentIndex - 1;
if ((event.key == Qt.Key_Left || event.key == Qt.Key_Right) && !popup.opened)
popup.open();
}
model: sessionModel
currentIndex: model.lastIndex
......@@ -69,6 +86,7 @@ Item {
anchors.left: parent.left
anchors.leftMargin: 3
font.pointSize: root.font.pointSize * 0.8
Keys.onReleased: parent.popup.open()
}
background: Rectangle {
......
......@@ -30,14 +30,14 @@ RowLayout {
property var reboot: ["Reboot", config.TranslateReboot || textConstants.reboot, sddm.canReboot]
property var shutdown: ["Shutdown", config.TranslateShutdown || textConstants.shutdown, sddm.canPowerOff]
property Control exposedLogin
property Control exposedSession
Repeater {
id: systemButtons
model: [suspend, hibernate, reboot, shutdown]
RoundButton {
id: icon
text: modelData[1]
font.pointSize: root.font.pointSize * 0.8
Layout.alignment: Qt.AlignHCenter
......@@ -52,7 +52,7 @@ RowLayout {
height: 2
color: "transparent"
width: parent.width
border.width: parent.visualFocus ? 1 : 0
border.width: parent.activeFocus ? 1 : 0
border.color: "transparent"
anchors.top: parent.bottom
}
......@@ -61,8 +61,8 @@ RowLayout {
parent.forceActiveFocus()
index == 0 ? sddm.suspend() : index == 1 ? sddm.hibernate() : index == 2 ? sddm.reboot() : sddm.powerOff()
}
KeyNavigation.up: exposedLogin
KeyNavigation.left: index == 0 ? exposedLogin : parent.children[index-1]
KeyNavigation.up: exposedSession
KeyNavigation.left: parent.children[index-1]
states: [
State {
......@@ -91,7 +91,7 @@ RowLayout {
},
State {
name: "focused"
when: parent.children[index].visualFocus
when: parent.children[index].activeFocus
PropertyChanges {
target: parent.children[index]
palette.buttonText: root.palette.highlight
......
......@@ -5,7 +5,7 @@ Author=Marian Arlt
Copyright=Copyright (C) 2018 Marian Arlt
License=GPL-3.0-or-later
Type=sddm-theme
Version=1.2
Version=1.3
Website=https://framagit.org/MarianArlt/sddm-sugar-candy
Screenshot=Previews/PartialBlur.png
MainScript=Main.qml
......@@ -13,4 +13,4 @@ ConfigFile=theme.conf
TranslationsDirectory=translations
Email=marianarlt@icloud.com
Theme-Id=sugar-candy
Theme-API=2.11
\ No newline at end of file
Theme-API=2.11
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment