Dynamic sizing of message buttons

src/AnalyzeView/MAVLinkInspectorPage.qml

@@ -22,11 +22,12 @@ Item {
     anchors.fill:           parent
     anchors.margins:        ScreenTools.defaultFontPixelWidth
 
-    property var    curVehicle:     controller ? controller.activeVehicle : null
-    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 var    curVehicle:         controller ? controller.activeVehicle : null
+    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
+            text:                   control.compID
+            color:                  checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
+            Layout.minimumWidth:    _compIDWidth
         }
         QGCLabel {
-            text:   control.text
-            color:  checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
-            Layout.minimumWidth: ScreenTools.defaultFontPixelWidth * 28
+            id:                 nameLabel
+            text:               control.text
+            color:              checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
+            Layout.fillWidth:   true
         }
         QGCLabel {
-            color:  checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
-            text:   messageHz.toFixed(1) + 'Hz'
-            Layout.alignment: Qt.AlignRight
+            color:                  checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
+            text:                   messageHz.toFixed(1) + 'Hz'
+            horizontalAlignment:    Text.AlignRight
+            Layout.minimumWidth:    _hzWidth
         }
     }
+
+    Component.onCompleted: maxButtonWidth = Math.max(maxButtonWidth, _compIDWidth + _hzWidth + _nameWidth + (rowLayout.spacing * 2) + (control.leftPadding * 2))
 }