Add buttons between blocks

[bastihilger]

I tried this before, here is my second try with changes fresh from the current master.

This PR adds an option withMultipleButtons(). With that option, in addition to the main "add Layout" button at the end small "add Layout" buttons are added between all elements (and before the first one), and a click on on of those buttons lets you add a layout at the position of the buttons.

Example:

Flexible::make('CV')
    ->addLayout('Cv-Text', 'cvtext', [
        Trix::make('Text'),
    ])
    ->addLayout('Cv-Image', 'cvimage', [
        File::make('Image'),
        Text::make('Image Caption'),
    ])
    ->button('add Content Block')
    ->withMultipleButtons(),

This PR adds "position" as the second parameter in the addGroup method.

This PR also introduces the use of an Event Bus, so that the functionality of adding Elements does not have to be passed down through intermediate Vue components.

[bastihilger]

Hi there, I know you are busy, I can relate because I was in the same situation often enough. Just one quick question: would the PR be easier for you to consider if I removed the event bus?

That's all, keep having a nice weekend!

[toonvandenbos]

Hi @manogi,

In fact I did not have the time to review the PR at all. Will do next week. The use of an event bus should not cause any problems if it is done right. I'll keep you posted ! In the meantime, thanks for your new PR and your patience, it's really appreciated. Cheers!

[bastihilger]

Hello there - just wanted to let you know I updated from your master so this is all fresh and clean and ready to be reconsidered 😇

[voidgraphics]

Thanks @manogi! I am fairly certain @Nyratas had put together a quick photoshop of a more thought-out design for this, although it was roughly the same idea as what you did. I'll post it here when we find it so I can make the necessary adjustments to your PR. Should happen soon 🙃 I want this merged asap.

[bastihilger]

That's great to hear! If you like I can try making the adjustments myself when I see the Photoshop design. I can find my way around tailwind.css  😜

[toonvandenbos]

Hi,

I was thinking doing something similar to this (quick sketch) :

The idea is to have a small button similar to the other existing UI elements which does not disturb the layout boxes flow. When clicking on the "+", the same "layout choice" dropdown will appear and the new chosen layout will be inserted after the layout used for adding it.

What do you think ?

[bastihilger]

Hi there, I like this - do you also have a sketch for collapsed mode?

[toonvandenbos]

@manogi No I don't but I'd suggest to simply hide the "+" button when collapsed.

[bastihilger]

@Nyratas ah ok - that would be a no go for our clients, as they would have to click twice (open + click on the plus button).

In our fork we have implemented the solution with the buttons between the containers, it works really well.

[toonvandenbos]

@manogi I see ! In that case maybe the collapsed mode can be a little bit taller in order to display both the "uncollapse" and "+" buttons.

[bastihilger]

@Nyratas I am just writing to say that atm I don't find the time to pursue this further, I am sorry - too much client work.
I did fork your repo and have made more alterations than just this one already. I hope to be able to contribute back to this repository in the future!

[toonvandenbos]

Hi @manogi,

I fully understand, we're all facing the same time-related issues I guess. Thanks for letting me know, we'll see if we find the time to work on it on our side in the meantime or not.