Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
{{--
|
||||
Action Toolbar Button Component - AdminLTE style
|
||||
Action Toolbar Button Component - LucentUI Theme
|
||||
Migrated from AdminLTE to Tailwind
|
||||
Individual button for VM control actions
|
||||
|
||||
Usage:
|
||||
@@ -23,152 +24,46 @@
|
||||
])
|
||||
|
||||
@php
|
||||
$sizeStyles = [
|
||||
'sm' => 'height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem;',
|
||||
'md' => 'height: 2.5rem; padding: 0 1rem; font-size: 0.875rem;',
|
||||
'lg' => 'height: 2.75rem; padding: 0 1.25rem; font-size: 0.875rem;',
|
||||
$sizeClasses = [
|
||||
'sm' => 'h-9 px-3 text-xs',
|
||||
'md' => 'h-10 px-4 text-sm',
|
||||
'lg' => 'h-11 px-5 text-sm',
|
||||
];
|
||||
|
||||
$iconSizes = [
|
||||
'sm' => 'width: 0.875rem; height: 0.875rem;',
|
||||
'md' => 'width: 1rem; height: 1rem;',
|
||||
'lg' => 'width: 1.125rem; height: 1.125rem;',
|
||||
'sm' => 'size-3.5',
|
||||
'md' => 'size-4',
|
||||
'lg' => 'size-4.5',
|
||||
];
|
||||
|
||||
$variantClasses = [
|
||||
'default' => 'bg-background border border-neutral text-base/80 shadow-sm hover:bg-background-secondary hover:border-neutral/80',
|
||||
'primary' => 'bg-primary/10 border border-primary/20 text-primary hover:bg-primary/15 hover:border-primary/30',
|
||||
'success' => 'bg-success/10 border border-success/20 text-success hover:bg-success/15 hover:border-success/30',
|
||||
'warning' => 'bg-warning/15 border border-warning/30 text-warning hover:bg-warning/25 hover:border-warning/40',
|
||||
'danger' => 'bg-error/10 border border-error/20 text-error hover:bg-error/15 hover:border-error/30',
|
||||
];
|
||||
@endphp
|
||||
|
||||
<style>
|
||||
.action-btn-lte {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: var(--lte-border-radius, 0.375rem);
|
||||
border: 1px solid transparent;
|
||||
transition: all var(--lte-transition-speed, 0.3s) ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action-btn-lte:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
.action-btn-lte:disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.action-btn-lte-default {
|
||||
background-color: #fff;
|
||||
border-color: var(--lte-border-color, #dee2e6);
|
||||
color: #495057;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.action-btn-lte-default:hover {
|
||||
background-color: #f8f9fa;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
.action-btn-lte-primary {
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
border-color: rgba(13, 110, 253, 0.2);
|
||||
color: var(--lte-primary, #0d6efd);
|
||||
}
|
||||
.action-btn-lte-primary:hover {
|
||||
background-color: rgba(13, 110, 253, 0.15);
|
||||
border-color: rgba(13, 110, 253, 0.3);
|
||||
}
|
||||
.action-btn-lte-success {
|
||||
background-color: rgba(25, 135, 84, 0.1);
|
||||
border-color: rgba(25, 135, 84, 0.2);
|
||||
color: var(--lte-success, #198754);
|
||||
}
|
||||
.action-btn-lte-success:hover {
|
||||
background-color: rgba(25, 135, 84, 0.15);
|
||||
border-color: rgba(25, 135, 84, 0.3);
|
||||
}
|
||||
.action-btn-lte-warning {
|
||||
background-color: rgba(255, 193, 7, 0.15);
|
||||
border-color: rgba(255, 193, 7, 0.3);
|
||||
color: #997404;
|
||||
}
|
||||
.action-btn-lte-warning:hover {
|
||||
background-color: rgba(255, 193, 7, 0.25);
|
||||
border-color: rgba(255, 193, 7, 0.4);
|
||||
}
|
||||
.action-btn-lte-danger {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
border-color: rgba(220, 53, 69, 0.2);
|
||||
color: var(--lte-danger, #dc3545);
|
||||
}
|
||||
.action-btn-lte-danger:hover {
|
||||
background-color: rgba(220, 53, 69, 0.15);
|
||||
border-color: rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
.action-btn-lte-loading {
|
||||
cursor: wait;
|
||||
}
|
||||
/* Spinner */
|
||||
.action-btn-spinner-lte {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* Dark mode */
|
||||
.dark .action-btn-lte-default {
|
||||
background-color: #1f2937;
|
||||
border-color: #374151;
|
||||
color: #d1d5db;
|
||||
}
|
||||
.dark .action-btn-lte-default:hover {
|
||||
background-color: #374151;
|
||||
border-color: #4b5563;
|
||||
}
|
||||
.dark .action-btn-lte-primary {
|
||||
background-color: rgba(13, 110, 253, 0.15);
|
||||
border-color: rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
.dark .action-btn-lte-success {
|
||||
background-color: rgba(25, 135, 84, 0.15);
|
||||
border-color: rgba(25, 135, 84, 0.25);
|
||||
}
|
||||
.dark .action-btn-lte-warning {
|
||||
background-color: rgba(255, 193, 7, 0.15);
|
||||
border-color: rgba(255, 193, 7, 0.25);
|
||||
color: #ffc107;
|
||||
}
|
||||
.dark .action-btn-lte-danger {
|
||||
background-color: rgba(220, 53, 69, 0.15);
|
||||
border-color: rgba(220, 53, 69, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@if($confirm)
|
||||
x-data=""
|
||||
@click="if(confirm('{{ $confirm }}')) { $wire.call('{{ $action }}') }"
|
||||
@endif
|
||||
style="{{ $sizeStyles[$size] ?? $sizeStyles['md'] }}"
|
||||
{{ $attributes->merge([
|
||||
'disabled' => $disabled || $loading,
|
||||
])->class([
|
||||
'action-btn-lte',
|
||||
'action-btn-lte-default' => $variant === 'default',
|
||||
'action-btn-lte-primary' => $variant === 'primary',
|
||||
'action-btn-lte-success' => $variant === 'success',
|
||||
'action-btn-lte-warning' => $variant === 'warning',
|
||||
'action-btn-lte-danger' => $variant === 'danger',
|
||||
'action-btn-lte-loading' => $loading,
|
||||
'inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium rounded-lg transition-all duration-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:pointer-events-none',
|
||||
$sizeClasses[$size] ?? $sizeClasses['md'],
|
||||
$variantClasses[$variant] ?? $variantClasses['default'],
|
||||
'cursor-wait' => $loading,
|
||||
]) }}
|
||||
>
|
||||
@if($loading)
|
||||
<svg class="action-btn-spinner-lte" style="{{ $iconSizes[$size] ?? $iconSizes['md'] }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<x-ri-loader-5-fill class="{{ $iconSizes[$size] ?? $iconSizes['md'] }} animate-spin" />
|
||||
@elseif($icon)
|
||||
<x-dynamic-component :component="$icon" style="{{ $iconSizes[$size] ?? $iconSizes['md'] }}" />
|
||||
<x-dynamic-component :component="$icon" class="{{ $iconSizes[$size] ?? $iconSizes['md'] }}" />
|
||||
@endif
|
||||
<span>{{ $label }}</span>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user