From e13a1b8f069474187dee9f7eb15379706a0adb7f Mon Sep 17 00:00:00 2001 From: Reece Browne <74901996+reecebrowne@users.noreply.github.com> Date: Thu, 20 Mar 2025 20:56:02 +1300 Subject: [PATCH] Improve search UI and fix icon issues (#3192) # Description of Changes Please provide a summary of the changes, including: Searchbar was not compatible with new SVG icons and was monochrome. Brought in line with design language and fixed bugs ![image](https://github.com/user-attachments/assets/2e9be7b1-3f5f-430a-8063-8163ad05d30c) Closes #(issue_number) --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details. Co-authored-by: Reece Browne --- .../static/css/theme/componentes.css | 1 + src/main/resources/static/js/search.js | 59 ++++++++++--------- 2 files changed, 33 insertions(+), 27 deletions(-) diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css index 22e868912..2478068ed 100644 --- a/src/main/resources/static/css/theme/componentes.css +++ b/src/main/resources/static/css/theme/componentes.css @@ -877,6 +877,7 @@ textarea.form-control { margin: 0 1%; padding: 1.5rem 0; border-radius: 1rem; + min-width: 20rem; color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-surface-5); diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js index 85d69f846..58e3ae9c3 100644 --- a/src/main/resources/static/js/search.js +++ b/src/main/resources/static/js/search.js @@ -25,51 +25,56 @@ window.onload = function () { window.navItemMaxWidth = maxWidth; }; -// Show search results as user types in search box document.querySelector("#navbarSearchInput").addEventListener("input", function (e) { - var searchText = e.target.value.trim().toLowerCase(); // Trim whitespace and convert to lowercase - var items = document.querySelectorAll('a.dropdown-item[data-bs-tags]'); + var searchText = e.target.value.trim().toLowerCase(); + var items = document.querySelectorAll("a.dropdown-item[data-bs-tags]"); var resultsBox = document.querySelector("#searchResults"); - // Clear any previous results resultsBox.innerHTML = ""; + if (searchText !== "") { - items.forEach(function (item) { - var titleElement = item.querySelector(".icon-text"); - var iconElement = item.querySelector(".material-symbols-rounded, .icon"); - var itemHref = item.getAttribute("href"); - var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string + var addedResults = new Set(); + + items.forEach(function (item) { + var titleElement = item.querySelector(".icon-text"); + var iconElement = item.querySelector(".material-symbols-rounded, .icon"); + var itemHref = item.getAttribute("href"); + var tags = item.getAttribute("data-bs-tags") || ""; if (titleElement && iconElement && itemHref !== "#") { - var title = titleElement.innerText; + var title = titleElement.innerText.trim(); + if ( - (title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) && - !resultsBox.querySelector(`a[href="${itemHref}"]`) + (title.toLowerCase().includes(searchText) || tags.toLowerCase().includes(searchText)) && + !addedResults.has(itemHref) ) { - var result = document.createElement("a"); - result.href = itemHref; - result.classList.add("dropdown-item"); + var dropdownItem = document.createElement("div"); + dropdownItem.className = "dropdown-item d-flex justify-content-between align-items-center"; + + var contentWrapper = document.createElement("div"); + contentWrapper.className = "d-flex align-items-center flex-grow-1"; + contentWrapper.style.textDecoration = "none"; + contentWrapper.style.color = "inherit"; + + var originalContent = item.querySelector("div").cloneNode(true); + contentWrapper.appendChild(originalContent); + + contentWrapper.onclick = function () { + window.location.href = itemHref; + }; - var resultIcon = document.createElement("span"); - resultIcon.classList.add("material-symbols-rounded"); - resultIcon.textContent = iconElement.textContent; - result.appendChild(resultIcon); - - var resultText = document.createElement("span"); - resultText.textContent = title; - resultText.classList.add("icon-text"); - result.appendChild(resultText); - - resultsBox.appendChild(result); + dropdownItem.appendChild(contentWrapper); + resultsBox.appendChild(dropdownItem); + addedResults.add(itemHref); } } }); } - // Set the width of the search results box to the maximum width resultsBox.style.width = window.navItemMaxWidth + "px"; }); + const searchDropdown = document.getElementById('searchDropdown'); const searchInput = document.getElementById('navbarSearchInput'); const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');