Move Paragraphs item action buttons to top right in a drop-down style.

[laryn]

This issue is solely for moving the actions on a Paragraphs item into the top right in a drop-down button style (though not necessarily a literal dropdown button). The D7 issue this started from is below, but any additional aspects desired from that D7 issue would need separate issues filed.

---

This is an issue from the Drupal 7 queue that is marked "Needs Review" and could improve the UI.

Problem/Motivation

Basic support for collapsible paragraph items was added in #2273555: Collapsible paragraphs in node edit form, but a number of UX enhancements requested in that issue failed to make it into the committed patches and the UI could still use some refinement. To avoid confusion, I'm copying those outstanding issues here for continued development.

Proposed resolution

1. Move all the actions available on a paragraph item (edit/collapse/remove) into a single drop button, instead of displaying them as separate buttons. This drop button can be floated right at the top of the paragraph item, saving significant space. This ticket
2. Add links at the top of the paragraphs field to expand all/collapse all. https://github.com/backdrop-contrib/paragraphs/issues/177
3. Add an option to the drop button for each paragraph item to reset any unsaved changes. https://github.com/backdrop-contrib/paragraphs/issues/185
4. Add an option to completely disable collapsing items in the configuration form for paragraphs fields.

https://www.drupal.org/project/paragraphs/issues/2476253

[laryn]

During Backdrop LIVE recently @quicksketch also "thought out loud" about the new modal administration being used in the back end to eliminate the inline forms that get messy so quickly -- just display a non-editable "preview" slice of each Paragraphs item (which can be sorted) and an associated "Edit" button that loads the edit fields in a modal.

[yorkshire-pudding]

I think those suggestion would be good.

[irinaz]

@laryn , let me know where is good start to move forward to implement these features

[laryn]

@irinaz If you look where those buttons are added, you can start a branch/PR for this ticket and test out converting them to Backdrop's "dropbutton" format. Look at $element['inner_actions'] inside paragraphs_field_widget_form_build().

[irinaz]

@laryn , starting here https://github.com/backdrop-contrib/paragraphs/blob/158991282252fd66dbebfb53d091aea23730272b/paragraphs.field_widget.inc#L528, correct?

[herbdool]

The hitch is that the dropbutton library was built to work with the operations form field type (which creates a list of <a>) rather than <input> with submit handlers and ajax callbacks. I'm not sure if the latter can easily be converted to <a>.

There's a fuller answer here: https://stackoverflow.com/questions/18026951/drupal-ajax-call-from-click-of-a-link-in-form

By the way, it seems like we should add operations to the Form API docs: https://docs.backdropcms.org/form_api

[herbdool]

Maybe what could be done is rearranging some items. The buttons could be put on the same row as the paragraph type title.

And maybe to imitate the three dots, all the buttons other than Edit could be put into a <details> tag and then style that tag to look like the three dots.

[herbdool]

Here's an incremental improvement by moving the buttons to the top right https://github.com/backdrop-contrib/paragraphs/pull/179. I added some classes to make it easier to theme.

In a second iteration, perhaps some fancier button dropdown could happen, though I think this already improves things for our purposes.

[irinaz]

@herbdool , this is terrific! Does this change include "collapse all / open all" or that should be separate change? thanks again!

[herbdool]

@irinaz it only includes what I mentioned above. No secret features.

Expand/collapse all is unlikely to happen soon since it isn't easy to implement. Requires triggering all the ajax callbacks at once.

[irinaz]

Thank you for clarification and for adding new styling for buttons!!

[laryn]

Thanks @herbdool -- I took a quick look and do think this is an improvement. I'll try to review more thoroughly next week. I also looked at D10 enough to see that they're doing something similar to what you described in terms of fancy dropdown build around buttons (although not using details for it). Maybe we could pull something from their implementation.

[herbdool]

@laryn good idea of looking how they do it. I would still use <details> since it's already built to be accessible and requires less effort but it can be styled to look like those three dots I think.

My PR is a bit of a POC. I wondered about wrapping the title and the buttons in a div as well to make it more robust.

[herbdool]

I've got something closer to extra actions menu:

Maybe there should be a separate issue for the buttons instead of this issue, since this one is more of a META issue. I don't feel like working on everything on this list - spent too much time on this one thing already.

https://github.com/backdrop-contrib/paragraphs/pull/180

[klonos]

By the way, it seems like we should add operations to the Form API docs: https://docs.backdropcms.org/form_api

It's already there @herbdool: https://docs.backdropcms.org/form_api#operations

The hitch is that the dropbutton library was built to work with the operations form field type (which creates a list of <a>) rather than <input> with submit handlers and ajax callbacks. I'm not sure if the latter can easily be converted to <a>.

I've created this core issue to request that: https://github.com/backdrop/backdrop-issues/issues/6594 ...I did my best to describe the need, but you might wanna have a look and tweak the issue title and summary, as you have more context.

[laryn]

@herbdool I like the alternate PR that makes the dropdown. I want to look into a bit of styling on Gin before I release it, and had a question for your opinion on styling for Seven. Here's the PR:

And here's my tweak for discussion, attempting to stick closer to Seven's border width for consistency. What do you think?

And just so you see what I mean, here's Gin in dark mode:

[laryn]

I'm also wondering if clicking the ... should close an open dropmenu as well.

[herbdool]

@laryn I changed the css to make the border thicker.

For some reason the JS is interfering with clicking the details closed from the details summary (works when I comment the JS out). I haven't figured out yet how to make that work better.

Interesting thing is that github has the same issue - try it with the three dots on the top right of a comment.

[laryn]

Interesting thing is that github has the same issue - try it with the three dots on the top right of a comment.

@herbdool On Github, it seems like if you hover exactly over one of the three dots and they turn blue, then it will close it. That's probably not ideal. 😆

[herbdool]

@laryn I'm a bit at a loss. Can we just say good enough for now?

[laryn]

@herbdool I'm taking a look. Did you push the CSS changes for border width?

[herbdool]

@laryn now it's up. I forgot to push it.

[irinaz]

Works for me as is, thanks for making this work @herbdool and @laryn !

[laryn]

@herbdool I'm going to push a PR to your branch to see if you're okay with some changes:

[laryn]

Merged. Thank you @herbdool and @irinaz!

[irinaz]

Thank you so much, @laryn and @herbdool . Can this be a new release or I should update module manually? Thank you soooo much!!

[laryn]

@irinaz I'm not quite ready to make a release but hopefully relatively soon. In the meantime update manually or use the dev code.

[laryn]

I made some adjustments in Gin for this new UI.