Merge #271: Remove redundant MouseAreas from controls that are Buttons

hebasto · hebasto · commit 7b168daa64e5 · 2023-02-22T08:25:16.000Z
80392a5 qml: remove redundant MouseAreas from controls that are Buttons (Jarol Rodriguez) Pull request description: For controls that are buttons, an additional `MouseArea` layer is unnecessary as they already have built-in event detection for actions such as [pressing](https://doc.qt.io/qt-6/qml-qtquick-controls2-abstractbutton.html#pressed-prop) and [hovering](https://doc.qt.io/qt-6/qml-qtquick-controls2-control.html#hovered-prop). By eliminating the redundant MouseAreas in the `ContinueButton`, `NavButton`, `OutlineButton`, `Setting`, and `TextButton` controls, we make their implementations cleaner. Previously, the `MouseArea` was utilized to set the controls' state, but now this is achieved through `when` statements that are bundled with the states themselves. [![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/271) [![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/271) [![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/271) [![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/271) ACKs for top commit: johnny9: ACK 80392a5 Tree-SHA512: 1bebc46d6a3b2449ae028e799611711197756c212899f831005b35881281b7f1a2a4d93b8cb39d683b9b90621928421e99c26491195a870b99eb260d08ce21b7
diff --git a/src/qml/controls/ContinueButton.qml b/src/qml/controls/ContinueButton.qml
@@ -10,6 +10,7 @@ Button {
     font.family: "Inter"
     font.styleName: "Semi Bold"
     font.pixelSize: 18
+    hoverEnabled: true
     contentItem: Text {
         text: parent.text
         font: parent.font
@@ -23,42 +24,20 @@ Button {
         implicitWidth: 300
         color: Theme.color.orange
         radius: 5
-        state:"DEFAULT"
 
         states: [
             State {
-                name: "DEFAULT"
-                PropertyChanges { target: bg; color: Theme.color.orange }
+                name: "PRESSED"; when: root.pressed
+                PropertyChanges { target: bg; color: Theme.color.orangeLight2 }
             },
             State {
-                name: "HOVER"
+                name: "HOVER"; when: root.hovered
                 PropertyChanges { target: bg; color: Theme.color.orangeLight1 }
-            },
-            State {
-                name: "PRESSED"
-                PropertyChanges { target: bg; color: Theme.color.orangeLight2 }
             }
         ]
 
         Behavior on color {
             ColorAnimation { duration: 150 }
         }
     }
-    MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: {
-            root.background.state = "HOVER"
-        }
-        onExited: {
-            root.background.state = "DEFAULT"
-        }
-        onPressed: {
-            root.background.state = "PRESSED"
-        }
-        onReleased: {
-            root.background.state = "DEFAULT"
-            root.clicked()
-        }
-    }
 }
diff --git a/src/qml/controls/ExternalLink.qml b/src/qml/controls/ExternalLink.qml
@@ -15,17 +15,17 @@ AbstractButton {
     property url iconSource: "image://images/export"
     property int iconWidth: 22
     property int iconHeight: 22
-    property color iconColor
-    property color textColor
+    property color iconColor: Theme.color.neutral9
+    property color textColor: Theme.color.neutral7
     state: root.parentState
 
     states: [
         State {
-            name: "FILLED"
+            name: "ACTIVE"
             PropertyChanges {
                 target: root
-                iconColor: Theme.color.neutral9
-                textColor: Theme.color.neutral7
+                iconColor: Theme.color.orange
+                textColor: Theme.color.orange
             }
         },
         State {
@@ -35,14 +35,6 @@ AbstractButton {
                 iconColor: Theme.color.orangeLight1
                 textColor: Theme.color.orangeLight1
             }
-        },
-        State {
-            name: "ACTIVE"
-            PropertyChanges {
-                target: root
-                iconColor: Theme.color.orange
-                textColor: Theme.color.orange
-            }
         }
     ]
 
diff --git a/src/qml/controls/NavButton.qml b/src/qml/controls/NavButton.qml
@@ -14,7 +14,7 @@ AbstractButton {
     property url iconSource: ""
     property Rectangle iconBackground: null
     property color iconColor: Theme.color.neutral9
-
+    hoverEnabled: true
     topPadding: text_background.active ? 7 : 14
     bottomPadding: text_background.active ? 7 : 14
     rightPadding: text_background.active ? 22 : 14
diff --git a/src/qml/controls/OutlineButton.qml b/src/qml/controls/OutlineButton.qml
@@ -10,6 +10,7 @@ Button {
     font.family: "Inter"
     font.styleName: "Semi Bold"
     font.pixelSize: 18
+    hoverEnabled: true
     contentItem: Text {
         text: parent.text
         font: parent.font
@@ -23,44 +24,24 @@ Button {
         implicitWidth: 340
         color: Theme.color.background
         radius: 5
-        state:"DEFAULT"
         border {
             width: 1
+            color: Theme.color.neutral6
+
             Behavior on color {
                 ColorAnimation { duration: 150 }
             }
         }
-
-        states: [
-            State {
-                name: "DEFAULT"
-                PropertyChanges { target: bg; border.color: Theme.color.neutral6}
-            },
-            State {
-                name: "HOVER"
-                PropertyChanges { target: bg; border.color: Theme.color.neutral9 }
-            },
-            State {
-                name: "PRESSED"
-                PropertyChanges { target: bg; border.color: Theme.color.orangeLight2 }
-            }
-        ]
     }
-    MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: {
-            root.background.state = "HOVER"
-        }
-        onExited: {
-            root.background.state = "DEFAULT"
-        }
-        onPressed: {
-            root.background.state = "PRESSED"
-        }
-        onReleased: {
-            root.background.state = "DEFAULT"
-            root.clicked()
+
+    states: [
+        State {
+            name: "PRESSED"; when: root.pressed
+            PropertyChanges { target: bg; border.color: Theme.color.orangeLight2 }
+        },
+        State {
+            name: "HOVER"; when: root.hovered
+            PropertyChanges { target: bg; border.color: Theme.color.neutral9 }
         }
-    }
+    ]
 }
diff --git a/src/qml/controls/Setting.qml b/src/qml/controls/Setting.qml
@@ -14,6 +14,7 @@ AbstractButton {
     property alias loadedItem: action_loader.item
     property string description
     property color stateColor
+    hoverEnabled: true
     state: "FILLED"
 
     states: [
diff --git a/src/qml/controls/TextButton.qml b/src/qml/controls/TextButton.qml
@@ -8,15 +8,15 @@ import QtQuick.Controls 2.15
 Button {
     id: root
     property int textSize: 18
-    property color textColor
-    property color bgColor
+    property color textColor: Theme.color.orange
+    property color bgColor: Theme.color.background
     property bool bold: true
     property bool rightalign: false
     font.family: "Inter"
     font.styleName: bold ? "Semi Bold" : "Regular"
     font.pixelSize: root.textSize
     padding: 15
-    state: "DEFAULT"
+    hoverEnabled: true
     contentItem: Text {
         text: root.text
         font: root.font
@@ -37,45 +37,20 @@ Button {
     }
     states: [
         State {
-            name: "DEFAULT"
+            name: "PRESSED"; when: root.pressed
             PropertyChanges {
                 target: root
-                textColor: Theme.color.orange
-                bgColor: Theme.color.background
+                textColor: Theme.color.orangeLight2
+                bgColor: Theme.color.neutral3
             }
         },
         State {
-            name: "HOVER"
+            name: "HOVER"; when: root.hovered
             PropertyChanges {
                 target: root
                 textColor: Theme.color.orangeLight1
                 bgColor: Theme.color.neutral2
             }
-        },
-        State {
-            name: "PRESSED"
-            PropertyChanges {
-                target: root
-                textColor: Theme.color.orangeLight2
-                bgColor: Theme.color.neutral3
-            }
         }
     ]
-    MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: {
-            root.state = "HOVER"
-        }
-        onExited: {
-            root.state = "DEFAULT"
-        }
-        onPressed: {
-            root.state = "PRESSED"
-        }
-        onReleased: {
-            root.state = "DEFAULT"
-            root.clicked()
-        }
-    }
 }
diff --git a/src/qml/controls/ValueInput.qml b/src/qml/controls/ValueInput.qml
@@ -10,26 +10,19 @@ TextInput {
     required property string parentState
     property string description: ""
     property int descriptionSize: 18
-    property color textColor
+    property color textColor: Theme.color.neutral9
+    enabled: true
     state: root.parentState
 
     states: [
         State {
-            name: "FILLED"
-            PropertyChanges {
-                target: root
-                enabled: true
-                textColor: Theme.color.neutral9
-            }
+            name: "ACTIVE"
+            PropertyChanges { target: root; textColor: Theme.color.orange }
         },
         State {
             name: "HOVER"
             PropertyChanges { target: root; textColor: Theme.color.orangeLight1 }
         },
-        State {
-            name: "ACTIVE"
-            PropertyChanges { target: root; textColor: Theme.color.orange }
-        },
         State {
             name: "DISABLED"
             PropertyChanges {
