Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS
- 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:
@@ -1,5 +1,6 @@
|
||||
{{--
|
||||
Icon Picker Component - AdminLTE style
|
||||
Icon Picker Component - LucentUI Theme
|
||||
Migrated from AdminLTE to Tailwind
|
||||
Modal-based icon picker with search and categories
|
||||
|
||||
Usage:
|
||||
@@ -40,18 +41,15 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="open = true"
|
||||
class="flex items-center gap-2"
|
||||
style="padding: .5rem .75rem; border-radius: .375rem; border: 1px solid #ced4da; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s ease, border-color .2s ease;"
|
||||
onmouseover="this.style.background='#f8f9fa'; this.style.borderColor='#adb5bd'"
|
||||
onmouseout="this.style.background='#fff'; this.style.borderColor='#ced4da'"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-background dark:bg-gray-800 border border-neutral dark:border-gray-600 rounded-lg shadow-sm hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-secondary/40 transition-all duration-200"
|
||||
>
|
||||
<template x-if="selected">
|
||||
<x-dynamic-component x-bind:component="selected" class="size-5" style="color: #0d6efd;" />
|
||||
<x-dynamic-component x-bind:component="selected" class="size-5 text-primary" />
|
||||
</template>
|
||||
<template x-if="!selected">
|
||||
<x-ri-image-add-line class="size-5" style="color: #6c757d;" />
|
||||
<x-ri-image-add-line class="size-5 text-secondary dark:text-gray-400" />
|
||||
</template>
|
||||
<span style="font-size: .875rem; color: #495057;">Select Icon</span>
|
||||
<span class="text-sm text-secondary dark:text-gray-300">Select Icon</span>
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
@@ -59,8 +57,7 @@
|
||||
x-show="open"
|
||||
x-cloak
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 overflow-y-auto"
|
||||
style="z-index: 1050;"
|
||||
class="fixed inset-0 z-[1050] overflow-y-auto"
|
||||
>
|
||||
<div class="flex items-center justify-center min-h-screen p-4">
|
||||
<!-- Backdrop -->
|
||||
@@ -73,8 +70,7 @@
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
class="fixed inset-0"
|
||||
style="background: rgba(0, 0, 0, 0.5);"
|
||||
class="fixed inset-0 bg-black/50 backdrop-blur-sm"
|
||||
></div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
@@ -86,48 +82,47 @@
|
||||
x-transition:leave="ease-in duration-100"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="modal-lte relative w-full max-w-2xl"
|
||||
style="background: #fff; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); max-height: 80vh; overflow: hidden;"
|
||||
class="relative w-full max-w-2xl bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg shadow-xl max-h-[80vh] overflow-hidden"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;">
|
||||
<h3 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Select Icon</h3>
|
||||
<button @click="open = false" style="padding: .375rem; border-radius: .25rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: background .2s ease, color .2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.color='#495057'" onmouseout="this.style.background='transparent'; this.style.color='#6c757d'">
|
||||
<div class="p-4 border-b border-neutral dark:border-gray-700">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-lg font-semibold text-primary dark:text-gray-100">Select Icon</h3>
|
||||
<button
|
||||
@click="open = false"
|
||||
class="p-1.5 rounded-md text-secondary dark:text-gray-400 bg-transparent border-none hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200 cursor-pointer"
|
||||
>
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4" style="color: #6c757d;" />
|
||||
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-secondary dark:text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
x-model="search"
|
||||
placeholder="Search icons..."
|
||||
class="form-control-lte w-full"
|
||||
style="padding-left: 2.5rem; padding: .625rem .75rem .625rem 2.5rem; border: 1px solid #ced4da; border-radius: .375rem; font-size: .875rem; color: #212529; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;"
|
||||
onfocus="this.style.borderColor='#86b7fe'; this.style.boxShadow='0 0 0 .25rem rgba(13, 110, 253, .25)'"
|
||||
onblur="this.style.borderColor='#ced4da'; this.style.boxShadow='none'"
|
||||
class="w-full pl-10 pr-3 py-2.5 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg placeholder:text-secondary/50 dark:placeholder:text-gray-500 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 transition-all duration-150"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
@if(count($categories) > 0)
|
||||
<div style="display: flex; gap: .5rem; padding: 1rem; border-bottom: 1px solid #dee2e6; overflow-x: auto;">
|
||||
<div class="flex gap-2 p-4 border-b border-neutral dark:border-gray-700 overflow-x-auto">
|
||||
<button
|
||||
@click="activeCategory = 'all'"
|
||||
:style="activeCategory === 'all' ? 'background: #0d6efd; color: #fff;' : 'background: #e9ecef; color: #495057;'"
|
||||
style="padding: .375rem .75rem; border-radius: 1rem; font-size: .75rem; font-weight: 500; border: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;"
|
||||
:class="activeCategory === 'all' ? 'bg-primary text-white' : 'bg-background-secondary dark:bg-gray-700 text-secondary dark:text-gray-300'"
|
||||
class="px-3 py-1.5 rounded-full text-xs font-medium border-none cursor-pointer whitespace-nowrap transition-all duration-200"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
@foreach($categories as $category)
|
||||
<button
|
||||
@click="activeCategory = '{{ $category['id'] }}'"
|
||||
:style="activeCategory === '{{ $category['id'] }}' ? 'background: #0d6efd; color: #fff;' : 'background: #e9ecef; color: #495057;'"
|
||||
style="padding: .375rem .75rem; border-radius: 1rem; font-size: .75rem; font-weight: 500; border: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;"
|
||||
:class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-white' : 'bg-background-secondary dark:bg-gray-700 text-secondary dark:text-gray-300'"
|
||||
class="px-3 py-1.5 rounded-full text-xs font-medium border-none cursor-pointer whitespace-nowrap transition-all duration-200"
|
||||
>
|
||||
{{ $category['name'] }}
|
||||
</button>
|
||||
@@ -136,15 +131,13 @@
|
||||
@endif
|
||||
|
||||
<!-- Icons Grid -->
|
||||
<div style="padding: 1rem; overflow-y: auto; max-height: 20rem;">
|
||||
<div class="p-4 overflow-y-auto max-h-80">
|
||||
<div class="grid grid-cols-8 gap-2">
|
||||
<template x-for="icon in filteredIcons" :key="icon.name">
|
||||
<button
|
||||
@click="selected = icon.component; open = false;"
|
||||
:style="selected === icon.component ? 'box-shadow: 0 0 0 2px #0d6efd; background: rgba(13, 110, 253, 0.1);' : ''"
|
||||
style="display: flex; align-items: center; justify-content: center; padding: .75rem; border-radius: .375rem; border: none; background: transparent; cursor: pointer; transition: background .15s ease;"
|
||||
onmouseover="if(!this.style.boxShadow.includes('#0d6efd')) this.style.background='#f8f9fa'"
|
||||
onmouseout="if(!this.style.boxShadow.includes('#0d6efd')) this.style.background='transparent'"
|
||||
:class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-background-secondary dark:hover:bg-gray-700'"
|
||||
class="flex items-center justify-center p-3 rounded-lg border-none bg-transparent cursor-pointer transition-all duration-150"
|
||||
:title="icon.name"
|
||||
>
|
||||
<x-dynamic-component x-bind:component="icon.component" class="size-6" />
|
||||
@@ -153,28 +146,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="filteredIcons.length === 0" style="padding: 2rem; text-align: center;">
|
||||
<x-ri-search-line style="width: 3rem; height: 3rem; margin: 0 auto .75rem; color: #ced4da;" />
|
||||
<p style="font-size: .875rem; color: #6c757d; margin: 0;">No icons found matching your search.</p>
|
||||
<div x-show="filteredIcons.length === 0" class="py-8 text-center">
|
||||
<x-ri-search-line class="w-12 h-12 mx-auto mb-3 text-neutral" />
|
||||
<p class="text-sm text-secondary dark:text-gray-400">No icons found matching your search.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="padding: 1rem; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: space-between;">
|
||||
<div class="p-4 border-t border-neutral dark:border-gray-700 flex items-center justify-between">
|
||||
<button
|
||||
@click="selected = null"
|
||||
style="padding: .375rem .75rem; font-size: .875rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: color .2s ease;"
|
||||
onmouseover="this.style.color='#495057'"
|
||||
onmouseout="this.style.color='#6c757d'"
|
||||
class="px-3 py-1.5 text-sm text-secondary dark:text-gray-400 bg-transparent border-none cursor-pointer hover:text-primary dark:hover:text-gray-200 transition-colors duration-200"
|
||||
>
|
||||
Clear Selection
|
||||
</button>
|
||||
<button
|
||||
@click="open = false"
|
||||
class="btn-lte-primary"
|
||||
style="padding: .625rem 1rem; background: #0d6efd; color: #fff; border: none; border-radius: .375rem; font-size: .875rem; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s ease;"
|
||||
onmouseover="this.style.background='#0b5ed7'"
|
||||
onmouseout="this.style.background='#0d6efd'"
|
||||
class="px-4 py-2.5 bg-primary text-white border-none rounded-lg text-sm font-medium cursor-pointer shadow-sm hover:bg-primary-hover transition-all duration-200"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user