Private
Public Access
1
0

Refactor button components to use Proxmox UI library

- 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:
2025-12-17 17:40:11 -05:00
parent 6d6ea1a2cc
commit 689f84ab53
13 changed files with 245 additions and 250 deletions

View File

@@ -213,12 +213,12 @@
</div>
<div class="flex justify-center">
<x-button.primary wire:click="createCdDrive" wire:loading.attr="disabled"
<x-proxmox::ui.button wire:click="createCdDrive" wire:loading.attr="disabled"
class="w-full sm:w-auto"
:disabled="count($cdDrives) >= 2">
:disabled="count($cdDrives) >= 2" variant="primary">
<x-loading target="createCdDrive" />
Create CD/DVD-ROM Drive
</x-button.primary>
</x-proxmox::ui.button>
</div>
</div>
@endif
@@ -320,22 +320,22 @@
</div>
</div>
<div class="flex gap-2 w-full sm:w-auto min-w-0">
<x-button.primary wire:click="applyIso('{{ $drive }}')"
<x-proxmox::ui.button wire:click="applyIso('{{ $drive }}')"
wire:loading.attr="disabled"
class="flex-1 sm:flex-initial"
:disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
:disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')" variant="primary">
<x-loading target="applyIso('{{ $drive }}')" />
<span wire:loading.remove wire:target="applyIso('{{ $drive }}')">Apply</span>
<span wire:loading wire:target="applyIso('{{ $drive }}')">Applying...</span>
</x-button.primary>
<x-button.danger wire:click="ejectIso('{{ $drive }}')"
</x-proxmox::ui.button>
<x-proxmox::ui.button wire:click="ejectIso('{{ $drive }}')"
wire:loading.attr="disabled"
class="flex-1 sm:flex-initial"
:disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
:disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'" variant="danger">
<x-loading target="ejectIso('{{ $drive }}')" />
<span wire:loading.remove wire:target="ejectIso('{{ $drive }}')">Eject</span>
<span wire:loading wire:target="ejectIso('{{ $drive }}')">Ejecting...</span>
</x-button.danger>
</x-proxmox::ui.button>
</div>
</div>
<p class="text-xs text-base/50">
@@ -424,11 +424,11 @@
</div>
<div class="flex flex-col gap-3">
<x-button.primary
<x-proxmox::ui.button
onclick="window.open('https://billing.virtnet.bond/tickets/create', '_blank')"
class="w-full sm:w-auto">
class="w-full sm:w-auto" variant="primary">
Request ISO
</x-button.primary>
</x-proxmox::ui.button>
<div class="bg-info/10 border border-info/30 rounded-lg p-2 sm:p-3">
<div class="flex items-start gap-2">
@@ -664,17 +664,17 @@
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<div class="flex-1 w-full sm:w-auto">
<x-button.secondary wire:click="refreshBootConfiguration" wire:loading.attr="disabled"
class="w-full">
<x-proxmox::ui.button wire:click="refreshBootConfiguration" wire:loading.attr="disabled"
class="w-full" variant="secondary">
<x-loading target="refreshBootConfiguration" />
Refresh
</x-button.secondary>
</x-proxmox::ui.button>
</div>
<div class="flex items-center gap-2 flex-1 w-full sm:w-auto">
<x-button.secondary wire:click="resetOrder" :disabled="!$this->hasChanges"
class="flex-1">
<x-proxmox::ui.button wire:click="resetOrder" :disabled="!$this->hasChanges"
class="flex-1" variant="secondary">
Reset to current
</x-button.secondary>
</x-proxmox::ui.button>
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors" :disabled="!$this->hasChanges">
<x-ri-question-line class="size-4" />
@@ -729,11 +729,11 @@
</div>
</div>
<div class="flex items-center gap-2 flex-1 w-full sm:w-auto">
<x-button.primary wire:click="saveOrder" wire:loading.attr="disabled" :disabled="!$this->hasChanges"
class="flex-1">
<x-proxmox::ui.button wire:click="saveOrder" wire:loading.attr="disabled" :disabled="!$this->hasChanges"
class="flex-1" variant="primary">
<x-loading target="saveOrder" />
Save boot order
</x-button.primary>
</x-proxmox::ui.button>
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors" :disabled="!$this->hasChanges">
<x-ri-question-line class="size-4" />