I'm out of practice with floating menus because I hardly ever use them anymore. But now I need one that looks like this: 6 buttons arranged like this.
Unfortunately, I have no idea how to build it. Can anyone help? Thanks.
Okay, what works are 6 different floating menus that can be shown or hidden at the same time.
@Andreas_Hegenberg I've positioned a floating menu at a specific place (freely) on an external monitor. What setting do I need to select so that it appears at the same (relative place) on the internal monitor when the external monitor isn't connected?
In most UI toolkits, one way of dealing with custom widget placement is to add "spacer" items that are intended to take up space but to be mostly not visible.
I made a couple of floating menus in BTT with this technique to approximate your example, which are in the attached preset (menus "test 3", "test 4", "test 5")
Button Placement Sample.bttpreset (131.1 KB)
I think the best one one of these is test 5, which looks like this:
This version actually only uses one spacer for the middle empty spot (between red "New Item" and blue "New Item", I'll explain this a little more in a minute). The rest of the layout just uses a row layout and "Row Breaker"s to get all of the buttons into the correct rows. The other two versions are a little more complicated in that they use dummy items in the corners also to fill the spaces.
This works great against a light background, but not so well against a dark background:
Light background:
Dark background:
The top menu of each of these is "test 5".
You can see that against the dark background, the spacers are visible.
Here, each spacer is just a standard floating menu item that has no actions and has the same background color as the hover background color.
To get the spacers to be (almost) invisble, I set both the background color and the hover background color to be the color of the floating menu background (using the eyedroppper), but I guess maybe the menu background color changes depending on the colors behind it.
It would be easier to do this with an actual "spacer" item that just takes up space but is not visible, but I don't see how to do that in BTT.
@Andreas_Hegenberg - Does the BTT floating menu have some kind of spacer items? If not, would you consider adding this?
There are multiple ways to build such menus.
@telephant there are no explicit spacer items, but transparent items are essentially the same. Alternatively you can use the margin options that are available for every item:
To create a "new row" (in the screenshot after "template item 1" add a "row breaker" item:
Set the menu to use absolute positioning:
Define the exact position for each item:
For absolute positioning I'll add a way to just drag them around in the new visual editor in the next build.
Thank you very much, @telephant and @Andreas_Hegenberg . I’ve tried solutions like that. They’re too complicated for my purposes because this menu is dynamic and will be changing constantly over the next few months, both in terms of the position and the number of buttons.
That would be great and exactly what I need. Until then, it seems to me that the easiest solution is to have a separate floating menu for each button. That way, everything can be adjusted very quickly and easily using drag-and-drop. The downside is that you don’t have a consistent background.
This change takes 5 seconds ![]()
Mm, I don't quite understand what that means, but I'll give it a try as soon as 6.917 is online ![]()
Slightly off-topic: The awkwardness of positioning elements is the main reason I don’t use floating menus and have opted for standard context menus instead. Looking at the canvas with the buttons, though, it would be really helpful if the elements could automatically snap into predefined shapes with regular spacing between their centres (grids, circles, etc.).
It would also be great to be able to move the buttons around manually, with BTT displaying various guides and alignment axes to help me line up the elements, much like in graphics editors. See the example from Pixelmator Pro.
But I guess that would be a lot of work for a fairly niche use case. ![]()
@Frank1 increase the menu size:
Yeah, thanks. Floating menus are powerful, but there are so many settings. (That's why they're so powerful, after all.)
Anyway, this new drag-and-drop feature is really cool!
yep!
Next build will allow to resize the menu in the live editor directly. In general I hope I'll be able to make the menus more accessible to "casual" users with the live editor (still needs a few improvements). I think with the new touch screen MacBooks the Floating Menus could become even more powerful.
@lukasvac snapping guides etc. should be feasible as well. The issue with absolute positioning like in a graphics editor is that the menus will no longer be responsive (which is e.g. relevant for display in BTT Mobile). However depending on the use case this does not matter much.
The positioning should, of course, remain relative when rendered. Ideally, those guides for precise alignment should only be used when designing floating menus, so that people with OCD can make everything look just right. Imagine having three buttons stacked vertically, with the top one 20 units away from the middle one and the bottom one only 17 units away. A disaster! ![]()
I think with freely draggable items, need to be absolutely positioned (as is now).
For the automatic layout modes that allow relative positioning the menu defines the layout algorithm and applies margins etc. so a snapping guide doesn't make much sense there.
6.919 (uploading) should improve a few parts of the absolute positioning and now allows to resize the menu in the live editor by dragging.
My man
It's great that you're so responsive to good ideas.
The question remains: What settings are needed so that a manually positioned floating menu appears in the same location on an external monitor as it does on the internal one (in proportion)? Unfortunately, that's not the case right now.