From 8a3331f613b68bb536be53eeaf5a8d472b0af785 Mon Sep 17 00:00:00 2001 From: David Turner Date: Wed, 18 Oct 2023 16:38:06 +0100 Subject: [PATCH] Improve red button focus colour - All of our red buttons were ImButton with the colours overridden at the use site. Instead make an ImButtonRed which defines these colours in one place. - Previously the red buttons had focus indicated by the text colour changing from white to blue. This was quite hard to see, instead change the button colour to blue (as is done for the white buttons). A darker shade of blue is used so that there is still good contrast with the white text. - Update the reds (buttons and main screen background) with the branding-approved red: the official colour palette says Pi Red is #cd2355 --- src/MsgPopup.qml | 16 ++++------------ src/OptionsPopup.qml | 6 ++---- src/UseSavedSettingsPopup.qml | 16 ++++------------ src/main.qml | 2 +- src/qml.qrc | 1 + src/qmlcomponents/ImButton.qml | 2 +- src/qmlcomponents/ImButtonRed.qml | 14 ++++++++++++++ 7 files changed, 27 insertions(+), 30 deletions(-) create mode 100644 src/qmlcomponents/ImButtonRed.qml diff --git a/src/MsgPopup.qml b/src/MsgPopup.qml index c5cde1d..b754f97 100644 --- a/src/MsgPopup.qml +++ b/src/MsgPopup.qml @@ -94,47 +94,39 @@ Popup { Layout.bottomMargin: 10 spacing: 20 - ImButton { + ImButtonRed { text: qsTr("NO") onClicked: { msgpopup.close() msgpopup.no() } visible: msgpopup.noButton - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } - ImButton { + ImButtonRed { text: qsTr("YES") onClicked: { msgpopup.close() msgpopup.yes() } visible: msgpopup.yesButton - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } - ImButton { + ImButtonRed { text: qsTr("CONTINUE") onClicked: { msgpopup.close() } visible: msgpopup.continueButton - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } - ImButton { + ImButtonRed { text: qsTr("QUIT") onClicked: { Qt.quit() } font.family: roboto.name visible: msgpopup.quitButton - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } Text { text: " " } diff --git a/src/OptionsPopup.qml b/src/OptionsPopup.qml index c333098..910b4e1 100644 --- a/src/OptionsPopup.qml +++ b/src/OptionsPopup.qml @@ -378,7 +378,7 @@ Window { Layout.bottomMargin: 10 spacing: 20 - ImButton { + ImButtonRed { text: qsTr("SAVE") onClicked: { if (chkSetUser.checked && fieldUserPassword.text.length == 0) @@ -419,8 +419,6 @@ Window { saveSettings() popup.close() } - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } Text { text: " " } @@ -852,7 +850,7 @@ Window { } else { fieldKeyboardLayout.currentIndex = fieldKeyboardLayout.find("us") } - + chkSetUser.checked = false chkSSH.checked = false chkLocale.checked = false diff --git a/src/UseSavedSettingsPopup.qml b/src/UseSavedSettingsPopup.qml index a90faf5..145c263 100644 --- a/src/UseSavedSettingsPopup.qml +++ b/src/UseSavedSettingsPopup.qml @@ -98,7 +98,7 @@ Popup { spacing: 20 id: buttons - ImButton { + ImButtonRed { text: qsTr("EDIT SETTINGS") onClicked: { // Don't close this dialog when "edit settings" is @@ -108,42 +108,34 @@ Popup { // customisation or not. msgpopup.editSettings() } - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } - ImButton { + ImButtonRed { id: noAndClearButton text: qsTr("NO, CLEAR SETTINGS") onClicked: { msgpopup.close() msgpopup.noClearSettings() } - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" enabled: hasSavedSettings } - ImButton { + ImButtonRed { id: yesButton text: qsTr("YES") onClicked: { msgpopup.close() msgpopup.yes() } - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" enabled: hasSavedSettings } - ImButton { + ImButtonRed { text: qsTr("NO") onClicked: { msgpopup.close() msgpopup.no() } - Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff" - Material.background: "#c51a4a" } Text { text: " " } diff --git a/src/main.qml b/src/main.qml index bd76442..303a07a 100644 --- a/src/main.qml +++ b/src/main.qml @@ -103,7 +103,7 @@ ApplicationWindow { } Rectangle { - color: "#c31c4a" + color: "#cd2355" implicitWidth: window.width implicitHeight: window.height * (1 - 1/4) diff --git a/src/qml.qrc b/src/qml.qrc index c2f462a..8dcca05 100644 --- a/src/qml.qrc +++ b/src/qml.qrc @@ -34,6 +34,7 @@ icons/logo_stacked_imager.png icons/logo_sxs_imager.png qmlcomponents/ImButton.qml + qmlcomponents/ImButtonRed.qml qmlcomponents/ImCheckBox.qml qmlcomponents/ImRadioButton.qml icons/cat_digital_signage.png diff --git a/src/qmlcomponents/ImButton.qml b/src/qmlcomponents/ImButton.qml index 60df4ef..fd88a6e 100644 --- a/src/qmlcomponents/ImButton.qml +++ b/src/qmlcomponents/ImButton.qml @@ -11,7 +11,7 @@ import QtQuick.Controls.Material 2.2 Button { font.family: roboto.name Material.background: activeFocus ? "#d1dcfb" : "#ffffff" - Material.foreground: "#c51a4a" + Material.foreground: "#cd2355" Accessible.onPressAction: clicked() Keys.onEnterPressed: clicked() Keys.onReturnPressed: clicked() diff --git a/src/qmlcomponents/ImButtonRed.qml b/src/qmlcomponents/ImButtonRed.qml new file mode 100644 index 0000000..3f47014 --- /dev/null +++ b/src/qmlcomponents/ImButtonRed.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 + +ImButton { + Material.background: activeFocus ? "#32a0d7" : "#cd2355" + Material.foreground: "#ffffff" +}