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

Refactor modal close behavior and improve styling

Browse Source 
- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals.
- Updated various modal button styles for consistency and improved accessibility.
- Adjusted transition durations for modal animations to enhance user experience.
- Added aria-labels to close buttons for better screen reader support.
This commit is contained in:
Joseph.Rawlings
2026-02-23 20:02:41 -05:00
parent f394483daa
commit af62a16354
45 changed files with 393 additions and 4700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
extensions/Servers/Proxmox/views/network.blade.php
View File

@@ -54,12 +54,7 @@
localStorage.setItem('network-policy-collapsed', this.isCollapsed);
}
}"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
window.addEventListener('proxmox-view-mode-changed', (e) => {
isAdvancedView = e.detail.isAdvancedView;
});
"
@proxmox-view-mode-changed.window="isAdvancedView = $event.detail.isAdvancedView"
x-show="isAdvancedView"
x-transition>
<div class="flex items-start gap-3">
@@ -129,7 +124,7 @@
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"
@click.self="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
@@ -164,12 +159,7 @@
<div class="bg-background-secondary border border-neutral rounded-lg p-4 mb-6"
x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
window.addEventListener('proxmox-view-mode-changed', (e) => {
isAdvancedView = e.detail.isAdvancedView;
});
"
@proxmox-view-mode-changed.window="isAdvancedView = $event.detail.isAdvancedView"
x-show="isAdvancedView"
x-transition>
<div class="flex items-center justify-between mb-4">
@@ -200,7 +190,7 @@
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"
@click.self="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
@@ -296,7 +286,8 @@
wire:loading.attr="disabled"
wire:target="toggleInterfaceLink('{{ $name }}')"
class="{{ ($interfaces[$name]['linkdown'] ?? false) ? 'text-error hover:text-error/80' : 'text-base/70 hover:text-base/60' }} mx-1"
title="{{ ($interfaces[$name]['linkdown'] ?? false) ? 'Connect' : 'Disconnect' }}">
title="{{ ($interfaces[$name]['linkdown'] ?? false) ? 'Connect' : 'Disconnect' }}"
aria-label="{{ ($interfaces[$name]['linkdown'] ?? false) ? 'Connect interface' : 'Disconnect interface' }}">
<x-loading target="toggleInterfaceLink('{{ $name }}')" />
@if($interfaces[$name]['linkdown'] ?? false)
<x-ri-links-line class="inline size-4" wire:loading.remove wire:target="toggleInterfaceLink('{{ $name }}')" />
@@ -305,10 +296,12 @@
@endif
</button>
<button wire:click="removeInterface('{{ $name }}')"
wire:confirm="Are you sure you want to remove this network interface? This action cannot be undone."
wire:loading.attr="disabled"
class="text-error hover:text-error/80 disabled:text-base/30 mx-1"
:disabled="!$wire.canRemoveInterfaces"
title="Remove">
title="Remove"
aria-label="Remove network interface">
<x-ri-delete-bin-fill class="inline size-4" />
</button>
</div>
@@ -348,7 +341,7 @@
</div>
@foreach($server->ipAddresses as $network)
<div class="relative flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div wire:key="ip-{{ $network->id }}" class="relative flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">{{ strtoupper($network->type ?? 'IPv4') }} Address</h3>
<span class="text-xs font-medium px-2 py-1 rounded bg-background border border-neutral">
@@ -519,12 +512,7 @@
<!-- Additional Technical Information from QEMU Guest Agent -->
<div class="border-t border-neutral/40 pt-4 mt-2"
x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
window.addEventListener('proxmox-view-mode-changed', (e) => {
isAdvancedView = e.detail.isAdvancedView;
});
"
@proxmox-view-mode-changed.window="isAdvancedView = $event.detail.isAdvancedView"
x-show="isAdvancedView"
x-transition>
<h4 class="text-sm font-semibold text-base/70 mb-3">Technical Details (Guest Agent)</h4>
@@ -603,12 +591,7 @@
@endphp
<div x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
window.addEventListener('proxmox-view-mode-changed', (e) => {
isAdvancedView = e.detail.isAdvancedView;
});
"
@proxmox-view-mode-changed.window="isAdvancedView = $event.detail.isAdvancedView"
x-show="isAdvancedView"
x-transition>
<div class="mt-6">
@@ -639,7 +622,7 @@
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"
@click.self="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
@@ -692,7 +675,7 @@
@if(count($additionalAddresses) > 0)
@foreach($additionalAddresses as $address)
<div class="relative flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div wire:key="additional-{{ $loop->index }}" class="relative flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">{{ strtoupper($address['type'] === 'ipv6' ? 'IPv6' : 'IPv4') }} Address</h3>
<span class="text-xs font-medium px-2 py-1 rounded bg-background border border-neutral">