Create Tools menu #1595
Create Tools menu #1595
Conversation
|
Will put on draft till we merge #1594. |
src/App.vue
Outdated
| :icon-class=" | ||
| interfaceStore.isOnSmallScreen | ||
| ? 'scale-[100%] -mb-[1px] md:ml-[2px]' | ||
| : 'scale-[97%] lg:ml-[1px] -mr-[2px] xl:-mb-[4px]' |
There was a problem hiding this comment.
If you set the scale here to 90% the icon proportion gets better for this icon in particular:
rafaellehmkuhl
force-pushed
the
create-tools-menu
branch
2 times, most recently
from
a8db7bb to
ba2e9c0
Compare
There was a problem hiding this comment.
The menu itself works as expected, and doesn't seem to have caused any issues with the existing settings menu :-)
That said, the sidebar in general seems to have some weird scaling problems, whereby for a large height region the icon size is determined more by window width than height, and if it gets cut off there's no option to scroll up/down to the missing options:
If necessary we can handle that as a separate issue/PR, but given this menu is being created partly to alleviate the vertical stress from having too many items, I think it makes sense to tackle the scaling issue here too 🤷
rafaellehmkuhl
force-pushed
the
create-tools-menu
branch
from
b5a03e2 to
95956e7
Compare
I've limited the large main-menu to heights above 900 px. Less than that and it uses the simplified version. I've also fixed the simplified version for the sub-menus (config and tools) as they were using the labels and breaking the layout. |
That might be a little aggressive - I now can't see the full menu size in a chrome tab on my 16" MacBook, despite there seemingly being room for it, and the small version ends up looking tiny. Also, there are still apparently 4 different sizes of sidebar determined entirely by the window width (plus a weird About icon)... Screen.Recording.2025-01-30.at.10.39.37.am.mov |
The simplified main menu is shown when the screen height is too small to show the full menu. The threshold is different for small and large screens.
rafaellehmkuhl
force-pushed
the
create-tools-menu
branch
from
95956e7 to
a8c39a0
Compare
I think I got to a solution that improves the logic of using the simplified menu a lot. I don't like it, as it's not future-proof, but it solves the problem for now. Can you check again? |
| const heightTopBar = widgetStore.currentTopBarHeightPixels * topBottomBarScale.value | ||
| const heightBottomBar = widgetStore.currentBottomBarHeightPixels * topBottomBarScale.value |
There was a problem hiding this comment.
Given how the sidebar is changing, I think these might not be being calculated correctly, and I'm still not sure why they're based on windowWidth
I agree it's not perfect, but I think it is way better than what we have today (which is buggy and getting the menu out of the window). I tried to fix the calculations, but it has a lot of deep roots inside the code, and at the moment I don't have much time to work on this. I suggest two alternatives:
I believe we should at least merge the first commit, because right now the the settings menu is bloated and we have other PRs like #1643 waiting for this change to enter master. What do you think? One way or another I opened #1645 to track the final fix for a future PR. |
|
For more context, this is the current situation: 
And this is the new one: 
Both use the same window size, for fair comparisons. |
rafaellehmkuhl
dismissed
ArturoManzoli’s stale review
Eliot made a further review and approved the PR.
To be merged after #1594.
This PR splits the Settings menu and creates a new Tools menu, with the MAVLink and Data-lake submenus.
It will help a lot with vertical space, since the Settings menu was already bloated.
Here are also some screens for before and after with the improvements made in the second commit:
And this is the new one: