This commit is contained in:
Tomas Dvorak
2025-05-30 12:12:37 +02:00
parent 1520c99c63
commit 363e8bc5bc
+26 -23
View File
@@ -2218,25 +2218,28 @@ function selectIcon(iconClass) {
.map(word => word.charAt(0).toUpperCase() + word.slice(1)) .map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' '); .join(' ');
// Highlight the selected icon in the modal // Highlight the selected icon
const selectedOption = document.querySelector(`.icon-option[data-icon="${iconClass}"]`);
if (selectedOption) {
// Remove active class from all icons
document.querySelectorAll('.icon-option').forEach(option => { document.querySelectorAll('.icon-option').forEach(option => {
option.classList.toggle('active', option.getAttribute('data-icon') === iconClass); option.classList.remove('active');
}); });
// Add active class to selected icon
// Close the modal after a short delay selectedOption.classList.add('active');
setTimeout(() => {
if (iconPickerModal) {
iconPickerModal.classList.remove('show');
document.body.style.overflow = '';
} }
}, 200);
// Close the modal
isModalOpen = false;
document.body.style.overflow = '';
iconPickerModal.style.display = 'none';
// Update the preview // Update the preview
if (iconPreview) { if (iconPreview) {
iconPreview.className = 'w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3'; iconPreview.className = 'w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3';
} }
} }
} } }
// Reset icon selection // Reset icon selection
const appIcon = document.getElementById('appIcon'); const appIcon = document.getElementById('appIcon');
@@ -2435,7 +2438,7 @@ function initIconPicker() {
const iconPickerModal = document.getElementById('iconPickerModal'); const iconPickerModal = document.getElementById('iconPickerModal');
const closeButton = document.getElementById('closeIconPicker'); const closeButton = document.getElementById('closeIconPicker');
const iconSearch = document.getElementById('iconSearch'); const iconSearch = document.getElementById('iconSearch');
const iconListContainer = document.getElementById('iconListContainer'); const iconList = document.getElementById('iconList');
if (!iconInput || !iconPickerModal) return; if (!iconInput || !iconPickerModal) return;
@@ -2461,9 +2464,7 @@ function initIconPicker() {
// Close modal handlers // Close modal handlers
if (closeButton) { if (closeButton) {
closeButton.addEventListener('click', (e) => { closeButton.addEventListener('click', () => {
e.preventDefault();
e.stopPropagation();
isModalOpen = false; isModalOpen = false;
document.body.style.overflow = ''; document.body.style.overflow = '';
iconPickerModal.style.display = 'none'; iconPickerModal.style.display = 'none';
@@ -2472,26 +2473,28 @@ function initIconPicker() {
// Close when clicking outside the modal content // Close when clicking outside the modal content
iconPickerModal.addEventListener('click', (e) => { iconPickerModal.addEventListener('click', (e) => {
// Check if click was on the overlay (not the content) if (e.target === iconPickerModal) {
const target = e.target.closest('#iconPickerContainer');
if (!target) {
isModalOpen = false; isModalOpen = false;
document.body.style.overflow = ''; document.body.style.overflow = '';
iconPickerModal.style.display = 'none'; iconPickerModal.style.display = 'none';
} }
}); });
// Prevent clicks inside modal from closing it // Handle icon selection
if (iconListContainer) { if (iconList) {
iconListContainer.addEventListener('click', (e) => { iconList.addEventListener('click', (e) => {
e.stopPropagation(); const iconOption = e.target.closest('.icon-option');
if (iconOption) {
const iconClass = iconOption.getAttribute('data-icon');
selectIcon(iconClass);
}
}); });
} }
// Handle search // Handle search
if (iconSearch) { if (iconSearch) {
iconSearch.addEventListener('input', function() { iconSearch.addEventListener('input', () => {
renderIcons(this.value.toLowerCase()); renderIcons(iconSearch.value.toLowerCase());
}); });
} }