Merge pull request #8010 from DonLakeFlyer/InspectorSize

Mavlink Inspector: Dynamic sizing of message buttons

src/AnalyzeView/MAVLinkInspectorPage.qml

@@ -23,10 +23,11 @@ Item {
     anchors.margins:        ScreenTools.defaultFontPixelWidth
 
     property var    curVehicle:         controller ? controller.activeVehicle : null
-    property int    curMessageIndex:0
+    property int    curMessageIndex:    0
     property var    curMessage:         curVehicle && curVehicle.messages.count ? curVehicle.messages.get(curMessageIndex) : null
     property int    curCompID:          0
     property bool   selectionValid:     false
+    property real   maxButtonWidth:     0
 
     MAVLinkInspectorController {
         id: controller
@@ -76,11 +77,13 @@ Item {
         anchors.topMargin:  ScreenTools.defaultFontPixelHeight
         anchors.bottom:     parent.bottom
         anchors.left:       parent.left
-        width:              buttonCol.width
-        contentWidth:       buttonCol.width
+        width:              maxButtonWidth
+        contentWidth:       width
         contentHeight:      buttonCol.height
         ColumnLayout {
             id:             buttonCol
+            anchors.left:   parent.left
+            anchors.right:  parent.right
             spacing:        ScreenTools.defaultFontPixelHeight * 0.25
             Repeater {
                 model:      curVehicle ? curVehicle.messages : []
@@ -94,7 +97,7 @@ Item {
                         selectionValid  = true
                         curMessageIndex = index
                     }
-                    Layout.minimumWidth: ScreenTools.defaultFontPixelWidth * 40
+                    Layout.fillWidth: true
                 }
             }
         }

src/QmlControls/MAVLinkMessageButton.qml

@@ -18,6 +18,12 @@ Button {
     id:                 control
     height:             ScreenTools.defaultFontPixelHeight * 2
     autoExclusive:      true
+    leftPadding:        ScreenTools.defaultFontPixelWidth
+    rightPadding:       leftPadding
+
+    property real _compIDWidth: ScreenTools.defaultFontPixelWidth * 3
+    property real _hzWidth:     ScreenTools.defaultFontPixelWidth * 7
+    property real _nameWidth:   nameLabel.contentWidth
 
     background: Rectangle {
         anchors.fill:   parent
@@ -28,20 +34,27 @@ Button {
     property int    compID:     0
 
     contentItem: RowLayout {
+        id:         rowLayout
+        spacing:    ScreenTools.defaultFontPixelWidth
+
         QGCLabel {
             text:                   control.compID
             color:                  checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
-            Layout.minimumWidth: ScreenTools.defaultFontPixelWidth * 3
+            Layout.minimumWidth:    _compIDWidth
         }
         QGCLabel {
+            id:                 nameLabel
             text:               control.text
             color:              checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
-            Layout.minimumWidth: ScreenTools.defaultFontPixelWidth * 28
+            Layout.fillWidth:   true
         }
         QGCLabel {
             color:                  checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
             text:                   messageHz.toFixed(1) + 'Hz'
-            Layout.alignment: Qt.AlignRight
+            horizontalAlignment:    Text.AlignRight
+            Layout.minimumWidth:    _hzWidth
         }
     }
+
+    Component.onCompleted: maxButtonWidth = Math.max(maxButtonWidth, _compIDWidth + _hzWidth + _nameWidth + (rowLayout.spacing * 2) + (control.leftPadding * 2))
 }