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

@@ -280,26 +280,26 @@
</div>
<div class="flex flex-col sm:flex-row gap-3">
<x-button.secondary wire:click="addInterface" wire:loading.attr="disabled" class="w-full sm:w-1/3"
:disabled="!$this->canAddInterface">
<x-proxmox::ui.button wire:click="addInterface" wire:loading.attr="disabled" class="w-full sm:w-1/3"
:disabled="!$this->canAddInterface" variant="secondary">
<x-loading target="addInterface" />
<span wire:loading.remove wire:target="addInterface">
<x-ri-add-line class="inline size-4 mr-1" />
Add Device
</span>
<span wire:loading wire:target="addInterface">Adding...</span>
</x-button.secondary>
<x-button.secondary wire:click="refreshInterfaces" wire:loading.attr="disabled" class="w-full">
</x-proxmox::ui.button>
<x-proxmox::ui.button wire:click="refreshInterfaces" wire:loading.attr="disabled" class="w-full" variant="secondary">
<x-loading target="refreshInterfaces" />
<span wire:loading.remove wire:target="refreshInterfaces">Refresh Interfaces</span>
<span wire:loading wire:target="refreshInterfaces">Refreshing...</span>
</x-button.secondary>
<x-button.primary wire:click="updateInterfaceType" wire:loading.attr="disabled" class="w-full"
:disabled="!$this->canUpdateInterface">
</x-proxmox::ui.button>
<x-proxmox::ui.button wire:click="updateInterfaceType" wire:loading.attr="disabled" class="w-full"
:disabled="!$this->canUpdateInterface" variant="primary">
<x-loading target="updateInterfaceType" />
<span wire:loading.remove wire:target="updateInterfaceType">Save Interface Type</span>
<span wire:loading wire:target="updateInterfaceType">Saving...</span>
</x-button.primary>
</x-proxmox::ui.button>
</div>
<p class="text-xs text-base/50 mt-2">VirtIO provides the best performance; legacy adapters (E1000, Realtek, PCnet, VMware) improve compatibility.</p>
<p class="text-xs text-base/50 mt-1">
@@ -434,37 +434,37 @@
<div class="flex-1"></div>
<div class="flex gap-2 justify-end mt-auto">
@if($isIpv6)
<x-button.primary
<x-proxmox::ui.button
onclick="window.open('https://ping6.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
Ping
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://mtr6.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
MTR
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://bgp.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
BGP
</x-button.primary>
</x-proxmox::ui.button>
@else
<x-button.primary
<x-proxmox::ui.button
onclick="window.open('https://ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
Ping
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://mtr.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
MTR
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://bgp.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
BGP
</x-button.primary>
</x-proxmox::ui.button>
@endif
</div>
</div>
@@ -724,37 +724,37 @@
<div class="flex-1"></div>
<div class="flex gap-2 justify-end mt-auto">
@if($isIpv6)
<x-button.primary
<x-proxmox::ui.button
onclick="window.open('https://ping6.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
Ping
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://mtr6.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
MTR
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://bgp.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
BGP
</x-button.primary>
</x-proxmox::ui.button>
@else
<x-button.primary
<x-proxmox::ui.button
onclick="window.open('https://ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
Ping
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://mtr.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
MTR
</x-button.primary>
<x-button.primary
</x-proxmox::ui.button>
<x-proxmox::ui.button
onclick="window.open('https://bgp.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs" variant="primary">
BGP
</x-button.primary>
</x-proxmox::ui.button>
@endif
</div>
</div>