statamic
[6.x] Improve replicator click areas
Occasionally, buttons are close together—and in this case, I think it's sensible to pull dropdown triggers a z-index above by default.
For example, when you have a dropdown very close to a long horizontal replicator "plus" button, the dropdown should take precedence.
I think you're right there.
I've pushed some updates to try and improve the replicator button areas instead…
The top replicator "add button" now has a smaller UI, but the same underlying hover target area. This means you can still hover anywhere but the underlying horizontal bar doesn't block the "more" dots to the right.
As a consequence of this, I've updated the replicator "add set" bar to use a subtle gradient, which I think is kinda nice.
Finally I fixed another thing that was bothering me. Previously if you clicked anywhere within the horizontal space of "Add block" you would get a new block. While this seemed cool to me at first, I've accidentally triggered this numerous times and it became annoying. I've fixed this, so you now have to click the "Add Block" button, rather than any dead space around it.
Gotta dash for this eve but I have a solution for the replicator description thing too so I've converted this to a draft. I'll push that up tomorrow.
OK, I think I've got a good draft now, pending your feedback :)
Hover state when instructions are either empty or below
I've made the interface shorter than previously, in case the field title is long
When instructions are above (not hovered)
When instructions are above (hovered)
When a link in the instructions is hovered
Here I've put it in the most awkward position possible—right above the "plus" replicator button
Small viewport
Sorry about the massive detour here. I ended up reverting a lot of this because of side effects with hover states on the "more" dots, and it was getting far too complicated.
Anyway, so now the changes vs master is:
-
Occasionally, buttons are close together—and in this case, I think it's sensible to pull dropdown triggers a z-index above by default. For example, when you have a dropdown very close to a long horizontal replicator "plus" button, the dropdown should take precedence.
To fix this I've actually simple increased the gap, similar to how v5 handled this—although the gap is not as large, and I've increased the starting connector height to compensate this.
-
Previously, if you clicked anywhere within the horizontal space of "Add block", you would get a new block. While this seemed cool to me at first, I've accidentally triggered this numerous times, and it became annoying. I've fixed this, so you now have to click the "Add Block" button, rather than any dead space around it.
-
I've also kept the subtle gradient to the replicator "add set" bar because I thought it looked kinda nice
I've looked at the PR but still has the old Quick Actions menu.
With the new Quick Actions, the "add set" display sits above the Quick Actions, meaning I can have my cursor over a button, but the "add set" is what has focus.
https://github.com/user-attachments/assets/78f140d5-e727-4548-aaa3-39ee0d0874f3
Hi Marty,
I merged in the master branch, and it worked fine with the new quick actions since there's a bit more room…
However, I've made some further adjustments—pulling up the quick actions by 0.5 since they feel a touch taller than the horizontal dots, and increasing the top "add set" space.