Joseph.Rawlings
a7cb561053
- Implemented page load animations using Alpine.js for smoother transitions in various views including firewall, help, index, network, overview, reinstall, server, statistics, storage, subdomain, and system. - Added opacity and translate effects to elements for improved visual feedback during loading. - Enhanced hover effects on cards and buttons for better user interaction. - Adjusted transition timings and delays for a more cohesive user experience.
256 lines
17 KiB
PHP
256 lines
17 KiB
PHP
<x-proxmox::layout :server="$server" view="display" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<div class="flex items-center justify-between mb-6"
|
|
x-data="{ pageLoaded: false }"
|
|
x-init="setTimeout(() => pageLoaded = true, 50)"
|
|
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
|
|
style="transition: all 0.4s ease-out;">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h2 class="text-xl font-semibold break-words">Display Configuration</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">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
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"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
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"
|
|
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">
|
|
<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>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-computer-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
Display Configuration
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Configure the virtual graphics adapter and video memory for your virtual machine. These settings affect how the VM displays output and can impact performance in graphical environments.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 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">Display Adapter:</span> Choose between different VGA adapter types. VirtIO-GPU offers the best performance for modern Linux guests, while standard VGA provides maximum compatibility.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Video Memory:</span> The amount of RAM allocated to the graphics adapter. Higher values can improve performance but reduce available system memory.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Tablet Input:</span> Enables absolute pointer tracking for smoother mouse capture in VNC. Recommended for graphical environments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"
|
|
x-data="{ cardsLoaded: false }"
|
|
x-init="setTimeout(() => cardsLoaded = true, 100)">
|
|
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-6 transition-all duration-300 hover:shadow-md"
|
|
:class="cardsLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
style="transition: all 0.4s ease-out 0.1s;">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h3 class="text-lg font-semibold break-words">Display Adapter</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">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
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"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
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"
|
|
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">
|
|
<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>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-computer-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
Display Adapter
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Select the virtual graphics adapter type for your VM. Different adapters offer varying levels of performance and compatibility.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 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">VirtIO-GPU:</span> Modern, high-performance adapter for Linux guests. Supports hardware acceleration and up to 256MB video memory.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Standard VGA:</span> Maximum compatibility option. Works with all operating systems but offers lower performance.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
Changes require a VM restart to take effect.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
|
|
</div>
|
|
@if($this->displayAdapterSynced)
|
|
<span class="text-xs font-semibold text-success">Synced</span>
|
|
@else
|
|
<span class="text-xs font-semibold text-warning">Unsynced</span>
|
|
@endif
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label for="display-adapter" class="text-sm font-semibold text-base/80">Display Adapter</label>
|
|
<select
|
|
id="display-adapter"
|
|
wire:model.live="selectedDisplay"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-secondary"
|
|
>
|
|
@foreach($this->displayOptions as $value => $meta)
|
|
<option value="{{ $value }}">{{ $meta['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
@if($this->supportsMemory)
|
|
<div class="flex flex-col gap-2">
|
|
<label for="display-memory" class="text-sm font-semibold text-base/80">Video Memory (MB)</label>
|
|
<div class="flex flex-col gap-3">
|
|
<input
|
|
id="display-memory"
|
|
type="range"
|
|
min="16"
|
|
max="256"
|
|
step="16"
|
|
wire:model.live="displayMemory"
|
|
class="accent-secondary"
|
|
/>
|
|
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
|
<span>16 MB</span>
|
|
<span>256 MB</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-sm font-medium text-base">Selected: {{ $displayMemory ?? '—' }} MB</div>
|
|
<input
|
|
type="number"
|
|
min="16"
|
|
max="256"
|
|
step="16"
|
|
wire:model.live="displayMemory"
|
|
class="w-24 bg-background border border-neutral rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-secondary"
|
|
/>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">VirtIO-GPU supports up to 256 MB. Pick the lowest value your workload requires.</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@error('selectedDisplay')
|
|
<div class="text-sm text-error">{{ $message }}</div>
|
|
@enderror
|
|
@error('displayMemory')
|
|
<div class="text-sm text-error">{{ $message }}</div>
|
|
@enderror
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label class="inline-flex items-start gap-3 bg-background border border-neutral rounded-md px-3 py-3">
|
|
<input type="checkbox" wire:model.live="tabletEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-1">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-sm font-semibold text-base/80">Use tablet for pointer input</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Enables absolute pointer tracking (USB tablet) for smoother mouse capture in VNC. Turn off if you prefer relative (PS/2) input.</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex flex-wrap gap-3">
|
|
<x-proxmox::ui.button wire:click="saveDisplaySettings" wire:loading.attr="disabled" variant="primary">
|
|
<span wire:loading.remove wire:target="saveDisplaySettings">Save Display Settings</span>
|
|
<span wire:loading wire:target="saveDisplaySettings">Saving...</span>
|
|
</x-proxmox::ui.button>
|
|
<x-proxmox::ui.button wire:click="loadDisplayConfiguration" wire:loading.attr="disabled" variant="secondary">
|
|
<span wire:loading.remove wire:target="loadDisplayConfiguration">Refresh</span>
|
|
<span wire:loading wire:target="loadDisplayConfiguration">Refreshing...</span>
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Changes are applied to the VM configuration immediately but require a restart to take effect.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-4">
|
|
<h3 class="text-lg font-semibold flex items-center gap-2">
|
|
<x-ri-information-line class="size-5 text-gray-500 dark:text-gray-400" />
|
|
Display Mode Reference
|
|
</h3>
|
|
<div class="space-y-4 text-sm text-gray-600 dark:text-gray-400">
|
|
@foreach($this->displayOptions as $value => $meta)
|
|
<div class="border border-gray-200 dark:border-gray-800 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold text-base">{{ $meta['label'] }}</span>
|
|
@if($value === $selectedDisplay)
|
|
<span class="text-xs font-semibold text-secondary">Currently selected</span>
|
|
@endif
|
|
</div>
|
|
<p class="text-xs mt-2 text-gray-500 dark:text-gray-400">{{ $meta['description'] ?? 'Configurable display option.' }}</p>
|
|
@if($meta['supports_memory'])
|
|
<p class="text-xs mt-1 text-gray-500 dark:text-gray-400">Supports configurable video memory (max 256 MB).</p>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400 border border-info/30 bg-info/10 rounded-md p-3">
|
|
Need a headless mode? Choose <strong>No Display</strong> to detach VGA entirely, or <strong>Serial Console</strong> if you only need serial output.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-proxmox::layout>
|
|
|