TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-04 04:22:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

f

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-30 12:25:30 +02:00
parent f728d08e36
commit ff53c93ad6
1 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+32 -26
View File
@@ -1215,22 +1215,25 @@
</div> </div>
<!-- Icon Picker Modal --> <!-- Icon Picker Modal -->
<div id="iconPickerModal" class="fixed inset-0 z-50 hidden"> <div id="iconPickerModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
<div class="fixed inset-0 bg-black bg-opacity-50"></div> <div class="fixed inset-0 flex items-center justify-center p-4">
<div id="iconPickerContainer" class="fixed inset-0 flex items-center justify-center p-4"> <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
<div class="bg-white rounded-xl shadow-2xl overflow-hidden max-w-4xl w-full">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<div id="iconPickerHeader" class="bg-white border-b border-gray-200 px-6 py-4"> <div class="border-b border-gray-200">
<h3 class="text-xl font-semibold text-gray-900">Vyberte ikonu</h3> <div class="flex justify-between items-center p-6">
<button id="closeIconPicker" class="text-gray-400 hover:text-gray-500"> <h3 class="text-xl font-semibold text-gray-900">Vyberte ikonu</h3>
<i class="fas fa-times"></i> <button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-2">
</button> <i class="fas fa-times"></i>
</button>
</div>
</div> </div>
<div id="iconSearchContainer" class="px-6 py-4 border-b border-gray-200"> <div class="border-b border-gray-200">
<input type="text" id="iconSearch" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Hledat ikony..." autocomplete="off"> <div class="p-6">
<input type="text" id="iconSearch" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Hledat ikony..." autocomplete="off">
</div>
</div> </div>
<div id="iconListContainer" class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<div id="iconList" class="p-6"> <div id="iconList" class="p-6 grid grid-cols-6 gap-4">
<!-- Icons will be populated by JavaScript --> <!-- Icons will be populated by JavaScript -->
</div> </div>
</div> </div>
@@ -2450,13 +2453,11 @@ function initIconPicker() {
let isModalOpen = false; let isModalOpen = false;
// Improved modal toggle with cleanup // Improved modal toggle with cleanup
const toggleModal = () => { const toggleModal = () => {
isModalOpen = !isModalOpen; isModalOpen = !isModalOpen;
document.body.style.overflow = isModalOpen ? 'hidden' : ''; document.body.style.overflow = isModalOpen ? 'hidden' : '';
iconPickerModal.style.display = isModalOpen ? 'block' : 'none'; iconPickerModal.style.display = isModalOpen ? 'flex' : 'none';
if (isModalOpen) { if (isModalOpen) {
// Focus search input only after modal is visible // Focus search input only after modal is visible
@@ -2467,12 +2468,6 @@ function initIconPicker() {
iconSearch.focus(); iconSearch.focus();
} }
}); });
} else {
// Reset search when closing
if (iconSearch) {
iconSearch.value = '';
renderIcons('');
}
} }
}; };
@@ -2501,8 +2496,10 @@ function initIconPicker() {
const iconOption = e.target.closest('.icon-option'); const iconOption = e.target.closest('.icon-option');
if (iconOption && isModalOpen) { if (iconOption && isModalOpen) {
const iconClass = iconOption.getAttribute('data-icon'); const iconClass = iconOption.getAttribute('data-icon');
selectIcon(iconClass); if (iconClass) {
toggleModal(); // Close modal after selection selectIcon(iconClass);
toggleModal(); // Close modal after selection
}
} }
}); });
} }
@@ -2510,10 +2507,11 @@ function initIconPicker() {
// Handle search with improved debounce // Handle search with improved debounce
if (iconSearch) { if (iconSearch) {
let searchTimeout; let searchTimeout;
iconSearch.addEventListener('input', () => { iconSearch.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
if (searchTimeout) clearTimeout(searchTimeout); if (searchTimeout) clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => { searchTimeout = setTimeout(() => {
renderIcons(iconSearch.value.toLowerCase()); renderIcons(searchTerm);
}, 200); }, 200);
}); });
} }
@@ -2527,6 +2525,14 @@ function initIconPicker() {
toggleModal(); toggleModal();
} }
}); });
// Prevent scrolling when modal is open
document.addEventListener('scroll', (e) => {
if (isModalOpen) {
e.preventDefault();
e.stopPropagation();
}
});
} }
// Render icons based on search term // Render icons based on search term