Redesign of Firmware section at Setup tab

[HThuren]

Changed according to request at discord
New design:

With local build and still logic if not online:

Press on Options give popup (possible to select text):

Old design:

[ctzsnooze]

Looks really great, @HThuren ! Tested, works as proposed. Thank you!

The orange buttons are very intuitive and helpful.

Maybe the Defines Used button, currently a grey 'hover' button, could be an orange 'click to open in new window' button? I think it would be very intuitive like that. And easier to copy and paste the defines used, if needed.

Perhaps the 'help' text could then go back into the ? icon where it previously was, as a pop-up when hovering over the ?, like before?

[HThuren]

@ctzsnooze thank you.
To change Options defined to orange button, a good idea, will require a popup window. Configurator only has such in preset tabs, and here quite sophiscated.
I'll construct a more 'general' popup with title, body and OK button. This can be in use in other future functionality.

[nerdCopter]

IMHO, i prefer hover-over, not pop-out. sorry if i'm the only one.
I also prefer old tooltip-hover for description, not the new always-active text.

[haslinghuis]

Hold fire on this PR as we are working on other methods to retrieve build options from firmware without the need for Build API queries as we need the options for LUA too.

[HThuren]

right, anyway changed back to help in cf_help tooltip, as wanted from @nerdCopter, since the yellow note require lot of space.
Hover over are a possibility, but did look into a popup window a a general tool.
But halt both until @haslinghuis give green go

[haslinghuis]

Just saw it yesterday as it's not my contribution - so improving this PR now does not hurt as we only attend to improve back-end call functions.

[ctzsnooze]

If we keep the 'hover' behaviour, we should use the standard ? icon that we use for other hover elements.

A 'greyed out' button that doesn't work implies a 'normal' button that is disabled. It is bad UI design. The normal user might try to click it, just in case the colour loss was a mistake, but nothing happens, so that confirms their understanding that the button is disabled. They are likely to report this as a bug.

We don't have any other 'greyed out' button elements that mean 'hover over me' on any other windows.

A pop-out lets us copy the text, whereas a hover doesn't.

Anyhow, I still prefer an orange button with a pop-out, but if you want to keep it a hover, then use ? as the UI element, since people intuitively will hover over those.

PS There is another issue with the grey button hover, it is very slow to open, much slower than hovering over a ? element, which is nearly instantaneous. Hovers need to be instant otherwise they appear broken.

[HThuren]

If we keep the 'hover' behaviour, we should use the standard ? icon that we use for other hover elements.

A 'greyed out' button that doesn't work implies a 'normal' button that is disabled. It is bad UI design. The normal user might try to click it, just in case the colour loss was a mistake, but nothing happens, so that confirms their understanding that the button is disabled. They are likely to report this as a bug.

We don't have any other 'greyed out' button elements that mean 'hover over me' on any other windows.

A pop-out lets us copy the text, whereas a hover doesn't.

Anyhow, I still prefer an orange button with a pop-out, but if you want to keep it a hover, then use ? as the UI element, since people intuitively will hover over those.

PS There is another issue with the grey button hover, it is very slow to open, much slower than hovering over a ? element, which is nearly instantaneous. Hovers need to be instant otherwise they appear broken.

I agree, the grey hover are different behaviour than elsewhere in BF.
I go for 3 orange buttons,

The '?' icon say

But are not done yet with at popup for "Options defined"

[nerdCopter]

@HThuren , just a note, i'm a relative new-comer to betaflight team. my opinions should be regarded as my own, not the team's. other team members should have priority and say as well. that said, i've been on computers since 1985 and i think i have good feel for things.

edit: my concern with a pop-out was that such is a dialog that must be closed. this was my personal peeve. if there is a better way to do so, then i'm open. maybe it can auto-close if a user forgets it. 🤷‍♂️

[HThuren]

@HThuren , just a note, i'm a relative new-comer to betaflight team. my opinions should be regarded as my own, not the team's. other team members should have priority and say as well. that said, i've been on computers since 1985 and i think i have good feel for things.

edit: my concern with a pop-out was that such is a dialog that must be closed. this was my personal peeve. if there is a better way to do so, then i'm open. maybe it can auto-close if a user forgets it. 🤷‍♂️

@nerdCopter no worry, I also use my own jugdement :-)
The popup are planning to be modal, then never to forget ..

[ctzsnooze]

where are we at?

[HThuren]

Maybe part of 10.10 ?

[HThuren]

I don't like it:

better without border and like

[haslinghuis]

Need to define columns in the grid layout:

[HThuren]

NOW done, use the more simple and dynamic grid. Support dark theme.

[nerdCopter]

fd215243

flow gets wonky at come widths, but not very important:
wide:

1202px: (odd)

1164px: (okay by me)

[sonarcloud]

Quality Gate passed

Issues
0 New issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

Do you want to test this code? Here you have an automated build:
Betaflight-Configurator-Android
Betaflight-Configurator-Linux
Betaflight-Configurator-macOS
Betaflight-Configurator-Windows
WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!