Skip to content

Commit 94f1fe5

Browse files
hebastohebasto
committed
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
2 parents 0fc3fdc + ab0ea57 commit 94f1fe5

10 files changed

+68
-8
lines changed

‎src/Makefile.qt.include

+1
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,7 @@ QML_RES_QML = \
347347
qml/controls/ContinueButton.qml \
348348
qml/controls/CoreText.qml \
349349
qml/controls/ExternalLink.qml \
350+
qml/controls/FocusBorder.qml \
350351
qml/controls/Header.qml \
351352
qml/controls/InformationPage.qml \
352353
qml/controls/NavButton.qml \

‎src/qml/bitcoin_qml.qrc

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<file>controls/ContinueButton.qml</file>
1818
<file>controls/CoreText.qml</file>
1919
<file>controls/ExternalLink.qml</file>
20+
<file>controls/FocusBorder.qml</file>
2021
<file>controls/Header.qml</file>
2122
<file>controls/InformationPage.qml</file>
2223
<file>controls/NavButton.qml</file>

‎src/qml/components/BlockClock.qml

+5
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ Item {
2424
property bool synced: nodeModel.verificationProgress > 0.999
2525
property bool paused: false
2626

27+
activeFocusOnTab: true
28+
2729
BlockClockDial {
2830
id: dial
2931
anchors.fill: parent
@@ -81,6 +83,9 @@ Item {
8183
root.paused = !root.paused
8284
nodeModel.pause = root.paused
8385
}
86+
FocusBorder {
87+
visible: root.activeFocus
88+
}
8489
}
8590

8691
states: [

‎src/qml/controls/ContinueButton.qml

+4
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,9 @@ Button {
3434
Behavior on color {
3535
ColorAnimation { duration: 150 }
3636
}
37+
38+
FocusBorder {
39+
visible: root.visualFocus
40+
}
3741
}
3842
}

‎src/qml/controls/FocusBorder.qml

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Copyright (c) 2023 The Bitcoin Core developers
2+
// Distributed under the MIT software license, see the accompanying
3+
// file COPYING or http://www.opensource.org/licenses/mit-license.php.
4+
5+
import QtQuick 2.15
6+
import QtQuick.Controls 2.15
7+
import "../controls"
8+
9+
10+
Rectangle {
11+
id: root
12+
property int topMargin: -4
13+
property int bottomMargin: -4
14+
property int leftMargin: -4
15+
property int rightMargin: -4
16+
property int borderRadius: 9
17+
18+
anchors.fill: parent
19+
anchors.topMargin: root.topMargin
20+
anchors.bottomMargin: root.bottomMargin
21+
anchors.leftMargin: root.leftMargin
22+
anchors.rightMargin: root.rightMargin
23+
border.width: 2
24+
border.color: Theme.color.purple
25+
radius: root.borderRadius
26+
color: "transparent"
27+
28+
Behavior on border.color {
29+
ColorAnimation { duration: 150 }
30+
}
31+
32+
Behavior on visible {
33+
NumberAnimation { duration: 150 }
34+
}
35+
}

‎src/qml/controls/NavButton.qml

+4
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ AbstractButton {
4141
}
4242
]
4343

44+
FocusBorder {
45+
visible: root.visualFocus
46+
}
47+
4448
Behavior on color {
4549
ColorAnimation { duration: 150 }
4650
}

‎src/qml/controls/NavigationBar.qml

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ RowLayout {
1919
Layout.preferredWidth: parent.width / 3
2020
Loader {
2121
Layout.alignment: Qt.AlignLeft
22+
Layout.topMargin: 4
23+
Layout.leftMargin: 4
2224
id: left_detail
2325
active: true
2426
visible: active
@@ -40,6 +42,8 @@ RowLayout {
4042
Loader {
4143
id: right_detail
4244
Layout.alignment: Qt.AlignRight
45+
Layout.topMargin: 4
46+
Layout.rightMargin: 4
4347
active: true
4448
visible: active
4549
sourceComponent: root.rightDetail

‎src/qml/controls/OptionButton.qml

+2-8
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,9 @@ Button {
1818
border.color: button.checked ? Theme.color.orange : button.hovered ? Theme.color.neutral9 : Theme.color.neutral5
1919
radius: 10
2020
color: "transparent"
21-
Rectangle {
21+
FocusBorder {
2222
visible: button.visualFocus
23-
anchors.fill: parent
24-
anchors.margins: -4
25-
border.width: 2
26-
border.color: Theme.color.orange
27-
radius: 14
28-
color: "transparent"
29-
opacity: 0.4
23+
borderRadius: 14
3024
}
3125
}
3226
contentItem: RowLayout {

‎src/qml/controls/Setting.qml

+8
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ AbstractButton {
4444
}
4545
]
4646

47+
background: FocusBorder {
48+
visible: root.visualFocus
49+
topMargin: -4
50+
bottomMargin: -4
51+
leftMargin: -6
52+
rightMargin: -6
53+
}
54+
4755
MouseArea {
4856
id: mouseArea
4957
anchors.fill: root

‎src/qml/controls/TextButton.qml

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ Button {
3131
Behavior on color {
3232
ColorAnimation { duration: 150 }
3333
}
34+
35+
FocusBorder {
36+
visible: root.visualFocus
37+
}
3438
}
3539
states: [
3640
State {

0 commit comments

Comments
 (0)