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:
@@ -35,12 +35,8 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="space-y-4 lg:space-y-6 px-2 sm:px-0 overflow-x-hidden"
|
||||
x-data="{ pageLoaded: false }"
|
||||
x-init="setTimeout(() => pageLoaded = true, 50)">
|
||||
<div class="bg-info border border-info/30 rounded-lg p-3 lg:p-4 transition-all duration-300"
|
||||
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
|
||||
style="transition: all 0.4s ease-out;"
|
||||
<div class="space-y-4 lg:space-y-6 px-2 sm:px-0 overflow-x-hidden">
|
||||
<div class="bg-info/10 border border-info/30 rounded-lg p-3 lg:p-4"
|
||||
x-data="{
|
||||
isCollapsed: localStorage.getItem('boot-order-notice-collapsed') === 'true',
|
||||
toggle() {
|
||||
@@ -53,21 +49,21 @@
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-sm font-semibold text-base">Cloud-init Configuration Notice</h3>
|
||||
<button @click="toggle()" type="button" class="text-gray-500 dark:text-gray-400 hover:text-base transition-colors">
|
||||
<button @click="toggle()" type="button" class="text-base/60 hover:text-base transition-colors">
|
||||
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="!isCollapsed" x-transition>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
<p class="text-xs text-base/70 leading-relaxed">
|
||||
<strong>Hostname, password, and networking settings</strong> are configured automatically via <strong>cloud-init</strong>.
|
||||
This applies to standard operating system installations that support cloud-init. However, if you are:
|
||||
</p>
|
||||
<ul class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mt-2 ml-4 list-disc space-y-1">
|
||||
<ul class="text-xs text-base/70 leading-relaxed mt-2 ml-4 list-disc space-y-1">
|
||||
<li>Installing from an ISO image</li>
|
||||
<li>Configuring the operating system manually during installation</li>
|
||||
<li>Using Windows (which does not support cloud-init)</li>
|
||||
</ul>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mt-2">
|
||||
<p class="text-xs text-base/70 leading-relaxed mt-2">
|
||||
You will need to <strong>manually configure networking, security settings, and hostname</strong> within the operating system, as cloud-init will not be available in these scenarios.
|
||||
</p>
|
||||
</div>
|
||||
@@ -75,13 +71,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2"
|
||||
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
||||
style="transition: all 0.4s ease-out 0.1s;">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h2 class="text-lg sm:text-xl font-semibold break-words">Boot Order</h2>
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -94,7 +88,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -107,9 +101,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -124,7 +118,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Determines the sequence in which the virtual machine attempts to boot from available devices. The system will try each device in the specified order until it finds a bootable medium.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Note:</span> If no explicit boot order is configured, QEMU uses the default platform boot sequence. Changes take effect on the next power event (start, reboot, or reset). The boot order is populated directly from the QEMU configuration via the QEMU API.
|
||||
</p>
|
||||
@@ -133,7 +127,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm text-base/60">
|
||||
Control the sequence used when attempting to boot this virtual machine. The list below is
|
||||
populated directly from the QEMU configuration via the API.
|
||||
</p>
|
||||
@@ -148,13 +142,13 @@
|
||||
</div>
|
||||
|
||||
@if(count($cdDrives) < 2)
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-3 lg:p-4 space-y-3 lg:space-y-4">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-3 lg:p-4 space-y-3 lg:space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 min-w-0">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<h3 class="text-base sm:text-lg font-semibold break-words">Create CD/DVD-ROM Drive</h3>
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -167,7 +161,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -180,9 +174,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -197,7 +191,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Adds a virtual optical drive to your VM using the next available IDE or SATA slot. The system automatically selects an unused slot (IDE0-IDE4 or SATA0-SATA5).
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
|
||||
<span class="font-semibold text-base/90">Limitations:</span> Cloud-init media devices are automatically ignored. Maximum of 2 CD/DVD-ROM drives per virtual machine.
|
||||
</p>
|
||||
@@ -209,34 +203,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p class="text-xs text-base/60">
|
||||
Use the next available IDE or SATA slot to add a virtual optical drive. Cloud-init media is ignored. Maximum of 2 drives allowed.
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-xs font-semibold {{ count($cdDrives) === 0 ? 'text-warning' : 'text-gray-500 dark:text-gray-400' }}">
|
||||
<span class="text-xs font-semibold {{ count($cdDrives) === 0 ? 'text-warning' : 'text-base/60' }}">
|
||||
{{ count($cdDrives) === 0 ? 'No drive configured' : count($cdDrives) . ' of 2 drives' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<x-proxmox::ui.button wire:click="createCdDrive" wire:loading.attr="disabled"
|
||||
<x-button.primary wire:click="createCdDrive" wire:loading.attr="disabled"
|
||||
class="w-full sm:w-auto"
|
||||
:disabled="count($cdDrives) >= 2" variant="primary">
|
||||
:disabled="count($cdDrives) >= 2">
|
||||
<x-loading target="createCdDrive" />
|
||||
Create CD/DVD-ROM Drive
|
||||
</x-proxmox::ui.button>
|
||||
</x-button.primary>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@foreach($cdDrives as $index => $drive)
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-3 lg:p-4 space-y-3 lg:space-y-4" wire:key="cd-drive-{{ $drive }}">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-3 lg:p-4 space-y-3 lg:space-y-4" wire:key="cd-drive-{{ $drive }}">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 min-w-0">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-base sm:text-lg font-semibold break-words">Mount ISO Image - {{ strtoupper($drive) }}</h3>
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -249,7 +243,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -262,9 +256,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -279,7 +273,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Attach or detach ISO files from cephfs storage to the virtual CD/DVD-ROM drive. Select an ISO from the dropdown to mount it, or choose "None" to leave the drive empty.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<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">Apply:</span> Commits your selection and immediately mounts the ISO to the drive.
|
||||
</p>
|
||||
@@ -294,7 +288,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p class="text-xs text-base/60">
|
||||
Attach or detach an ISO from cephfs storage for the drive on {{ strtoupper($drive) }}.
|
||||
</p>
|
||||
</div>
|
||||
@@ -320,28 +314,28 @@
|
||||
</select>
|
||||
<!-- Dropdown Arrow Icon -->
|
||||
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-4 h-4 text-base/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 w-full sm:w-auto min-w-0">
|
||||
<x-proxmox::ui.button wire:click="applyIso('{{ $drive }}')"
|
||||
<x-button.primary wire:click="applyIso('{{ $drive }}')"
|
||||
wire:loading.attr="disabled"
|
||||
class="flex-1 sm:flex-initial"
|
||||
:disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')" variant="primary">
|
||||
:disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
|
||||
<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-proxmox::ui.button>
|
||||
<x-proxmox::ui.button wire:click="ejectIso('{{ $drive }}')"
|
||||
</x-button.primary>
|
||||
<x-button.danger wire:click="ejectIso('{{ $drive }}')"
|
||||
wire:loading.attr="disabled"
|
||||
class="flex-1 sm:flex-initial"
|
||||
:disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'" variant="danger">
|
||||
:disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
|
||||
<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-proxmox::ui.button>
|
||||
</x-button.danger>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-base/50">
|
||||
@@ -349,7 +343,7 @@
|
||||
</p>
|
||||
|
||||
@if(isset($currentIsos[$drive]) && $currentIsos[$drive] !== 'none')
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<div class="text-xs text-base/60">
|
||||
Currently mounted: <strong>{{ $this->formatIsoLabel($currentIsos[$drive]) }}</strong>
|
||||
</div>
|
||||
@endif
|
||||
@@ -357,13 +351,13 @@
|
||||
@endforeach
|
||||
|
||||
@if(count($cdDrives) > 0)
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-3 lg:p-4 space-y-3 lg:space-y-4">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-3 lg:p-4 space-y-3 lg:space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 min-w-0">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<h3 class="text-base sm:text-lg font-semibold break-words">Request ISO</h3>
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -376,7 +370,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -389,9 +383,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -406,7 +400,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Opens a support ticket form where you can request that a specific ISO image be added to the cephfs storage.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-semibold leading-relaxed text-base/90 mb-2.5">
|
||||
When submitting a request, include:
|
||||
</p>
|
||||
@@ -423,32 +417,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p class="text-xs text-base/60">
|
||||
Submit a support ticket to request an ISO image be added to cephfs storage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<x-proxmox::ui.button
|
||||
<x-button.primary
|
||||
onclick="window.open('https://billing.virtnet.bond/tickets/create', '_blank')"
|
||||
class="w-full sm:w-auto" variant="primary">
|
||||
class="w-full sm:w-auto">
|
||||
Request ISO
|
||||
</x-proxmox::ui.button>
|
||||
</x-button.primary>
|
||||
|
||||
<div class="bg-info border border-info/30 rounded-lg p-2 sm:p-3">
|
||||
<div class="bg-info/10 border border-info/30 rounded-lg p-2 sm:p-3">
|
||||
<div class="flex items-start gap-2">
|
||||
<x-ri-information-line class="size-4 text-info flex-shrink-0 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
<p class="text-xs text-base/70 leading-relaxed">
|
||||
When requesting an ISO, please ensure your ticket includes:
|
||||
</p>
|
||||
<ul class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mt-1.5 ml-4 list-disc space-y-1">
|
||||
<ul class="text-xs text-base/70 leading-relaxed mt-1.5 ml-4 list-disc space-y-1">
|
||||
<li>An active public URL of the image in <strong>.iso format</strong></li>
|
||||
<li>A project page of the distribution</li>
|
||||
<li>Name and version of the distribution</li>
|
||||
</ul>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mt-1.5">
|
||||
<p class="text-xs text-base/70 leading-relaxed mt-1.5">
|
||||
Please submit your request under the <strong>"ISO Request"</strong> department.
|
||||
</p>
|
||||
</div>
|
||||
@@ -459,13 +453,13 @@
|
||||
@endif
|
||||
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-4 space-y-3">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<h3 class="text-base sm:text-lg font-semibold break-words">Boot priority</h3>
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -478,7 +472,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -491,9 +485,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -508,7 +502,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Shows the current boot sequence for your virtual machine. Devices are listed in order from highest to lowest priority. The VM will attempt to boot from each device in sequence until it finds a bootable medium.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<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">Move up/down:</span> Reorder devices to adjust boot priority.
|
||||
</p>
|
||||
@@ -523,7 +517,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Move devices up or down to adjust the order.</p>
|
||||
<p class="text-xs text-base/60">Move devices up or down to adjust the order.</p>
|
||||
</div>
|
||||
<span class="text-xs font-medium {{ $this->hasChanges ? 'text-warning' : 'text-success' }}">
|
||||
{{ $this->hasChanges ? 'Unsaved changes' : 'Synced' }}
|
||||
@@ -540,7 +534,7 @@
|
||||
{{ $index + 1 }}. {{ $availableDevices[$device]['label'] ?? strtoupper($device) }}
|
||||
</p>
|
||||
@if ($availableDevices[$device]['details'] ?? false)
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 break-words mt-1">
|
||||
<p class="text-xs text-base/60 break-words mt-1">
|
||||
{{ $availableDevices[$device]['details'] }}
|
||||
</p>
|
||||
@endif
|
||||
@@ -565,7 +559,7 @@
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="border border-dashed border-neutral rounded-md px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="border border-dashed border-neutral rounded-md px-4 py-6 text-center text-sm text-base/60">
|
||||
Select devices from the list on the right to build a boot order.
|
||||
</div>
|
||||
@endforelse
|
||||
@@ -576,13 +570,13 @@
|
||||
$remainingDevices = array_values(array_diff(array_keys($availableDevices), $order));
|
||||
@endphp
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-4 space-y-3">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<h3 class="text-base sm:text-lg font-semibold break-words">Available devices</h3>
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -595,7 +589,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -608,9 +602,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -625,7 +619,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Lists all bootable devices detected in your VM configuration that are not currently part of the boot sequence.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
|
||||
<span class="font-semibold text-base/90">Device Types:</span> Disk drives (VirtIO, SCSI, SATA, IDE, NVMe), network adapters, and CD/DVD-ROM drives. Each device shows its type, identifier, and configuration details.
|
||||
</p>
|
||||
@@ -637,9 +631,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">These devices can be part of the boot sequence.</p>
|
||||
<p class="text-xs text-base/60">These devices can be part of the boot sequence.</p>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ count($remainingDevices) }} available</span>
|
||||
<span class="text-xs text-base/60">{{ count($remainingDevices) }} available</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 max-h-[32rem] overflow-y-auto pr-1 -mx-1 px-1">
|
||||
@@ -650,7 +644,7 @@
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold break-words">{{ $availableDevices[$device]['label'] ?? strtoupper($device) }}</p>
|
||||
@if ($availableDevices[$device]['details'] ?? false)
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 break-words mt-1">{{ $availableDevices[$device]['details'] }}</p>
|
||||
<p class="text-xs text-base/60 break-words mt-1">{{ $availableDevices[$device]['details'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<button wire:click="addDevice('{{ $device }}')" type="button"
|
||||
@@ -660,7 +654,7 @@
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="border border-dashed border-neutral rounded-md px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="border border-dashed border-neutral rounded-md px-4 py-6 text-center text-sm text-base/60">
|
||||
All detected devices are already part of the boot priority list.
|
||||
</div>
|
||||
@endforelse
|
||||
@@ -670,19 +664,19 @@
|
||||
|
||||
<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-proxmox::ui.button wire:click="refreshBootConfiguration" wire:loading.attr="disabled"
|
||||
class="w-full" variant="secondary">
|
||||
<x-button.secondary wire:click="refreshBootConfiguration" wire:loading.attr="disabled"
|
||||
class="w-full">
|
||||
<x-loading target="refreshBootConfiguration" />
|
||||
Refresh
|
||||
</x-proxmox::ui.button>
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-1 w-full sm:w-auto">
|
||||
<x-proxmox::ui.button wire:click="resetOrder" :disabled="!$this->hasChanges"
|
||||
class="flex-1" variant="secondary">
|
||||
<x-button.secondary wire:click="resetOrder" :disabled="!$this->hasChanges"
|
||||
class="flex-1">
|
||||
Reset to current
|
||||
</x-proxmox::ui.button>
|
||||
</x-button.secondary>
|
||||
<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">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -695,7 +689,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -708,9 +702,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -725,7 +719,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Discards any unsaved changes to the boot order and restores it to match the last saved configuration.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
This button is only enabled when there are unsaved changes. Use this if you want to undo modifications without refreshing the entire configuration from the server.
|
||||
</p>
|
||||
@@ -735,13 +729,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-1 w-full sm:w-auto">
|
||||
<x-proxmox::ui.button wire:click="saveOrder" wire:loading.attr="disabled" :disabled="!$this->hasChanges"
|
||||
class="flex-1" variant="primary">
|
||||
<x-button.primary wire:click="saveOrder" wire:loading.attr="disabled" :disabled="!$this->hasChanges"
|
||||
class="flex-1">
|
||||
<x-loading target="saveOrder" />
|
||||
Save boot order
|
||||
</x-proxmox::ui.button>
|
||||
</x-button.primary>
|
||||
<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">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -754,7 +748,7 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
@@ -767,9 +761,9 @@
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
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-gray-200 dark:border-gray-800 shadow-2xl p-6">
|
||||
<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>
|
||||
@@ -784,7 +778,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Commits your boot order changes to the QEMU server configuration. The new boot sequence will be applied to the virtual machine and will take effect on the next power event (start, reboot, or reset).
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
|
||||
If the boot order is empty, the system will reset to the default platform boot sequence.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user