From b7b81b0d3afad4438bee847436ae0cb670d3319f Mon Sep 17 00:00:00 2001 From: "Joseph.Rawlings" Date: Wed, 17 Dec 2025 17:55:03 -0500 Subject: [PATCH] Refactor components to align with AdminLTE styles - Updated alert component to use AdminLTE variant classes and added callout support. - Refined badge component with AdminLTE base and variant classes, including size adjustments. - Modified button component to implement AdminLTE button styles and improved loading indicators. - Enhanced card component with AdminLTE variant classes and improved header/footer structure. - Adjusted input component to follow AdminLTE design, including size classes and icon handling. - Updated layout component to streamline button styles and loading indicators. - Refined progress component to utilize AdminLTE styles for size and variant classes. - Enhanced table component with AdminLTE table classes and improved loading state representation. --- .../Proxmox/views/components/alert.blade.php | 20 ++-- .../Proxmox/views/components/badge.blade.php | 96 +++++++--------- .../Proxmox/views/components/button.blade.php | 77 ++++--------- .../Proxmox/views/components/card.blade.php | 71 ++++++++---- .../Proxmox/views/components/input.blade.php | 106 +++++++++--------- .../Proxmox/views/components/layout.blade.php | 64 ++++------- .../views/components/progress.blade.php | 85 ++++++-------- .../Proxmox/views/components/table.blade.php | 38 ++++--- 8 files changed, 259 insertions(+), 298 deletions(-) diff --git a/extensions/Servers/Proxmox/views/components/alert.blade.php b/extensions/Servers/Proxmox/views/components/alert.blade.php index b3f22a34f..24a3baebb 100644 --- a/extensions/Servers/Proxmox/views/components/alert.blade.php +++ b/extensions/Servers/Proxmox/views/components/alert.blade.php @@ -7,17 +7,19 @@ 'collapsed' => false, 'storageKey' => null, 'border' => true, + 'callout' => false, ]) @php - // Variant classes + // AdminLTE variant classes $variantClasses = match($variant) { - 'success' => 'bg-success/10 border-success/30 text-success', - 'danger', 'error' => 'bg-danger/10 border-danger/30 text-danger', - 'warning' => 'bg-warning/10 border-warning/30 text-warning', - 'info' => 'bg-info/10 border-info/30 text-info', - 'neutral' => 'bg-neutral/10 border-neutral/30 text-base/80', - default => 'bg-info/10 border-info/30 text-info', + 'success' => $callout ? 'lte-callout lte-callout-success' : 'lte-alert lte-alert-success', + 'danger', 'error' => $callout ? 'lte-callout lte-callout-danger' : 'lte-alert lte-alert-danger', + 'warning' => $callout ? 'lte-callout lte-callout-warning' : 'lte-alert lte-alert-warning', + 'info' => $callout ? 'lte-callout lte-callout-info' : 'lte-alert lte-alert-info', + 'primary' => $callout ? 'lte-callout lte-callout-primary' : 'lte-alert lte-alert-primary', + 'neutral' => $callout ? 'lte-callout' : 'lte-alert', + default => $callout ? 'lte-callout lte-callout-info' : 'lte-alert lte-alert-info', }; // Default icons per variant @@ -26,13 +28,13 @@ 'danger', 'error' => 'ri-error-warning-fill', 'warning' => 'ri-alert-fill', 'info' => 'ri-information-line', + 'primary' => 'ri-information-line', 'neutral' => 'ri-information-line', default => 'ri-information-line', }; $alertIcon = $icon ?? $defaultIcon; - $borderClasses = $border ? 'border' : ''; - $baseClasses = "$variantClasses $borderClasses rounded-lg p-4"; + $baseClasses = "$variantClasses lte-fade-in"; @endphp
'px-1.5 py-0.5 text-xs gap-1', - 'sm' => 'px-2 py-0.5 text-xs gap-1', - 'md' => 'px-2.5 py-1 text-xs gap-1.5', - 'lg' => 'px-3 py-1 text-sm gap-1.5', - default => 'px-2.5 py-1 text-xs gap-1.5', + // Size classes - inline style adjustments + $sizeStyles = match($size) { + 'xs' => 'padding: 0.2em 0.5em; font-size: 0.65em;', + 'sm' => 'padding: 0.25em 0.55em; font-size: 0.7em;', + 'md' => '', + 'lg' => 'padding: 0.4em 0.75em; font-size: 0.85em;', + default => '', }; // Icon size classes @@ -41,61 +41,47 @@ default => 'size-2', }; - // Variant classes + // AdminLTE variant classes $variantClasses = match($variant) { - 'success' => $outline - ? 'border border-success/50 text-success bg-transparent' - : 'bg-success/10 text-success border border-success/20', - 'danger' => $outline - ? 'border border-danger/50 text-danger bg-transparent' - : 'bg-danger/10 text-danger border border-danger/20', - 'warning' => $outline - ? 'border border-warning/50 text-warning bg-transparent' - : 'bg-warning/10 text-warning border border-warning/20', - 'info' => $outline - ? 'border border-info/50 text-info bg-transparent' - : 'bg-info/10 text-info border border-info/20', - 'primary' => $outline - ? 'border border-primary/50 text-primary bg-transparent' - : 'bg-primary/10 text-primary border border-primary/20', - 'secondary' => $outline - ? 'border border-secondary/50 text-secondary bg-transparent' - : 'bg-secondary/10 text-secondary border border-secondary/20', - 'neutral' => $outline - ? 'border border-neutral/50 text-base/70 bg-transparent' - : 'bg-neutral/10 text-base/70 border border-neutral/20', - default => $outline - ? 'border border-neutral/50 text-base/70 bg-transparent' - : 'bg-neutral/10 text-base/70 border border-neutral/20', + 'success' => 'lte-badge-success', + 'danger' => 'lte-badge-danger', + 'warning' => 'lte-badge-warning', + 'info' => 'lte-badge-info', + 'primary' => 'lte-badge-primary', + 'secondary' => 'lte-badge-secondary', + 'neutral' => 'lte-badge-light', + default => 'lte-badge-secondary', }; - // Dot color classes + // Dot color classes - AdminLTE colors $dotColorClasses = match($variant) { - 'success' => 'bg-success', - 'danger' => 'bg-danger', - 'warning' => 'bg-warning', - 'info' => 'bg-info', - 'primary' => 'bg-primary', - 'secondary' => 'bg-secondary', - 'neutral' => 'bg-base/50', - default => 'bg-base/50', - }; - - // Rounded classes - $roundedClasses = match($rounded) { - 'none' => 'rounded-none', - 'sm' => 'rounded-sm', - 'md' => 'rounded-md', - 'lg' => 'rounded-lg', - 'full' => 'rounded-full', - default => 'rounded-full', + 'success' => 'lte-bg-success', + 'danger' => 'lte-bg-danger', + 'warning' => 'lte-bg-warning', + 'info' => 'lte-bg-info', + 'primary' => 'lte-bg-primary', + 'secondary' => 'lte-bg-secondary', + 'neutral' => 'lte-bg-light', + default => 'lte-bg-secondary', }; // Combined classes - $classes = "$baseClasses $sizeClasses $variantClasses $roundedClasses"; + $classes = "$baseClasses $variantClasses"; + + // Border radius style + $borderRadius = match($rounded) { + 'none' => 'border-radius: 0;', + 'sm' => 'border-radius: 0.125rem;', + 'md' => 'border-radius: 0.25rem;', + 'lg' => 'border-radius: 0.375rem;', + 'full' => 'border-radius: 9999px;', + default => 'border-radius: 9999px;', + }; + + $styles = trim("$sizeStyles $borderRadius"); @endphp -merge(['class' => $classes]) }}> +merge(['class' => $classes]) }} @if($styles) style="{{ $styles }}" @endif> {{-- Dot indicator --}} @if($dot) diff --git a/extensions/Servers/Proxmox/views/components/button.blade.php b/extensions/Servers/Proxmox/views/components/button.blade.php index cb5a8f3a5..caa90c1a7 100644 --- a/extensions/Servers/Proxmox/views/components/button.blade.php +++ b/extensions/Servers/Proxmox/views/components/button.blade.php @@ -14,17 +14,17 @@ ]) @php - // Base classes - $baseClasses = 'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'; + // AdminLTE button base class + $baseClasses = 'lte-btn'; - // Size classes + // Size classes - AdminLTE style $sizeClasses = match($size) { - 'xs' => 'px-2 py-1 text-xs gap-1', - 'sm' => 'px-3 py-1.5 text-sm gap-1.5', - 'md' => 'px-4 py-2 text-sm gap-2', - 'lg' => 'px-5 py-2.5 text-base gap-2', - 'xl' => 'px-6 py-3 text-base gap-2.5', - default => 'px-4 py-2 text-sm gap-2', + 'xs' => 'lte-btn-sm', + 'sm' => 'lte-btn-sm', + 'md' => '', + 'lg' => 'lte-btn-lg', + 'xl' => 'lte-btn-lg', + default => '', }; // Icon size classes @@ -37,72 +37,43 @@ default => 'size-4', }; - // Variant classes + // Variant classes - AdminLTE style $variantClasses = match($variant) { - 'primary' => $outline - ? 'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary/50' - : 'bg-primary text-white hover:bg-primary/90 focus:ring-primary/50', - 'secondary' => $outline - ? 'border-2 border-secondary text-secondary hover:bg-secondary hover:text-white focus:ring-secondary/50' - : 'bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50', - 'success' => $outline - ? 'border-2 border-success text-success hover:bg-success hover:text-white focus:ring-success/50' - : 'bg-success text-white hover:bg-success/90 focus:ring-success/50', - 'danger' => $outline - ? 'border-2 border-danger text-danger hover:bg-danger hover:text-white focus:ring-danger/50' - : 'bg-danger text-white hover:bg-danger/90 focus:ring-danger/50', - 'warning' => $outline - ? 'border-2 border-warning text-warning hover:bg-warning hover:text-white focus:ring-warning/50' - : 'bg-warning text-white hover:bg-warning/90 focus:ring-warning/50', - 'info' => $outline - ? 'border-2 border-info text-info hover:bg-info hover:text-white focus:ring-info/50' - : 'bg-info text-white hover:bg-info/90 focus:ring-info/50', - 'ghost' => 'text-base/70 hover:text-base/90 hover:bg-neutral/10 focus:ring-neutral/50', - 'link' => 'text-primary hover:text-primary/80 underline-offset-4 hover:underline focus:ring-primary/50 p-0', - 'neutral' => $outline - ? 'border border-neutral/30 text-base/70 hover:bg-neutral/10 hover:text-base/90 focus:ring-neutral/50' - : 'bg-neutral/10 text-base/80 hover:bg-neutral/20 focus:ring-neutral/50', - default => $outline - ? 'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary/50' - : 'bg-primary text-white hover:bg-primary/90 focus:ring-primary/50', - }; - - // Rounded classes - $roundedClasses = match($rounded) { - 'none' => 'rounded-none', - 'sm' => 'rounded-sm', - 'md' => 'rounded-md', - 'lg' => 'rounded-lg', - 'xl' => 'rounded-xl', - 'full' => 'rounded-full', - default => 'rounded-lg', + 'primary' => $outline ? 'lte-btn-outline-primary' : 'lte-btn-primary', + 'secondary' => $outline ? 'lte-btn-outline-secondary' : 'lte-btn-secondary', + 'success' => $outline ? 'lte-btn-outline-success' : 'lte-btn-success', + 'danger' => $outline ? 'lte-btn-outline-danger' : 'lte-btn-danger', + 'warning' => 'lte-btn-warning', + 'info' => 'lte-btn-info', + 'ghost' => 'lte-btn-outline-secondary', + 'link' => 'lte-text-primary', + 'neutral' => $outline ? 'lte-btn-outline-secondary' : 'lte-btn-secondary', + default => $outline ? 'lte-btn-outline-primary' : 'lte-btn-primary', }; // Full width $widthClasses = $fullWidth ? 'w-full' : ''; // Combined classes - $classes = "$baseClasses $sizeClasses $variantClasses $roundedClasses $widthClasses"; + $classes = trim("$baseClasses $sizeClasses $variantClasses $widthClasses"); // Determine tag $tag = $href ? 'a' : 'button'; @endphp @if($href) - merge(['class' => $classes]) }}> + merge(['class' => $classes]) }} style="border-radius: 0.375rem;"> @else @endif
+ @endif @if(isset($header)) {{ $header }} @endif @@ -70,17 +88,26 @@ @endif @if($collapsible) -
+
{{ $slot }}
@else -
+
{{ $slot }}
@endif @if(isset($footer)) -
+
{{ $footer }}
@endif diff --git a/extensions/Servers/Proxmox/views/components/input.blade.php b/extensions/Servers/Proxmox/views/components/input.blade.php index 8aaedd821..6e9b6708f 100644 --- a/extensions/Servers/Proxmox/views/components/input.blade.php +++ b/extensions/Servers/Proxmox/views/components/input.blade.php @@ -19,12 +19,12 @@ @php $inputId = $id ?? $name ?? Str::random(8); - // Size classes + // AdminLTE size classes $sizeClasses = match($size) { - 'sm' => 'px-3 py-1.5 text-sm', - 'md' => 'px-4 py-2 text-sm', - 'lg' => 'px-4 py-2.5 text-base', - default => 'px-4 py-2 text-sm', + 'sm' => 'lte-form-control-sm', + 'md' => '', + 'lg' => 'lte-form-control-lg', + default => '', }; $iconSizeClasses = match($size) { @@ -34,47 +34,61 @@ default => 'size-4', }; - // Input base classes - $baseClasses = 'w-full bg-background border rounded-lg transition-all duration-200 outline-none'; - $focusClasses = 'focus:ring-2 focus:ring-primary/20 focus:border-primary'; - $disabledClasses = $disabled ? 'opacity-50 cursor-not-allowed bg-neutral/5' : ''; - $errorClasses = $error ? 'border-danger focus:ring-danger/20 focus:border-danger' : 'border-neutral/30'; - - // Padding adjustments for icons/affixes - $paddingLeft = ($icon && $iconPosition === 'left') || $prefix ? 'pl-10' : ''; - $paddingRight = ($icon && $iconPosition === 'right') || $suffix ? 'pr-10' : ''; - - $inputClasses = "$baseClasses $sizeClasses $focusClasses $disabledClasses $errorClasses $paddingLeft $paddingRight"; + // AdminLTE input classes + $inputClasses = "lte-form-control $sizeClasses"; + if ($error) { + $inputClasses .= ' is-invalid'; + } @endphp -
only('class')->merge(['class' => 'flex flex-col gap-1.5']) }}> +
only('class')->merge(['class' => 'mb-3']) }}> {{-- Label --}} @if($label) -
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php index 6637b92e1..6c417356e 100644 --- a/extensions/Servers/Proxmox/views/components/layout.blade.php +++ b/extensions/Servers/Proxmox/views/components/layout.blade.php @@ -1231,12 +1231,10 @@