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

Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS

Browse Source 
- Updated tab-panel component to use Tailwind for styling and transitions.
- Refactored table-row component to implement Tailwind classes for hover effects and borders.
- Converted table-td component to utilize Tailwind for alignment and text styles.
- Changed table-th component to apply Tailwind for header styling and sorting indicators.
- Revised table component to adopt Tailwind for layout, borders, and responsive design.
- Enhanced tabs component with Tailwind for navigation styles and transitions.
- Updated toggle component to use Tailwind for switch styles and accessibility.
- Refactored tooltip component to implement Tailwind for positioning and styling.
- Added visual enhancements to app.css for improved UI interactions and animations.
This commit is contained in:
Joseph.Rawlings
2026-02-01 14:16:57 -05:00
parent fa0bc93c83
commit abff5a381f
42 changed files with 1061 additions and 2427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
{{--
Editable Field Component - AdminLTE style
Editable Field Component - LucentUI Theme
Migrated from AdminLTE to Tailwind
A field with display value and edit button that opens a modal
Usage:
@@ -31,260 +32,22 @@
'error' => null,
])
<style>
.editable-field-lte {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.editable-field-lte-label {
font-size: 0.875rem;
font-weight: 500;
color: #495057;
}
.editable-field-lte-display {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1rem;
background-color: #f8f9fa;
border: 1px solid var(--lte-border-color, #dee2e6);
border-radius: var(--lte-border-radius, 0.375rem);
font-size: 0.875rem;
}
.editable-field-lte-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #212529;
}
.editable-field-lte-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: none;
color: #adb5bd;
cursor: pointer;
transition: color var(--lte-transition-speed, 0.3s) ease;
}
.editable-field-lte-btn:hover {
color: var(--lte-primary, #0d6efd);
}
.editable-field-lte-btn svg {
width: 1rem;
height: 1rem;
}
.editable-field-lte-backdrop {
position: fixed;
inset: 0;
z-index: 99998;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.editable-field-lte-modal-container {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.editable-field-lte-modal {
position: relative;
width: 100%;
max-width: 36rem;
background-color: #fff;
border: 1px solid var(--lte-border-color, #dee2e6);
border-radius: var(--lte-border-radius, 0.375rem);
padding: 1.5rem;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.editable-field-lte-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.editable-field-lte-modal-title {
font-size: 1.125rem;
font-weight: 600;
color: #212529;
}
.editable-field-lte-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
background: transparent;
border: none;
border-radius: var(--lte-border-radius, 0.375rem);
color: var(--lte-secondary, #6c757d);
cursor: pointer;
transition: all var(--lte-transition-speed, 0.3s) ease;
}
.editable-field-lte-modal-close:hover {
background-color: #f8f9fa;
color: #212529;
}
.editable-field-lte-modal-close svg {
width: 1.25rem;
height: 1.25rem;
}
.editable-field-lte-modal-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.editable-field-lte-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.editable-field-lte-input-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--lte-secondary, #6c757d);
}
.editable-field-lte-input {
width: 100%;
height: 2.75rem;
padding: 0 1rem;
font-size: 0.875rem;
color: #212529;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: var(--lte-border-radius, 0.375rem);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.editable-field-lte-input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.editable-field-lte-input::placeholder {
color: #adb5bd;
}
.editable-field-lte-error {
font-size: 0.875rem;
color: var(--lte-danger, #dc3545);
}
.editable-field-lte-hint {
font-size: 0.8125rem;
color: var(--lte-secondary, #6c757d);
}
.editable-field-lte-modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding-top: 1rem;
margin-top: 0.5rem;
border-top: 1px solid var(--lte-border-color, #dee2e6);
}
.editable-field-lte-modal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--lte-border-radius, 0.375rem);
border: none;
cursor: pointer;
transition: all var(--lte-transition-speed, 0.3s) ease;
}
.editable-field-lte-modal-btn-cancel {
background-color: #fff;
color: #495057;
border: 1px solid var(--lte-border-color, #dee2e6);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.editable-field-lte-modal-btn-cancel:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.editable-field-lte-modal-btn-save {
background-color: var(--lte-primary, #0d6efd);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.editable-field-lte-modal-btn-save:hover {
background-color: #0b5ed7;
}
/* Dark mode */
.dark .editable-field-lte-label {
color: #d1d5db;
}
.dark .editable-field-lte-display {
background-color: #1f2937;
border-color: #374151;
}
.dark .editable-field-lte-value {
color: #e5e7eb;
}
.dark .editable-field-lte-btn {
color: #6b7280;
}
.dark .editable-field-lte-modal {
background-color: #1f2937;
border-color: #374151;
}
.dark .editable-field-lte-modal-title {
color: #f3f4f6;
}
.dark .editable-field-lte-modal-close {
color: #9ca3af;
}
.dark .editable-field-lte-modal-close:hover {
background-color: #374151;
color: #f3f4f6;
}
.dark .editable-field-lte-input {
background-color: #111827;
border-color: #374151;
color: #f3f4f6;
}
.dark .editable-field-lte-input:focus {
border-color: var(--lte-primary, #0d6efd);
}
.dark .editable-field-lte-input::placeholder {
color: #6b7280;
}
.dark .editable-field-lte-modal-footer {
border-top-color: #374151;
}
.dark .editable-field-lte-modal-btn-cancel {
background-color: #374151;
color: #d1d5db;
border-color: #4b5563;
}
.dark .editable-field-lte-modal-btn-cancel:hover {
background-color: #4b5563;
}
</style>
@php
$entangleProperty = $attributes->wire('model')->value() ? ('isEditing' . ucfirst($label)) : 'editing';
@endphp
<div class="editable-field-lte" x-data="{ showEditModal: @entangle($entangleProperty) }">
<label class="editable-field-lte-label">{{ $label }}</label>
<div class="editable-field-lte-display">
<span class="editable-field-lte-value">{{ $value ?? 'Not set' }}</span>
<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>
@if($editClick)
<button
wire:click="{{ $editClick }}"
type="button"
class="editable-field-lte-btn"
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"
aria-label="Edit {{ $label }}"
>
<x-ri-edit-line />
<x-ri-edit-line class="w-4 h-4" />
</button>
@endif
</div>
@@ -302,7 +65,7 @@
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="editable-field-lte-backdrop"
class="fixed inset-0 z-[99998] bg-black/50 backdrop-blur-sm"
></div>
<!-- Edit Modal -->
@@ -316,47 +79,47 @@
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="editable-field-lte-modal-container"
class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
>
<div class="editable-field-lte-modal">
<div class="editable-field-lte-modal-header">
<h4 class="editable-field-lte-modal-title">Edit {{ $label }}</h4>
<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="flex items-center justify-between mb-5">
<h4 class="text-lg font-semibold text-primary dark:text-gray-100">Edit {{ $label }}</h4>
<button
type="button"
class="editable-field-lte-modal-close"
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"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
aria-label="Close"
>
<x-ri-close-line />
<x-ri-close-line class="w-5 h-5" />
</button>
</div>
<div class="editable-field-lte-modal-body">
<div class="editable-field-lte-input-group">
<label class="editable-field-lte-input-label">{{ $label }}</label>
<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>
<input
type="text"
{{ $attributes->whereStartsWith('wire:model') }}
class="editable-field-lte-input"
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"
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
/>
</div>
@if($error)
<div class="editable-field-lte-error">{{ $error }}</div>
<div class="text-sm text-error">{{ $error }}</div>
@endif
@if(isset($hint))
<div class="editable-field-lte-hint">{{ $hint }}</div>
<div class="text-xs text-secondary dark:text-gray-400">{{ $hint }}</div>
@endif
</div>
<div class="editable-field-lte-modal-footer">
<div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral dark:border-gray-700">
@if($cancelClick)
<button
type="button"
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
class="editable-field-lte-modal-btn editable-field-lte-modal-btn-cancel"
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"
>
Cancel
</button>
@@ -365,7 +128,7 @@
<button
type="button"
wire:click="{{ $saveClick }}"
class="editable-field-lte-modal-btn editable-field-lte-modal-btn-save"
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-all duration-200 cursor-pointer"
>
Save
</button>
@@ -374,7 +137,7 @@
<button
type="button"
wire:click="{{ $applyClick }}"
class="editable-field-lte-modal-btn editable-field-lte-modal-btn-save"
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-all duration-200 cursor-pointer"
>
{{ $applyLabel }}
</button>