clean up and UI improve

lara-zeus · Jan 19, 2024 · 858ec5a · 858ec5a
1 parent d87d3de
commit 858ec5a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/resources/views/popover-column.blade.php b/resources/views/popover-column.blade.php
@@ -1,6 +1,7 @@
 <div
-    wire:key="popopoopop-{{ $recordKey }}"
-    x-data class="fi-popover"
+    wire:key="popover-{{ $recordKey }}"
+    x-data="{ open: false }"
+    class="fi-popover fi-ta-text grid w-full gap-y-1 px-3 py-4"
 >
     @php
         $getState = $getState();
@@ -26,28 +27,30 @@
         </p>
     @endif
 
-    <div x-data="{ open: false }">
-        <div
-            class="w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
-            x-ref="button" @click="open = ! open" {{--@pointerenter="open = ! open"--}}>
-            {{ $getState }}
-            @if($getIcon)
-                <x-filament::icon
-                    :icon="$getIcon"
-                    class="h-5 w-5 text-gray-500 dark:text-gray-400"
-                />
-            @endif
-        </div>
+    <div
+        class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
+        x-ref="button"
+        @click="open = ! open"
+        {{--@pointerenter="open = ! open"--}}
+    >
+        {{ $getState }}
 
-        <div class="w-[{{ $getPopOverMaxWidth }}px] bg-white dark:bg-gray-800"
-             x-cloak
-             x-show="open"
-             x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
-             {{--@pointerleave="open = false"--}}
-             @click.away="open = false"
-        >
-            {{ $getContent }}
-        </div>
+        @if($getIcon)
+            <x-filament::icon
+                :icon="$getIcon"
+                class="h-5 w-5 text-gray-500 dark:text-gray-400"
+            />
+        @endif
+    </div>
+
+    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-500 shadow-lg bg-white dark:bg-gray-800"
+         x-cloak
+         x-show="open"
+         x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
+         {{--@pointerleave="open = false"--}}
+         @click.away="open = false"
+    >
+        {{ $getContent }}
     </div>
 
     @if (filled($descriptionBelow))

diff --git a/src/Concerns/HasPopover.php b/src/Concerns/HasPopover.php
@@ -10,7 +10,7 @@ trait HasPopover
 
     protected mixed $placement = 'top';
 
-    protected array $offset = [0.10];
+    protected int $offset = 0;
 
     protected string $popOverMaxWidth = '300';
 
@@ -50,14 +50,14 @@ public function getPlacement(): mixed
         return $this->evaluate($this->placement);
     }
 
-    public function offset(array $offset): static
+    public function offset(int $offset): static
     {
         $this->offset = $offset;
 
         return $this;
     }
 
-    public function getOffset(): array
+    public function getOffset(): int
     {
         return $this->offset;
     }