Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code 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

58
extensions/Servers/Proxmox/views/storage.blade.php
View File

@@ -66,7 +66,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;">
@@ -212,7 +212,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;">
@@ -335,7 +335,7 @@
</button>
<button disabled
title="Server must be powered off"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-neutral cursor-not-allowed opacity-60">
<x-ri-eject-line class="size-3.5" />
Detach
</button>
@@ -365,7 +365,7 @@
@if(count($unusedDrives) >= 2)
<button disabled
title="Maximum of 2 detached drives allowed"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-neutral cursor-not-allowed opacity-60">
<x-ri-eject-line class="size-3.5" />
Detach
</button>
@@ -373,9 +373,7 @@
<button wire:click="openDetachModal('{{ $driveKey }}')"
wire:loading.attr="disabled"
wire:target="openDetachModal('{{ $driveKey }}')"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(234 179 8 / 0.5); background-color: rgb(234 179 8 / 0.1); color: rgb(234 179 8); transition: background-color 0.15s ease;"
onmouseover="this.style.backgroundColor='rgb(234 179 8 / 0.2)'"
onmouseout="this.style.backgroundColor='rgb(234 179 8 / 0.1)'">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-warning/50 bg-warning/10 text-warning hover:bg-warning/20 transition-colors">
<x-ri-hourglass-fill class="size-3.5 animate-pulse" wire:loading wire:target="openDetachModal('{{ $driveKey }}')" />
<x-ri-eject-line class="size-3.5" wire:loading.remove wire:target="openDetachModal('{{ $driveKey }}')" />
Detach
@@ -459,20 +457,20 @@
@if($vmRunning)
<button disabled
title="Server must be powered off"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-neutral cursor-not-allowed opacity-60">
<x-ri-link class="size-3.5" />
Reattach
</button>
<button disabled
title="Server must be powered off"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-neutral cursor-not-allowed opacity-60">
<x-ri-delete-bin-line class="size-3.5" />
Delete
</button>
@elseif($totalAllocatedStorage >= $maxAllowedStorage && $maxAllowedStorage > 0)
<button disabled
title="Storage quota reached - please upgrade your service or delete drives"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-neutral cursor-not-allowed opacity-60">
<x-ri-link class="size-3.5" />
Reattach
</button>
@@ -480,9 +478,7 @@
wire:confirm="Are you sure you want to permanently delete this detached drive? This action cannot be undone."
wire:loading.attr="disabled"
wire:target="deleteUnusedDrive('{{ $unusedKey }}')"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-danger/50 bg-danger/10 text-danger hover:bg-danger/20 transition-colors">
<x-ri-hourglass-fill wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5 animate-pulse" />
<x-ri-delete-bin-line wire:loading.remove wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5" />
Delete
@@ -500,9 +496,7 @@
wire:confirm="Are you sure you want to permanently delete this detached drive? This action cannot be undone."
wire:loading.attr="disabled"
wire:target="deleteUnusedDrive('{{ $unusedKey }}')"
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-danger/50 bg-danger/10 text-danger hover:bg-danger/20 transition-colors">
<x-ri-hourglass-fill wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5 animate-pulse" />
<x-ri-delete-bin-line wire:loading.remove wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5" />
Delete
@@ -519,13 +513,13 @@
<!-- Add Drive Modal -->
@if($showAddDriveModal)
<div class="fixed inset-0 z-50 overflow-y-auto" x-data x-init="$el.querySelector('input')?.focus()">
<div class="fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="$wire.closeAddDriveModal()" x-init="$el.querySelector('input')?.focus()">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeAddDriveModal"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
<div class="flex items-center justify-between p-5 border-b border-neutral">
<h3 class="text-lg font-semibold">Add New Drive</h3>
<button wire:click="closeAddDriveModal" class="text-base/50 hover:text-base transition-colors">
<button wire:click="closeAddDriveModal" class="text-base/50 hover:text-base transition-colors" aria-label="Close">
<x-ri-close-line class="size-5" />
</button>
</div>
@@ -645,13 +639,13 @@
<!-- Edit Drive Modal -->
@if($showEditDriveModal && $editingDriveKey && isset($drives[$editingDriveKey]))
@php $editDrive = $drives[$editingDriveKey]; @endphp
<div class="fixed inset-0 z-50 overflow-y-auto">
<div class="fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="$wire.closeEditDriveModal()">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeEditDriveModal"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
<div class="flex items-center justify-between p-5 border-b border-neutral">
<h3 class="text-lg font-semibold">Edit Drive Settings - {{ $editDrive['label'] }}</h3>
<button wire:click="closeEditDriveModal" class="text-base/50 hover:text-base transition-colors">
<button wire:click="closeEditDriveModal" class="text-base/50 hover:text-base transition-colors" aria-label="Close">
<x-ri-close-line class="size-5" />
</button>
</div>
@@ -746,13 +740,13 @@
<!-- Change Device Bus Modal -->
@if($showMoveDriveModal && $movingDriveKey && isset($drives[$movingDriveKey]))
@php $moveDrive = $drives[$movingDriveKey]; @endphp
<div class="fixed inset-0 z-50 overflow-y-auto">
<div class="fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="$wire.closeMoveDriveModal()">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeMoveDriveModal"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
<div class="flex items-center justify-between p-5 border-b border-neutral">
<h3 class="text-lg font-semibold">Change Device Bus - {{ $moveDrive['label'] }}</h3>
<button wire:click="closeMoveDriveModal" class="text-base/50 hover:text-base transition-colors">
<button wire:click="closeMoveDriveModal" class="text-base/50 hover:text-base transition-colors" aria-label="Close">
<x-ri-close-line class="size-5" />
</button>
</div>
@@ -811,7 +805,7 @@
<!-- Detach Drive Confirmation Modal -->
@if($showDetachModal && $detachingDriveKey && isset($drives[$detachingDriveKey]))
@php $detachDrive = $drives[$detachingDriveKey]; @endphp
<div class="fixed inset-0 z-50 overflow-y-auto">
<div class="fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="$wire.closeDetachModal()">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeDetachModal"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -822,7 +816,7 @@
</div>
<h3 class="text-lg font-semibold">Detach Drive</h3>
</div>
<button wire:click="closeDetachModal" class="text-base/50 hover:text-base transition-colors">
<button wire:click="closeDetachModal" class="text-base/50 hover:text-base transition-colors" aria-label="Close">
<x-ri-close-line class="size-5" />
</button>
</div>
@@ -856,9 +850,7 @@
</button>
<button wire:click="detachDrive"
wire:loading.attr="disabled"
style="padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; background-color: rgb(234 179 8); color: white; transition: background-color 0.15s ease;{{ ($status && $status->status !== 'stopped') ? ' opacity: 0.5; cursor: not-allowed;' : '' }}"
onmouseover="this.style.backgroundColor='rgb(202 138 4)'"
onmouseout="this.style.backgroundColor='rgb(234 179 8)'"
class="px-4 py-2 text-sm font-medium rounded-lg bg-warning text-white hover:bg-warning/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@if($status && $status->status !== 'stopped') disabled @endif>
<x-loading target="detachDrive" />
<span wire:loading.remove wire:target="detachDrive">Detach Drive</span>
@@ -873,7 +865,7 @@
<!-- Delete Drive Confirmation Modal -->
@if($showDeleteModal && $deletingDriveKey && isset($drives[$deletingDriveKey]))
@php $deleteDrive = $drives[$deletingDriveKey]; @endphp
<div class="fixed inset-0 z-50 overflow-y-auto">
<div class="fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="$wire.closeDeleteModal()">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeDeleteModal"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -884,7 +876,7 @@
</div>
<h3 class="text-lg font-semibold">Delete Drive</h3>
</div>
<button wire:click="closeDeleteModal" class="text-base/50 hover:text-base transition-colors">
<button wire:click="closeDeleteModal" class="text-base/50 hover:text-base transition-colors" aria-label="Close">
<x-ri-close-line class="size-5" />
</button>
</div>
@@ -918,9 +910,7 @@
</button>
<button wire:click="deleteDrive"
wire:loading.attr="disabled"
style="padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; background-color: rgb(239 68 68); color: white; transition: background-color 0.15s ease;{{ ($status && $status->status !== 'stopped') ? ' opacity: 0.5; cursor: not-allowed;' : '' }}"
onmouseover="this.style.backgroundColor='rgb(220 38 38)'"
onmouseout="this.style.backgroundColor='rgb(239 68 68)'"
class="px-4 py-2 text-sm font-medium rounded-lg bg-error text-white hover:bg-error/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@if($status && $status->status !== 'stopped') disabled @endif>
<x-loading target="deleteDrive" />
<span wire:loading.remove wire:target="deleteDrive">Delete Drive</span>
@@ -934,13 +924,13 @@
<!-- Reattach Drive Modal -->
@if($showReattachModal)
<div class="fixed inset-0 z-50 overflow-y-auto">
<div class="fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="$wire.closeReattachModal()">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" wire:click="closeReattachModal"></div>
<div class="flex min-h-full items-center justify-center p-4">
<div class="relative w-full max-w-lg transform overflow-hidden rounded-xl bg-background border border-neutral shadow-xl transition-all">
<div class="flex items-center justify-between p-5 border-b border-neutral">
<h3 class="text-lg font-semibold">Reattach Drive</h3>
<button wire:click="closeReattachModal" class="text-foreground-secondary hover:text-foreground transition-colors">
<button wire:click="closeReattachModal" class="text-foreground-secondary hover:text-foreground transition-colors" aria-label="Close">
<x-ri-close-line class="size-5" />
</button>
</div>