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

192
extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
View File

@@ -1,5 +1,6 @@
{{--
Tabs Component - AdminLTE style
Tabs Component - LucentUI Theme
Migrated from AdminLTE to Tailwind
Usage:
<x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
@@ -19,172 +20,17 @@
$activeTab = $active ?? ($tabs[0] ?? null);
@endphp
<style>
.nav-tabs-lte {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
border-bottom: 1px solid var(--lte-border-color, #dee2e6);
}
.nav-tabs-lte .nav-item-lte {
margin-bottom: -1px;
}
.nav-link-lte {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--lte-secondary, #6c757d);
text-decoration: none;
background-color: transparent;
border: 1px solid transparent;
border-top-left-radius: var(--lte-border-radius, 0.375rem);
border-top-right-radius: var(--lte-border-radius, 0.375rem);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
cursor: pointer;
}
.nav-link-lte:hover {
color: var(--lte-primary, #0d6efd);
border-color: #e9ecef #e9ecef var(--lte-border-color, #dee2e6);
background-color: rgba(0, 0, 0, 0.02);
}
.nav-link-lte.active {
color: var(--lte-primary, #0d6efd);
background-color: #fff;
border-color: var(--lte-border-color, #dee2e6) var(--lte-border-color, #dee2e6) #fff;
}
.nav-pills-lte {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.25rem;
background-color: #f8f9fa;
border-radius: var(--lte-border-radius, 0.375rem);
border: 1px solid var(--lte-border-color, #dee2e6);
}
.nav-pills-lte .nav-link-pill {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--lte-secondary, #6c757d);
background-color: transparent;
border: none;
border-radius: calc(var(--lte-border-radius, 0.375rem) - 2px);
transition: all var(--lte-transition-speed, 0.3s) ease;
cursor: pointer;
}
.nav-pills-lte .nav-link-pill:hover {
color: #495057;
background-color: rgba(0, 0, 0, 0.04);
}
.nav-pills-lte .nav-link-pill.active {
color: #212529;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.nav-buttons-lte {
display: flex;
gap: 0.5rem;
}
.nav-buttons-lte .nav-btn-lte {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--lte-secondary, #6c757d);
background-color: #fff;
border: 1px solid var(--lte-border-color, #dee2e6);
border-radius: var(--lte-border-radius, 0.375rem);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all var(--lte-transition-speed, 0.3s) ease;
cursor: pointer;
}
.nav-buttons-lte .nav-btn-lte:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.nav-buttons-lte .nav-btn-lte.active {
color: #fff;
background-color: var(--lte-primary, #0d6efd);
border-color: var(--lte-primary, #0d6efd);
}
.tab-badge-lte {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
color: var(--lte-primary, #0d6efd);
background-color: rgba(13, 110, 253, 0.1);
border-radius: 9999px;
}
.tab-content-lte {
margin-top: 1.25rem;
}
/* Dark mode support */
.dark .nav-tabs-lte {
border-bottom-color: #374151;
}
.dark .nav-link-lte {
color: #9ca3af;
}
.dark .nav-link-lte:hover {
color: var(--lte-primary, #0d6efd);
border-color: #374151 #374151 #374151;
background-color: rgba(255, 255, 255, 0.02);
}
.dark .nav-link-lte.active {
color: var(--lte-primary, #0d6efd);
background-color: #1f2937;
border-color: #374151 #374151 #1f2937;
}
.dark .nav-pills-lte {
background-color: #1f2937;
border-color: #374151;
}
.dark .nav-pills-lte .nav-link-pill {
color: #9ca3af;
}
.dark .nav-pills-lte .nav-link-pill:hover {
color: #e5e7eb;
background-color: rgba(255, 255, 255, 0.04);
}
.dark .nav-pills-lte .nav-link-pill.active {
color: #f3f4f6;
background-color: #374151;
}
.dark .nav-buttons-lte .nav-btn-lte {
color: #9ca3af;
background-color: #1f2937;
border-color: #374151;
}
.dark .nav-buttons-lte .nav-btn-lte:hover {
background-color: #374151;
}
</style>
<div
x-data="{ activeTab: '{{ $activeTab }}' }"
{{ $attributes }}
>
{{-- Tab Navigation --}}
@if($variant === 'pills')
<div class="nav-pills-lte">
<div class="flex flex-wrap gap-1 p-1 bg-background-secondary dark:bg-gray-800 rounded-lg border border-neutral dark:border-gray-700">
@elseif($variant === 'buttons')
<div class="nav-buttons-lte">
<div class="flex gap-2">
@else
<ul class="nav-tabs-lte">
<ul class="flex flex-wrap list-none border-b border-neutral dark:border-gray-700">
@endif
@foreach($tabs as $tab)
@php
@@ -197,46 +43,52 @@
<button
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}' ? 'active' : ''"
class="nav-link-pill"
:class="activeTab === '{{ $tabName }}'
? 'text-primary bg-background dark:bg-gray-700 shadow-sm'
: 'text-secondary dark:text-gray-400 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer"
>
@if($tabIcon)
<x-dynamic-component :component="$tabIcon" class="size-4" />
@endif
<span>{{ $tabLabel }}</span>
@if($tabBadge)
<span class="tab-badge-lte">{{ $tabBadge }}</span>
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
@endif
</button>
@elseif($variant === 'buttons')
<button
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}' ? 'active' : ''"
class="nav-btn-lte"
:class="activeTab === '{{ $tabName }}'
? 'text-white bg-primary border-primary'
: 'text-secondary dark:text-gray-400 bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-gray-400'"
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border rounded-lg shadow-sm transition-all duration-200 cursor-pointer"
>
@if($tabIcon)
<x-dynamic-component :component="$tabIcon" class="size-4" />
@endif
<span>{{ $tabLabel }}</span>
@if($tabBadge)
<span class="tab-badge-lte">{{ $tabBadge }}</span>
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
@endif
</button>
@else
<li class="nav-item-lte">
<li class="-mb-px">
<button
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}' ? 'active' : ''"
class="nav-link-lte"
:class="activeTab === '{{ $tabName }}'
? 'text-primary bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 border-b-background dark:border-b-gray-800'
: 'text-secondary dark:text-gray-400 border-transparent hover:text-primary hover:border-gray-200 dark:hover:border-gray-600 hover:bg-black/5 dark:hover:bg-white/5'"
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border border-b-0 rounded-t-lg transition-all duration-150 cursor-pointer"
>
@if($tabIcon)
<x-dynamic-component :component="$tabIcon" class="size-4" />
@endif
<span>{{ $tabLabel }}</span>
@if($tabBadge)
<span class="tab-badge-lte">{{ $tabBadge }}</span>
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
@endif
</button>
</li>
@@ -249,7 +101,7 @@
@endif
{{-- Tab Panels --}}
<div class="tab-content-lte">
<div class="mt-5">
{{ $slot }}
</div>
</div>