Rearrange views

[koegel]

Motivation
I need the preview more often than the property view, so I always have to change tabs

Solution
Split the left panel and show the property view on the bottom of the left panel with about 30% of the vertical space. Show the previews in a tabbed pane to the right where the property view was previously.

Alternatives
Make the layout flexible and allow the users to rearrange.

[sdirix]

I completely agree with the sentiment that we should change the current layout in some way. The tab "feels" a litte bit cumbersome and the left and right panes definitely take up too much space.

I'm not fully on board with moving the Properties to the bottom of the left pane. At the moment this looks reasonable as the content of the Properties is very sparse at the moment and the example JSON Schema is pretty small, however once these two panes are more populated this change may require a lot of scrolling in both of them.

Looking at other visual editors like https://openchakra.app/, they use a similar approach to us where the editor and the preview are not there at the same time. Of course this doesn't mean there is no merit to this. However not showing both by default seems like a natural approach as editor + preview take up a lot of screen estate. Also they show the Properties on the right hand side which seems to be the "standard", see for example https://www.appgyver.com/ or https://draftbit.com/. So I wouldn't break with this convention unnecessarily.

A flexible user customizable layout would be nice of course, but brings in a lot of complexity. I would not spend much effort on this until we have our basic use cases fully covered. Also we then need to think about persistence as the user probably doesn't want to customize the app on every reload ;)

One quick idea off the top of my head to improve the current state would be to first greatly reduce the width of the Palette and the Properties (could be like a 10,80,10 split) which would give a lot of room to the middle pane. Then we could add a toolbar to the middle pane, with checkboxes/toggles for the Editor and offered previews. All elements which are toggled are shown next to each other, so for small forms we could reasonably show editor + preview in the same pane.

But before implementing this I would like to suggest to have a quick internal design meeting to discuss this, the original suggestion and more in greater detail so we can come up with a well-rounded approach which meets everyone's needs ;)

[koegel]

Good points, I scheduled a meeting for next week!