mirror of
https://github.com/cmclark00/retro-imager.git
synced 2025-05-18 07:55:21 +01:00
Make buttons blue on keyboard navigation
- Make buttons blue when they have activeFocus to make it more clear which button has focus when using keyboard navation. - By default most components only respond to 'space' on keyboard for pressing buttons and toggling checkboxes. Map Enter/Return (normal and keypad) as well.
This commit is contained in:
Floris Bos
parent
d91f8d95b1
commit
c1234d2ea2
8 changed files with 99 additions and 79 deletions
32
MsgPopup.qml
32
MsgPopup.qml
|
|
@ -7,6 +7,7 @@ import QtQuick 2.9
|
|||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import "qmlcomponents"
|
||||
|
||||
Popup {
|
||||
id: msgpopup
|
||||
|
|
@ -93,54 +94,47 @@ Popup {
|
|||
Layout.bottomMargin: 10
|
||||
spacing: 20
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("NO")
|
||||
onClicked: {
|
||||
msgpopup.close()
|
||||
msgpopup.no()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
visible: msgpopup.noButton
|
||||
Accessible.onPressAction: clicked()
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("YES")
|
||||
onClicked: {
|
||||
msgpopup.close()
|
||||
msgpopup.yes()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
visible: msgpopup.yesButton
|
||||
Accessible.onPressAction: clicked()
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("CONTINUE")
|
||||
onClicked: {
|
||||
msgpopup.close()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
visible: msgpopup.continueButton
|
||||
Accessible.onPressAction: clicked()
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("QUIT")
|
||||
onClicked: {
|
||||
Qt.quit()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
visible: msgpopup.quitButton
|
||||
Accessible.onPressAction: clicked()
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
}
|
||||
|
||||
Text { text: " " }
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import QtQuick 2.9
|
|||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import "qmlcomponents"
|
||||
|
||||
Popup {
|
||||
id: popup
|
||||
|
|
@ -112,12 +113,12 @@ Popup {
|
|||
ColumnLayout {
|
||||
spacing: -10
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkOverscan
|
||||
text: qsTr("Disable overscan")
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkHostname
|
||||
text: qsTr("Set hostname:")
|
||||
onCheckedChanged: {
|
||||
|
|
@ -136,7 +137,7 @@ Popup {
|
|||
color: chkHostname.checked ? "black" : "grey"
|
||||
}
|
||||
}
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkSSH
|
||||
text: qsTr("Enable SSH")
|
||||
onCheckedChanged: {
|
||||
|
|
@ -158,7 +159,7 @@ Popup {
|
|||
Layout.leftMargin: 40
|
||||
spacing: -10
|
||||
|
||||
RadioButton {
|
||||
ImRadioButton {
|
||||
id: radioPasswordAuthentication
|
||||
text: qsTr("Use password authentication")
|
||||
onCheckedChanged: {
|
||||
|
|
@ -168,7 +169,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
}
|
||||
RadioButton {
|
||||
ImRadioButton {
|
||||
id: radioPubKeyAuthentication
|
||||
text: qsTr("Allow public-key authentication only")
|
||||
onCheckedChanged: {
|
||||
|
|
@ -195,7 +196,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkSetUser
|
||||
text: qsTr("Set username and password")
|
||||
onCheckedChanged: {
|
||||
|
|
@ -256,7 +257,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkWifi
|
||||
text: qsTr("Configure wifi")
|
||||
onCheckedChanged: {
|
||||
|
|
@ -289,7 +290,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkWifiSSIDHidden
|
||||
Layout.columnSpan: 2
|
||||
text: qsTr("Hidden SSID")
|
||||
|
|
@ -310,7 +311,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkShowPassword
|
||||
Layout.columnSpan: 2
|
||||
text: qsTr("Show password")
|
||||
|
|
@ -327,7 +328,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkLocale
|
||||
text: qsTr("Set locale settings")
|
||||
}
|
||||
|
|
@ -357,7 +358,7 @@ Popup {
|
|||
editable: true
|
||||
Layout.minimumWidth: 200
|
||||
}
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkSkipFirstUse
|
||||
text: qsTr("Skip first-run wizard")
|
||||
}
|
||||
|
|
@ -372,15 +373,15 @@ Popup {
|
|||
ColumnLayout {
|
||||
spacing: -10
|
||||
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkBeep
|
||||
text: qsTr("Play sound when finished")
|
||||
}
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkEject
|
||||
text: qsTr("Eject media when finished")
|
||||
}
|
||||
CheckBox {
|
||||
ImCheckBox {
|
||||
id: chkTelemtry
|
||||
text: qsTr("Enable telemetry")
|
||||
}
|
||||
|
|
@ -394,7 +395,7 @@ Popup {
|
|||
Layout.bottomMargin: 10
|
||||
spacing: 20
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("SAVE")
|
||||
onClicked: {
|
||||
if (chkSetUser.checked && fieldUserPassword.text.length == 0)
|
||||
|
|
@ -432,10 +433,8 @@ Popup {
|
|||
saveSettings()
|
||||
popup.close()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
|
||||
Text { text: " " }
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import QtQuick 2.9
|
|||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import "qmlcomponents"
|
||||
|
||||
Popup {
|
||||
id: msgpopup
|
||||
|
|
@ -90,40 +91,34 @@ Popup {
|
|||
Layout.bottomMargin: 10
|
||||
spacing: 20
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("NO, CLEAR SETTINGS")
|
||||
onClicked: {
|
||||
msgpopup.close()
|
||||
msgpopup.no()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("YES")
|
||||
onClicked: {
|
||||
msgpopup.close()
|
||||
msgpopup.yes()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
text: qsTr("EDIT SETTINGS")
|
||||
onClicked: {
|
||||
msgpopup.close()
|
||||
msgpopup.editSettings()
|
||||
}
|
||||
Material.foreground: "#ffffff"
|
||||
Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.background: "#c51a4a"
|
||||
font.family: roboto.name
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
|
||||
Text { text: " " }
|
||||
|
|
|
|||
43
main.qml
43
main.qml
|
|
@ -8,6 +8,7 @@ import QtQuick.Window 2.2
|
|||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import "qmlcomponents"
|
||||
|
||||
ApplicationWindow {
|
||||
id: window
|
||||
|
|
@ -105,10 +106,9 @@ ApplicationWindow {
|
|||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
id: osbutton
|
||||
text: imageWriter.srcFileName() === "" ? qsTr("CHOOSE OS") : imageWriter.srcFileName()
|
||||
font.family: roboto.name
|
||||
spacing: 0
|
||||
padding: 0
|
||||
bottomPadding: 0
|
||||
|
|
@ -119,11 +119,8 @@ ApplicationWindow {
|
|||
ospopup.open()
|
||||
osswipeview.currentItem.forceActiveFocus()
|
||||
}
|
||||
Material.background: "#ffffff"
|
||||
Material.foreground: "#c51a4a"
|
||||
Accessible.ignored: ospopup.visible || dstpopup.visible
|
||||
Accessible.description: qsTr("Select this button to change the operating system")
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,10 +142,9 @@ ApplicationWindow {
|
|||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
id: dstbutton
|
||||
text: qsTr("CHOOSE STORAGE")
|
||||
font.family: roboto.name
|
||||
Layout.minimumHeight: 40
|
||||
Layout.preferredWidth: 100
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -157,11 +153,8 @@ ApplicationWindow {
|
|||
dstpopup.open()
|
||||
dstlist.forceActiveFocus()
|
||||
}
|
||||
Material.background: "#ffffff"
|
||||
Material.foreground: "#c51a4a"
|
||||
Accessible.ignored: ospopup.visible || dstpopup.visible
|
||||
Accessible.description: qsTr("Select this button to change the destination storage device")
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -175,18 +168,14 @@ ApplicationWindow {
|
|||
Layout.preferredWidth: 100
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
id: writebutton
|
||||
text: qsTr("WRITE")
|
||||
font.family: roboto.name
|
||||
Layout.minimumHeight: 40
|
||||
Layout.fillWidth: true
|
||||
Accessible.ignored: ospopup.visible || dstpopup.visible
|
||||
Accessible.description: qsTr("Select this button to start writing the image")
|
||||
|
||||
enabled: false
|
||||
Material.background: "#ffffff"
|
||||
Material.foreground: "#c51a4a"
|
||||
onClicked: {
|
||||
if (!imageWriter.readyToWrite()) {
|
||||
return
|
||||
|
|
@ -198,7 +187,6 @@ ApplicationWindow {
|
|||
confirmwritepopup.askForConfirmation()
|
||||
}
|
||||
}
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -225,7 +213,7 @@ ApplicationWindow {
|
|||
Material.background: "#d15d7d"
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
id: cancelwritebutton
|
||||
text: qsTr("CANCEL WRITE")
|
||||
onClicked: {
|
||||
|
|
@ -233,14 +221,10 @@ ApplicationWindow {
|
|||
progressText.text = qsTr("Cancelling...")
|
||||
imageWriter.cancelWrite()
|
||||
}
|
||||
Material.background: "#ffffff"
|
||||
Material.foreground: "#c51a4a"
|
||||
Layout.alignment: Qt.AlignRight
|
||||
visible: false
|
||||
font.family: roboto.name
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
Button {
|
||||
ImButton {
|
||||
id: cancelverifybutton
|
||||
text: qsTr("CANCEL VERIFY")
|
||||
onClicked: {
|
||||
|
|
@ -248,26 +232,19 @@ ApplicationWindow {
|
|||
progressText.text = qsTr("Finalizing...")
|
||||
imageWriter.setVerifyEnabled(false)
|
||||
}
|
||||
Material.background: "#ffffff"
|
||||
Material.foreground: "#c51a4a"
|
||||
Layout.alignment: Qt.AlignRight
|
||||
visible: false
|
||||
font.family: roboto.name
|
||||
Accessible.onPressAction: clicked()
|
||||
}
|
||||
|
||||
Button {
|
||||
ImButton {
|
||||
Layout.bottomMargin: 25
|
||||
padding: 5
|
||||
id: customizebutton
|
||||
onClicked: {
|
||||
optionspopup.openPopup()
|
||||
}
|
||||
Material.background: "#ffffff"
|
||||
visible: false
|
||||
Accessible.description: qsTr("Select this button to access advanced settings")
|
||||
Accessible.onPressAction: clicked()
|
||||
|
||||
contentItem: Image {
|
||||
source: "icons/ic_cog_red.svg"
|
||||
fillMode: Image.PreserveAspectFit
|
||||
|
|
@ -458,6 +435,8 @@ ApplicationWindow {
|
|||
if (currentIndex != -1)
|
||||
selectOSitem(model.get(currentIndex), true)
|
||||
}
|
||||
Keys.onEnterPressed: Keys.onSpacePressed(event)
|
||||
Keys.onReturnPressed: Keys.onSpacePressed(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -505,6 +484,8 @@ ApplicationWindow {
|
|||
if (currentIndex != -1)
|
||||
selectOSitem(model.get(currentIndex))
|
||||
}
|
||||
Keys.onEnterPressed: Keys.onSpacePressed(event)
|
||||
Keys.onReturnPressed: Keys.onSpacePressed(event)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -766,6 +747,8 @@ ApplicationWindow {
|
|||
return
|
||||
selectDstItem(currentItem)
|
||||
}
|
||||
Keys.onEnterPressed: Keys.onSpacePressed(event)
|
||||
Keys.onReturnPressed: Keys.onSpacePressed(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
qml.qrc
3
qml.qrc
|
|
@ -32,5 +32,8 @@
|
|||
<file>icons/cat_language_specific_operating_systems.png</file>
|
||||
<file>icons/cat_3d_printing.png</file>
|
||||
<file>icons/logo_stacked_imager.png</file>
|
||||
<file>qmlcomponents/ImButton.qml</file>
|
||||
<file>qmlcomponents/ImCheckBox.qml</file>
|
||||
<file>qmlcomponents/ImRadioButton.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
18
qmlcomponents/ImButton.qml
Normal file
18
qmlcomponents/ImButton.qml
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
* Copyright (C) 2022 Raspberry Pi Ltd
|
||||
*/
|
||||
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
|
||||
Button {
|
||||
font.family: roboto.name
|
||||
Material.background: activeFocus ? "#d1dcfb" : "#ffffff"
|
||||
Material.foreground: "#c51a4a"
|
||||
Accessible.onPressAction: clicked()
|
||||
Keys.onEnterPressed: clicked()
|
||||
Keys.onReturnPressed: clicked()
|
||||
}
|
||||
14
qmlcomponents/ImCheckBox.qml
Normal file
14
qmlcomponents/ImCheckBox.qml
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
* Copyright (C) 2022 Raspberry Pi Ltd
|
||||
*/
|
||||
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
|
||||
CheckBox {
|
||||
Keys.onEnterPressed: toggle()
|
||||
Keys.onReturnPressed: toggle()
|
||||
}
|
||||
14
qmlcomponents/ImRadioButton.qml
Normal file
14
qmlcomponents/ImRadioButton.qml
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
* Copyright (C) 2022 Raspberry Pi Ltd
|
||||
*/
|
||||
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Layouts 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
|
||||
RadioButton {
|
||||
Keys.onEnterPressed: toggle()
|
||||
Keys.onReturnPressed: toggle()
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue