feat: enhance password view modal in Proxmox overview with improved transition effects and backdrop handling for better user experience
This commit is contained in:
@@ -607,10 +607,32 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Password View Modal -->
|
<!-- Password View Modal -->
|
||||||
<div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
<!-- Modal Backdrop -->
|
||||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordViewModal = false"></div>
|
<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 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="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="{
|
x-data="{
|
||||||
copied: false,
|
copied: false,
|
||||||
copyText: {{ json_encode($server->password) }},
|
copyText: {{ json_encode($server->password) }},
|
||||||
|
|||||||
Reference in New Issue
Block a user