fred icon indicating copy to clipboard operation
fred copied to clipboard

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

Open qodo opened this issue 4 years ago • 10 comments

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

qodo avatar Oct 15 '20 16:10 qodo

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?

rthrash avatar Oct 15 '20 17:10 rthrash

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

qodo avatar Oct 15 '20 17:10 qodo

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

matdave avatar Oct 16 '20 19:10 matdave

@qodo what would the Layouts be?

rthrash avatar Oct 27 '20 14:10 rthrash

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

rthrash avatar Oct 27 '20 14:10 rthrash

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.

robcarey avatar Oct 27 '20 15:10 robcarey

@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.

rthrash avatar Nov 03 '20 16:11 rthrash

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! :)

qodo avatar Nov 03 '20 22:11 qodo

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.

muzzwood avatar Nov 04 '20 06:11 muzzwood

+1

neoneddy avatar Jun 30 '21 15:06 neoneddy