From c1234d2ea2e3ade0b3c343ad99ab0332cf8b0000 Mon Sep 17 00:00:00 2001 From: Floris Bos Date: Fri, 4 Feb 2022 12:32:12 +0100 Subject: [PATCH] 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. --- MsgPopup.qml | 32 ++++++++++-------------- OptionsPopup.qml | 35 +++++++++++++-------------- UseSavedSettingsPopup.qml | 19 ++++++--------- main.qml | 43 ++++++++++----------------------- qml.qrc | 3 +++ qmlcomponents/ImButton.qml | 18 ++++++++++++++ qmlcomponents/ImCheckBox.qml | 14 +++++++++++ qmlcomponents/ImRadioButton.qml | 14 +++++++++++ 8 files changed, 99 insertions(+), 79 deletions(-) create mode 100644 qmlcomponents/ImButton.qml create mode 100644 qmlcomponents/ImCheckBox.qml create mode 100644 qmlcomponents/ImRadioButton.qml diff --git a/MsgPopup.qml b/MsgPopup.qml index 1d5ace9..c5cde1d 100644 --- a/MsgPopup.qml +++ b/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: " " } diff --git a/OptionsPopup.qml b/OptionsPopup.qml index 202b797..588c14a 100644 --- a/OptionsPopup.qml +++ b/OptionsPopup.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: 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: " " } diff --git a/UseSavedSettingsPopup.qml b/UseSavedSettingsPopup.qml index d1e31c1..7bdb1de 100644 --- a/UseSavedSettingsPopup.qml +++ b/UseSavedSettingsPopup.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 @@ -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: " " } diff --git a/main.qml b/main.qml index 5046c3f..b4bc899 100644 --- a/main.qml +++ b/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) } } } diff --git a/qml.qrc b/qml.qrc index b47dafa..8c4da6e 100644 --- a/qml.qrc +++ b/qml.qrc @@ -32,5 +32,8 @@ icons/cat_language_specific_operating_systems.png icons/cat_3d_printing.png icons/logo_stacked_imager.png + qmlcomponents/ImButton.qml + qmlcomponents/ImCheckBox.qml + qmlcomponents/ImRadioButton.qml diff --git a/qmlcomponents/ImButton.qml b/qmlcomponents/ImButton.qml new file mode 100644 index 0000000..60df4ef --- /dev/null +++ b/qmlcomponents/ImButton.qml @@ -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() +} diff --git a/qmlcomponents/ImCheckBox.qml b/qmlcomponents/ImCheckBox.qml new file mode 100644 index 0000000..0386361 --- /dev/null +++ b/qmlcomponents/ImCheckBox.qml @@ -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() +} diff --git a/qmlcomponents/ImRadioButton.qml b/qmlcomponents/ImRadioButton.qml new file mode 100644 index 0000000..717da98 --- /dev/null +++ b/qmlcomponents/ImRadioButton.qml @@ -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() +}