feat: enhance Proxmox modals by consolidating escape key handling and improving backdrop management for a more streamlined user experience

This commit is contained in:
2025-12-04 12:06:30 -05:00
parent 09d4e7a857
commit 0b8500d679
4 changed files with 63 additions and 205 deletions

View File

@@ -206,32 +206,10 @@
</div>
<p class="text-xs text-base/60">Use distro-friendly names. Leave blank to keep the template default.</p>
<!-- Modal Backdrop -->
<div x-cloak x-show="showCiUserModal"
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="showCiUserModal = false"
@keydown.escape.window="showCiUserModal = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showCiUserModal"
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="showCiUserModal = false"
@keydown.escape.window="showCiUserModal = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
<div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showCiUserModal = false"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showCiUserModal = false">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit Cloud-init User</h4>
<button type="button"
@@ -291,32 +269,10 @@
<p class="text-xs text-base/60">Matches the Overview tab control. Use Save for database only, Save &amp; Apply to push via cloud-init.</p>
@if(isset($server->password) && $server->password)
<!-- Modal Backdrop -->
<div x-cloak x-show="showPasswordViewModal"
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="showPasswordViewModal = false"
@keydown.escape.window="showPasswordViewModal = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showPasswordViewModal"
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="showPasswordViewModal = false"
@keydown.escape.window="showPasswordViewModal = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordViewModal = false"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showPasswordViewModal = false"
x-data="{
copied: false,
copyText: {{ json_encode($server->password) }},
@@ -350,32 +306,10 @@
</div>
@endif
<!-- Modal Backdrop -->
<div x-cloak x-show="showPasswordEditModal"
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="showPasswordEditModal = false; $wire.cancelEditingPassword()"
@keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showPasswordEditModal"
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="showPasswordEditModal = false; $wire.cancelEditingPassword()"
@keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
<div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
<button type="button"
@@ -450,32 +384,12 @@
<x-ri-close-line class="inline size-4" />
</button>
<!-- Modal Backdrop -->
<div x-cloak x-show="showKeyModal"
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="showKeyModal = false"
@keydown.escape.window="showKeyModal = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showKeyModal"
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="showKeyModal = false"
@keydown.escape.window="showKeyModal = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
<div x-cloak x-show="showKeyModal" x-transition.opacity
class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"
@click="showKeyModal = false"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showKeyModal = false">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">SSH Public Key</h4>
<button type="button"
@@ -510,32 +424,10 @@
</div>
<p class="text-xs text-base/60">Add as many keys as needed. The platform management key is always kept but never shown.</p>
<!-- Modal Backdrop -->
<div x-cloak x-show="showAddKeyModal"
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="showAddKeyModal = false"
@keydown.escape.window="showAddKeyModal = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showAddKeyModal"
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="showAddKeyModal = false"
@keydown.escape.window="showAddKeyModal = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
<div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showAddKeyModal = false"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showAddKeyModal = false">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Add SSH Public Key</h4>
<button type="button"
@@ -701,32 +593,11 @@
@endforeach
</div>
<!-- Modal Backdrop -->
<div x-cloak x-show="showNetworkModal"
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="showNetworkModal = false; $wire.cancelEditingNetwork()"
@keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showNetworkModal"
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="showNetworkModal = false; $wire.cancelEditingNetwork()"
@keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4">
<div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"
@click="showNetworkModal = false; $wire.cancelEditingNetwork()"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit Network Configuration</h4>
<button type="button"
@@ -869,32 +740,10 @@
</div>
<p class="text-xs text-base/60">Appended to short hostnames for resolution.</p>
<!-- Modal Backdrop -->
<div x-cloak x-show="showDnsDomainModal"
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="showDnsDomainModal = false"
@keydown.escape.window="showDnsDomainModal = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showDnsDomainModal"
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="showDnsDomainModal = false"
@keydown.escape.window="showDnsDomainModal = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
<div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showDnsDomainModal = false"></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showDnsDomainModal = false">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit DNS Domain</h4>
<button type="button"

View File

@@ -95,7 +95,7 @@
/* Drag and Drop Styles */
.rule-row {
transition: all 0.2s ease;
cursor: move;
cursor: default;
}
.rule-row.dragging {
opacity: 0.5;
@@ -114,6 +114,7 @@
}
.drag-handle:hover {
color: rgba(var(--color-primary), 1);
cursor: grab;
}
.drag-handle:active {
cursor: grabbing;
@@ -505,13 +506,13 @@
<!-- Firewall Rules Card -->
<div class="bg-background border border-neutral rounded-lg p-6"
x-data="{
editingPositions: false,
rules: @js($rules),
draggedIndex: null,
dragOverIndex: null,
startDrag(event, index) {
if (!this.editingPositions) {
// Only allow dragging from the handle
if (!event.target.closest('.drag-handle')) {
event.preventDefault();
return;
}
@@ -589,14 +590,6 @@
</div>
</div>
<div class="flex gap-2">
<button
@click="editingPositions = !editingPositions"
class="px-4 py-2 rounded-lg transition-colors text-sm font-medium border"
:class="editingPositions ? 'bg-primary text-white border-primary hover:bg-primary/90' : 'bg-background-secondary text-base border-neutral/20 hover:bg-background-secondary/80'"
:title="editingPositions ? 'Done editing positions' : 'Edit rule positions'">
<x-ri-draggable class="size-4 inline mr-1" />
<span x-text="editingPositions ? 'Done' : 'Edit Positions'"></span>
</button>
<button
wire:click="startCreateRule"
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
@@ -626,7 +619,7 @@
<tbody>
<template x-for="(rule, index) in rules" :key="rule.pos">
<tr class="rule-row border-b border-neutral/20 hover:bg-background-secondary/50"
:draggable="editingPositions"
draggable="true"
@dragstart="startDrag($event, index)"
@dragend="endDrag($event)"
@dragover="dragOver($event, index)"
@@ -634,7 +627,7 @@
@drop="drop($event, index)"
:class="{ 'drag-over': dragOverIndex === index }">
<td class="py-3 px-2 text-sm">
<div x-show="editingPositions" class="drag-handle" title="Drag to reorder">
<div class="drag-handle" title="Drag to reorder">
<x-ri-menu-line class="size-4" />
</div>
</td>

View File

@@ -101,7 +101,6 @@
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-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-neutral/20 shadow-2xl p-6">
@@ -313,7 +312,6 @@
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-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-neutral/20 shadow-2xl p-6">
@@ -444,11 +442,32 @@
</div>
</div>
<!-- Hostname Edit Modal - DISABLED OLD STRUCTURE -->
<div style="display: none !important;">
<div></div>
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
x-on:keydown.escape.window="showHostnameEditModal = false; $wire.cancelEditingHostname()">
<!-- Hostname Edit Modal -->
<!-- Modal Backdrop -->
<div x-cloak x-show="showHostnameEditModal"
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="showHostnameEditModal = false; $wire.cancelEditingHostname()"
@keydown.escape.window="showHostnameEditModal = false; $wire.cancelEditingHostname()"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
<div x-cloak x-show="showHostnameEditModal"
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="showHostnameEditModal = false; $wire.cancelEditingHostname()"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit Hostname</h4>
<button type="button"
@@ -644,7 +663,6 @@
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="showPasswordEditModal = false; $wire.cancelEditingPassword()"
@keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
@@ -748,7 +766,6 @@
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-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-neutral/20 shadow-2xl p-6">
@@ -954,7 +971,6 @@
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-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-neutral/20 shadow-2xl p-6">
@@ -1224,7 +1240,6 @@
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="showExportErrorModal = false"
@keydown.escape.window="showExportErrorModal = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">