New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce Navigation button states in accordance to the design file #231

Open

jarolrod opened this issue Jan 28, 2023 · 1 comment

Member

jarolrod commented Jan 28, 2023

back nav	done nav

We are missing some states for the nav buttons which are defined in the design file:

default (implemented)	Hover	Pressed	Focused

jarolrod mentioned this issue

Add NavButton interaction color animation states #234

Merged

hebasto added a commit that referenced this issue


          Merge #234: Add NavButton interaction color animation states

f3150f7

20edc75 qml: add NavButton interaction color animations (Jarol Rodriguez)
d0a5296 qml: do not use NavButton for NodeSettings settings navigation buttons (jarolrod)

Pull request description:

  Introduces the missing NavButton interaction color animation states as detailed in  #231, except there are issues with the sizing of the components themselves.

  #### Dark Mode

  | Default | Hovered | Pressed |
  | ------- | ------- | ------- |
  | <img width="104" alt="Screen Shot 2023-01-29 at 4 41 48 AM" src="https://user-images.githubusercontent.com/23396902/215318084-676a8834-b7df-4ad0-8e0f-06bb763bf24f.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 42 04 AM" src="https://user-images.githubusercontent.com/23396902/215318088-cab6d039-8532-4782-9198-e18be5cf1e78.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 42 21 AM" src="https://user-images.githubusercontent.com/23396902/215318108-490d8bf6-5eb6-45c4-bc20-08b6cc4f854b.png"> |

  #### Dark Mode

  | Default | Hovered | Pressed |
  | ------- | ------- | ------- |
  | <img width="104" alt="Screen Shot 2023-01-29 at 4 43 40 AM" src="https://user-images.githubusercontent.com/23396902/215318182-cd81e393-5b34-4100-a714-773fe7b7b232.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 44 00 AM" src="https://user-images.githubusercontent.com/23396902/215318189-57029f83-db97-434c-9eb6-1c31fc4caac0.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 44 12 AM" src="https://user-images.githubusercontent.com/23396902/215318192-d20e0ec5-a16b-4c23-bb2f-7fd94cf30a22.png"> |

  As can be told from the screenshots the sizing of the component itself isn't correct; this needs to be addressed, potentially in a follow-up.

  The first commit allows for us to use the NavButton correctly with these new background states but also fixes an issue where the Right Caret buttons in the NodeSettings page were much bigger than in the other areas we use this button. A follow-up can contain this button in a nice component.

  [![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/<PR>)
  [![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/<PR>)
  [![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/<PR>)
  [![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/<PR>)

ACKs for top commit:
  johnny9:
    ACK 20edc75

Tree-SHA512: 3e0b5c13fbb9d018159fdf9fff8a3f67549acbdca554939faa5bdebc68820012721cb17e0c926c4486cd38be426666aa50eff6604b334b9dc379747325d7df39

Member Author

jarolrod commented Jan 31, 2023

the color states has been added, but this will be closed when we figure out the sizing issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment