qml: FlatButton: show indicator for press-and-hold functionality

electrum/gui/qml/components/WalletMainView.qml

@@ -303,6 +303,7 @@ Item {
                     var dialog = receiveDetailsDialog.createObject(mainView)
                     dialog.open()
                 }
+                pressAndHoldIndicator: true
                 onPressAndHold: {
                     Config.userKnowsPressAndHold = true
                     Daemon.currentWallet.deleteExpiredRequests()
@@ -317,6 +318,7 @@ Item {
                 text: qsTr('Send')
                 enabled: !invoiceParser.busy && !piResolver.busy && !requestDetails.busy
                 onClicked: openSendDialog()
+                pressAndHoldIndicator: true
                 onPressAndHold: {
                     Config.userKnowsPressAndHold = true
                     app.stack.push(Qt.resolvedUrl('Invoices.qml'))

electrum/gui/qml/components/controls/FlatButton.qml

@@ -9,6 +9,7 @@ TabButton {
     checkable: false
 
     property bool textUnderIcon: true
+    property bool pressAndHoldIndicator: false
 
     font.pixelSize: constants.fontSizeSmall
     icon.width: constants.iconSizeMedium
@@ -25,4 +26,45 @@ TabButton {
         font: control.font
         color: !control.enabled ? control.Material.hintTextColor : control.down || control.checked ? control.Material.accentColor : control.Material.foreground
     }
+
+    Rectangle {
+        id: indicator
+        anchors.top: control.top
+        anchors.horizontalCenter: control.horizontalCenter
+        width: 0
+        opacity: 0
+        height: 3
+        color: control.Material.accentColor
+
+        states: State {
+            name: 'pressing'
+            when: pressAndHoldIndicator && control.pressed
+            PropertyChanges {
+                target: indicator
+                width: control.width
+                opacity: 1
+            }
+        }
+
+        transitions: Transition {
+            to: 'pressing'
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 200
+                }
+                ParallelAnimation {
+                    NumberAnimation {
+                        target: indicator
+                        property: "width"
+                        duration: 600
+                    }
+                    NumberAnimation {
+                        target: indicator
+                        property: "opacity"
+                        duration: 600
+                    }
+                }
+            }
+        }
+    }
 }