modxcms / fred

The friendly front-end editor for visual, drag-and-drop content building in MODX CMS
https://fred.modx.com
MIT License
59 stars 25 forks source link

[Feature Request] Add inline controls to add elements on the page? #379

Open qodo opened 4 years ago

qodo commented 4 years ago

When editing a page we currently add an element by dragging it from the left-hand menu:

image

Would it also be possible to have an inline control for placing content so you can precisely choose where it goes as sometimes I find this a bit tricky to get the drop areas to activate? I have created this mockup of what I mean below

image

rthrash commented 4 years ago

That's a neat idea @qodo

When would you want it to show, and what happens if you were to click on the plus-sign?

qodo commented 4 years ago

I know this is asking a lot but if it could have a pop-up with a selection of what to insert based on the existing menu (and addition I've often thought about "Layouts"). Another quick mock-up of how this might look

image

matdave commented 4 years ago

Neat idea to consider, and similar things have been discussed. We don't currently have a "Layout" option to insert, just elements or blueprints.

rthrash commented 4 years ago

@qodo what would the Layouts be?

rthrash commented 4 years ago

Also, @qodo, how would you envision selecting the specific blueprint/element/layout you wanted to insert?

robcarey commented 4 years ago

Another vote for this direction. It has been a challenge at times and I think this path makes possible eventually maybe even showing only contextually applicable elements/blueprints?

In any case, it's an interesting idea.

rthrash commented 3 years ago

@robcarey the next release (1.2) will allow for Blueprints/Elements to be tied to the MODX Templates, so that's going to be doable. I also really like this idea from the perspective of creating content on mobile devices without drag-and-drop.

qodo commented 3 years ago

Sorry for the delay - I was away last week.

@qodo what would the Layouts be?

The thought behind this is that it would allow you to insert layouts such as rows/columns or grids without the need to create elements for each. When inserting columns it could give the option to control how many etc. I think the way these would be controlled would be very similar to Elements/Blueprints and allow the developer to control markup for what layout framework/custom styles they use.

Also, @qodo, how would you envision selecting the specific blueprint/element/layout you wanted to insert?

Another quick mockup showing the type of insert on the left and the options on the right. I think this might also be worth expanding the size of this (not shown in quick mock-up) to give more space to show available elements.

image

@robcarey the next release (1.2) will allow for Blueprints/Elements to be tied to the MODX Templates, so that's going to be doable. I also really like this idea from the perspective of creating content on mobile devices without drag-and-drop.

This would be awesome if this process could limit what elements can be added to the space such as only allowing images to be added etc.

These are only quick mock-ups but if you need any help input on designing this further I'd be happy to help! :)

muzzwood commented 3 years ago

This would be fantastic for when a user is having trouble getting a dropzone to activate when dragging and dropping.

Taking it even further, you could restrict types of elements to certain dropzones. For example, say you have a 'data table' element with it's own dropzone where a user is expected to drop 'table row' elements. You could restrict it so only those elements are allowed in that dropzone. Perhaps even not allowing drag and drop on that dropzone altogether and they can only add new rows by clicking the plus button like @qodo illustrated above.

neoneddy commented 3 years ago

+1