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

26
extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
View File

@@ -37,14 +37,14 @@
@endphp
<div class="flex flex-col gap-2" x-data="{ showEditModal: @entangle($entangleProperty) }">
<label class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</label>
<div class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg text-sm">
<span class="flex-1 truncate text-primary dark:text-gray-200">{{ $value ?? 'Not set' }}</span>
<label class="text-sm font-medium text-secondary">{{ $label }}</label>
<div class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary border border-neutral rounded-lg text-sm">
<span class="flex-1 truncate text-primary">{{ $value ?? 'Not set' }}</span>
@if($editClick)
<button
wire:click="{{ $editClick }}"
type="button"
class="inline-flex items-center justify-center p-0 bg-transparent border-none text-secondary/60 dark:text-gray-500 hover:text-primary dark:hover:text-primary transition-colors duration-200 cursor-pointer"
class="inline-flex items-center justify-center p-0 bg-transparent border-none text-secondary/60 hover:text-primary transition-colors duration-200 cursor-pointer"
aria-label="Edit {{ $label }}"
>
<x-ri-edit-line class="w-4 h-4" />
@@ -78,15 +78,15 @@
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
@click.self="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
>
<div class="relative w-full max-w-xl bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg p-6 shadow-xl">
<div class="relative w-full max-w-xl bg-background border border-neutral rounded-lg p-6 shadow-xl">
<div class="flex items-center justify-between mb-5">
<h4 class="text-lg font-semibold text-primary dark:text-gray-100">Edit {{ $label }}</h4>
<h4 class="text-lg font-semibold text-primary">Edit {{ $label }}</h4>
<button
type="button"
class="flex items-center justify-center w-9 h-9 p-0 bg-transparent border-none rounded-lg text-secondary dark:text-gray-400 hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200 cursor-pointer"
class="flex items-center justify-center w-9 h-9 p-0 bg-transparent border-none rounded-lg text-secondary hover:bg-background-secondary hover:text-primary transition-all duration-200 cursor-pointer"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
aria-label="Close"
>
@@ -96,11 +96,11 @@
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-secondary dark:text-gray-400">{{ $label }}</label>
<label class="text-sm font-medium text-secondary">{{ $label }}</label>
<input
type="text"
{{ $attributes->whereStartsWith('wire:model') }}
class="w-full h-11 px-4 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 placeholder:text-secondary/50 dark:placeholder:text-gray-500 transition-all duration-150"
class="w-full h-11 px-4 text-sm text-primary bg-background border border-neutral rounded-lg shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 placeholder:text-secondary/50 transition-all duration-150"
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
/>
</div>
@@ -110,16 +110,16 @@
@endif
@if(isset($hint))
<div class="text-xs text-secondary dark:text-gray-400">{{ $hint }}</div>
<div class="text-xs text-secondary">{{ $hint }}</div>
@endif
</div>
<div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral dark:border-gray-700">
<div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral">
@if($cancelClick)
<button
type="button"
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-background dark:bg-gray-700 text-secondary dark:text-gray-300 border border-neutral dark:border-gray-600 rounded-lg shadow-sm hover:bg-background-secondary dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer"
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-background-secondary text-secondary border border-neutral rounded-lg shadow-sm hover:bg-background-secondary/80 transition-all duration-200 cursor-pointer"
>
Cancel
</button>