DelayButton: Gradient to indicate button type, auto help text

* There is a gradient on the left to visual indicate this is a delay button
* If you click and release before activating it will show "Hold to Confirm" help text within the button
* The "Hold to Confirm" help text will disappear after a timeout

Author: DonLakeFlyer

src/FlightDisplay/FlyViewGripperDropPanel.qml

@@ -20,12 +20,6 @@ ColumnLayout {
     property var _buttonTitles: [qsTr("Open"), qsTr("Close"), qsTr("Stop")]
     property var _buttonActions: [QGCMAVLink.GripperActionOpen, QGCMAVLink.GripperActionClose, QGCMAVLink.GripperActionStop]
 
-    QGCLabel {
-        Layout.fillWidth:   true
-        text:               qsTr("Hold to Confirm")
-        font.pointSize:     ScreenTools.smallFontPointSize
-    }
-
     Repeater {
         model: _buttonTitles
 

src/FlightDisplay/GuidedActionConfirm.qml

@@ -91,7 +91,7 @@ Rectangle {
             Layout.fillWidth:       true
             Layout.leftMargin:      closeButton.width + closeButton.anchors.rightMargin
             Layout.rightMargin:     Layout.leftMargin
-            text:                   control.title
+            text:                   control.message
             horizontalAlignment:    Text.AlignHCenter
         }
 
@@ -104,7 +104,7 @@ Rectangle {
 
         QGCDelayButton {
             Layout.fillWidth:   true
-            text:               qsTr("Hold To Confirm")
+            text:               control.title
             enabled:            _utmspEnabled === true? utmspSliderTrigger : true
             opacity:            if(_utmspEnabled){utmspSliderTrigger === true ? 1 : 0.5} else{1}
 

src/QmlControls/FlightModeIndicator.qml

@@ -141,14 +141,6 @@ Item {
                 }
             }
 
-            QGCLabel {
-                text:               qsTr("Hold to confirm")
-                font.pointSize:     ScreenTools.smallFontPointSize
-                Layout.fillWidth:   true
-                horizontalAlignment:Text.AlignHCenter
-                visible:            flightModeSettings.requireModeChangeConfirmation.rawValue
-            }
-
             QGCDelayButton {
                 id:                 vtolTransitionButton
                 Layout.fillWidth:   true

src/QmlControls/MainStatusIndicator.qml

@@ -196,7 +196,6 @@ RowLayout {
                 QGCDelayButton {
                     enabled:    _armed || !_healthAndArmingChecksSupported || _activeVehicle.healthAndArmingCheckReport.canArm
                     text:       _armed ? qsTr("Disarm") : (control._allowForceArm ? qsTr("Force Arm") : qsTr("Arm"))
-                    showHelp:   true
 
                     onActivated: {
                         if (_armed) {

src/QmlControls/QGCDelayButton.qml

@@ -10,16 +10,13 @@ DelayButton {
     id:             control
     hoverEnabled:   !ScreenTools.isMobile
     topPadding:     _verticalPadding
-    bottomPadding:  _verticalPadding + (showHelp ? ScreenTools.defaultFontPixelHeight : 0)
+    bottomPadding:  _verticalPadding
     leftPadding:    _horizontalPadding
     rightPadding:   _horizontalPadding
-    bottomInset:    showHelp ? ScreenTools.defaultFontPixelHeight : 0
     focusPolicy:    Qt.ClickFocus
     font.family:    ScreenTools.normalFontFamily
-    text:           ""
     delay:          defaultDelay
 
-    property bool   showHelp:       false // true: show "Hold to Confirm" help text
     property bool   showBorder:     qgcPal.globalTheme === QGCPalette.Light
     property real   backRadius:     ScreenTools.buttonBorderRadius
     property real   heightFactor:   0.5
@@ -33,20 +30,51 @@ DelayButton {
     property alias textColor:           text.color
 
     property bool   _showHighlight:     enabled && pressed
-
-    property int _horizontalPadding:    ScreenTools.defaultFontPixelWidth * 2
-    property int _verticalPadding:      Math.round(ScreenTools.defaultFontPixelHeight * heightFactor)
+    property int    _horizontalPadding: ScreenTools.defaultFontPixelWidth * 2
+    property int    _verticalPadding:   Math.round(ScreenTools.defaultFontPixelHeight * heightFactor)
+    property bool   _showHelp:          false
+    property bool   _activated:         false
 
     QGCPalette { id: qgcPal; colorGroupEnabled: enabled }
 
+    Timer {
+        id:         helpTimeout
+        interval:   3000
+        repeat:     false
+        onTriggered: control._showHelp = false
+    }
+
+    onActivated: {
+        _activated = true
+        _showHelp = false
+    }
+    onPressed: {
+        _activated = false
+    }
+    onReleased: {
+        _showHelp = !_activated
+        _activated = false
+        if (_showHelp) {
+            helpTimeout.start()
+        } else {
+            helpTimeout.stop()
+        }
+    }
+
     background: Rectangle {
         id:             backRect
         radius:         backRadius
-        implicitWidth:  Math.max(control.showHelp ? helpText.contentWidth : 0, ScreenTools.implicitButtonWidth)
+        implicitWidth:  Math.max(control._showHelp ? helpText.contentWidth : 0, ScreenTools.implicitButtonWidth)
         implicitHeight: ScreenTools.implicitButtonHeight
         border.width:   showBorder ? 1 : 0
         border.color:   qgcPal.buttonBorder
-        color:          qgcPal.button
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+
+            GradientStop { position: 0.0; color: qgcPal.buttonHighlight }
+            GradientStop { position: 0.15; color: qgcPal.button }
+        }
 
         Rectangle {
             anchors.fill:           parent
@@ -60,10 +88,9 @@ DelayButton {
             id:                         helpText
             text:                       qsTr("Hold to Confirm")
             anchors.bottom:             parent.bottom
-            anchors.bottomMargin:       -contentHeight
             anchors.horizontalCenter:   parent.horizontalCenter
             font.pointSize:             ScreenTools.smallFontPointSize
-            visible:                    control.showHelp
+            visible:                    control._showHelp
         }
     }
 
@@ -73,7 +100,7 @@ DelayButton {
         text:                   control.text
         font.pointSize:         control.pointSize
         font.family:            control.font.family
-        font.weight:            fontWeight
+        font.weight:            control.fontWeight
         color:                  qgcPal.buttonText
     }
 }