Refactor Proxmox views for improved styling and consistency
- Updated subdomain.blade.php to enhance button styles and modal transitions. - Changed text colors for better readability and consistency across the UI. - Refactored system.blade.php to unify button components and improve layout structure. - Adjusted modal z-index values for consistent layering. - Enhanced accessibility by ensuring proper text contrast and hover states.
This commit is contained in:
@@ -1,88 +1,121 @@
|
||||
<x-proxmox::layout :server="$server" view="backups" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
||||
<div class="space-y-4" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
|
||||
<div class="flex items-center justify-between"
|
||||
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
|
||||
style="transition: all 0.4s ease-out;">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold">Backups</h2>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<div x-show="open" @click="open = false" @keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
|
||||
<div x-show="open" @click.away="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
|
||||
<div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-xl p-4">
|
||||
<button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<x-ri-close-line class="size-4" />
|
||||
</button>
|
||||
<div class="flex items-center gap-2 mb-3 pr-6">
|
||||
<div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
|
||||
<x-ri-database-2-line class="size-4 text-primary" />
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h2 class="text-xl font-semibold break-words">Backup Details</h2>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<x-ri-database-2-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||
Backup Details
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
View and manage backups for this virtual machine. Backups are stored on the KVM server and can be restored or deleted as needed.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Restore:</span> Restores the virtual machine to the state captured in the backup. The VM must be powered off before restoring.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Delete:</span> Permanently removes a backup from the server. This action cannot be undone.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Note:</span> Backups include the entire VM state including disk data, configuration, and metadata. Ensure you have sufficient storage quota for backups.
|
||||
</p>
|
||||
</div>
|
||||
<h6 class="text-base font-semibold">Backup Details</h6>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">Manage VM backups stored on the KVM server.</p>
|
||||
<div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<p><strong>Restore:</strong> Restores VM state. Must be powered off.</p>
|
||||
<p><strong>Delete:</strong> Permanently removes backup. Cannot be undone.</p>
|
||||
<p><strong>Note:</strong> Includes disk data, config, and metadata.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2 w-fit hidden lg:flex">
|
||||
<livewire:proxmox.backups.create :server="$server" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-row gap-2 w-fit hidden lg:flex">
|
||||
<livewire:proxmox.backups.create :server="$server" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md"
|
||||
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
||||
style="transition: all 0.4s ease-out 0.15s;">
|
||||
</div>
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg shadow-sm">
|
||||
<div class="overflow-x-auto rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
|
||||
<table class="min-w-full divide-y divide-neutral/40 text-sm">
|
||||
<thead>
|
||||
<tr class="text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">
|
||||
<th class="px-3 py-2">Backup</th>
|
||||
<th class="px-3 py-2">Size</th>
|
||||
<th class="px-3 py-2">Created</th>
|
||||
<th class="px-3 py-2 text-center">Actions</th>
|
||||
<tr class="text-left text-base font-semibold text-base/70">
|
||||
<th class="px-4 py-3">Backup</th>
|
||||
<th class="px-4 py-3">Size</th>
|
||||
<th class="px-4 py-3">Created At</th>
|
||||
<th class="px-4 py-3 text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
|
||||
@forelse($backups as $index => $backup)
|
||||
<tbody class="divide-y divide-neutral/20 text-base text-base/80">
|
||||
@forelse($backups as $backup)
|
||||
@php $backup = (object) $backup; @endphp
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
|
||||
:class="pageLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-2'"
|
||||
:style="'transition-delay: {{ ($index + 2) * 75 }}ms'">
|
||||
<td class="px-3 py-3"><span class="font-medium text-gray-800 dark:text-gray-200">{{ $backup->notes ?: '—' }}</span></td>
|
||||
<td class="px-3 py-3">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</td>
|
||||
<td class="px-3 py-3">{{ date('Y-m-d H:i', $backup->ctime) }}</td>
|
||||
<td class="px-3 py-3">
|
||||
<div class="flex flex-wrap items-center justify-center gap-1">
|
||||
<x-proxmox::ui.button
|
||||
@click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon="ri-checkbox-circle-fill">
|
||||
Restore
|
||||
</x-proxmox::ui.button>
|
||||
<x-proxmox::ui.button
|
||||
<tr class="hover:bg-background/60 transition-colors">
|
||||
<td class="px-4 py-4 align-middle">
|
||||
<p class="font-semibold text-base/90 break-words">{{ $backup->notes ?: '—' }}</p>
|
||||
</td>
|
||||
<td class="px-4 py-4 align-middle">
|
||||
<span class="font-medium">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-4 align-middle">
|
||||
<span class="font-medium">{{ date('Y-m-d H:i:s', $backup->ctime) }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-4 align-middle">
|
||||
<div class="flex flex-wrap items-center justify-center gap-2">
|
||||
<button @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2">
|
||||
<x-ri-checkbox-circle-fill class="w-4 h-4"/> Restore
|
||||
</button>
|
||||
<button
|
||||
wire:click="promptDelete('{{ $backup->volid }}')"
|
||||
variant="danger"
|
||||
size="sm"
|
||||
icon="ri-delete-bin-fill">
|
||||
Delete
|
||||
</x-proxmox::ui.button>
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error">
|
||||
<x-ri-delete-bin-fill class="w-4 h-4"/> Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-3 py-4 text-center text-gray-400 text-sm">No backups available.</td>
|
||||
<td colspan="4" class="px-4 py-6 text-center text-base/50 text-sm">
|
||||
No backups available for this server.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
@@ -102,13 +135,14 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-4 mt-4">
|
||||
<x-proxmox::ui.button wire:click="$set('showRestore', false)" variant="secondary">
|
||||
Cancel
|
||||
</x-proxmox::ui.button>
|
||||
<x-proxmox::ui.button wire:click="restoreBackup" wire:loading.attr="disabled" variant="primary">
|
||||
<span wire:loading.remove wire:target="restoreBackup">Restore</span>
|
||||
<span wire:loading wire:target="restoreBackup">Restoring...</span>
|
||||
</x-proxmox::ui.button>
|
||||
<x-button.secondary wire:click="$set('showRestore', false)">Cancel</x-button.secondary>
|
||||
<x-button.primary wire:click="restoreBackup" wire:loading.attr="disabled" wire:loading.class="opacity-50"
|
||||
wire:loading.attr="aria-busy" wire:target="restoreBackup">
|
||||
<x-loading target="restoreBackup" />
|
||||
<div wire:loading.remove wire:target="restoreBackup">
|
||||
Restore
|
||||
</div>
|
||||
</x-button.primary>
|
||||
</div>
|
||||
</x-modal>
|
||||
@endif
|
||||
@@ -124,13 +158,14 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-4 mt-4">
|
||||
<x-proxmox::ui.button wire:click="$set('showDelete', false)" variant="secondary">
|
||||
Cancel
|
||||
</x-proxmox::ui.button>
|
||||
<x-proxmox::ui.button wire:click="deleteBackup" wire:loading.attr="disabled" variant="danger">
|
||||
<span wire:loading.remove wire:target="deleteBackup">Delete Backup</span>
|
||||
<span wire:loading wire:target="deleteBackup">Deleting...</span>
|
||||
</x-proxmox::ui.button>
|
||||
<x-button.secondary wire:click="$set('showDelete', false)">Cancel</x-button.secondary>
|
||||
<x-button.danger wire:click="deleteBackup" wire:loading.attr="disabled" wire:loading.class="opacity-50"
|
||||
wire:loading.attr="aria-busy" wire:target="deleteBackup">
|
||||
<x-loading target="deleteBackup" />
|
||||
<div wire:loading.remove wire:target="deleteBackup">
|
||||
Delete Backup
|
||||
</div>
|
||||
</x-button.danger>
|
||||
</div>
|
||||
</x-modal>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user