mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-05 04:52:58 +00:00
tes
This commit is contained in:
+26
-23
@@ -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());
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user