Skip to content
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.

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

Dark theme, UI elements unification, UX enhancements #2207

Open
wants to merge 243 commits into
base: master
Choose a base branch
from

Conversation

bfmvsa
Copy link
Contributor

@bfmvsa bfmvsa commented Oct 14, 2024

THIS IS DRAFT, please do not merge since some parts of this huge PR is still in progress.

Please Note: I didn't test these changes in Windows, because I do not have this OS, if there are any problems please send me screenshots.

I'm going to write detailed docs for all changes. But for now this short description is:
Mostly all changes are cosmetic, the biggest UX changes were in Failsafe tab (simplified visual part).
In this PR I use bootstrap sass framework for unification UI elements like buttons, tables, lists, etc. Also, it supports dark themes out of the box. However, developers still can use regular CSS files as they used to be.

Apart from Dark/Light theme, I've added an inverted sidebar & header according to this reasonable request.

Some screenshots:
screenshot 2024-10-14 at 18 22 51
screenshot 2024-10-14 at 18 22 37
screenshot 2024-10-14 at 18 25 24

[27 October '24]

Ready for testing tabs:

  1. Welcome
  2. Mission Control
  3. Firmware Flasher
  4. SITL [25 October '24]
  5. Status
  6. Calibration
  7. Mixer [27 October '24]
  8. Outputs [27 October '24]
  9. Ports
  10. Configuration
  11. Failsafe
  12. Tuning [24 October '24]
  13. Advanced Tuning
  14. Programming [24 October '24]
  15. Receiver
  16. Modes
  17. Adjustments
  18. GPS
  19. Alignment Tool
  20. OSD [25 October '24]
  21. LED Strip
  22. Sensors
  23. Tethered Logging
  24. Blackbox
  25. CLI
  26. Options

@bfmvsa
Copy link
Contributor Author

bfmvsa commented Oct 18, 2024

@trailx This is still a standalone app, when I say "mobile friendly" I mean it looks ok and is usable on narrow screens. In other words, It has a responsive design.

@trailx
Copy link

trailx commented Oct 20, 2024

@bfmvsa I gotcha, I wasn't sure if there was something I had missed. There are often times when I use it half screen, so just being more responsive to window size will be nice!

Since you're in there, one idea that came up in a discussion was creating a button in the blackbox tab that would put the FC into MSC mode. Betaflight has this, and it's handy rather than having to look it up on GitHub every time. This seems like a relatively easy add and would bring more attention to the MSC function. Since you're working on the UI, you seemed like the best person to bring this up to. Thanks for the consideration!

@bfmvsa
Copy link
Contributor Author

bfmvsa commented Oct 20, 2024

@trailx It looks like somebody was trying to add this button (at least it is presented on the tab). But if I am not mistaken this button is not working (always disabled and there are no any click handlers for this button), also this button is added only for SD cards, need it also for onboard dataflash chip.
As a part of this huge PR I decided to not change the current logic a lot, but in the future your suggestion will be implemented, this is already in my todo list :)
screenshot 2024-10-20 at 17 11 57

@bfmvsa
Copy link
Contributor Author

bfmvsa commented Oct 24, 2024

[Update] Reworked Tuning tab according to the new UI
screenshot 2024-10-24 at 17 11 51

@bfmvsa
Copy link
Contributor Author

bfmvsa commented Oct 27, 2024

@sensei-hacker @trailx Just updated the PR, now Everything is ready from my side. I probably will do some commits, but in general, it is ready for testing.

@bfmvsa bfmvsa changed the title [DRAFT] Dark theme, UI elements unification, UX enhancements Dark theme, UI elements unification, UX enhancements Oct 27, 2024
@bfmvsa bfmvsa marked this pull request as ready for review October 31, 2024 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants