diff --git a/admin-dashboard.html b/admin-dashboard.html index 3467a36..3d88443 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -206,16 +206,6 @@ z-index: 9999; padding: 2rem; overflow-y: auto; - opacity: 0; - transition: opacity 0.2s ease-in-out; - will-change: opacity; - pointer-events: none; - } - - #iconPickerModal.show { - display: block; - opacity: 1; - pointer-events: auto; } #iconPickerContainer { @@ -228,13 +218,6 @@ max-height: calc(100vh - 4rem); display: flex; flex-direction: column; - transform: translateY(20px); - transition: transform 0.2s ease-in-out; - will-change: transform; - } - - #iconPickerModal.show #iconPickerContainer { - transform: translateY(0); } #iconPickerHeader { @@ -2431,7 +2414,7 @@ const iconCategories = { 'Vzdělání': ['graduation-cap', 'university', 'school', 'chalkboard', 'chalkboard-teacher', 'book', 'book-open', 'book-reader', 'bookmark', 'brain', 'calculator', 'chalkboard', 'chalkboard-teacher', 'graduation-cap', 'school', 'university', 'user-graduate', 'user-tie'] }; -// Initialize icon picker with enhanced functionality +// Initialize icon picker with simplified modal function initIconPicker() { const iconInput = document.getElementById('appIcon'); const iconPickerModal = document.getElementById('iconPickerModal'); @@ -2441,90 +2424,74 @@ function initIconPicker() { if (!iconInput || !iconPickerModal) return; - // Track if modal is open to prevent multiple clicks let isModalOpen = false; - // Open modal when clicking the icon input - const openModal = (e) => { - if (e) e.preventDefault(); + // Simple show/hide functions + const showModal = () => { if (isModalOpen) return; - isModalOpen = true; + document.body.style.overflow = 'hidden'; iconPickerModal.style.display = 'block'; - setTimeout(() => { - iconPickerModal.classList.add('show'); - document.body.style.overflow = 'hidden'; - - // Focus search input after a short delay to ensure modal is visible - if (iconSearch) { - setTimeout(() => { - iconSearch.focus(); - }, 50); - } - }, 10); + if (iconSearch) { + setTimeout(() => iconSearch.focus(), 50); + } }; - // Close modal - const closeModal = () => { + const hideModal = () => { if (!isModalOpen) return; - - iconPickerModal.classList.remove('show'); - setTimeout(() => { - iconPickerModal.style.display = 'none'; - document.body.style.overflow = ''; - isModalOpen = false; - }, 200); // Match this with CSS transition + isModalOpen = false; + document.body.style.overflow = ''; + iconPickerModal.style.display = 'none'; }; // Toggle modal on icon input click iconInput.addEventListener('click', (e) => { e.preventDefault(); + e.stopPropagation(); if (isModalOpen) { - closeModal(); + hideModal(); } else { - openModal(); + showModal(); } }); - // Close modal when clicking the close button + // Close modal handlers if (closeButton) { - closeButton.addEventListener('click', closeModal); + closeButton.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + hideModal(); + }); } - // Close modal when clicking outside the modal content + // Close when clicking outside the modal content iconPickerModal.addEventListener('click', (e) => { if (e.target === iconPickerModal) { - closeModal(); + hideModal(); } }); - // Prevent clicks inside the modal from closing it + // Prevent clicks inside modal from closing it if (iconListContainer) { iconListContainer.addEventListener('click', (e) => { e.stopPropagation(); }); } - // Handle search functionality + // Handle search if (iconSearch) { iconSearch.addEventListener('input', function() { renderIcons(this.value.toLowerCase()); }); - - // Prevent click events on search input from propagating - iconSearch.addEventListener('click', (e) => { - e.stopPropagation(); - }); } - // Initial render of icons + // Initial render renderIcons(''); - // Close modal when pressing Escape key + // Close on Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isModalOpen) { - e.preventDefault(); - closeModal(); + hideModal(); } }); }