search

bitcoin-core / gui-qml

Bitcoin GUI (experimental QML-based fork)
MIT License
106 stars 40 forks source link

Introduce Tooltip for the BlockClock navbar button #400

Closed johnny9 closed 1 month ago

johnny9 commented 2 months ago

The Tooltip will appear when hovering over the BlockClock tab button in the desktop navigation bar. It will show the current state of IBD.

Two things are different than the figma. The wording for remaining blocks matches what is shown on the BlockClock instead of what the figma shows and After sync, Blockheight is shown instead. Looking for opinions on both during review.

vlcsnap-2024-05-01-20h05m06s361

Build Artifacts

johnny9 commented 2 months ago

Update from dc31a22 to a7e4faa

johnny9 commented 2 months ago

7453346 there should also be a tooltip state for when node is offline/stopped, i.e: I pause the blockclock -> tooltip keeps displaying the blocktime from last online/sync time. doesn't seem to be right

Good point. I will add some basic state status for paused/connecting/connected. I think i will just go with what the block clock currently displays then have the designers review.

johnny9 commented 2 months ago

Update from 7453346 to bd62c7c

Screenshot from 2024-05-06 21-59-03 Screenshot from 2024-05-06 21-58-56 Screenshot from 2024-05-06 21-58-53

johnny9 commented 2 months ago

Update from bd62c7c to 2478b9e

GBKS commented 2 months ago

Good one. I tested and found a few things.

First, the screenshots:

image

As you can see, the text disappears in light mode, and the color of the tip does not adjust. On the web, it's possible to tie SVG colors to CSS color variables that automatically change when the theme changes. Not sure what the technique is for QML.

For me, it switched straight from "Downloading blocks - Estimating" to "Blocktime - xyz". It then counted blocks from ~1.5M or so to the current number. For much of that time it showed the almost full red circle, which felt like something was broken.

The tooltip should be placed 4-5px higher up, so the arrow tip overlaps with the button. From Figma: image

Good call with the extra states. Can we list out which states we need? I started putting some of them together. image

GBKS commented 2 months ago

Also a question. I see text directly in the code. To simplify localization, should those be text reference IDs instead so the actual copy can be grabbed from a locale-specific dictionary?

johnny9 commented 2 months ago

Also a question. I see text directly in the code. To simplify localization, should those be text reference IDs instead so the actual copy can be grabbed from a locale-specific dictionary?

the qsTr() wrapper function is how localization is managed with Qt

johnny9 commented 2 months ago

For me, it switched straight from "Downloading blocks - Estimating" to "Blocktime - xyz". It then counted blocks from ~1.5M or so to the current number. For much of that time it showed the almost full red circle, which felt like something was broken.

Unfortunately that is an old bug we're aware of. It has to do with how we determine if IBD is finished or not.

Good call with the extra states. Can we list out which states we need?

I think those are the main ones at the moment. "Could not connect" is not included in my commit as we don't currently have that state until we integrate Network detection. Additionally, we'll probably want some error status as well.

johnny9 commented 2 months ago

Update to to 8f8341f: