Add focus outline border to focusable components by jarolrod · Pull Request #264 · bitcoin-core/gui-qml

jarolrod · 2023-02-14T04:03:35Z

Replaces #214

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

a	b	c	d	e	f	g	h	i	j	k

#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

GBKS · 2023-02-14T09:54:26Z

@jarolrod looks awesome. Yes, the nav buttons are inset from the edges a bit. Looks better, and allows for the focus state to be visible.

jarolrod · 2023-02-14T11:33:22Z

Updated from 8e6365b to a14c3a8, compare

changes: rebased over main

hebasto · 2023-02-14T15:09:15Z

Once more rebase?

jarolrod · 2023-02-14T16:45:48Z

updated from a14c3a8 to 48635c1, compare

changes: rebased over main

johnny9

BlockClock has a bug that causes the focus outline to always be on.

jarolrod · 2023-02-16T18:32:18Z

Updated from 48635c1 to 350bf21, compare

changes: addressed review comment

johnny9

ACK 350bf21

jarolrod · 2023-02-17T04:44:07Z

Updated from 350bf21 to bae7abe, compare

Changes: changed approach so that

The Outline Rectangle is a reusable component called FocusBorder
This FocusBorder encapsulates property definitions as well as behavior animations to reduce code
Handle background states on tab focus for relevant controls

jarolrod · 2023-02-17T06:22:57Z

Updated from bae7abe to 6d43e20, compare

changes: fixed no newline at EOF

jarolrod · 2023-02-21T04:58:12Z

Updated from 6d43e20 to ab0ea57, compare

Changes:

dropped changes on checking the reasons behind the visual focus change
No longer change backgrounds of certain components when given focus per feedback on slack
squashed commits related to adding the usage of FocusBorder into one commit as the changes are now simple enough.

johnny9

ACK ab0ea57

72fe12f qml: add missing topMargin to Navigation Bar middle detail (jarolrod) Pull request description: This was missed in #264 | master | pr | | ------ | -- | | <img width="642" alt="Screen Shot 2023-05-26 at 4 03 33 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/fc1523fd-0742-4beb-abb4-850f72a80fe3"> | <img width="642" alt="Screen Shot 2023-05-26 at 3 57 54 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/d643d02e-4410-4267-9521-5405039b0f53"> | [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/334) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/334) [![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/unsecure_mac_arm64_gui.zip?branch=pull/334) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/334) [![ARM32 Android](https://img.shields.io/badge/OS-Android%2032bit-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android32/unsecure_android_32bit_apk.zip?branch=pull/334) ACKs for top commit: johnny9: ACK 72fe12f Tree-SHA512: 9d94d0e031160b6dc33cf4f27d79880dfda6482527146ea129ed98460d91b2177b87404d2ac59e4ac728531444f244abd3e38b049a8ab3106db45bf8f7fbebdd

promag · 2023-08-21T08:55:41Z

+    Behavior on visible {
+        NumberAnimation { duration: 150 }
+    }


What is the idea? should it be opacity animation?

Yes, a simple opacity animation is fine.

… components 25c7de695c9d0a7de105bf97f7ebb3a5968c131d qml: add FocusBorder to Focus-able components (jarolrod) f0c5bf01b496095ac110120b6b0110fd1d28fee5 qml: Introduce FocusBorder component (Jarol Rodriguez) e718e59dfb9726fe62b89ccf5a452daddb0f5432 qml: inset NavButtons 4px from borders to give space for focus outline (jarolrod) Pull request description: Replaces bitcoin-core/gui-qml#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"> | bitcoin-core/gui-qml#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 25c7de695c9d0a7de105bf97f7ebb3a5968c131d Tree-SHA512: f26ca941d0d3a8026846f3a86a7867fb437aeb3b3aca2af3054ce08c57f46f16c8536691b49a9d08dba8f14009d771f9dbddfe9e61d886ee2cc59ddcdb25db0a

…ar middle detail eca46cbea63ab68ae7c8bcd962fe9e10d738e5fd qml: add missing topMargin to Navigation Bar middle detail (jarolrod) Pull request description: This was missed in bitcoin-core/gui-qml#264 | master | pr | | ------ | -- | | <img width="642" alt="Screen Shot 2023-05-26 at 4 03 33 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/fc1523fd-0742-4beb-abb4-850f72a80fe3"> | <img width="642" alt="Screen Shot 2023-05-26 at 3 57 54 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/d643d02e-4410-4267-9521-5405039b0f53"> | [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/334) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/334) [![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/unsecure_mac_arm64_gui.zip?branch=pull/334) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/334) [![ARM32 Android](https://img.shields.io/badge/OS-Android%2032bit-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android32/unsecure_android_32bit_apk.zip?branch=pull/334) ACKs for top commit: johnny9: ACK eca46cbea63ab68ae7c8bcd962fe9e10d738e5fd Tree-SHA512: 9d94d0e031160b6dc33cf4f27d79880dfda6482527146ea129ed98460d91b2177b87404d2ac59e4ac728531444f244abd3e38b049a8ab3106db45bf8f7fbebdd

jarolrod force-pushed the focus-outline branch from 8e6365b to a14c3a8 Compare February 14, 2023 11:32

hebasto added the Needs rebase label Feb 14, 2023

jarolrod force-pushed the focus-outline branch from a14c3a8 to 48635c1 Compare February 14, 2023 16:44

jarolrod mentioned this pull request Feb 15, 2023

V1: Meta Issue #248

Closed

hebasto removed the Needs rebase label Feb 15, 2023

johnny9 suggested changes Feb 16, 2023

View reviewed changes

Comment thread src/qml/components/BlockClock.qml Outdated

jarolrod force-pushed the focus-outline branch from 48635c1 to 350bf21 Compare February 16, 2023 18:30

johnny9 approved these changes Feb 17, 2023

View reviewed changes

qml: inset NavButtons 4px from borders to give space for focus outline

31ec28d

jarolrod force-pushed the focus-outline branch from 350bf21 to bae7abe Compare February 17, 2023 04:41

qml: Introduce FocusBorder component

c54a2c7

jarolrod force-pushed the focus-outline branch from bae7abe to 6d43e20 Compare February 17, 2023 06:21

jarolrod mentioned this pull request Feb 17, 2023

[DO NOT MERGE] Review current state #267

Closed

johnny9 reviewed Feb 17, 2023

View reviewed changes

Comment thread src/qml/controls/TextButton.qml Outdated

qml: add FocusBorder to Focus-able components

ab0ea57

jarolrod force-pushed the focus-outline branch from 6d43e20 to ab0ea57 Compare February 21, 2023 04:55

johnny9 approved these changes Feb 28, 2023

View reviewed changes

hebasto merged commit 94f1fe5 into bitcoin-core:main Feb 28, 2023

jarolrod mentioned this pull request May 26, 2023

Add missing topMargin to Navigation Bar middle detail #334

Merged

promag reviewed Aug 21, 2023

View reviewed changes

Conversation

jarolrod commented Feb 14, 2023 • edited by hebasto Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

GBKS commented Feb 14, 2023

Uh oh!

jarolrod commented Feb 14, 2023

Uh oh!

hebasto commented Feb 14, 2023

Uh oh!

jarolrod commented Feb 14, 2023

Uh oh!

johnny9 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jarolrod commented Feb 16, 2023

Uh oh!

johnny9 left a comment

Choose a reason for hiding this comment

Uh oh!

jarolrod commented Feb 17, 2023

Uh oh!

jarolrod commented Feb 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jarolrod commented Feb 21, 2023

Uh oh!

johnny9 left a comment

Choose a reason for hiding this comment

Uh oh!

promag Aug 21, 2023

Choose a reason for hiding this comment

Uh oh!

GBKS Sep 4, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jarolrod commented Feb 14, 2023 •

edited by hebasto

Loading

jarolrod commented Feb 17, 2023 •

edited

Loading