cmclark00/retro-imager
1
0
Fork 0
mirror of https://github.com/cmclark00/retro-imager.git synced 2025-05-18 07:55:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make buttons blue on keyboard navigation

Browse source 
- 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 2022-02-04 12:32:12 +01:00
parent d91f8d95b1
commit c1234d2ea2
8 changed files with 99 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

32
MsgPopup.qml
View file

@ -7,6 +7,7 @@ import QtQuick 2.9
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material 2.2
import "qmlcomponents"
Popup { Popup {
id: msgpopup id: msgpopup
@ -93,54 +94,47 @@ Popup {
Layout.bottomMargin: 10 Layout.bottomMargin: 10
spacing: 20 spacing: 20
Button { ImButton {
text: qsTr("NO") text: qsTr("NO")
onClicked: { onClicked: {
msgpopup.close() msgpopup.close()
msgpopup.no() msgpopup.no()
} }
Material.foreground: "#ffffff"
Material.background: "#c51a4a"
font.family: roboto.name
visible: msgpopup.noButton visible: msgpopup.noButton
Accessible.onPressAction: clicked() Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a"
} }
Button { ImButton {
text: qsTr("YES") text: qsTr("YES")
onClicked: { onClicked: {
msgpopup.close() msgpopup.close()
msgpopup.yes() msgpopup.yes()
} }
Material.foreground: "#ffffff"
Material.background: "#c51a4a"
font.family: roboto.name
visible: msgpopup.yesButton visible: msgpopup.yesButton
Accessible.onPressAction: clicked() Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a"
} }
Button { ImButton {
text: qsTr("CONTINUE") text: qsTr("CONTINUE")
onClicked: { onClicked: {
msgpopup.close() msgpopup.close()
} }
Material.foreground: "#ffffff"
Material.background: "#c51a4a"
font.family: roboto.name
visible: msgpopup.continueButton visible: msgpopup.continueButton
Accessible.onPressAction: clicked() Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a"
} }
Button { ImButton {
text: qsTr("QUIT") text: qsTr("QUIT")
onClicked: { onClicked: {
Qt.quit() Qt.quit()
} }
Material.foreground: "#ffffff"
Material.background: "#c51a4a"
font.family: roboto.name font.family: roboto.name
visible: msgpopup.quitButton visible: msgpopup.quitButton
Accessible.onPressAction: clicked() Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a"
} }
Text { text: " " } Text { text: " " }

35
OptionsPopup.qml
View file

@ -7,6 +7,7 @@ import QtQuick 2.9
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material 2.2
import "qmlcomponents"
Popup { Popup {
id: popup id: popup
@ -112,12 +113,12 @@ Popup {
ColumnLayout { ColumnLayout {
spacing: -10 spacing: -10
CheckBox { ImCheckBox {
id: chkOverscan id: chkOverscan
text: qsTr("Disable overscan") text: qsTr("Disable overscan")
} }
RowLayout { RowLayout {
CheckBox { ImCheckBox {
id: chkHostname id: chkHostname
text: qsTr("Set hostname:") text: qsTr("Set hostname:")
onCheckedChanged: { onCheckedChanged: {
@ -136,7 +137,7 @@ Popup {
color: chkHostname.checked ? "black" : "grey" color: chkHostname.checked ? "black" : "grey"
} }
} }
CheckBox { ImCheckBox {
id: chkSSH id: chkSSH
text: qsTr("Enable SSH") text: qsTr("Enable SSH")
onCheckedChanged: { onCheckedChanged: {
@ -158,7 +159,7 @@ Popup {
Layout.leftMargin: 40 Layout.leftMargin: 40
spacing: -10 spacing: -10
RadioButton { ImRadioButton {
id: radioPasswordAuthentication id: radioPasswordAuthentication
text: qsTr("Use password authentication") text: qsTr("Use password authentication")
onCheckedChanged: { onCheckedChanged: {
@ -168,7 +169,7 @@ Popup {
} }
} }
} }
RadioButton { ImRadioButton {
id: radioPubKeyAuthentication id: radioPubKeyAuthentication
text: qsTr("Allow public-key authentication only") text: qsTr("Allow public-key authentication only")
onCheckedChanged: { onCheckedChanged: {
@ -195,7 +196,7 @@ Popup {
} }
} }
CheckBox { ImCheckBox {
id: chkSetUser id: chkSetUser
text: qsTr("Set username and password") text: qsTr("Set username and password")
onCheckedChanged: { onCheckedChanged: {
@ -256,7 +257,7 @@ Popup {
} }
} }
CheckBox { ImCheckBox {
id: chkWifi id: chkWifi
text: qsTr("Configure wifi") text: qsTr("Configure wifi")
onCheckedChanged: { onCheckedChanged: {
@ -289,7 +290,7 @@ Popup {
} }
} }
CheckBox { ImCheckBox {
id: chkWifiSSIDHidden id: chkWifiSSIDHidden
Layout.columnSpan: 2 Layout.columnSpan: 2
text: qsTr("Hidden SSID") text: qsTr("Hidden SSID")
@ -310,7 +311,7 @@ Popup {
} }
} }
CheckBox { ImCheckBox {
id: chkShowPassword id: chkShowPassword
Layout.columnSpan: 2 Layout.columnSpan: 2
text: qsTr("Show password") text: qsTr("Show password")
@ -327,7 +328,7 @@ Popup {
} }
} }
CheckBox { ImCheckBox {
id: chkLocale id: chkLocale
text: qsTr("Set locale settings") text: qsTr("Set locale settings")
} }
@ -357,7 +358,7 @@ Popup {
editable: true editable: true
Layout.minimumWidth: 200 Layout.minimumWidth: 200
} }
CheckBox { ImCheckBox {
id: chkSkipFirstUse id: chkSkipFirstUse
text: qsTr("Skip first-run wizard") text: qsTr("Skip first-run wizard")
} }
@ -372,15 +373,15 @@ Popup {
ColumnLayout { ColumnLayout {
spacing: -10 spacing: -10
CheckBox { ImCheckBox {
id: chkBeep id: chkBeep
text: qsTr("Play sound when finished") text: qsTr("Play sound when finished")
} }
CheckBox { ImCheckBox {
id: chkEject id: chkEject
text: qsTr("Eject media when finished") text: qsTr("Eject media when finished")
} }
CheckBox { ImCheckBox {
id: chkTelemtry id: chkTelemtry
text: qsTr("Enable telemetry") text: qsTr("Enable telemetry")
} }
@ -394,7 +395,7 @@ Popup {
Layout.bottomMargin: 10 Layout.bottomMargin: 10
spacing: 20 spacing: 20
Button { ImButton {
text: qsTr("SAVE") text: qsTr("SAVE")
onClicked: { onClicked: {
if (chkSetUser.checked && fieldUserPassword.text.length == 0) if (chkSetUser.checked && fieldUserPassword.text.length == 0)
@ -432,10 +433,8 @@ Popup {
saveSettings() saveSettings()
popup.close() popup.close()
} }
Material.foreground: "#ffffff" Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a" Material.background: "#c51a4a"
font.family: roboto.name
Accessible.onPressAction: clicked()
} }
Text { text: " " } Text { text: " " }

19
UseSavedSettingsPopup.qml
View file

@ -7,6 +7,7 @@ import QtQuick 2.9
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material 2.2
import "qmlcomponents"
Popup { Popup {
id: msgpopup id: msgpopup
@ -90,40 +91,34 @@ Popup {
Layout.bottomMargin: 10 Layout.bottomMargin: 10
spacing: 20 spacing: 20
Button { ImButton {
text: qsTr("NO, CLEAR SETTINGS") text: qsTr("NO, CLEAR SETTINGS")
onClicked: { onClicked: {
msgpopup.close() msgpopup.close()
msgpopup.no() msgpopup.no()
} }
Material.foreground: "#ffffff" Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a" Material.background: "#c51a4a"
font.family: roboto.name
Accessible.onPressAction: clicked()
} }
Button { ImButton {
text: qsTr("YES") text: qsTr("YES")
onClicked: { onClicked: {
msgpopup.close() msgpopup.close()
msgpopup.yes() msgpopup.yes()
} }
Material.foreground: "#ffffff" Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a" Material.background: "#c51a4a"
font.family: roboto.name
Accessible.onPressAction: clicked()
} }
Button { ImButton {
text: qsTr("EDIT SETTINGS") text: qsTr("EDIT SETTINGS")
onClicked: { onClicked: {
msgpopup.close() msgpopup.close()
msgpopup.editSettings() msgpopup.editSettings()
} }
Material.foreground: "#ffffff" Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
Material.background: "#c51a4a" Material.background: "#c51a4a"
font.family: roboto.name
Accessible.onPressAction: clicked()
} }
Text { text: " " } Text { text: " " }

43
main.qml
View file

@ -8,6 +8,7 @@ import QtQuick.Window 2.2
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material 2.2
import "qmlcomponents"
ApplicationWindow { ApplicationWindow {
id: window id: window
@ -105,10 +106,9 @@ ApplicationWindow {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
Button { ImButton {
id: osbutton id: osbutton
text: imageWriter.srcFileName() === "" ? qsTr("CHOOSE OS") : imageWriter.srcFileName() text: imageWriter.srcFileName() === "" ? qsTr("CHOOSE OS") : imageWriter.srcFileName()
font.family: roboto.name
spacing: 0 spacing: 0
padding: 0 padding: 0
bottomPadding: 0 bottomPadding: 0
@ -119,11 +119,8 @@ ApplicationWindow {
ospopup.open() ospopup.open()
osswipeview.currentItem.forceActiveFocus() osswipeview.currentItem.forceActiveFocus()
} }
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
Accessible.ignored: ospopup.visible || dstpopup.visible Accessible.ignored: ospopup.visible || dstpopup.visible
Accessible.description: qsTr("Select this button to change the operating system") Accessible.description: qsTr("Select this button to change the operating system")
Accessible.onPressAction: clicked()
} }
} }
@ -145,10 +142,9 @@ ApplicationWindow {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
Button { ImButton {
id: dstbutton id: dstbutton
text: qsTr("CHOOSE STORAGE") text: qsTr("CHOOSE STORAGE")
font.family: roboto.name
Layout.minimumHeight: 40 Layout.minimumHeight: 40
Layout.preferredWidth: 100 Layout.preferredWidth: 100
Layout.fillWidth: true Layout.fillWidth: true
@ -157,11 +153,8 @@ ApplicationWindow {
dstpopup.open() dstpopup.open()
dstlist.forceActiveFocus() dstlist.forceActiveFocus()
} }
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
Accessible.ignored: ospopup.visible || dstpopup.visible Accessible.ignored: ospopup.visible || dstpopup.visible
Accessible.description: qsTr("Select this button to change the destination storage device") Accessible.description: qsTr("Select this button to change the destination storage device")
Accessible.onPressAction: clicked()
} }
} }
@ -175,18 +168,14 @@ ApplicationWindow {
Layout.preferredWidth: 100 Layout.preferredWidth: 100
} }
Button { ImButton {
id: writebutton id: writebutton
text: qsTr("WRITE") text: qsTr("WRITE")
font.family: roboto.name
Layout.minimumHeight: 40 Layout.minimumHeight: 40
Layout.fillWidth: true Layout.fillWidth: true
Accessible.ignored: ospopup.visible || dstpopup.visible Accessible.ignored: ospopup.visible || dstpopup.visible
Accessible.description: qsTr("Select this button to start writing the image") Accessible.description: qsTr("Select this button to start writing the image")
enabled: false enabled: false
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
onClicked: { onClicked: {
if (!imageWriter.readyToWrite()) { if (!imageWriter.readyToWrite()) {
return return
@ -198,7 +187,6 @@ ApplicationWindow {
confirmwritepopup.askForConfirmation() confirmwritepopup.askForConfirmation()
} }
} }
Accessible.onPressAction: clicked()
} }
} }
@ -225,7 +213,7 @@ ApplicationWindow {
Material.background: "#d15d7d" Material.background: "#d15d7d"
} }
Button { ImButton {
id: cancelwritebutton id: cancelwritebutton
text: qsTr("CANCEL WRITE") text: qsTr("CANCEL WRITE")
onClicked: { onClicked: {
@ -233,14 +221,10 @@ ApplicationWindow {
progressText.text = qsTr("Cancelling...") progressText.text = qsTr("Cancelling...")
imageWriter.cancelWrite() imageWriter.cancelWrite()
} }
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
visible: false visible: false
font.family: roboto.name
Accessible.onPressAction: clicked()
} }
Button { ImButton {
id: cancelverifybutton id: cancelverifybutton
text: qsTr("CANCEL VERIFY") text: qsTr("CANCEL VERIFY")
onClicked: { onClicked: {
@ -248,26 +232,19 @@ ApplicationWindow {
progressText.text = qsTr("Finalizing...") progressText.text = qsTr("Finalizing...")
imageWriter.setVerifyEnabled(false) imageWriter.setVerifyEnabled(false)
} }
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
visible: false visible: false
font.family: roboto.name
Accessible.onPressAction: clicked()
} }
Button { ImButton {
Layout.bottomMargin: 25 Layout.bottomMargin: 25
padding: 5 padding: 5
id: customizebutton id: customizebutton
onClicked: { onClicked: {
optionspopup.openPopup() optionspopup.openPopup()
} }
Material.background: "#ffffff"
visible: false visible: false
Accessible.description: qsTr("Select this button to access advanced settings") Accessible.description: qsTr("Select this button to access advanced settings")
Accessible.onPressAction: clicked()
contentItem: Image { contentItem: Image {
source: "icons/ic_cog_red.svg" source: "icons/ic_cog_red.svg"
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
@ -458,6 +435,8 @@ ApplicationWindow {
if (currentIndex != -1) if (currentIndex != -1)
selectOSitem(model.get(currentIndex), true) selectOSitem(model.get(currentIndex), true)
} }
Keys.onEnterPressed: Keys.onSpacePressed(event)
Keys.onReturnPressed: Keys.onSpacePressed(event)
} }
} }
} }
@ -505,6 +484,8 @@ ApplicationWindow {
if (currentIndex != -1) if (currentIndex != -1)
selectOSitem(model.get(currentIndex)) selectOSitem(model.get(currentIndex))
} }
Keys.onEnterPressed: Keys.onSpacePressed(event)
Keys.onReturnPressed: Keys.onSpacePressed(event)
} }
} }
@ -766,6 +747,8 @@ ApplicationWindow {
return return
selectDstItem(currentItem) selectDstItem(currentItem)
} }
Keys.onEnterPressed: Keys.onSpacePressed(event)
Keys.onReturnPressed: Keys.onSpacePressed(event)
} }
} }
} }

3
qml.qrc
View file

@ -32,5 +32,8 @@
<file>icons/cat_language_specific_operating_systems.png</file> <file>icons/cat_language_specific_operating_systems.png</file>
<file>icons/cat_3d_printing.png</file> <file>icons/cat_3d_printing.png</file>
<file>icons/logo_stacked_imager.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> </qresource>
</RCC> </RCC>

18
qmlcomponents/ImButton.qml Normal file
View 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
View 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
View 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()
}