Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Refactor button components to use Proxmox UI library

Browse Source 
- Updated button components across various views to utilize the new Proxmox UI button structure.
- Replaced instances of <x-button.primary> and <x-button.secondary> with <x-proxmox::ui.button> for consistency and improved styling.
- Adjusted button attributes and loading states to align with the new component design.
- Ensured that all button functionalities remain intact while enhancing the overall UI consistency.
This commit is contained in:
Joseph.Rawlings
2025-12-17 17:40:11 -05:00
parent 6d6ea1a2cc
commit 689f84ab53
13 changed files with 245 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
extensions/Servers/Proxmox/views/backups.blade.php
View File

@@ -57,14 +57,20 @@
<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">
<button @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1">
<x-ri-checkbox-circle-fill class="w-3 h-3"/> Restore
</button>
<button wire:click="promptDelete('{{ $backup->volid }}')"
class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1 text-error">
<x-ri-delete-bin-fill class="w-3 h-3"/> Delete
</button>
<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
wire:click="promptDelete('{{ $backup->volid }}')"
variant="danger"
size="sm"
icon="ri-delete-bin-fill">
Delete
</x-proxmox::ui.button>
</div>
</td>
</tr>
@@ -90,14 +96,13 @@
</div>
<div class="flex flex-row gap-4 mt-4">
<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>
<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>
</div>
</x-modal>
@endif
@@ -113,14 +118,13 @@
</div>
<div class="flex flex-row gap-4 mt-4">
<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>
<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>
</div>
</x-modal>
@endif