Use QGCCombBox with alternateText for better understanding of the ability to click on these indicators

src/ui/toolbar/ArmedIndicator.qml

@@ -19,20 +19,24 @@ import QGroundControl.Palette               1.0
 
 //-------------------------------------------------------------------------
 //-- Armed Indicator
-QGCLabel {
+QGCComboBox {
     anchors.top:    parent.top
     anchors.bottom: parent.bottom
-    verticalAlignment:  Text.AlignVCenter
-    text:               _armed ? qsTr("Armed") : qsTr("Disarmed")
+    alternateText:  _armed ? qsTr("Armed") : qsTr("Disarmed")
+    model:          [ qsTr("Arm"), qsTr("Disarm") ]
     font.pointSize: ScreenTools.mediumFontPointSize
-    color:              qgcPal.buttonText
+    currentIndex:   -1
+    sizeToContents: true
 
-    property bool   _armed:         activeVehicle ? activeVehicle.armed : false
+    property var    _activeVehicle: QGroundControl.multiVehicleManager.activeVehicle
+    property bool   _armed:         _activeVehicle ? _activeVehicle.armed : false
 
-    QGCPalette { id: qgcPal }
-
-    QGCMouseArea {
-        fillItem: parent
-        onClicked: _armed ? mainWindow.disarmVehicle() : mainWindow.armVehicle()
+    onActivated: {
+        if (index == 0) {
+            mainWindow.armVehicle()
+        } else {
+            mainWindow.disarmVehicle()
+        }
+        currentIndex = -1
     }
 }

src/ui/toolbar/ModeIndicator.qml

@@ -19,52 +19,20 @@ import QGroundControl.Palette               1.0
 
 //-------------------------------------------------------------------------
 //-- Mode Indicator
-Item {
+QGCComboBox {
     anchors.top:    parent.top
     anchors.bottom: parent.bottom
-    width:          flightModeSelector.width
-
-    property var _flightModes:      activeVehicle ? activeVehicle.flightModes : [ ]
+    alternateText:  _activeVehicle ? _activeVehicle.flightMode : ""
+    model:          _flightModes
+    font.pointSize: ScreenTools.mediumFontPointSize
+    currentIndex:   -1
+    sizeToContents: true
 
-    on_FlightModesChanged: flightModeSelector.updateFlightModesMenu()
+    property var _activeVehicle:    QGroundControl.multiVehicleManager.activeVehicle
+    property var _flightModes:      _activeVehicle ? _activeVehicle.flightModes : [ ]
 
-    QGCLabel {
-        id:                     flightModeSelector
-        text:                   activeVehicle ? activeVehicle.flightMode : qsTr("N/A", "No data to display")
-        font.pointSize:         ScreenTools.mediumFontPointSize
-        color:                  qgcPal.buttonText
-        anchors.verticalCenter: parent.verticalCenter
-        QGCMenu {
-            id: flightModesMenu
-        }
-        Component {
-            id: flightModeMenuItemComponent
-            QGCMenuItem {
-                onTriggered: activeVehicle.flightMode = text
-            }
-        }
-        property var flightModesMenuItems: []
-        function updateFlightModesMenu() {
-            if (activeVehicle && activeVehicle.flightModeSetAvailable) {
-                // Remove old menu items
-                var i
-                for (i = 0; i < flightModesMenuItems.length; i++) {
-                    flightModesMenu.removeItem(flightModesMenuItems[i])
-                }
-                flightModesMenuItems.length = 0
-                // Add new items
-                for (i = 0; i < _flightModes.length; i++) {
-                    var menuItem = flightModeMenuItemComponent.createObject(null, { "text": _flightModes[i] })
-                    flightModesMenuItems.push(menuItem)
-                    flightModesMenu.insertItem(i, menuItem)
-                }
-            }
-        }
-        Component.onCompleted: flightModeSelector.updateFlightModesMenu()
-        MouseArea {
-            visible:        activeVehicle && activeVehicle.flightModeSetAvailable
-            anchors.fill:   parent
-            onClicked:      flightModesMenu.popup()
-        }
+    onActivated: {
+        _activeVehicle.flightMode = _flightModes[index]
+        currentIndex = -1
     }
 }