Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: enhance cloud-init and overview modals in Proxmox with improved transition effects and backdrop handling for better user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 12:02:37 -05:00
parent 91d7e4db40
commit 09d4e7a857
2 changed files with 242 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -444,33 +444,11 @@
</div>
</div>
<!-- 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()"
@keydown.escape.window="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">
<!-- 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()">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit Hostname</h4>
<button type="button"
@@ -606,33 +584,11 @@
</div>
</div>
<!-- Password View Modal -->
<!-- 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;">
<!-- Password View 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="showPasswordViewModal = false"
x-data="{
copied: false,
copyText: {{ json_encode($server->password) }},
@@ -666,10 +622,32 @@
</div>
<!-- Password Edit Modal -->
<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()">
<!-- 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 class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
<button type="button"