Array Field's Icons(add/remove) are misaligned

[drveresh]

The add/remove icons for fields are redundant and misplaced.

Ref links: https://jsonform.github.io/jsonform/playground/index.html?example=fields-tabarray https://jsonform.github.io/jsonform/playground/index.html?example=templating-idx

Screenshots:

If there is a section containing >1 field, then there should be one single remove icon and the entire section should have some border to indicate the area where the action takes place on.

[sdetweil]

the individual delete button is due to this pr, cause some wanted the ability to delete a specific list entry, instead of just the last https://github.com/jsonform/jsonform/pull/400/files (for my use, I will have to check on the unique record delete, it should be optional, I see I am still using my fork, which has two changes over the base, so that is why I haven't seen indivdual delete button)

this causes the 'delete' on the add/delete pair to be redundant, but not add.. this is implemented as a pair of buttons..

the drag element is an element above the element title, because it also moves the title over the field..(a group) vs your positioning just in front of the field.. so re-positioning it might be more difficult.

(I'm the one that submitted the draggable:false function )

[drveresh]

@sdetweil Thanks for the quick response.

1: Remove Icon: Even if somebody wants to delete any random records, keeping its own remove icon towards right most side is appropriate.

2: Drag Icon: Keeping it in a separate(top) line is inefficient because the rest of the entire line will be useless, so positioning it in front of the input box is better.

3: Drag Icon Symbol: The current one looks bulky. I would suggest using a simple and clean one like this "⁝" by "&##8285;", it looks much better, please see the below screenshot.

4: Drag Field Title Place: Based on the latest trend, it doesn't make sense to give a separate line for it, rather we can directly put it as a "placeholder" attribute, see the screenshot.

Some of these changes would give a simple yet clean look and feel. Please let me know your thoughts.

[sdetweil]

I hear you, but, every UI change breaks someone's doc somewhere.

you are, of course, welcome to clone the repo and make those changes. maybe submitting back a PR for consideration

I personally like the delete at the end idea worried about view clipping without trying it.

oh, and border, you can add an html class and customize the structure colors, fonts, borders..

I do this in one of my uses

[sdetweil]

in #419 I added a form setting to allow removing the delete current item button..

deleteCurrent: false.

[sdetweil]

looking at what might be doable.. I see a structure like this

which is an array of objects.. the drag affects the entire object.. where would we put the two icons in this case? (drag and delete)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.