alxpez / vuegg

dnd visual editor - mockups and code in one go!
https://vuegg.github.io
MIT License
2.34k stars 392 forks source link

[Feat] Add predefined layouts #30

Open rustemgareev opened 6 years ago

rustemgareev commented 6 years ago

In web applications, there are so-called layout components which the app shell consists of: top app bar, drawer, in future MDC Web versions - bottom app bar.

Currently Vuegg allows users to drag layout components to any point of the screen. But since such components have an established position in the application design (top app bar - on top of the page, bottom app bar - on the bottom, drawer - on the left), there's no much point to enable their draggability (only resizability).

So, maybe there's a point to move these layout components into the app shell (this is an App.vue in your current template). And the rest of the pages can be filled just with a user-generated content.

And, to simplify the process for a Vuegg user, provide an option to select a predefined layout. They can be based, for example, on the navigation patterns, or app use cases. The simplest I can imagine now are:

The more complex layouts can be:

What do you think about it? Will it be complex to create?

alxpez commented 6 years ago

such components have an established position in the application design (top app bar - on top of the page, bottom app bar - on the bottom, drawer - on the left), there's no much point to enable their draggability (only resizability)

I see your point I will be playing around with the code to see the possibilities.

About the layouts, is a good idea, it could be an interesting feature and I believe it would be fairly simple to implement, but it's definitely no essential right now; however, feel free to submit your ideas and PRs, if they align with the current state of development it won't be a problem to merge them.

Thanks for the input @rustemgareev!