Merge pull request #2284 from DonLakeFlyer/SetupButtons

Redesigned setup buttons to save space

src/QmlControls/SubMenuButton.qml

@@ -14,7 +14,7 @@ Button {
     text: "Button"  ///< Pass in your own button text
 
     checkable:  true
-    height:     ScreenTools.defaultFontPixelHeight * 5
+    height:     ScreenTools.defaultFontPixelHeight * 2.5
 
     style: ButtonStyle {
         id: buttonStyle
@@ -30,44 +30,27 @@ Button {
             id:     innerRect
             color:  showHighlight ? qgcPal.buttonHighlight : qgcPal.windowShade
 
-            readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.5
+            QGCColoredImage {
+                id:                     image
+                anchors.leftMargin:     ScreenTools.defaultFontPixelWidth
+                anchors.left:           parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                width:                  ScreenTools.defaultFontPixelHeight * 2
+                height:                 ScreenTools.defaultFontPixelHeight * 2
+                fillMode:               Image.PreserveAspectFit
+                smooth:                 true
+                color:                  control.setupComplete ? qgcPal.button : "red"
+                source:                 control.imageResource
+            }
 
             QGCLabel {
                 id:                     titleBar
-                width:                  parent.width
-                height:                 parent.titleHeight
+                anchors.leftMargin:     ScreenTools.defaultFontPixelWidth
+                anchors.left:           image.right
+                anchors.verticalCenter: parent.verticalCenter
                 verticalAlignment:      TextEdit.AlignVCenter
-                horizontalAlignment:    TextEdit.AlignHCenter
                 color:                  showHighlight ? qgcPal.buttonHighlightText : qgcPal.buttonText
-                font.pixelSize:         ScreenTools.isMobile ? ScreenTools.defaultFontPixelSize * 0.75 : ScreenTools.defaultFontPixelSize
                 text:                   control.text
-
-                Rectangle {
-                    anchors.rightMargin:    ScreenTools.defaultFontPixelWidth / 3
-                    anchors.right:          parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    width:                  ScreenTools.defaultFontPixelWidth
-                    height:                 width
-                    radius:                 width / 2
-                    color:                  control.setupComplete ? "#00d932" : "red"
-                    visible:                control.setupIndicator
-                }
-            }
-
-            Rectangle {
-                anchors.top:    titleBar.bottom
-                anchors.bottom: parent.bottom
-                width:          parent.width
-                color:          qgcPal.windowShadeDark
-
-                QGCColoredImage {
-                    anchors.margins:    ScreenTools.defaultFontPixelHeight * .75
-                    anchors.fill:       parent
-                    fillMode:           Image.PreserveAspectFit
-                    smooth:             true
-                    color:              showHighlight ? qgcPal.buttonHighlight : qgcPal.button
-                    source:             control.imageResource
-                }
             }
         }
 

src/VehicleSetup/SetupView.qml

@@ -46,7 +46,7 @@ Rectangle {
     readonly property real      _defaultTextHeight: ScreenTools.defaultFontPixelHeight
     readonly property real      _defaultTextWidth:  ScreenTools.defaultFontPixelWidth
     readonly property real      _margin:            _defaultTextHeight / 2
-    readonly property real      _buttonWidth:       _defaultTextWidth * 17
+    readonly property real      _buttonWidth:       _defaultTextWidth * 18
     readonly property string    _armedVehicleText:  "This operation cannot be performed while vehicle is armed."
 
     property string _messagePanelText:              "missing message panel text"
@@ -235,7 +235,7 @@ Rectangle {
                     setupIndicator: false
                     checked:        true
                     exclusiveGroup: setupButtonGroup
-                    text:           "SUMMARY"
+                    text:           "Summary"
 
                     onClicked: showSummaryPanel()
                 }
@@ -247,7 +247,7 @@ Rectangle {
                     setupIndicator: false
                     exclusiveGroup: setupButtonGroup
                     visible:        !ScreenTools.isMobile
-                    text:           "FIRMWARE"
+                    text:           "Firmware"
 
                     onClicked: showFirmwarePanel()
                 }
@@ -258,7 +258,7 @@ Rectangle {
                     exclusiveGroup: setupButtonGroup
                     visible:        _fullParameterVehicleAvailable
                     setupIndicator: false
-                    text:           "PX4FLOW"
+                    text:           "PX4Flow"
                     onClicked:      showPX4FlowPanel()
                 }
 
@@ -269,7 +269,7 @@ Rectangle {
                     setupComplete:  joystickManager.activeJoystick ? joystickManager.activeJoystick.calibrated : false
                     exclusiveGroup: setupButtonGroup
                     visible:        _fullParameterVehicleAvailable && joystickManager.joysticks.length != 0
-                    text:           "JOYSTICK"
+                    text:           "Joystick"
 
                     onClicked: showJoystickPanel()
                 }
@@ -283,7 +283,7 @@ Rectangle {
                         setupIndicator: modelData.requiresSetup
                         setupComplete:  modelData.setupComplete
                         exclusiveGroup: setupButtonGroup
-                        text:           modelData.name.toUpperCase()
+                        text:           modelData.name
 
                         onClicked: showVehicleComponentPanel(modelData)
                     }
@@ -294,7 +294,7 @@ Rectangle {
                     setupIndicator: false
                     exclusiveGroup: setupButtonGroup
                     visible:        multiVehicleManager.parameterReadyVehicleAvailable
-                    text:           "PARAMETERS"
+                    text:           "Parameters"
 
                     onClicked: showParametersPanel()
                 }