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,6 +1,6 @@
|
||||
{{--
|
||||
Alert Component - AdminLTE Theme
|
||||
Based on AdminLTE v4 Alert & Callout styling patterns
|
||||
Alert Component - LucentUI Theme
|
||||
Migrated from AdminLTE to Tailwind
|
||||
|
||||
Usage:
|
||||
<x-proxmox::ui.alert>Default alert</x-proxmox::ui.alert>
|
||||
@@ -22,34 +22,40 @@
|
||||
@php
|
||||
$variantConfig = [
|
||||
'default' => [
|
||||
'alertClass' => 'lte-alert',
|
||||
'calloutClass' => 'lte-callout',
|
||||
'alertClass' => 'bg-background-secondary border border-neutral text-base/80',
|
||||
'calloutClass' => 'border-l-4 border-l-neutral bg-background-secondary/50 text-base/80',
|
||||
'icon' => $icon ?? 'ri-information-line',
|
||||
'iconColor' => 'text-base/60',
|
||||
],
|
||||
'info' => [
|
||||
'alertClass' => 'lte-alert lte-alert-info',
|
||||
'calloutClass' => 'lte-callout lte-callout-info',
|
||||
'alertClass' => 'bg-info/10 border border-info/30 text-info',
|
||||
'calloutClass' => 'border-l-4 border-l-info bg-info/5 text-info',
|
||||
'icon' => $icon ?? 'ri-information-line',
|
||||
'iconColor' => 'text-info',
|
||||
],
|
||||
'success' => [
|
||||
'alertClass' => 'lte-alert lte-alert-success',
|
||||
'calloutClass' => 'lte-callout lte-callout-success',
|
||||
'alertClass' => 'bg-success/10 border border-success/30 text-success',
|
||||
'calloutClass' => 'border-l-4 border-l-success bg-success/5 text-success',
|
||||
'icon' => $icon ?? 'ri-checkbox-circle-line',
|
||||
'iconColor' => 'text-success',
|
||||
],
|
||||
'warning' => [
|
||||
'alertClass' => 'lte-alert lte-alert-warning',
|
||||
'calloutClass' => 'lte-callout lte-callout-warning',
|
||||
'alertClass' => 'bg-warning/10 border border-warning/30 text-warning',
|
||||
'calloutClass' => 'border-l-4 border-l-warning bg-warning/5 text-warning',
|
||||
'icon' => $icon ?? 'ri-error-warning-line',
|
||||
'iconColor' => 'text-warning',
|
||||
],
|
||||
'danger' => [
|
||||
'alertClass' => 'lte-alert lte-alert-danger',
|
||||
'calloutClass' => 'lte-callout lte-callout-danger',
|
||||
'alertClass' => 'bg-error/10 border border-error/30 text-error',
|
||||
'calloutClass' => 'border-l-4 border-l-error bg-error/5 text-error',
|
||||
'icon' => $icon ?? 'ri-error-warning-fill',
|
||||
'iconColor' => 'text-error',
|
||||
],
|
||||
'primary' => [
|
||||
'alertClass' => 'lte-alert lte-alert-primary',
|
||||
'calloutClass' => 'lte-callout lte-callout-primary',
|
||||
'alertClass' => 'bg-primary/10 border border-primary/30 text-primary',
|
||||
'calloutClass' => 'border-l-4 border-l-primary bg-primary/5 text-primary',
|
||||
'icon' => $icon ?? 'ri-information-line',
|
||||
'iconColor' => 'text-primary',
|
||||
],
|
||||
];
|
||||
|
||||
@@ -60,9 +66,8 @@
|
||||
<div
|
||||
role="alert"
|
||||
{{ $attributes->class([
|
||||
'relative p-4 rounded-lg transition-all duration-300 hover:shadow-sm',
|
||||
$componentClass,
|
||||
'lte-fade-in transition-all duration-300 hover:shadow-sm',
|
||||
$dismissible ? 'lte-alert-dismissible' : '',
|
||||
]) }}
|
||||
@if($dismissible || $collapsible)
|
||||
x-data="{
|
||||
@@ -79,10 +84,10 @@
|
||||
@endif
|
||||
>
|
||||
<div class="flex gap-3 items-start">
|
||||
<x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0 transition-transform duration-200 hover:scale-110" />
|
||||
<x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0 transition-transform duration-200 hover:scale-110 {{ $config['iconColor'] }}" />
|
||||
<div class="flex-1 min-w-0">
|
||||
@if($title)
|
||||
<h5 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">{{ $title }}</h5>
|
||||
<h5 class="text-lg font-semibold mb-2">{{ $title }}</h5>
|
||||
@endif
|
||||
<div
|
||||
@if($collapsible)
|
||||
@@ -100,13 +105,12 @@
|
||||
</div>
|
||||
</div>
|
||||
@if($dismissible || $collapsible)
|
||||
<div class="flex items-center gap-1 shrink-0" style="position: absolute; top: 0.5rem; right: 0.5rem;">
|
||||
<div class="absolute top-2 right-2 flex items-center gap-1">
|
||||
@if($collapsible)
|
||||
<button
|
||||
type="button"
|
||||
@click="collapsed = !collapsed"
|
||||
class="lte-btn lte-btn-sm lte-btn-outline-secondary transition-all duration-200 hover:scale-105"
|
||||
style="padding: 0.25rem;"
|
||||
class="p-1 rounded border border-neutral bg-transparent text-base/60 hover:bg-neutral/10 hover:scale-105 transition-all duration-200"
|
||||
>
|
||||
<x-ri-arrow-down-s-line
|
||||
class="size-4 transition-transform duration-300 ease-out"
|
||||
@@ -118,9 +122,11 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="show = false"
|
||||
class="lte-btn-close transition-opacity duration-200 hover:opacity-70"
|
||||
class="p-1 rounded text-base/60 hover:text-base hover:opacity-70 transition-opacity duration-200"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
>
|
||||
<x-ri-close-line class="size-4" />
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user