From ea3eb697847dcbd3f22c8d4752ff05bf4d948ebd Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Fri, 30 May 2025 11:44:20 +0200 Subject: [PATCH] icon fix hopefully --- admin-dashboard.html | 81 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) diff --git a/admin-dashboard.html b/admin-dashboard.html index 16d326c..67d7c02 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -194,6 +194,66 @@ border-color: var(--secondary-color); transform: translateY(-2px); } + /* Icon Picker Styles */ + #iconDropdown { + position: absolute; + width: 100%; + background: white; + border: 1px solid #e5e7eb; + border-radius: 0.375rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + z-index: 50; + margin-top: 0.25rem; + } + + #iconSearch { + width: 100%; + padding: 0.5rem; + border: 1px solid #e5e7eb; + border-radius: 0.25rem; + font-size: 0.875rem; + margin-bottom: 0.5rem; + } + + #iconSearch:focus { + outline: none; + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); + } + + #iconList { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 0.5rem; + padding: 0.5rem; + max-height: 300px; + overflow-y: auto; + } + + .icon-option { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border: 1px solid #e5e7eb; + border-radius: 0.25rem; + font-size: 1.25rem; + color: #4b5563; + cursor: pointer; + transition: all 0.2s; + } + + .icon-option:hover { + background-color: #f3f4f6; + border-color: #d1d5db; + color: #1f2937; + transform: scale(1.1); + } + + .icon-option i { + pointer-events: none; + } + .banner-preview { margin: 2rem 0; padding: 0; @@ -2048,6 +2108,23 @@ document.addEventListener('DOMContentLoaded', function() { }); // Reset form when modal is closed +// Initialize icon picker when the modal is shown +document.getElementById('appModal').addEventListener('show.bs.modal', function () { + initIconPicker(); + + // Set focus to search input when dropdown is shown + const iconInput = document.getElementById('appIcon'); + if (iconInput) { + iconInput.addEventListener('focus', function() { + const dropdown = document.getElementById('iconDropdown'); + if (dropdown) dropdown.classList.remove('hidden'); + const search = document.getElementById('iconSearch'); + if (search) search.focus(); + }); + } +}); + +// Handle modal hidden event document.getElementById('appModal').addEventListener('hidden.bs.modal', function () { const form = document.getElementById('appForm'); if (form) form.reset(); @@ -2062,6 +2139,10 @@ document.getElementById('appModal').addEventListener('hidden.bs.modal', function if (fileInput) { fileInput.value = ''; } + + // Hide dropdown if it's still visible + const dropdown = document.getElementById('iconDropdown'); + if (dropdown) dropdown.classList.add('hidden'); }); // Icon picker functionality