Skip to content

[6.x] Improve replicator click areas #13173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JayGeorge wants to merge 17 commits into
base: master
Choose a base branch
from
+19 −11
Open

[6.x] Improve replicator click areas #13173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0849652
Dropdown triggers should be pulled above by default, for example when…
JayGeorge Nov 25, 2025
4ec115c
Merge branch 'master' into default-z-index-for-dropdown-buttons
JayGeorge Dec 1, 2025
12dadd0
Change the first replicator to be shorter in width
JayGeorge Dec 1, 2025
62ea630
Get rid of the first connector
JayGeorge Dec 1, 2025
368f4f5
Change the insert set bar to a subtle gradient to compensate for the …
JayGeorge Dec 1, 2025
315eb9d
Prevent invisible horizontal click area for "Add Block" button
JayGeorge Dec 1, 2025
89ec412
Make top set button smaller and add condition for instructions
JayGeorge Dec 2, 2025
db1509f
Add some more conditions in case the instructions are empty
JayGeorge Dec 2, 2025
bbecc49
Simplify fixes and mostly revert due to issues with hover tunnel of t…
JayGeorge Dec 2, 2025
5885a04
Restore and tweak first connector now that we have more space at the …
JayGeorge Dec 2, 2025
ad99fc5
Add dark mode
JayGeorge Dec 2, 2025
8284e17
Merge branch 'master' into default-z-index-for-dropdown-buttons
JayGeorge Dec 4, 2025
eadc836
Pull up field actions a touch to compensate for the adding a new repl…
JayGeorge Dec 4, 2025
85a19f5
Nudge replicator spacing to account for quick actions
JayGeorge Dec 4, 2025
649db7d
Nudge the top "add set" button down so it's vertically the same as th…
JayGeorge Dec 4, 2025
788f124
Merge branch 'master' into default-z-index-for-dropdown-buttons
jasonvarga Dec 8, 2025
49e10f2
unused
jasonvarga Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion resources/js/components/field-actions/FieldActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex relative items-center gap-1 -top-0.5">
<div class="flex relative items-center gap-1 -top-1">
<Dropdown v-if="hasNonQuickActions">
<template #trigger>
<Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
Expand Down
27 changes: 17 additions & 10 deletions resources/js/components/fieldtypes/replicator/AddSetButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,30 @@
<template>
<set-picker :enabled="enabled" :sets="groups" :align="variant === 'between' ? 'center' : 'start'" @added="addSet">
<div class="inline-block" v-if="variant === 'button'">
<set-picker :enabled="enabled" :sets="groups" align="start" @added="addSet">
<template #trigger>
<div class="inline-flex relative pt-2" :class="{ 'pt-6': showConnector }">
<div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
<Button v-if="enabled" size="sm" :text="label" icon="plus" class="relative z-2" />
</div>
</template>
</set-picker>
</div>
<set-picker v-else :enabled="enabled" :sets="groups" align="center" @added="addSet">
<template #trigger>
<div class="flex relative pt-2" :class="{ 'pt-6': showConnector }" v-if="variant === 'button'">
<div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
<Button v-if="enabled" size="sm" :text="label" icon="plus" class="relative z-2" />
</div>
<div
v-if="variant === 'between'"
class="flex justify-center relative group py-3"
:class="{ '-mt-3': isFirst }"
:class="{ 'py-3.5 -mt-2 top-0.5': isFirst }"
>
<div
v-if="showConnector"
class="absolute group-hover:opacity-0 transition-opacity delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
:class="isFirst ? 'h-[50%] top-[50%] opacity-50' : 'h-full opacity-100'"
:class="isFirst ? 'h-[65%] top-[30%] opacity-60' : 'h-full opacity-100'"
/>
<button class="w-full absolute inset-0 h-full opacity-0 group-hover:opacity-100 transition-opacity delay-10 duration-250 cursor-pointer">
<button
class="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 transition-opacity delay-10 duration-250 cursor-pointer"
>
<div class="h-full flex flex-col justify-center">
<div class="rounded-full bg-gray-200 dark:bg-gray-700 h-2" />
<div class="rounded-full bg-[linear-gradient(90deg,theme(colors.gray.100)_0%,theme(colors.gray.200)_50%,theme(colors.gray.100)_100%)] dark:bg-[linear-gradient(90deg,theme(colors.gray.800)_0%,theme(colors.gray.700)_50%,theme(colors.gray.800)_100%)] h-2" />
</div>
</button>
<Button v-if="enabled" round icon="plus" size="sm" class="-my-4 z-3 opacity-0 group-hover:opacity-100 transition-opacity delay-10 duration-250" />
Expand Down
1 change: 1 addition & 0 deletions resources/js/components/fieldtypes/replicator/Replicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
:show-connector="value.length > 0"
:index="value.length"
:label="config.button_label"
:is-first="value.length === 0"
@added="addSet"
/>
</section>
Expand Down