Merge #241: Add Setting color interaction states (Filled, Hover, Active), wire for ExternalLink and ValueInput Settings

970c66f qml: add Hover,Filled, and Active color interaction states to ValueInput (jarolrod)
c9ef4b1 qml: add Hover,Filled, Active color interaction states to ExternalLink (jarolrod)
aa98f35 qml: Add Hover, Filled, and Active color interaction states to Setting (jarolrod)
403d57e qml: allow to specify the header color (jarolrod)

Pull request description:

  Introduces the Filled, Hover and Active states for Settings. Will introduce the rest of the states in follow-ups.

  light
  | Filled | Hover | Active |
  | ------ | ----- | ------ |
  | <img width="454" alt="Screen Shot 2023-02-01 at 1 42 17 AM" src="https://user-images.githubusercontent.com/23396902/215970965-c3b646dc-f70a-41dd-80e9-add8e461bad3.png"> | <img width="454" alt="Screen Shot 2023-02-01 at 1 42 26 AM" src="https://user-images.githubusercontent.com/23396902/215970984-c7a8aa8e-d23d-40a1-9e7f-aec0709c536d.png"> | <img width="454" alt="Screen Shot 2023-02-01 at 1 42 34 AM" src="https://user-images.githubusercontent.com/23396902/215971011-9cd829a5-c643-4bb0-8666-e22d25214a97.png"> |

  dark
  | Filled | Hover | Active |
  | ------ | ----- | ------ |
  | <img width="454" alt="Screen Shot 2023-02-01 at 1 41 29 AM" src="https://user-images.githubusercontent.com/23396902/215970689-bd23ca8e-7234-4a37-a9bc-20de8f72049a.png"> | <img width="454" alt="Screen Shot 2023-02-01 at 1 41 43 AM" src="https://user-images.githubusercontent.com/23396902/215970732-38806d33-a2b8-46f0-a9fa-733030a2e62a.png"> | <img width="454" alt="Screen Shot 2023-02-01 at 1 41 51 AM" src="https://user-images.githubusercontent.com/23396902/215970768-e391c2af-0c21-47e7-a541-89f1e76a0e2f.png"> |

  [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/<PR>)
  [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/<PR>)
  [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/<PR>)
  [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/<PR>)

ACKs for top commit:
  johnny9:
    ACK 970c66f

Tree-SHA512: e917f02c9fbedf623be4268f90fdbd3fc4314085b6cc01b2d0f747bad8c68bc94b1004a9f0256ad16e99b0cceb3efdfcddae460d760b0a06ad8f0786a256c374

Author: hebasto

src/qml/components/AboutOptions.qml

@@ -10,39 +10,47 @@ import "../controls"
 ColumnLayout {
     spacing: 20
     Setting {
+        id: websiteLink
         Layout.fillWidth: true
         header: qsTr("Website")
         actionItem: ExternalLink {
+            parentState: websiteLink.state
             description: "bitcoincore.org"
             link: "https://bitcoincore.org"
             iconSource: "image://images/caret-right"
         }
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: sourceLink
         Layout.fillWidth: true
         header: qsTr("Source code")
         actionItem: ExternalLink {
+            parentState: sourceLink.state
             description: "github.com/bitcoin/bitcoin"
             link: "https://github.com/bitcoin/bitcoin"
             iconSource: "image://images/caret-right"
         }
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: licenseLink
         Layout.fillWidth: true
         header: qsTr("License")
         actionItem: ExternalLink {
+            parentState: licenseLink.state
             description: "MIT"
             link: "https://opensource.org/licenses/MIT"
             iconSource: "image://images/caret-right"
         }
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: versionLink
         Layout.fillWidth: true
         header: qsTr("Version")
         actionItem: ExternalLink {
+            parentState: versionLink.state
             description: "v22.99.0-1e7564eca8a6"
             link: "https://bitcoin.org/en/download"
             iconSource: "image://images/caret-right"

src/qml/components/DeveloperOptions.qml

@@ -10,9 +10,11 @@ import "../controls"
 ColumnLayout {
     spacing: 20
     Setting {
+        id: devDocsLink
         Layout.fillWidth: true
         header: qsTr("Developer documentation")
         actionItem: ExternalLink {
+            parentState: devDocsLink.state
             iconSource: "qrc:/icons/export"
             iconWidth: 30
             iconHeight: 30
@@ -21,17 +23,21 @@ ColumnLayout {
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: dbcacheSetting
         Layout.fillWidth: true
         header: qsTr("Database cache size")
         actionItem: ValueInput {
+            parentState: dbcacheSetting.state
             description: ("450 MiB")
         }
         onClicked: loadedItem.forceActiveFocus()
     }
     Setting {
+        id: parSetting
         Layout.fillWidth: true
         header: qsTr("Script verification threads")
         actionItem: ValueInput {
+            parentState: parSetting.state
             description: ("0")
         }
         onClicked: loadedItem.forceActiveFocus()

src/qml/components/StorageSettings.qml

@@ -22,9 +22,11 @@ ColumnLayout {
         }
     }
     Setting {
+        id: pruneTargetSetting
         Layout.fillWidth: true
         header: qsTr("Storage limit (GB)")
         actionItem: ValueInput {
+            parentState: pruneTargetSetting.state
             description: optionsModel.pruneSizeGB
             onEditingFinished: optionsModel.pruneSizeGB = parseInt(text)
         }

src/qml/controls/ExternalLink.qml

@@ -8,12 +8,43 @@ import QtQuick.Layouts 1.15
 
 AbstractButton {
     id: root
+    required property string parentState
     required property string link
     property string description: ""
     property int descriptionSize: 18
     property url iconSource: ""
     property int iconWidth: 18
     property int iconHeight: 18
+    property color iconColor
+    property color textColor
+    state: root.parentState
+
+    states: [
+        State {
+            name: "FILLED"
+            PropertyChanges {
+                target: root
+                iconColor: Theme.color.neutral9
+                textColor: Theme.color.neutral7
+            }
+        },
+        State {
+            name: "HOVER"
+            PropertyChanges {
+                target: root
+                iconColor: Theme.color.orangeLight1
+                textColor: Theme.color.orangeLight1
+            }
+        },
+        State {
+            name: "ACTIVE"
+            PropertyChanges {
+                target: root
+                iconColor: Theme.color.orange
+                textColor: Theme.color.orange
+            }
+        }
+    ]
 
     contentItem: RowLayout {
         spacing: 0
@@ -26,9 +57,13 @@ AbstractButton {
                 font.family: "Inter"
                 font.styleName: "Regular"
                 font.pixelSize: root.descriptionSize
-                color: Theme.color.neutral7
+                color: root.textColor
                 textFormat: Text.RichText
-                text: "<style>a:link { color: " + Theme.color.neutral7 + "; text-decoration: none;}</style>" + "<a href=\"" + link + "\">" + root.description + "</a>"
+                text: root.description
+
+                Behavior on color {
+                    ColorAnimation { duration: 150 }
+                }
             }
         }
         Loader {
@@ -37,11 +72,15 @@ AbstractButton {
             visible: active
             sourceComponent: Button {
                 icon.source: root.iconSource
-                icon.color: Theme.color.neutral9
+                icon.color: root.iconColor
                 icon.height: root.iconHeight
                 icon.width: root.iconWidth
                 background: null
                 onClicked: root.clicked()
+
+                Behavior on icon.color {
+                    ColorAnimation { duration: 150 }
+                }
             }
         }
     }

src/qml/controls/Header.qml

@@ -13,6 +13,7 @@ ColumnLayout {
     property int headerMargin
     property int headerSize: 28
     property bool headerBold: false
+    property color headerColor: Theme.color.neutral9
     property string description: ""
     property int descriptionMargin: 10
     property int descriptionSize: 18
@@ -30,10 +31,14 @@ ColumnLayout {
         font.family: "Inter"
         font.styleName: root.headerBold ? "Semi Bold" : "Regular"
         font.pixelSize: root.headerSize
-        color: Theme.color.neutral9
+        color: root.headerColor
         text: root.header
         horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
         wrapMode: wrap ? Text.WordWrap : Text.NoWrap
+
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
     }
     Loader {
         Layout.fillWidth: true

src/qml/controls/Setting.qml

@@ -13,6 +13,42 @@ AbstractButton {
     property alias actionItem: action_loader.sourceComponent
     property alias loadedItem: action_loader.item
     property string description
+    property color stateColor
+    state: "FILLED"
+
+    states: [
+        State {
+            name: "FILLED"
+            PropertyChanges { target: root; stateColor: Theme.color.neutral9 }
+        },
+        State {
+            name: "HOVER"
+            PropertyChanges { target: root; stateColor: Theme.color.orangeLight1 }
+        },
+        State {
+            name: "ACTIVE"
+            PropertyChanges { target: root; stateColor: Theme.color.orange }
+        }
+    ]
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: root
+        hoverEnabled: true
+        onEntered: {
+            root.state = "HOVER"
+        }
+        onExited: {
+            root.state = "FILLED"
+        }
+        onPressed: {
+            root.state = "ACTIVE"
+        }
+        onReleased: {
+            root.state = "HOVER"
+            root.clicked()
+        }
+    }
 
     contentItem: ColumnLayout {
         spacing: 20
@@ -23,6 +59,7 @@ AbstractButton {
                 center: false
                 header: root.header
                 headerSize: 18
+                headerColor: root.stateColor
                 description: root.description
                 descriptionSize: 15
                 descriptionMargin: 0

src/qml/controls/ValueInput.qml

@@ -7,14 +7,36 @@ import QtQuick.Controls 2.15
 
 TextEdit {
     id: root
+    required property string parentState
     property string description: ""
     property int descriptionSize: 18
+    property color textColor
+    state: root.parentState
+
+    states: [
+        State {
+            name: "FILLED"
+            PropertyChanges { target: root; textColor: Theme.color.neutral9 }
+        },
+        State {
+            name: "HOVER"
+            PropertyChanges { target: root; textColor: Theme.color.orangeLight1 }
+        },
+        State {
+            name: "ACTIVE"
+            PropertyChanges { target: root; textColor: Theme.color.orange }
+        }
+    ]
 
     font.family: "Inter"
     font.styleName: "Regular"
     font.pixelSize: root.descriptionSize
-    color: Theme.color.neutral8
+    color: root.textColor
     text: description
     horizontalAlignment: Text.AlignRight
     wrapMode: Text.WordWrap
+
+    Behavior on color {
+        ColorAnimation { duration: 150 }
+    }
 }