gui: Implement two-row status bar with centered progress display

[GarlandKey]

This commit refactors the Bitcoin-Qt status bar to display information across two rows for improved visibility and organization:

closes #177

First row (left to right):

• Sync status label (250px min, left-aligned)
• Progress text showing time behind and percentage (centered)
• Status icons (250px min, right-aligned)

Second row:

• Progress bar spanning full width without text overlay

Changes include:

• Renamed progressBarLabel to syncStatusLabel for clarity
• Added new progressTextLabel for separated progress display
• Created two-row container layout with fixed 50px height
• Set equal minimum widths on side elements for true centering
• Right-aligned all icons within frameBlocks container
• Removed text overlay from progress bar

Original Progress Bar:

New Progress Bar:

New Progress Bar on QWindowsStyle & QWindowsXPStyle:

Author: Garland Key [email protected]

[luke-jr]

Probably should get some UX designer's input, but personally I dislike the concept of a double-row progress bar.

[GarlandKey]

@luke-jr The problem is that having the text overlay the progress bar itself doesn't meet WCAG guidelines due to low contrast. That is why the decision was made to separate the two.

If we keep the single row, I would need to change the color of the progress bar to be a much darker shade, so that it meets accessibly standards.

Let me know your thoughts and I'll make the necessary changes.

[KurtisStirling]

I like the new progress bar—has a more modern look and the elongated bar is nice for glimpsing precise progress easily (precision is less as chart area shrinks)

It does take up more vertical space, not saying that's a problem necessarily, just an observation.

To fix the contrast issue, and easier fix could be to just shift the text to the right of the chart (where there is empty space), instead of overlaying?

[Ataraxia009]

I personally don't mind the double row too much, its better than what we have now

To fix the contrast issue, and easier fix could be to just shift the text to the right of the chart (where there is empty space), instead of overlaying?

I also dont mind this..

[bigshiny90]

Mostly, i would depend on the designers to decide if the change is good. (I do want to review the code and may have some thoughts).

My biggest question is not about this change in particular, but on our overall plan for QT/GUI changes for next knots version - i.e. I believe we may want to take on a FULL refresh on the GUI, and not take it on piecemeal. if this is something we choose to do, then this change could be added as part of that effort (instead of merging right now, for example).

i will make one note about the changes - we should always consider IF a change is necessary and how it affects our ongoing merging strategy given that we are downstream from Core right now. When making changes, unnecessary changes like renaming to the progress label to 'syncStatusLabel' should be reconsidered because it can create unnecessary difficulty when merging future Core changes. ultimately, @luke-jr knows more about if a change like this should be considered problematic for merge strategy going forward.

So, TLDR on changing the label 'name' from progressBarLabel to syncStatusLabel - though maybe semantically more pleasing, it is unnecessary and may be the wrong thing here, given core merge issues in the future.

[Ataraxia009]

Until a solidified plan is down for the GUI overhaul, I don't think its worth it to prevent active development on the GUI (covered this before).

[luke-jr]

My biggest concern with the double-status-bar approach is that in normal operation, there is no progress to show at all. Are we going to have it disappear and the single line jump down? That seems ugly...

Additionally, no other application has two status lines.

[bigshiny90]

okay, so no worries about not having a greater GUI plan yet. I would agree with @luke-jr 's point about the transition from 2 to 1 line possibly being ugly.

regarding my point about changing label names in code and possible any possible problems with commit strategy - that one is simply up to luke - he may consider it unproblematic and the name change to syncStatusLabel is fine.

[GarlandKey]

To fix the contrast issue, and easier fix could be to just shift the text to the right of the chart (where there is empty space), instead of overlaying?

@KurtisStirling I attempted this when wireframing and my thought was that it looked cluttered and imbalanced.

[GarlandKey]

My biggest concern with the double-status-bar approach is that in normal operation, there is no progress to show at all. Are we going to have it disappear and the single line jump down? That seems ugly...

Additionally, no other application has two status lines.

@luke-jr I didn't consider what it will look like when the progress bar isn't there. When the progress bar is gone, that will definitely be ugly.

I think these are the two best options:

1. Hide the second row when the progress bar is finished. Then center the first row within the static height of the status bar.

2. Go back to the original solution and center the progress bar, but style it to have a high color contrast.

[GarlandKey]

okay, so no worries about not having a greater GUI plan yet. I would agree with @luke-jr 's point about the transition from 2 to 1 line possibly being ugly.

regarding my point about changing label names in code and possible any possible problems with commit strategy - that one is simply up to luke - he may consider it unproblematic and the name change to syncStatusLabel is fine.

@bigshiny90 If I go back to a single row, the name change won't be necessary, which is where I'm leaning in all of this.

[bigshiny90]

okay, so no worries about not having a greater GUI plan yet. I would agree with @luke-jr 's point about the transition from 2 to 1 line possibly being ugly.
regarding my point about changing label names in code and possible any possible problems with commit strategy - that one is simply up to luke - he may consider it unproblematic and the name change to syncStatusLabel is fine.

@bigshiny90 If I go back to a single row, the name change won't be necessary, which is where I'm leaning in all of this.

Yeah I don’t want to make a big deal about it… Luke can let you know if there are pr merge issues like this, when the time comes…

[Ataraxia009]

After seeing everyone else's comments single row is probably better, with increased contrast and centering of the progress bar or stretching it to fill the space it has available. Another thing on Mac is, it doesn't show time left which would be a nice to have, but out of scope for this PR.

[GarlandKey]

Alright. I'm going to start work on this again. I plan to have an updated commit added by end of day tomorrow.

[1440000bytes]

New Progress Bar:
https://private-user-images.githubusercontent.com/3108516/492603502-eb5d2020-e0b4-4a15-9184-861d852010fa.png

This looks better though.