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

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>
<!-- Icon Picker Modal -->
<div id="iconPickerModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
<div 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="flex flex-col h-full">
<div class="border-b border-gray-200">
<div class="flex justify-between items-center p-6">
<h3 class="text-xl font-semibold text-gray-900">Vyberte ikonu</h3>
<button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-2">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="border-b border-gray-200">
<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 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>
<!-- Icon Picker Dropdown -->
<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="p-4">
<div class="flex justify-between items-center mb-4">
<h3 class="text-sm font-medium text-gray-700">Vyberte ikonu</h3>
<button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-1">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<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 class="max-h-[400px] overflow-y-auto">
<div id="iconList" class="grid grid-cols-4 gap-3">
<!-- Icons will be populated by JavaScript -->
</div>
</div>
</div>
@@ -2444,23 +2436,30 @@ const iconCategories = {
// Initialize icon picker with simplified modal
function initIconPicker() {
const iconInput = document.getElementById('appIcon');
const iconPickerModal = document.getElementById('iconPickerModal');
const iconDropdown = document.getElementById('iconPickerDropdown');
const closeButton = document.getElementById('closeIconPicker');
const iconSearch = document.getElementById('iconSearch');
const iconList = document.getElementById('iconList');
if (!iconInput || !iconPickerModal) return;
if (!iconInput || !iconDropdown) return;
let isModalOpen = false;
let isDropdownOpen = false;
// Improved modal toggle with cleanup
const toggleModal = () => {
isModalOpen = !isModalOpen;
document.body.style.overflow = isModalOpen ? 'hidden' : '';
iconPickerModal.style.display = isModalOpen ? 'flex' : 'none';
// Position dropdown relative to input
function positionDropdown() {
const rect = iconInput.getBoundingClientRect();
iconDropdown.style.top = `${rect.bottom + window.scrollY}px`;
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) {
// Focus search input only after modal is visible
if (isDropdownOpen) {
positionDropdown();
requestAnimationFrame(() => {
if (iconSearch) {
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) => {
e.preventDefault();
e.stopPropagation();
toggleModal();
toggleDropdown();
});
// Close modal handlers
// Close dropdown handlers
if (closeButton) {
closeButton.addEventListener('click', toggleModal);
closeButton.addEventListener('click', (e) => {
e.stopPropagation();
toggleDropdown();
});
}
// Close when clicking outside the modal content
iconPickerModal.addEventListener('click', (e) => {
if (e.target === iconPickerModal && isModalOpen) {
toggleModal();
}
});
// Close when clicking outside
document.addEventListener('click', handleClickOutside);
// Handle icon selection
if (iconList) {
iconList.addEventListener('click', (e) => {
const iconOption = e.target.closest('.icon-option');
if (iconOption && isModalOpen) {
if (iconOption && isDropdownOpen) {
const iconClass = iconOption.getAttribute('data-icon');
if (iconClass) {
selectIcon(iconClass);
toggleModal(); // Close modal after selection
toggleDropdown(); // Close dropdown after selection
}
}
});
@@ -2521,16 +2526,22 @@ function initIconPicker() {
// Close on Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isModalOpen) {
toggleModal();
if (e.key === 'Escape' && isDropdownOpen) {
toggleDropdown();
}
});
// Prevent scrolling when modal is open
document.addEventListener('scroll', (e) => {
if (isModalOpen) {
e.preventDefault();
e.stopPropagation();
// Update position on scroll
window.addEventListener('scroll', () => {
if (isDropdownOpen) {
positionDropdown();
}
});
// Update position on window resize
window.addEventListener('resize', () => {
if (isDropdownOpen) {
positionDropdown();
}
});
}