+
+
+
Vyberte ikonu
+
+
+
+
+
+
@@ -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();
}
});
}