Migrate BS Styles into Classes (#1788)

* Bootstrap Button Classes * Add Bootstrap Custom CSS * Add laravel-livewire-tables-cursor to clickable column --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Jul 27, 2024 · 321d58f · 321d58f
1 parent f03948a
commit 321d58f
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 22 deletions.
diff --git a/resources/css/bootstrap-custom.css b/resources/css/bootstrap-custom.css
@@ -0,0 +1,31 @@
+.laravel-livewire-tables-cursor {
+    cursor:pointer;
+}
+
+.laravel-livewire-tables-btn-tiny {
+    width:0.5em;
+    height:0.5em;
+}
+
+.laravel-livewire-tables-btn-smaller {
+    width:1em;
+    height:1em;
+}
+
+.laravel-livewire-tables-btn-small
+{
+    width:1.2em;
+    height:1.2em;
+}
+
+.laravel-livewire-tables-btn-md
+{
+    width:1.3em;
+    height:1.3em;
+}
+
+.laravel-livewire-tables-btn-lg
+{
+    width:1.4em;
+    height:1.4em;
+}
diff --git a/resources/css/bootstrap-custom.min.css b/resources/css/bootstrap-custom.min.css
diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
@@ -5,9 +5,37 @@
     border-color: var(--rappasoft-table-highlight-color, rgb(255 255 255)) !important;
 }
 
+.laravel-livewire-tables-cursor {
+    cursor:pointer;
+}
+
+.laravel-livewire-tables-btn-tiny {
+    width:0.5em;
+    height:0.5em;
+}
+
+.laravel-livewire-tables-btn-smaller {
+    width:1em;
+    height:1em;
+}
 
+.laravel-livewire-tables-btn-small
+{
+    width:1.2em;
+    height:1.2em;
+}
 
+.laravel-livewire-tables-btn-md
+{
+    width:1.3em;
+    height:1.3em;
+}
 
+.laravel-livewire-tables-btn-lg
+{
+    width:1.4em;
+    height:1.4em;
+}
 
 .laravel-livewire-tables-highlight-top {
     border-style: solid !important;

diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
@@ -21,7 +21,7 @@
                 ->class(['d-none' => $component->isBootstrap() && $column && $column->shouldCollapseAlways()])
                 ->class(['d-none d-md-table-cell' => $component->isBootstrap() && $column && $column->shouldCollapseOnMobile()])
                 ->class(['d-none d-lg-table-cell' => $component->isBootstrap() && $column && $column->shouldCollapseOnTablet()])
-                ->style(['cursor:pointer' => $component->isBootstrap() && $column && $column->isClickable()])
+                ->class(['laravel-livewire-tables-cursor' => $component->isBootstrap() && $column && $column->isClickable()])
                 ->except('default')
         }}
     >

diff --git a/resources/views/components/table/td/collapsed-columns.blade.php b/resources/views/components/table/td/collapsed-columns.blade.php
@@ -55,23 +55,22 @@
                 <button
                     x-cloak x-show="!currentlyReorderingStatus"
                     x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}});open = !open"
-                    class="p-0"
-                    style="background:none;border:none;"
+                    class="border-0 bg-transparent p-0"
                 >
-                    <x-heroicon-o-plus-circle x-cloak x-show="!open" style="width:1.4em;height:1.4em;" 
+                    <x-heroicon-o-plus-circle x-cloak x-show="!open"  
                         {{ 
                             $attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
                             ->class([
-                                'text-success' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
+                                'laravel-livewire-tables-btn-lg text-success' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
                             ])
                             ->except('default') 
                         }}
                     />
-                    <x-heroicon-o-minus-circle x-cloak x-show="open" style="width:1.4em;height:1.4em;" 
+                    <x-heroicon-o-minus-circle x-cloak x-show="open" 
                         {{ 
                             $attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
                             ->class([
-                                'text-warning' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
+                                'laravel-livewire-tables-btn-lg text-warning' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
                             ])
                             ->except('default') 
                         }}

diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
@@ -62,19 +62,18 @@
                 {{ $column->getTitle() }}
             @else
                 <div
-                    class="d-flex align-items-center"
+                    class="d-flex align-items-center laravel-livewire-tables-cursor"
                     wire:click="sortBy('{{ ($column->isSortable() ? $column->getColumnSelectName() : $column->getSlug()) }}')"
-                    style="cursor:pointer;"
                 >
                     <span>{{ $column->getTitle() }}</span>
 
                     <span class="relative d-flex align-items-center">
                         @if ($direction === 'asc')
-                            <x-heroicon-o-chevron-up class="ms-1" style="width:1em;height:1em;" />
+                            <x-heroicon-o-chevron-up class="laravel-livewire-tables-btn-smaller ms-1 "  />
                         @elseif ($direction === 'desc')
-                            <x-heroicon-o-chevron-down class="ms-1" style="width:1em;height:1em;" />
+                            <x-heroicon-o-chevron-down class="laravel-livewire-tables-btn-smaller ms-1"  />
                         @else
-                            <x-heroicon-o-chevron-up-down class="ms-1" style="width:1em;height:1em;" />
+                            <x-heroicon-o-chevron-up-down class="laravel-livewire-tables-btn-smaller ms-1" />
                         @endif
                     </span>
                 </div>

diff --git a/resources/views/components/tools/filter-pills.blade.php b/resources/views/components/tools/filter-pills.blade.php
@@ -65,7 +65,7 @@ class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justif
                                 ])>
                                     @lang('Remove filter option')
                                 </span>
-                                <x-heroicon-m-x-mark style="width:.5em;height:.5em" />
+                                <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-tiny"  />
                             </a>
                         @endif
                     </span>

diff --git a/resources/views/components/tools/sorting-pills.blade.php b/resources/views/components/tools/sorting-pills.blade.php
@@ -66,7 +66,7 @@ class="badge badge-pill badge-info d-inline-flex align-items-center"
                             class="text-white ml-2"
                         >
                             <span class="sr-only">@lang('Remove sort option')</span>
-                            <x-heroicon-m-x-mark style="width:1em;height:1em" />
+                            <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
                         </a>
                     </span>
                 @endforeach
@@ -106,7 +106,7 @@ class="badge rounded-pill bg-info d-inline-flex align-items-center"
                             class="text-white ms-2"
                         >
                             <span class="visually-hidden">@lang('Remove sort option')</span>
-                            <x-heroicon-m-x-mark style="width:1em;height:1em" />
+                            <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
                         </a>
                     </span>
                 @endforeach

diff --git a/resources/views/components/tools/toolbar/items/search-field.blade.php b/resources/views/components/tools/toolbar/items/search-field.blade.php
@@ -36,7 +36,7 @@
                 @if($component->isTailwind())
                 <x-heroicon-m-x-mark class='w-4 h-4' />
                 @else
-                <x-heroicon-m-x-mark style='width:1em; height:1em;'  />
+                <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
                 @endif
                     </div>
             </div>

diff --git a/resources/views/includes/columns/boolean.blade.php b/resources/views/includes/columns/boolean.blade.php
@@ -32,9 +32,9 @@
     @if ($status)
         @if ($type === 'icons')
             @if ($successValue === true)
-                <x-heroicon-o-check-circle style="width:1.2em;height:1.2em;" class="d-inline-block text-success" />
+                <x-heroicon-o-check-circle  class="d-inline-block text-success laravel-livewire-tables-btn-small" />
             @else
-                <x-heroicon-o-check-circle style="width:1.2em;height:1.2em;" class="d-inline-block text-danger" />
+                <x-heroicon-o-check-circle class="d-inline-block text-danger laravel-livewire-tables-btn-small" />
             @endif
         @elseif ($type === 'yes-no')
             @if ($successValue === true)
@@ -46,9 +46,9 @@
     @else
         @if ($type === 'icons')
             @if ($successValue === false)
-                <x-heroicon-o-x-circle style="width:1.2em;height:1.2em;" class="d-inline-block text-success" />
+                <x-heroicon-o-x-circle class="d-inline-block text-success laravel-livewire-tables-btn-small" />
             @else
-                <x-heroicon-o-x-circle style="width:1.2em;height:1.2em;" class="d-inline-block text-danger" />
+                <x-heroicon-o-x-circle class="d-inline-block text-danger laravel-livewire-tables-btn-small" />
             @endif
         @elseif ($type === 'yes-no')
             @if ($successValue === false)

diff --git a/resources/views/includes/offline.blade.php b/resources/views/includes/offline.blade.php
@@ -17,7 +17,7 @@
     @elseif ($component->isBootstrap())
         <div wire:offline.class.remove="d-none" class="d-none">
             <div class="alert alert-danger d-flex align-items-center">
-                <x-heroicon-s-x-circle style="width:1.3em;height:1.3em;" />
+                <x-heroicon-s-x-circle class="laravel-livewire-tables-btn-md" />
                 <span class="d-inline-block ml-2">@lang('You are not connected to the internet.')</span>
             </div>
         </div>