Fix toggle columns style (#1341)

* Fix column hidden class * Fix column hidden class * Fix column hidden class
Power-Components · Jan 20, 2024 · 037ebd3 · 037ebd3
1 parent 3799651
commit 037ebd3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 32 deletions.
diff --git a/resources/views/components/frameworks/tailwind/header/export.blade.php b/resources/views/components/frameworks/tailwind/header/export.blade.php
@@ -14,16 +14,18 @@ class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hov
 
     <div
         x-show="open"
-        x-cloak
-        x-transition:enter="transform duration-200"
-        x-transition:enter-start="opacity-0 scale-90"
-        x-transition:enter-end="opacity-100 scale-100"
-        x-transition:leave="transform duration-200"
-        x-transition:leave-start="opacity-100 scale-100"
-        x-transition:leave-end="opacity-0 scale-90"
-        class="mt-2 w-auto bg-white shadow-xl absolute z-10 dark:bg-pg-primary-700"
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="transform opacity-0 scale-95"
+        x-transition:enter-end="transform opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave-start="transform opacity-100 scale-100"
+        x-transition:leave-end="transform opacity-0 scale-95"
+        class="absolute z-10 mt-2 rounded-md dark:bg-pg-primary-700 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        tabindex="-1"
+        @keydown.tab="open = false"
+        @keydown.enter.prevent="open = false;"
+        @keyup.space.prevent="open = false;"
     >
-
         @if (in_array('xlsx', data_get($setUp, 'exportable.type')))
             <div class="flex px-4 py-2 text-pg-primary-400 dark:text-pg-primary-300">
                 <span class="w-12">@lang('XLSX')</span>

diff --git a/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php b/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php
@@ -16,31 +16,39 @@ class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hov
 
         <div
             x-show="open"
-            x-cloak
-            x-transition:enter="transform duration-200"
-            x-transition:enter-start="opacity-0 scale-90"
-            x-transition:enter-end="opacity-100 scale-100"
-            x-transition:leave="transform duration-200"
-            x-transition:leave-start="opacity-100 scale-100"
-            x-transition:leave-end="opacity-0 scale-90"
-            class="mt-2 py-2 w-48 bg-white shadow-xl absolute z-10 dark:bg-pg-primary-700"
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="transform opacity-0 scale-95"
+            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="transform opacity-100 scale-100"
+            x-transition:leave-end="transform opacity-0 scale-95"
+            class="absolute z-10 mt-2 w-56 rounded-md dark:bg-pg-primary-700 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            tabindex="-1"
+            @keydown.tab="open = false"
+            @keydown.enter.prevent="open = false;"
+            @keyup.space.prevent="open = false;"
         >
-            @foreach ($this->visibleColumns as $column)
-                <div
-                    wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
-                    wire:key="toggle-column-{{ data_get($column, 'field') }}"
-                    @class([data_get($column, 'hidden') => 'opacity-40 bg-pg-primary-300 dark:bg-pg-primary-800', ' cursor-pointer flex justify-start block px-4 py-2 text-pg-primary-800 hover:bg-pg-primary-50 hover:text-black-200 dark:text-pg-primary-200 dark:hover:bg-gray-900 dark:hover:bg-pg-primary-700'])
-                >
-                    @if (!data_get($column, 'hidden'))
-                        <x-livewire-powergrid::icons.eye class="text-pg-primary-500 dark:text-pg-primary-300" />
-                    @else
-                        <x-livewire-powergrid::icons.eye-off class="text-pg-primary-500 dark:text-pg-primary-300" />
-                    @endif
-                    <div class="ml-2">
-                        {!! data_get($column, 'title') !!}
+            <div
+                class="py-1"
+                role="none"
+            >
+                @foreach ($this->visibleColumns as $column)
+                    <div
+                        wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
+                        wire:key="toggle-column-{{ data_get($column, 'field') }}"
+                        class="@if (data_get($column, 'hidden')) font-semibold bg-pg-primary-100 dark:bg-pg-primary-800 @endif cursor-pointer text-sm flex justify-start block px-4 py-2 text-pg-primary-500 dark:hover:text-pg-primary-200 dark:text-pg-primary-200"
+                    >
+                        @if (!data_get($column, 'hidden'))
+                            <x-livewire-powergrid::icons.eye class="text-pg-primary-500 dark:text-pg-primary-300" />
+                        @else
+                            <x-livewire-powergrid::icons.eye-off class="text-pg-primary-500 dark:text-pg-primary-300" />
+                        @endif
+                        <div class="ml-2">
+                            {!! data_get($column, 'title') !!}
+                        </div>
                     </div>
-                </div>
-            @endforeach
+                @endforeach
+            </div>
         </div>
     </div>
 @endif