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

refactor: update components to shadcn-inspired styling and improve layout consistency

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 11:53:57 -05:00
parent eb015f3421
commit 71ea61a960
7 changed files with 165 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
{{--
Editable Field Component - TailServer Theme
Editable Field Component - shadcn-inspired
A field with display value and edit button that opens a modal
Usage:
@@ -32,21 +32,19 @@
])
<div class="space-y-2" x-data="{ showEditModal: @entangle($attributes->wire('model')->value() ? 'isEditing' . ucfirst($label) : 'editing') }">
<label class="text-sm font-semibold text-base/80">{{ $label }}</label>
<div class="space-y-2">
<div class="flex items-center gap-2 border border-neutral/20 rounded-lg bg-neutral/5 px-3 py-2 text-sm text-base">
<span class="truncate flex-1">{{ $value ?? 'Not set' }}</span>
@if($editClick)
<button
wire:click="{{ $editClick }}"
type="button"
class="text-base/50 hover:text-base/70 transition-colors"
aria-label="Edit {{ $label }}"
>
<x-ri-edit-line class="size-4" />
</button>
@endif
</div>
<label class="text-sm font-medium">{{ $label }}</label>
<div class="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm">
<span class="truncate flex-1">{{ $value ?? 'Not set' }}</span>
@if($editClick)
<button
wire:click="{{ $editClick }}"
type="button"
class="text-muted-foreground hover:text-foreground transition-colors duration-150"
aria-label="Edit {{ $label }}"
>
<x-ri-edit-line class="size-4" />
</button>
@endif
</div>
@if($editing !== false)
@@ -54,15 +52,15 @@
<div
x-cloak
x-show="showEditModal"
x-transition:enter="transition ease-out duration-200"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
@keydown.escape.window="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-black/50"
style="display: none;"
></div>
@@ -70,36 +68,36 @@
<div
x-cloak
x-show="showEditModal"
x-transition:enter="transition ease-out duration-200"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave="transition ease-in duration-100"
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"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;"
>
<div class="relative bg-background border border-neutral/20 rounded-xl shadow-2xl w-full max-w-xl p-5 space-y-4">
<div class="relative rounded-xl border bg-card shadow-lg w-full max-w-xl p-6 space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold text-base/90">Edit {{ $label }}</h4>
<h4 class="text-base font-semibold">Edit {{ $label }}</h4>
<button
type="button"
class="p-1.5 rounded-lg hover:bg-neutral/10 transition-colors"
class="p-1.5 rounded-lg hover:bg-muted transition-colors duration-150"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
aria-label="Close"
>
<x-ri-close-line class="size-4 text-base/60" />
<x-ri-close-line class="size-4 text-muted-foreground" />
</button>
</div>
<div class="space-y-3">
<div>
<label class="text-xs font-semibold text-base/70">{{ $label }}</label>
<label class="text-sm font-medium text-muted-foreground">{{ $label }}</label>
<input
type="text"
{{ $attributes->whereStartsWith('wire:model') }}
class="w-full mt-1 px-3 py-2 bg-neutral/5 border border-neutral/20 rounded-lg text-sm text-base placeholder:text-base/40 focus:outline-none focus:ring-2 focus:ring-primary/50"
class="w-full mt-1.5 px-3 py-2 rounded-lg border bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
/>
</div>
@@ -109,7 +107,7 @@
@endif
@if(isset($hint))
<div class="text-xs text-base/60">{{ $hint }}</div>
<div class="text-xs text-muted-foreground">{{ $hint }}</div>
@endif
</div>
@@ -118,7 +116,7 @@
<button
type="button"
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
class="px-4 py-2 text-sm font-medium text-base/70 hover:text-base bg-neutral/5 hover:bg-neutral/10 rounded-lg transition-colors"
class="px-4 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors duration-150"
>
Cancel
</button>
@@ -127,7 +125,7 @@
<button
type="button"
wire:click="{{ $saveClick }}"
class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors"
class="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors duration-150"
>
Save
</button>
@@ -136,7 +134,7 @@
<button
type="button"
wire:click="{{ $applyClick }}"
class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors"
class="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors duration-150"
>
{{ $applyLabel }}
</button>