[6.x] Improve replicator click areas (#13173)

Co-authored-by: Jason Varga <[email protected]>

Author: JayGeorge

resources/js/components/field-actions/FieldActions.vue

@@ -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')" />

resources/js/components/fieldtypes/replicator/AddSetButton.vue

@@ -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" />

resources/js/components/fieldtypes/replicator/Replicator.vue

@@ -74,6 +74,7 @@
                             :show-connector="value.length > 0"
                             :index="value.length"
                             :label="config.button_label"
+                            :is-first="value.length === 0"
                             @added="addSet"
                         />
                     </section>