refactor: replace Proxmox UI buttons with custom button elements for improved styling and loading states
This commit is contained in:
@@ -1229,87 +1229,114 @@
|
||||
|
||||
|
||||
<div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
|
||||
<x-proxmox::ui.button wire:click="do('start')" class="disabled:cursor-not-allowed"
|
||||
wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'stopped'" variant="primary">
|
||||
<x-loading target="do('start')" />
|
||||
<x-ri-play-fill class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('start')">
|
||||
Start
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('start')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'stopped') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
|
||||
<span wire:loading wire:target="do('start')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('start')">Start</span>
|
||||
<span wire:loading wire:target="do('start')">Starting...</span>
|
||||
</button>
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<x-proxmox::ui.button wire:click="do('shutdown')" class="text-nowrap disabled:cursor-not-allowed"
|
||||
wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'running'" variant="secondary">
|
||||
<x-loading target="do('shutdown')" />
|
||||
<x-ri-stop-fill class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('shutdown')">
|
||||
Stop (ACPI)
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('shutdown')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
|
||||
<span wire:loading wire:target="do('shutdown')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
|
||||
<span wire:loading wire:target="do('shutdown')">Stopping...</span>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<x-proxmox::ui.button wire:click="do('reboot')" class="text-nowrap disabled:cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'running'" variant="secondary">
|
||||
<x-loading target="do('reboot')" />
|
||||
<x-ri-loop-left-line class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('reboot')">
|
||||
Reboot (ACPI)
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('reboot')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
|
||||
<span wire:loading wire:target="do('reboot')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
|
||||
<span wire:loading wire:target="do('reboot')">Rebooting...</span>
|
||||
</button>
|
||||
</div>
|
||||
<x-proxmox::ui.button wire:click="do('stop')" class="text-nowrap disabled:cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'running'" variant="danger">
|
||||
<x-loading target="do('stop')" />
|
||||
<x-ri-shut-down-line class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('stop')">
|
||||
Power Off
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('stop')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
|
||||
<span wire:loading wire:target="do('stop')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('stop')">Power Off</span>
|
||||
<span wire:loading wire:target="do('stop')">Powering Off...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex lg:hidden w-full flex-col gap-2">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<x-proxmox::ui.button wire:click="do('start')" class="w-full disabled:cursor-not-allowed"
|
||||
wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'stopped'" variant="primary">
|
||||
<x-loading target="do('start')" />
|
||||
<x-ri-play-fill class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('start')">
|
||||
Start
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('start')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'stopped') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
|
||||
<span wire:loading wire:target="do('start')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('start')">Start</span>
|
||||
<span wire:loading wire:target="do('start')">Starting...</span>
|
||||
</button>
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<x-proxmox::ui.button wire:click="do('shutdown')" class="w-full text-nowrap disabled:cursor-not-allowed"
|
||||
wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'running'" variant="secondary">
|
||||
<x-loading target="do('shutdown')" />
|
||||
<x-ri-stop-fill class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('shutdown')">
|
||||
Stop (ACPI)
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('shutdown')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
|
||||
<span wire:loading wire:target="do('shutdown')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
|
||||
<span wire:loading wire:target="do('shutdown')">Stopping...</span>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<x-proxmox::ui.button wire:click="do('reboot')" class="w-full text-nowrap disabled:cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'running'" variant="secondary">
|
||||
<x-loading target="do('reboot')" />
|
||||
<x-ri-loop-left-line class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('reboot')">
|
||||
Reboot (ACPI)
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('reboot')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
|
||||
<span wire:loading wire:target="do('reboot')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
|
||||
<span wire:loading wire:target="do('reboot')">Rebooting...</span>
|
||||
</button>
|
||||
</div>
|
||||
<x-proxmox::ui.button wire:click="do('stop')"
|
||||
class="text-nowrap w-full disabled:cursor-not-allowed"
|
||||
:disabled="$vmStatus !== 'running'" variant="danger">
|
||||
<x-loading target="do('stop')" />
|
||||
<x-ri-shut-down-line class="size-4" />
|
||||
<div wire:loading.remove wire:target="do('stop')">
|
||||
Power Off
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
<button wire:click="do('stop')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
|
||||
<span wire:loading wire:target="do('stop')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
<x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('stop')">Power Off</span>
|
||||
<span wire:loading wire:target="do('stop')">Powering Off...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user