This commit is contained in:
Tomas Dvorak
2025-05-30 12:07:36 +02:00
parent a5bf77fb17
commit a7ee077115
+27 -60
View File
@@ -206,16 +206,6 @@
z-index: 9999; z-index: 9999;
padding: 2rem; padding: 2rem;
overflow-y: auto; 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 { #iconPickerContainer {
@@ -228,13 +218,6 @@
max-height: calc(100vh - 4rem); max-height: calc(100vh - 4rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: translateY(20px);
transition: transform 0.2s ease-in-out;
will-change: transform;
}
#iconPickerModal.show #iconPickerContainer {
transform: translateY(0);
} }
#iconPickerHeader { #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'] '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() { function initIconPicker() {
const iconInput = document.getElementById('appIcon'); const iconInput = document.getElementById('appIcon');
const iconPickerModal = document.getElementById('iconPickerModal'); const iconPickerModal = document.getElementById('iconPickerModal');
@@ -2441,90 +2424,74 @@ function initIconPicker() {
if (!iconInput || !iconPickerModal) return; if (!iconInput || !iconPickerModal) return;
// Track if modal is open to prevent multiple clicks
let isModalOpen = false; let isModalOpen = false;
// Open modal when clicking the icon input // Simple show/hide functions
const openModal = (e) => { const showModal = () => {
if (e) e.preventDefault();
if (isModalOpen) return; if (isModalOpen) return;
isModalOpen = true; isModalOpen = true;
document.body.style.overflow = 'hidden';
iconPickerModal.style.display = 'block'; iconPickerModal.style.display = 'block';
setTimeout(() => { if (iconSearch) {
iconPickerModal.classList.add('show'); setTimeout(() => iconSearch.focus(), 50);
document.body.style.overflow = 'hidden'; }
// Focus search input after a short delay to ensure modal is visible
if (iconSearch) {
setTimeout(() => {
iconSearch.focus();
}, 50);
}
}, 10);
}; };
// Close modal const hideModal = () => {
const closeModal = () => {
if (!isModalOpen) return; if (!isModalOpen) return;
isModalOpen = false;
iconPickerModal.classList.remove('show'); document.body.style.overflow = '';
setTimeout(() => { iconPickerModal.style.display = 'none';
iconPickerModal.style.display = 'none';
document.body.style.overflow = '';
isModalOpen = false;
}, 200); // Match this with CSS transition
}; };
// Toggle modal on icon input click // Toggle modal on icon input click
iconInput.addEventListener('click', (e) => { iconInput.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
if (isModalOpen) { if (isModalOpen) {
closeModal(); hideModal();
} else { } else {
openModal(); showModal();
} }
}); });
// Close modal when clicking the close button // Close modal handlers
if (closeButton) { 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) => { iconPickerModal.addEventListener('click', (e) => {
if (e.target === iconPickerModal) { if (e.target === iconPickerModal) {
closeModal(); hideModal();
} }
}); });
// Prevent clicks inside the modal from closing it // Prevent clicks inside modal from closing it
if (iconListContainer) { if (iconListContainer) {
iconListContainer.addEventListener('click', (e) => { iconListContainer.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
}); });
} }
// Handle search functionality // Handle search
if (iconSearch) { if (iconSearch) {
iconSearch.addEventListener('input', function() { iconSearch.addEventListener('input', function() {
renderIcons(this.value.toLowerCase()); 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(''); renderIcons('');
// Close modal when pressing Escape key // Close on Escape
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isModalOpen) { if (e.key === 'Escape' && isModalOpen) {
e.preventDefault(); hideModal();
closeModal();
} }
}); });
} }