feat: ui improvements

saade · Feb 13, 2024 · 44fd216 · 44fd216
1 parent deb04b3
commit 44fd216
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 9 deletions.
diff --git a/resources/dist/filament-adjacency-list.css b/resources/dist/filament-adjacency-list.css
diff --git a/resources/dist/filament-adjacency-list.js b/resources/dist/filament-adjacency-list.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -16,7 +16,8 @@ export default ({
             group: treeId,
             animation: 150,
             fallbackOnBody: true,
-            swapThreshold: 0.50,
+            swapThreshold: 0.25,
+            invertSwap: true,
             draggable: "[data-sortable-item]",
             handle: "[data-sortable-handle]",
             onMove: (evt) => {

diff --git a/resources/views/builder.blade.php b/resources/views/builder.blade.php
@@ -25,7 +25,6 @@ class="filament-navigation"
 
     <div wire:key="tree-items-wrapper">
         <div
-            class="space-y-2"
             data-sortable-container
             ax-load
             ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('filament-adjacency-list-styles', 'saade/filament-adjacency-list') }}"
@@ -38,7 +37,6 @@ class="space-y-2"
             })"
         >
             @forelse($getState() as $uuid => $item)
-                {{-- @dd($this) --}}
                 <x-filament-adjacency-list::item
                     :uuid="$uuid"
                     :tree-id="$treeId"

diff --git a/resources/views/components/item.blade.php b/resources/views/components/item.blade.php
@@ -1,7 +1,8 @@
 @props(['uuid', 'treeId', 'actions', 'addable', 'childrenKey', 'deletable', 'disabled', 'editable', 'startCollapsed', 'item', 'itemStatePath', 'labelKey', 'reorderable', 'statePath'])
 
 <div
-    class="space-y-2"
+    {{-- hover:bg-gray-950/5 --}}
+    class="pb-3 rounded-lg"
     data-id="{{ $itemStatePath }}"
     data-sortable-item
     x-data="{ open: $persist(!@js($startCollapsed)) }"
@@ -26,7 +27,7 @@ class="space-y-2"
             <div class="flex w-full">
                 @if ($reorderable)
                     <div @class([
-                        'flex items-center bg-gray-50 rounded-l-lg rtl:rounded-r-lg border-r rtl:border-r-0 rtl:border-l border-gray-300 px-1',
+                        'flex items-center bg-gray-50 rounded-l-lg rtl:rounded-r-lg border-r rtl:border-r-0 rtl:border-l border-gray-300 px-2',
                         'dark:bg-gray-800 dark:border-white/10',
                     ])>
                         {{ $reorderAction($mountArgs) }}
@@ -73,12 +74,11 @@ class="px-2 text-gray-500 appearance-none"
     </div>
 
     <div
-        class="ltr:ml-6 rtl:mr-6"
+        @class(['ms-6', 'pt-2' => $hasChildren])
         x-show="open"
         x-collapse
     >
         <div
-            class="space-y-2"
             wire:key="{{ $itemStatePath }}-children"
             x-data="tree({
                 treeId: @js($treeId),