Merge #264: Add focus outline border to focusable components

ab0ea57 qml: add FocusBorder to Focus-able components (jarolrod)
c54a2c7 qml: Introduce FocusBorder component (Jarol Rodriguez)
31ec28d qml: inset NavButtons 4px from borders to give space for focus outline (jarolrod)

Pull request description:

  Replaces #214

  Adds the focus outline to the (intended) focusable components:

  | a | b | c | d | e | f | g | h | i | j | k |
  | - | - | - | - | - | - | - | - | - | - | - |
  | <img width="752" alt="Screen Shot 2023-02-13 at 8 48 31 PM" src="https://user-images.githubusercontent.com/23396902/218634844-31045e76-5673-4d74-8606-8c1b27a3cf5e.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 48 40 PM" src="https://user-images.githubusercontent.com/23396902/218634877-f935fbd2-289c-4967-a31e-953daeda08d2.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 48 45 PM" src="https://user-images.githubusercontent.com/23396902/218634925-d42f984e-a58d-43bb-88b3-49de6a273ff0.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 48 53 PM" src="https://user-images.githubusercontent.com/23396902/218634957-7b0d458b-80c2-4e02-938f-20324e2235fa.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 48 55 PM" src="https://user-images.githubusercontent.com/23396902/218634993-ae906fc9-0410-4551-a3a8-890bacea76fc.png"> | <img width="752" alt="Screen Shot 2023-02-13 at 8 48 58 PM" src="https://user-images.githubusercontent.com/23396902/218635019-040cd823-e9f8-4e86-b35b-8f4248b9d6a8.png"> | <img width="752" alt="Screen Shot 2023-02-13 at 8 49 01 PM" src="https://user-images.githubusercontent.com/23396902/218635041-820f0e49-9abc-4b61-8a7b-ec18a927d12f.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 49 19 PM" src="https://user-images.githubusercontent.com/23396902/218635060-3f94b33f-2be2-443b-a681-09ee14e9c467.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 49 21 PM" src="https://user-images.githubusercontent.com/23396902/218635100-1a1aec9b-38c6-4d62-9265-3f9700b07d4e.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 49 26 PM" src="https://user-images.githubusercontent.com/23396902/218635123-ef687083-aee4-4db0-9c1d-7dd8ebfdd75c.png"> | <img width="752" alt="Screen Shot 2023-02-13 at 8 49 31 PM" src="https://user-images.githubusercontent.com/23396902/218635147-f00d6480-337f-4947-88a6-920c9f463d12.png"> |

  #219 is still something we have to fix in order for this to work properly

  Additionally, this insets the navbuttons 4px from the borders of the GUI to allow for the focus outline to show properly. I believe that **GBKS** intended the buttons to be inset a bit from the borders

  | a | b |
  | - | - |
  | <img width="752" alt="Screen Shot 2023-02-13 at 8 36 33 PM" src="https://user-images.githubusercontent.com/23396902/218636059-13ecf932-5e41-4bb7-94bb-264523283438.png"> |  <img width="752" alt="Screen Shot 2023-02-13 at 8 38 57 PM" src="https://user-images.githubusercontent.com/23396902/218636186-499c5549-b2cc-4325-aade-022be3f47e85.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/264)
  [![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/264)
  [![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/264)
  [![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/264)

ACKs for top commit:
  johnny9:
    ACK ab0ea57

Tree-SHA512: f26ca941d0d3a8026846f3a86a7867fb437aeb3b3aca2af3054ce08c57f46f16c8536691b49a9d08dba8f14009d771f9dbddfe9e61d886ee2cc59ddcdb25db0a

Author: hebasto

src/Makefile.qt.include

@@ -347,6 +347,7 @@ QML_RES_QML = \
   qml/controls/ContinueButton.qml \
   qml/controls/CoreText.qml \
   qml/controls/ExternalLink.qml \
+  qml/controls/FocusBorder.qml \
   qml/controls/Header.qml \
   qml/controls/InformationPage.qml \
   qml/controls/NavButton.qml \

src/qml/bitcoin_qml.qrc

@@ -17,6 +17,7 @@
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
         <file>controls/ExternalLink.qml</file>
+        <file>controls/FocusBorder.qml</file>
         <file>controls/Header.qml</file>
         <file>controls/InformationPage.qml</file>
         <file>controls/NavButton.qml</file>

src/qml/components/BlockClock.qml

@@ -24,6 +24,8 @@ Item {
     property bool synced: nodeModel.verificationProgress > 0.999
     property bool paused: false
 
+    activeFocusOnTab: true
+
     BlockClockDial {
         id: dial
         anchors.fill: parent
@@ -81,6 +83,9 @@ Item {
             root.paused = !root.paused
             nodeModel.pause = root.paused
         }
+        FocusBorder {
+            visible: root.activeFocus
+        }
     }
 
     states: [

src/qml/controls/ContinueButton.qml

@@ -34,5 +34,9 @@ Button {
         Behavior on color {
             ColorAnimation { duration: 150 }
         }
+
+        FocusBorder {
+            visible: root.visualFocus
+        }
     }
 }

src/qml/controls/FocusBorder.qml

@@ -0,0 +1,35 @@
+// 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
+import "../controls"
+
+
+ Rectangle {
+    id: root
+    property int topMargin: -4
+    property int bottomMargin: -4
+    property int leftMargin: -4
+    property int rightMargin: -4
+    property int borderRadius: 9
+
+    anchors.fill: parent
+    anchors.topMargin: root.topMargin
+    anchors.bottomMargin: root.bottomMargin
+    anchors.leftMargin: root.leftMargin
+    anchors.rightMargin: root.rightMargin
+    border.width: 2
+    border.color: Theme.color.purple
+    radius: root.borderRadius
+    color: "transparent"
+
+    Behavior on border.color {
+        ColorAnimation { duration: 150 }
+    }
+
+    Behavior on visible {
+        NumberAnimation { duration: 150 }
+    }
+}

src/qml/controls/NavButton.qml

@@ -41,6 +41,10 @@ AbstractButton {
             }
         ]
 
+        FocusBorder {
+            visible: root.visualFocus
+        }
+
         Behavior on color {
             ColorAnimation { duration: 150 }
         }

src/qml/controls/NavigationBar.qml

@@ -19,6 +19,8 @@ RowLayout {
         Layout.preferredWidth: parent.width / 3
         Loader {
             Layout.alignment: Qt.AlignLeft
+            Layout.topMargin: 4
+            Layout.leftMargin: 4
             id: left_detail
             active: true
             visible: active
@@ -40,6 +42,8 @@ RowLayout {
         Loader {
             id: right_detail
             Layout.alignment: Qt.AlignRight
+            Layout.topMargin: 4
+            Layout.rightMargin: 4
             active: true
             visible: active
             sourceComponent: root.rightDetail

src/qml/controls/OptionButton.qml

@@ -18,15 +18,9 @@ Button {
         border.color: button.checked ? Theme.color.orange : button.hovered ? Theme.color.neutral9 : Theme.color.neutral5
         radius: 10
         color: "transparent"
-        Rectangle {
+        FocusBorder {
             visible: button.visualFocus
-            anchors.fill: parent
-            anchors.margins: -4
-            border.width: 2
-            border.color: Theme.color.orange
-            radius: 14
-            color: "transparent"
-            opacity: 0.4
+            borderRadius: 14
         }
     }
     contentItem: RowLayout {

src/qml/controls/Setting.qml

@@ -44,6 +44,14 @@ AbstractButton {
         }
     ]
 
+    background: FocusBorder {
+        visible: root.visualFocus
+        topMargin: -4
+        bottomMargin: -4
+        leftMargin: -6
+        rightMargin: -6
+    }
+
     MouseArea {
         id: mouseArea
         anchors.fill: root

src/qml/controls/TextButton.qml

@@ -31,6 +31,10 @@ Button {
         Behavior on color {
             ColorAnimation { duration: 150 }
         }
+
+        FocusBorder {
+            visible: root.visualFocus
+        }
     }
     states: [
         State {