Merge #355: Icon control

000837b qml: use Icon control (João Barbosa)
8dfe391 qml: add Icon control (João Barbosa)

Pull request description:

  `Button` control is used to show icons because it has support to colorize the image. `Button` is packed with more stuff like states, event handling, label... eventually a light component should be used instead. For now, abstract the usage of `Button` in the new `Icon` control and use it in trivial places. There are more places where `Icon` can be used but require more changes, so I'm leaving them for follow-ups.

ACKs for top commit:
  jarolrod:
    ACK 000837b
  johnny9:
    ACK 000837b

Tree-SHA512: 3211ed13a23e1ade93b74bbe25abcb9b82eee3ae66642688b47e49939af1132a6be18e40c3c4dcbd4a9928dd94abc3c8c1279e9a6117817a5ec3261207269849

Author: hebasto

src/Makefile.qt.include

@@ -362,6 +362,7 @@ QML_RES_QML = \
   qml/controls/ExternalLink.qml \
   qml/controls/FocusBorder.qml \
   qml/controls/Header.qml \
+  qml/controls/Icon.qml \
   qml/controls/InformationPage.qml \
   qml/controls/NavButton.qml \
   qml/controls/PageIndicator.qml \

src/qml/bitcoin_qml.qrc

@@ -23,6 +23,7 @@
         <file>controls/ExternalLink.qml</file>
         <file>controls/FocusBorder.qml</file>
         <file>controls/Header.qml</file>
+        <file>controls/Icon.qml</file>
         <file>controls/InformationPage.qml</file>
         <file>controls/NavButton.qml</file>
         <file>controls/PageIndicator.qml</file>

src/qml/components/BlockClock.qml

@@ -67,19 +67,13 @@ Item {
         }
     }
 
-    Button {
+    Icon {
         id: bitcoinIcon
-        background: null
-        icon.source: "image://images/bitcoin-circle"
-        icon.color: Theme.color.neutral9
-        icon.width: Math.max(dial.width / 5, 1)
-        icon.height: Math.max(dial.width / 5, 1)
+        source: "image://images/bitcoin-circle"
+        color: Theme.color.neutral9
+        size: Math.max(dial.width / 5, 1)
         anchors.bottom: mainText.top
         anchors.horizontalCenter: root.horizontalCenter
-
-        Behavior on icon.color {
-            ColorAnimation { duration: 150 }
-        }
     }
 
     Label {

src/qml/components/CaretRightButton.qml

@@ -4,21 +4,13 @@
 
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import "../controls"
 
-Button {
+Icon {
     id: root
     required property color stateColor
-
-    leftPadding: 0
-    topPadding: 0
-    bottomPadding: 0
-    icon.source: "image://images/caret-right"
-    icon.color: root.stateColor
-    icon.height: 18
-    icon.width: 18
-    background: null
-
-    Behavior on icon.color {
-        ColorAnimation { duration: 150 }
-    }
+    enabled: true
+    source: "image://images/caret-right"
+    color: root.stateColor
+    size: 18
 }

src/qml/components/ThemeSettings.qml

@@ -19,18 +19,12 @@ ColumnLayout {
     Setting {
         Layout.fillWidth: true
         header: qsTr("Light")
-        actionItem: Button {
+        actionItem: Icon {
             anchors.centerIn: parent
             visible: !Theme.dark
-            icon.source: "image://images/check"
-            icon.color: Theme.color.neutral9
-            icon.height: 24
-            icon.width: 24
-            background: null
-
-            Behavior on icon.color {
-                ColorAnimation { duration: 150 }
-            }
+            source: "image://images/check"
+            color: Theme.color.neutral9
+            size: 24
         }
         onClicked: {
             Theme.dark = false
@@ -40,18 +34,12 @@ ColumnLayout {
     Setting {
         Layout.fillWidth: true
         header: qsTr("Dark")
-        actionItem: Button {
+        actionItem: Icon {
             anchors.centerIn: parent
             visible: Theme.dark
-            icon.source: "image://images/check"
-            icon.color: Theme.color.neutral9
-            icon.height: 24
-            icon.width: 24
-            background: null
-
-            Behavior on icon.color {
-                ColorAnimation { duration: 150 }
-            }
+            source: "image://images/check"
+            color: Theme.color.neutral9
+            size: 24
         }
         onClicked: {
             Theme.dark = true;

src/qml/controls/Icon.qml

@@ -0,0 +1,27 @@
+// Copyright (c) 2023 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Button {
+    id: root
+    required property color color
+    required property url source
+    property int size: 32
+    focusPolicy: Qt.NoFocus
+    padding: 0
+    icon.source: root.source
+    icon.color: root.color
+    icon.height: root.size
+    icon.width: root.size
+    enabled: false
+    background: null
+
+    Behavior on icon.color {
+        ColorAnimation {
+            duration: 150
+        }
+    }
+}

src/qml/controls/OptionButton.qml

@@ -84,18 +84,12 @@ Button {
         Item {
             height: parent.height
             width: 40
-            Button {
+            Icon {
                 anchors.centerIn: parent
                 visible: button.checked
-                icon.source: "image://images/check"
-                icon.color: Theme.color.neutral9
-                icon.height: 24
-                icon.width: 24
-                background: null
-
-                Behavior on icon.color {
-                    ColorAnimation { duration: 150 }
-                }
+                source: "image://images/check"
+                color: Theme.color.neutral9
+                size: 24
             }
         }
     }

src/qml/pages/node/Shutdown.qml

@@ -14,14 +14,12 @@ Page {
         anchors.centerIn: parent
         width: parent.width
         spacing: 10
-        Button {
+        Icon {
             Layout.alignment: Qt.AlignCenter
             Layout.bottomMargin: 20
-            background: null
-            icon.source: "image://images/shutdown"
-            icon.color: Theme.color.neutral9
-            icon.width: 60
-            icon.height: 60
+            source: "image://images/shutdown"
+            color: Theme.color.neutral9
+            size: 60
         }
         Header {
             Layout.alignment: Qt.AlignCenter