Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: update Proxmox UI components to use TailAdmin styling

Browse Source 
- Changed component styles and classes to align with TailAdmin design patterns.
- Updated color schemes, typography, and layout for consistency across components.
- Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components.
- Enhanced responsiveness and accessibility features in various components.
This commit is contained in:
Joseph.Rawlings
2025-12-17 12:33:10 -05:00
parent 7a089f53e2
commit b4e2923a2c
23 changed files with 364 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
extensions/Servers/Proxmox/views/components/ui/progress.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Progress Bar Component - shadcn-style
Progress Bar Component - TailAdmin style
Usage:
<x-proxmox::ui.progress :value="75" />
@@ -23,12 +23,21 @@
$percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
$colorClasses = [
'primary' => 'bg-primary',
'secondary' => 'bg-secondary',
'success' => 'bg-success',
'warning' => 'bg-warning',
'danger' => 'bg-danger',
'info' => 'bg-info',
'primary' => 'bg-brand-500',
'secondary' => 'bg-gray-500',
'success' => 'bg-success-500',
'warning' => 'bg-warning-500',
'danger' => 'bg-error-500',
'info' => 'bg-blue-light-500',
];
$bgClasses = [
'primary' => 'bg-brand-100 dark:bg-brand-500/20',
'secondary' => 'bg-gray-200 dark:bg-gray-700',
'success' => 'bg-success-100 dark:bg-success-500/20',
'warning' => 'bg-warning-100 dark:bg-warning-500/20',
'danger' => 'bg-error-100 dark:bg-error-500/20',
'info' => 'bg-blue-light-100 dark:bg-blue-light-500/20',
];
$sizeClasses = [
@@ -40,32 +49,36 @@
];
$colorClass = $colorClasses[$color] ?? $colorClasses['primary'];
$bgClass = $bgClasses[$color] ?? $bgClasses['primary'];
$sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
// Auto-select color based on value if specified
if ($color === 'auto') {
if ($percent >= 90) {
$colorClass = $colorClasses['danger'];
$bgClass = $bgClasses['danger'];
} elseif ($percent >= 70) {
$colorClass = $colorClasses['warning'];
$bgClass = $bgClasses['warning'];
} else {
$colorClass = $colorClasses['success'];
$bgClass = $bgClasses['success'];
}
}
@endphp
<div {{ $attributes->class(['w-full']) }}>
@if($showLabel || $label)
<div class="flex items-center justify-between text-xs mb-1.5">
<span class="text-muted-foreground font-medium">{{ $label ?? 'Usage' }}</span>
<span class="font-medium">{{ number_format($percent, 1) }}%</span>
<div class="mb-2 flex items-center justify-between text-theme-xs">
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $label ?? 'Usage' }}</span>
<span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
</div>
@endif
<div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full bg-primary/20">
<div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full {{ $bgClass }}">
<div
@class([
$sizeClass,
'flex-1 w-full transition-all duration-300',
'w-full flex-1 rounded-full transition-all duration-300',
$colorClass => !$gradient,
])
@if($gradient)