Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

feat: improve Proxmox modal handling by consolidating backdrop and transition effects for enhanced user experience across cloud-init and overview views

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 12:11:29 -05:00
parent ad7346959d
commit fd01caddfd
3 changed files with 76 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
extensions/Servers/Proxmox/views/cloud-init.blade.php
View File

@@ -53,32 +53,10 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 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" /> <x-ri-question-line class="size-4" />
</button> </button>
<!-- Modal Backdrop --> <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
x-transition:enter="transition ease-out duration-300" <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"
x-transition:enter-start="opacity-0" x-on:keydown.escape.window="open = false">
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-50 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-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">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors"> <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" /> <x-ri-close-line class="size-5" />
</button> </button>
@@ -124,32 +102,10 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 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" /> <x-ri-question-line class="size-4" />
</button> </button>
<!-- Modal Backdrop --> <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
x-transition:enter="transition ease-out duration-300" <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"
x-transition:enter-start="opacity-0" x-on:keydown.escape.window="open = false">
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-50 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-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">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors"> <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" /> <x-ri-close-line class="size-5" />
</button> </button>
@@ -476,32 +432,10 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 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" /> <x-ri-question-line class="size-4" />
</button> </button>
<!-- Modal Backdrop --> <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
x-transition:enter="transition ease-out duration-300" <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"
x-transition:enter-start="opacity-0" x-on:keydown.escape.window="open = false">
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-50 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-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">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors"> <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" /> <x-ri-close-line class="size-5" />
</button> </button>
@@ -658,32 +592,10 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 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" /> <x-ri-question-line class="size-4" />
</button> </button>
<!-- Modal Backdrop --> <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
x-transition:enter="transition ease-out duration-300" <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"
x-transition:enter-start="opacity-0" x-on:keydown.escape.window="open = false">
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-50 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-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">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors"> <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" /> <x-ri-close-line class="size-5" />
</button> </button>
@@ -902,32 +814,10 @@
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 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" /> <x-ri-question-line class="size-4" />
</button> </button>
<!-- Modal Backdrop --> <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
x-transition:enter="transition ease-out duration-300" <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"
x-transition:enter-start="opacity-0" x-on:keydown.escape.window="open = false">
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-50 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-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">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors"> <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" /> <x-ri-close-line class="size-5" />
</button> </button>

2
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -451,7 +451,7 @@
box-shadow: box-shadow:
0 4px 16px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.05); 0 0 0 1px rgba(0, 0, 0, 0.05);
z-index: 50; z-index: 100;
overflow: hidden; overflow: hidden;
} }

89
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -603,42 +603,63 @@
</div> </div>
</div> </div>
<!-- Password View Modal - DISABLED OLD STRUCTURE --> <!-- Password View Modal -->
<div style="display: none !important;"> <!-- Modal Backdrop -->
<div></div> <div x-cloak x-show="showPasswordViewModal"
<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-transition:enter="transition ease-out duration-300"
x-on:keydown.escape.window="showPasswordViewModal = false" x-transition:enter-start="opacity-0"
x-data="{ x-transition:enter-end="opacity-100"
copied: false, x-transition:leave="transition ease-in duration-200"
copyText: {{ json_encode($server->password) }}, x-transition:leave-start="opacity-100"
copyToClipboard() { x-transition:leave-end="opacity-0"
navigator.clipboard.writeText(this.copyText); @click="showPasswordViewModal = false"
this.copied = true; @keydown.escape.window="showPasswordViewModal = false"
setTimeout(() => this.copied = false, 3000); class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
} style="display: none;">
}"> </div>
<div class="flex items-center justify-between"> <!-- Modal -->
<h4 class="text-base font-semibold text-base/90">Root Password</h4> <div x-cloak x-show="showPasswordViewModal"
<button type="button" x-transition:enter="transition ease-out duration-300"
class="bg-background border border-neutral p-1.5 rounded-md hover:bg-background/80" x-transition:enter-start="opacity-0 scale-95"
@click="showPasswordViewModal = false" x-transition:enter-end="opacity-100 scale-100"
aria-label="Close password view modal"> x-transition:leave="transition ease-in duration-200"
<x-ri-close-line class="size-4" /> x-transition:leave-start="opacity-100 scale-100"
</button> x-transition:leave-end="opacity-0 scale-95"
</div> @click.away="showPasswordViewModal = false"
<div class="bg-background border border-neutral rounded-md p-3 text-sm text-base/80 overflow-auto"> class="fixed inset-0 z-50 flex items-center justify-center p-4"
<code class="whitespace-pre-wrap break-all block">{{ $server->password }}</code> style="display: none;"
</div> x-data="{
<div class="flex justify-end"> copied: false,
<button type="button" copyText: {{ json_encode($server->password) }},
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-white text-xs font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" copyToClipboard() {
@click="copyToClipboard()"> navigator.clipboard.writeText(this.copyText);
<span x-show="!copied">Copy</span> this.copied = true;
<span x-show="copied">Copied!</span> setTimeout(() => this.copied = false, 3000);
</button> }
</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">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Root Password</h4>
<button type="button"
class="bg-background border border-neutral p-1.5 rounded-md hover:bg-background/80"
@click="showPasswordViewModal = false"
aria-label="Close password view modal">
<x-ri-close-line class="size-4" />
</button>
</div>
<div class="bg-background border border-neutral rounded-md p-3 text-sm text-base/80 overflow-auto">
<code class="whitespace-pre-wrap break-all block">{{ $server->password }}</code>
</div>
<div class="flex justify-end">
<button type="button"
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-white text-xs font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
@click="copyToClipboard()">
<span x-show="!copied">Copy</span>
<span x-show="copied">Copied!</span>
</button>
</div> </div>
</div> </div>
</div>
<!-- Password Edit Modal --> <!-- Password Edit Modal -->
<!-- Modal Backdrop --> <!-- Modal Backdrop -->