From a4c90fd48d6604c336f7a75a54534554abcd3b9b Mon Sep 17 00:00:00 2001 From: Don Gagne Date: Wed, 12 Feb 2025 20:12:32 -0800 Subject: [PATCH] Rework app settings and vehicle config buttons These now have consistent visuals --- qgroundcontrol.qrc | 2 + src/AnalyzeView/AnalyzeView.qml | 1 - src/AutoPilotPlugins/Common/SetupPage.qml | 2 +- src/QmlControls/ConfigButton.qml | 16 ++++++ .../QGroundControl/Controls/qmldir | 2 + src/QmlControls/SettingsButton.qml | 57 +++++++++++++++++++ src/QmlControls/SubMenuButton.qml | 20 +++---- src/UI/AppSettings.qml | 30 +--------- src/VehicleSetup/SetupView.qml | 50 +++++++--------- 9 files changed, 107 insertions(+), 73 deletions(-) create mode 100644 src/QmlControls/ConfigButton.qml create mode 100644 src/QmlControls/SettingsButton.qml diff --git a/qgroundcontrol.qrc b/qgroundcontrol.qrc index ef613f923..24e62fb66 100644 --- a/qgroundcontrol.qrc +++ b/qgroundcontrol.qrc @@ -85,6 +85,7 @@ src/PlanView/CameraCalcGrid.qml src/PlanView/CameraSection.qml src/QmlControls/ClickableColor.qml + src/QmlControls/ConfigButton.qml src/PlanView/CorridorScanMapVisual.qml src/QmlControls/DeadMouseArea.qml src/QmlControls/DropButton.qml @@ -185,6 +186,7 @@ src/QmlControls/QGCRoundButton.qml src/QmlControls/SectionHeader.qml src/QmlControls/SelectableControl.qml + src/QmlControls/SettingsButton.qml src/AutoPilotPlugins/Common/SetupPage.qml src/UI/toolbar/SignalStrength.qml src/PlanView/SimpleItemMapVisual.qml diff --git a/src/AnalyzeView/AnalyzeView.qml b/src/AnalyzeView/AnalyzeView.qml index b4456fb94..fe74d44cf 100644 --- a/src/AnalyzeView/AnalyzeView.qml +++ b/src/AnalyzeView/AnalyzeView.qml @@ -80,7 +80,6 @@ Rectangle { SubMenuButton { id: subMenu imageResource: modelData.icon - setupIndicator: false autoExclusive: true text: modelData.title diff --git a/src/AutoPilotPlugins/Common/SetupPage.qml b/src/AutoPilotPlugins/Common/SetupPage.qml index 4df31593a..721b5f8be 100644 --- a/src/AutoPilotPlugins/Common/SetupPage.qml +++ b/src/AutoPilotPlugins/Common/SetupPage.qml @@ -41,7 +41,7 @@ Item { property bool _disableDueToFlying: vehicleComponent ? (!_vehicleIsRover && !vehicleComponent.allowSetupWhileFlying && _vehicleFlying) : false property string _disableReason: _disableDueToArmed ? qsTr("armed") : qsTr("flying") property real _margins: ScreenTools.defaultFontPixelHeight * 0.5 - property string _pageTitle: qsTr("%1 Setup").arg(pageName) + property string _pageTitle: qsTr("%1 Config").arg(pageName) Component.onCompleted: { if(pageLoader.item && pageLoader.item.setupPageCompleted) { diff --git a/src/QmlControls/ConfigButton.qml b/src/QmlControls/ConfigButton.qml new file mode 100644 index 000000000..f326f4e64 --- /dev/null +++ b/src/QmlControls/ConfigButton.qml @@ -0,0 +1,16 @@ +/**************************************************************************** + * + * (c) 2009-2020 QGROUNDCONTROL PROJECT + * + * QGroundControl is licensed according to the terms in the file + * COPYING.md in the root of the source code directory. + * + ****************************************************************************/ + +import QGroundControl.Controls + +SettingsButton { + icon.color: setupComplete ? textColor : "red" + + property bool setupComplete: true +} \ No newline at end of file diff --git a/src/QmlControls/QGroundControl/Controls/qmldir b/src/QmlControls/QGroundControl/Controls/qmldir index 28ce27c48..d54650424 100644 --- a/src/QmlControls/QGroundControl/Controls/qmldir +++ b/src/QmlControls/QGroundControl/Controls/qmldir @@ -11,6 +11,7 @@ CameraCalcCamera 1.0 CameraCalcCamera.qml CameraCalcGrid 1.0 CameraCalcGrid.qml CameraSection 1.0 CameraSection.qml ClickableColor 1.0 ClickableColor.qml +ConfigButton 1.0 ConfigButton.qml DeadMouseArea 1.0 DeadMouseArea.qml DropButton 1.0 DropButton.qml DropPanel 1.0 DropPanel.qml @@ -107,6 +108,7 @@ RCToParamDialog 1.0 RCToParamDialog.qml RemoteIDIndicatorPage 1.0 RemoteIDIndicatorPage.qml SectionHeader 1.0 SectionHeader.qml SelectableControl 1.0 SelectableControl.qml +SettingsButton 1.0 SettingsButton.qml SettingsGroupLayout 1.0 SettingsGroupLayout.qml SetupPage 1.0 SetupPage.qml SignalStrength 1.0 SignalStrength.qml diff --git a/src/QmlControls/SettingsButton.qml b/src/QmlControls/SettingsButton.qml new file mode 100644 index 000000000..879598475 --- /dev/null +++ b/src/QmlControls/SettingsButton.qml @@ -0,0 +1,57 @@ +/**************************************************************************** + * + * (c) 2009-2020 QGROUNDCONTROL PROJECT + * + * QGroundControl is licensed according to the terms in the file + * COPYING.md in the root of the source code directory. + * + ****************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +import QGroundControl +import QGroundControl.Controls +import QGroundControl.Palette +import QGroundControl.ScreenTools + +Button { + id: control + padding: ScreenTools.defaultFontPixelWidth * 0.75 + hoverEnabled: !ScreenTools.isMobile + autoExclusive: true + icon.color: textColor + + property color textColor: checked || pressed ? qgcPal.buttonHighlightText : qgcPal.buttonText + + QGCPalette { + id: qgcPal + colorGroupEnabled: control.enabled + } + + background: Rectangle { + color: qgcPal.buttonHighlight + opacity: checked || pressed ? 1 : enabled && hovered ? .2 : 0 + radius: ScreenTools.defaultFontPixelWidth / 2 + } + + contentItem: RowLayout { + spacing: ScreenTools.defaultFontPixelWidth + + QGCColoredImage { + source: control.icon.source + color: control.icon.color + width: ScreenTools.defaultFontPixelHeight + height: ScreenTools.defaultFontPixelHeight + } + + QGCLabel { + id: displayText + Layout.fillWidth: true + text: control.text + color: control.textColor + horizontalAlignment: QGCLabel.AlignLeft + } + } +} \ No newline at end of file diff --git a/src/QmlControls/SubMenuButton.qml b/src/QmlControls/SubMenuButton.qml index ae866dd84..883beb6e4 100644 --- a/src/QmlControls/SubMenuButton.qml +++ b/src/QmlControls/SubMenuButton.qml @@ -9,18 +9,18 @@ import QGroundControl.ScreenTools Button { id: control - property bool setupComplete: true ///< true: setup complete indicator shows as completed - property bool setupIndicator: true ///< true: show setup complete indicator - property var imageColor: undefined - property string imageResource: "/qmlimages/subMenuButtonImage.png" ///< Button image - property size sourceSize: Qt.size(ScreenTools.defaultFontPixelHeight * 2, ScreenTools.defaultFontPixelHeight * 2) - - text: "Button" ///< Pass in your own button text + text: "Button" focusPolicy: Qt.ClickFocus hoverEnabled: !ScreenTools.isMobile + implicitHeight: ScreenTools.defaultFontPixelHeight * 2.5 - implicitHeight: ScreenTools.isTinyScreen ? ScreenTools.defaultFontPixelHeight * 3.5 : ScreenTools.defaultFontPixelHeight * 2.5 - //implicitWidth: __panel.implicitWidth + property bool setupComplete: true ///< true: setup complete indicator shows as completed + property var imageColor: undefined + property string imageResource: "/qmlimages/subMenuButtonImage.png" ///< Button image + property bool largeSize: false + property bool showHighlight: control.pressed | control.checked + + property size sourceSize: Qt.size(ScreenTools.defaultFontPixelHeight * 2, ScreenTools.defaultFontPixelHeight * 2) property ButtonGroup buttonGroup: null onButtonGroupChanged: { @@ -36,8 +36,6 @@ Button { colorGroupEnabled: control.enabled } - property bool showHighlight: control.pressed | control.checked - background: Rectangle { id: innerRect color: qgcPal.windowShade diff --git a/src/UI/AppSettings.qml b/src/UI/AppSettings.qml index f0480b522..cc3610081 100644 --- a/src/UI/AppSettings.qml +++ b/src/UI/AppSettings.qml @@ -79,40 +79,12 @@ Rectangle { id: buttonRepeater model: settingsPagesModel - Button { + SettingsButton { Layout.fillWidth: true text: name - padding: ScreenTools.defaultFontPixelWidth / 2 - hoverEnabled: !ScreenTools.isMobile - autoExclusive: true icon.source: iconUrl visible: pageVisible() - background: Rectangle { - color: qgcPal.buttonHighlight - opacity: checked || pressed ? 1 : enabled && hovered ? .2 : 0 - radius: ScreenTools.defaultFontPixelWidth / 2 - } - - contentItem: RowLayout { - spacing: ScreenTools.defaultFontPixelWidth - - QGCColoredImage { - source: iconUrl - color: displayText.color - width: ScreenTools.defaultFontPixelHeight - height: ScreenTools.defaultFontPixelHeight - } - - QGCLabel { - id: displayText - Layout.fillWidth: true - text: name - color: checked || pressed ? qgcPal.buttonHighlightText : qgcPal.buttonText - horizontalAlignment: QGCLabel.AlignLeft - } - } - onClicked: { if (mainWindow.allowViewSwitch()) { if (rightPanel.source !== url) { diff --git a/src/VehicleSetup/SetupView.qml b/src/VehicleSetup/SetupView.qml index 3785426d1..a41a511a8 100644 --- a/src/VehicleSetup/SetupView.qml +++ b/src/VehicleSetup/SetupView.qml @@ -216,47 +216,29 @@ Rectangle { ColumnLayout { id: buttonColumn - spacing: _defaultTextHeight / 2 + spacing: ScreenTools.defaultFontPixelHeight / 4 - SubMenuButton { + ConfigButton { id: summaryButton - imageResource: "/qmlimages/VehicleSummaryIcon.png" - setupIndicator: false + icon.source: "/qmlimages/VehicleSummaryIcon.png" checked: true - buttonGroup: setupButtonGroup text: qsTr("Summary") Layout.fillWidth: true onClicked: showSummaryPanel() } - SubMenuButton { - id: firmwareButton - imageResource: "/qmlimages/FirmwareUpgradeIcon.png" - setupIndicator: false - buttonGroup: setupButtonGroup - visible: !ScreenTools.isMobile && _corePlugin.options.showFirmwareUpgrade - text: qsTr("Firmware") - Layout.fillWidth: true - - onClicked: showPanel(this, "FirmwareUpgrade.qml") - } - - SubMenuButton { - buttonGroup: setupButtonGroup + ConfigButton { visible: QGroundControl.multiVehicleManager.activeVehicle ? QGroundControl.multiVehicleManager.activeVehicle.flowImageIndex > 0 : false - setupIndicator: false text: qsTr("Optical Flow") Layout.fillWidth: true onClicked: showPanel(this, "OpticalFlowSensor.qml") } - SubMenuButton { + ConfigButton { id: joystickButton - imageResource: "/qmlimages/Joystick.png" - setupIndicator: true + icon.source: "/qmlimages/Joystick.png" setupComplete: _activeJoystick ? _activeJoystick.calibrated || _buttonsOnly : false - buttonGroup: setupButtonGroup visible: _fullParameterVehicleAvailable && joystickManager.joysticks.length !== 0 text: _forcedToButtonsOnly ? qsTr("Buttons") : qsTr("Joystick") Layout.fillWidth: true @@ -271,11 +253,9 @@ Rectangle { id: componentRepeater model: _fullParameterVehicleAvailable ? QGroundControl.multiVehicleManager.activeVehicle.autopilot.vehicleComponents : 0 - SubMenuButton { - imageResource: modelData.iconResource - setupIndicator: modelData.requiresSetup + ConfigButton { + icon.source: modelData.iconResource setupComplete: modelData.setupComplete - buttonGroup: setupButtonGroup text: modelData.name visible: modelData.setupSource.toString() !== "" Layout.fillWidth: true @@ -285,18 +265,26 @@ Rectangle { } } - SubMenuButton { + ConfigButton { id: parametersButton - setupIndicator: false - buttonGroup: setupButtonGroup visible: QGroundControl.multiVehicleManager.parameterReadyVehicleAvailable && !QGroundControl.multiVehicleManager.activeVehicle.usingHighLatencyLink && _corePlugin.showAdvancedUI text: qsTr("Parameters") Layout.fillWidth: true + icon.source: "/qmlimages/subMenuButtonImage.png" onClicked: showPanel(this, "SetupParameterEditor.qml") } + ConfigButton { + id: firmwareButton + icon.source: "/qmlimages/FirmwareUpgradeIcon.png" + visible: !ScreenTools.isMobile && _corePlugin.options.showFirmwareUpgrade + text: qsTr("Firmware") + Layout.fillWidth: true + + onClicked: showPanel(this, "FirmwareUpgrade.qml") + } } }