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

test

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-30 12:30:01 +02:00
parent 94823726cb
commit b76710b79e
1 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+64 -53
View File
@@ -1214,29 +1214,21 @@
</div> </div>
</div> </div>
<!-- Icon Picker Modal --> <!-- Icon Picker Dropdown -->
<div id="iconPickerModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden"> <div id="iconPickerDropdown" class="hidden absolute z-50 bg-white rounded-lg shadow-lg border border-gray-200 w-full max-w-[400px]">
<div class="fixed inset-0 flex items-center justify-center p-4"> <div class="p-4">
<div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden"> <div class="flex justify-between items-center mb-4">
<div class="flex flex-col h-full"> <h3 class="text-sm font-medium text-gray-700">Vyberte ikonu</h3>
<div class="border-b border-gray-200"> <button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-1">
<div class="flex justify-between items-center p-6"> <i class="fas fa-times"></i>
<h3 class="text-xl font-semibold text-gray-900">Vyberte ikonu</h3> </button>
<button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-2"> </div>
<i class="fas fa-times"></i> <div class="mb-4">
</button> <input type="text" id="iconSearch" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Hledat ikony..." autocomplete="off">
</div> </div>
</div> <div class="max-h-[400px] overflow-y-auto">
<div class="border-b border-gray-200"> <div id="iconList" class="grid grid-cols-4 gap-3">
<div class="p-6"> <!-- Icons will be populated by JavaScript -->
<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 class="flex-1 overflow-y-auto">
<div id="iconList" class="p-6 grid grid-cols-6 gap-4">
<!-- Icons will be populated by JavaScript -->
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -2444,23 +2436,30 @@ const iconCategories = {
// Initialize icon picker with simplified modal // Initialize icon picker with simplified modal
function initIconPicker() { function initIconPicker() {
const iconInput = document.getElementById('appIcon'); const iconInput = document.getElementById('appIcon');
const iconPickerModal = document.getElementById('iconPickerModal'); const iconDropdown = document.getElementById('iconPickerDropdown');
const closeButton = document.getElementById('closeIconPicker'); const closeButton = document.getElementById('closeIconPicker');
const iconSearch = document.getElementById('iconSearch'); const iconSearch = document.getElementById('iconSearch');
const iconList = document.getElementById('iconList'); const iconList = document.getElementById('iconList');
if (!iconInput || !iconPickerModal) return; if (!iconInput || !iconDropdown) return;
let isModalOpen = false; let isDropdownOpen = false;
// Improved modal toggle with cleanup // Position dropdown relative to input
const toggleModal = () => { function positionDropdown() {
isModalOpen = !isModalOpen; const rect = iconInput.getBoundingClientRect();
document.body.style.overflow = isModalOpen ? 'hidden' : ''; iconDropdown.style.top = `${rect.bottom + window.scrollY}px`;
iconPickerModal.style.display = isModalOpen ? 'flex' : 'none'; iconDropdown.style.left = `${rect.left + window.scrollX}px`;
iconDropdown.style.width = `${rect.width}px`;
}
// Toggle dropdown
function toggleDropdown() {
isDropdownOpen = !isDropdownOpen;
iconDropdown.classList.toggle('hidden', !isDropdownOpen);
if (isModalOpen) { if (isDropdownOpen) {
// Focus search input only after modal is visible positionDropdown();
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (iconSearch) { if (iconSearch) {
iconSearch.value = ''; iconSearch.value = '';
@@ -2469,36 +2468,42 @@ function initIconPicker() {
} }
}); });
} }
}; }
// Toggle modal on icon input click // Handle click outside
function handleClickOutside(e) {
if (isDropdownOpen && !iconDropdown.contains(e.target) && e.target !== iconInput) {
toggleDropdown();
}
}
// Handle icon input click
iconInput.addEventListener('click', (e) => { iconInput.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggleModal(); toggleDropdown();
}); });
// Close modal handlers // Close dropdown handlers
if (closeButton) { if (closeButton) {
closeButton.addEventListener('click', toggleModal); closeButton.addEventListener('click', (e) => {
e.stopPropagation();
toggleDropdown();
});
} }
// Close when clicking outside the modal content // Close when clicking outside
iconPickerModal.addEventListener('click', (e) => { document.addEventListener('click', handleClickOutside);
if (e.target === iconPickerModal && isModalOpen) {
toggleModal();
}
});
// Handle icon selection // Handle icon selection
if (iconList) { if (iconList) {
iconList.addEventListener('click', (e) => { iconList.addEventListener('click', (e) => {
const iconOption = e.target.closest('.icon-option'); const iconOption = e.target.closest('.icon-option');
if (iconOption && isModalOpen) { if (iconOption && isDropdownOpen) {
const iconClass = iconOption.getAttribute('data-icon'); const iconClass = iconOption.getAttribute('data-icon');
if (iconClass) { if (iconClass) {
selectIcon(iconClass); selectIcon(iconClass);
toggleModal(); // Close modal after selection toggleDropdown(); // Close dropdown after selection
} }
} }
}); });
@@ -2521,16 +2526,22 @@ function initIconPicker() {
// Close on Escape // Close on Escape
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isModalOpen) { if (e.key === 'Escape' && isDropdownOpen) {
toggleModal(); toggleDropdown();
} }
}); });
// Prevent scrolling when modal is open // Update position on scroll
document.addEventListener('scroll', (e) => { window.addEventListener('scroll', () => {
if (isModalOpen) { if (isDropdownOpen) {
e.preventDefault(); positionDropdown();
e.stopPropagation(); }
});
// Update position on window resize
window.addEventListener('resize', () => {
if (isDropdownOpen) {
positionDropdown();
} }
}); });
} }