Horizontal Blocks in vertical toolbox?

[Ayham Elkhalifa]

I was looking at logoblocks.terrapinlogo.com, and I saw this vertical toolbox with horizontal blocks, like you see in the images below.

How do I implement this myself?

[Zoë Spriggs]

Hi! 

I would like to note that we wouldn't generally recommend this approach, since side-by-side blocks in a vertical flyout could make it harder to find blocks and cause your toolbox flyout to overlap a decent amount of the workspace. That said, if this makes sense for your project, you can do this by subclassing the VerticalFlyout class. I can give you the big picture of what you'd need to focus on.

The two methods to override in your subclass are: 

- layout_ : This lays out the blocks in the flyout. In VerticalFlyout, this method goes through the blocks and increments the Y cursor position based on the height of the block. If you want some blocks to be side-by-side instead, you'll want to sometimes increment the X cursor position by the width of the block instead. You'll need to decide exactly how you want your blocks to be laid out; if you only increment the X cursor and never the Y cursor, then you'll end up with every block side-by-side (which I'm guessing you don't want in a vertical flyout). Note also that the contents parameter that layout_ takes will likely include FlyoutSeparator objects, so make sure to account for that in your layout logic.

- reflowInternal_ : This calculates the width of the flyout, and right-aligns the blocks if you're in RTL mode. You'd need to override this as well, since it calculates the width based on one block's width instead of two (or more) next to each other. And despite the name it's not internal, so you're fine to override it :)

Definitely check out the code for those two methods (the API docs now link to GitHub, so you should be able to access the code from the links I included) and make sure you're implementing all of the functionality that the parent methods have when you override the methods. You can also look at the VerticalFlyout class's code in general to understand what this class does.

If you decide to do this, feel free to reach out if you have any follow up questions or if any coding issues come up. Happy coding!

Best, 

Zoë